<template>
  <div class="min-h-screen bg-base-200">
    <div class="container mx-auto px-4 py-8 max-w-5xl">
      <!-- Back button -->
      <NuxtLink :to="backUrl" class="btn btn-ghost btn-sm mb-4">
        <Icon name="lucide:arrow-left" size="16" />
        {{ $t('common.back') }}
      </NuxtLink>

      <!-- Mock KYC Profile (demo mode) -->
      <div v-if="isDemo" class="flex flex-col gap-6">
        <!-- Header Card -->
        <Card padding="lg">
          <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
            <div>
              <div class="flex items-center gap-3">
                <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center">
                  <Icon name="lucide:building-2" size="32" class="text-primary" />
                </div>
                <div>
                  <Text weight="bold" size="xl">ООО "АГРОТОРГ ПЛЮС"</Text>
                  <div class="flex items-center gap-2 mt-1">
                    <span class="badge badge-success">Действующая</span>
                    <span class="badge badge-outline badge-sm">ООО</span>
                    <span class="text-sm text-base-content/60">с 2015 года</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex flex-col items-end gap-2">
              <div class="flex items-center gap-2">
                <Icon name="lucide:shield-check" size="20" class="text-success" />
                <span class="text-sm font-medium text-success">Верифицирован</span>
              </div>
              <span class="text-xs text-base-content/50">Обновлено: {{ new Date().toLocaleDateString('ru-RU') }}</span>
            </div>
          </div>
        </Card>

        <!-- Main Info -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- Left Column -->
          <div class="flex flex-col gap-6">
            <!-- Реквизиты -->
            <Card padding="md">
              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
                <Icon name="lucide:file-text" size="20" />
                Реквизиты
              </Text>
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <Text tone="muted" size="sm">ИНН</Text>
                  <Text weight="medium" class="font-mono">7707456789</Text>
                </div>
                <div>
                  <Text tone="muted" size="sm">КПП</Text>
                  <Text weight="medium" class="font-mono">770701001</Text>
                </div>
                <div>
                  <Text tone="muted" size="sm">ОГРН</Text>
                  <Text weight="medium" class="font-mono">1157746123456</Text>
                </div>
                <div>
                  <Text tone="muted" size="sm">ОКПО</Text>
                  <Text weight="medium" class="font-mono">12345678</Text>
                </div>
                <div class="col-span-2">
                  <Text tone="muted" size="sm">Дата регистрации</Text>
                  <Text weight="medium">15 марта 2015 г.</Text>
                </div>
              </div>
            </Card>

            <!-- Руководство -->
            <Card padding="md">
              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
                <Icon name="lucide:user-cog" size="20" />
                Руководство
              </Text>
              <div class="space-y-3">
                <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
                  <div class="avatar placeholder">
                    <div class="w-10 h-10 rounded-full bg-primary text-primary-content">
                      <span>ПС</span>
                    </div>
                  </div>
                  <div>
                    <Text weight="medium">Петров Сергей Александрович</Text>
                    <Text tone="muted" size="sm">Генеральный директор</Text>
                  </div>
                </div>
              </div>
            </Card>

            <!-- Учредители -->
            <Card padding="md">
              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
                <Icon name="lucide:users" size="20" />
                Учредители
              </Text>
              <div class="space-y-3">
                <div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
                  <div class="flex items-center gap-3">
                    <div class="avatar placeholder">
                      <div class="w-10 h-10 rounded-full bg-secondary text-secondary-content">
                        <span>ПС</span>
                      </div>
                    </div>
                    <div>
                      <Text weight="medium">Петров Сергей Александрович</Text>
                      <Text tone="muted" size="sm">Физическое лицо</Text>
                    </div>
                  </div>
                  <span class="badge badge-primary">60%</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
                  <div class="flex items-center gap-3">
                    <div class="avatar placeholder">
                      <div class="w-10 h-10 rounded-full bg-secondary text-secondary-content">
                        <span>ИА</span>
                      </div>
                    </div>
                    <div>
                      <Text weight="medium">Иванова Анна Петровна</Text>
                      <Text tone="muted" size="sm">Физическое лицо</Text>
                    </div>
                  </div>
                  <span class="badge badge-primary">40%</span>
                </div>
              </div>
              <div class="mt-4 pt-4 border-t border-base-200">
                <div class="flex justify-between">
                  <Text tone="muted" size="sm">Уставный капитал</Text>
                  <Text weight="semibold">500 000 ₽</Text>
                </div>
              </div>
            </Card>
          </div>

          <!-- Right Column -->
          <div class="flex flex-col gap-6">
            <!-- Контакты -->
            <Card padding="md">
              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
                <Icon name="lucide:contact" size="20" />
                Контакты
              </Text>
              <div class="space-y-3">
                <div class="flex items-center gap-3">
                  <Icon name="lucide:map-pin" size="18" class="text-base-content/50" />
                  <Text size="sm">123456, г. Москва, ул. Складская, д. 15, оф. 301</Text>
                </div>
                <div class="flex items-center gap-3">
                  <Icon name="lucide:phone" size="18" class="text-base-content/50" />
                  <Text size="sm">+7 (495) 123-45-67</Text>
                </div>
                <div class="flex items-center gap-3">
                  <Icon name="lucide:mail" size="18" class="text-base-content/50" />
                  <Text size="sm">info@agrotorg-plus.ru</Text>
                </div>
                <div class="flex items-center gap-3">
                  <Icon name="lucide:globe" size="18" class="text-base-content/50" />
                  <Text size="sm">www.agrotorg-plus.ru</Text>
                </div>
              </div>
            </Card>

            <!-- Финансы -->
            <Card padding="md">
              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
                <Icon name="lucide:bar-chart-3" size="20" />
                Финансовые показатели (2024)
              </Text>
              <div class="space-y-4">
                <div>
                  <div class="flex justify-between mb-1">
                    <Text tone="muted" size="sm">Выручка</Text>
                    <Text weight="semibold" class="text-success">↑ 15%</Text>
                  </div>
                  <Text weight="bold" size="lg">245 800 000 ₽</Text>
                </div>
                <div>
                  <div class="flex justify-between mb-1">
                    <Text tone="muted" size="sm">Чистая прибыль</Text>
                    <Text weight="semibold" class="text-success">↑ 23%</Text>
                  </div>
                  <Text weight="bold" size="lg">18 450 000 ₽</Text>
                </div>
                <div>
                  <div class="flex justify-between mb-1">
                    <Text tone="muted" size="sm">Активы</Text>
                  </div>
                  <Text weight="bold" size="lg">89 200 000 ₽</Text>
                </div>
                <div class="pt-3 border-t border-base-200">
                  <div class="flex justify-between">
                    <Text tone="muted" size="sm">Сотрудников</Text>
                    <Text weight="medium">47 человек</Text>
                  </div>
                </div>
              </div>
            </Card>

            <!-- Арбитраж -->
            <Card padding="md">
              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
                <Icon name="lucide:scale" size="20" />
                Арбитражные дела
              </Text>
              <div class="space-y-3">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="badge badge-warning badge-sm">Истец</span>
                    <Text size="sm">3 дела</Text>
                  </div>
                  <Text weight="medium" size="sm">1 250 000 ₽</Text>
                </div>
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="badge badge-error badge-sm">Ответчик</span>
                    <Text size="sm">1 дело</Text>
                  </div>
                  <Text weight="medium" size="sm">320 000 ₽</Text>
                </div>
                <div class="pt-3 border-t border-base-200">
                  <Text tone="muted" size="xs">Завершенных: 2 выигранных, 1 урегулировано</Text>
                </div>
              </div>
            </Card>
          </div>
        </div>

        <!-- Виды деятельности -->
        <Card padding="md">
          <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
            <Icon name="lucide:briefcase" size="20" />
            Виды деятельности (ОКВЭД)
          </Text>
          <div class="space-y-2">
            <div class="flex items-start gap-3 p-3 bg-primary/5 rounded-lg border border-primary/20">
              <span class="badge badge-primary badge-sm mt-0.5">Основной</span>
              <div>
                <Text weight="medium" size="sm">46.21 - Торговля оптовая зерном, необработанным табаком, семенами и кормами для сельскохозяйственных животных</Text>
              </div>
            </div>
            <div class="flex items-start gap-3 p-3 bg-base-200 rounded-lg">
              <span class="badge badge-ghost badge-sm mt-0.5">Доп.</span>
              <Text size="sm">46.11 - Деятельность агентов по оптовой торговле сельскохозяйственным сырьем</Text>
            </div>
            <div class="flex items-start gap-3 p-3 bg-base-200 rounded-lg">
              <span class="badge badge-ghost badge-sm mt-0.5">Доп.</span>
              <Text size="sm">52.10 - Деятельность по складированию и хранению</Text>
            </div>
            <div class="flex items-start gap-3 p-3 bg-base-200 rounded-lg">
              <span class="badge badge-ghost badge-sm mt-0.5">Доп.</span>
              <Text size="sm">49.41 - Деятельность автомобильного грузового транспорта</Text>
            </div>
          </div>
        </Card>

        <!-- История изменений -->
        <Card padding="md">
          <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
            <Icon name="lucide:history" size="20" />
            История изменений
          </Text>
          <div class="relative">
            <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-base-300" />
            <div class="space-y-4">
              <div class="flex gap-4 relative">
                <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center z-10">
                  <Icon name="lucide:check" size="16" class="text-primary-content" />
                </div>
                <div class="flex-1 pb-4">
                  <Text weight="medium" size="sm">Смена юридического адреса</Text>
                  <Text tone="muted" size="xs">12 января 2024</Text>
                </div>
              </div>
              <div class="flex gap-4 relative">
                <div class="w-8 h-8 rounded-full bg-base-300 flex items-center justify-center z-10">
                  <Icon name="lucide:user-plus" size="16" />
                </div>
                <div class="flex-1 pb-4">
                  <Text weight="medium" size="sm">Изменение состава учредителей</Text>
                  <Text tone="muted" size="xs">5 августа 2023</Text>
                </div>
              </div>
              <div class="flex gap-4 relative">
                <div class="w-8 h-8 rounded-full bg-base-300 flex items-center justify-center z-10">
                  <Icon name="lucide:banknote" size="16" />
                </div>
                <div class="flex-1 pb-4">
                  <Text weight="medium" size="sm">Увеличение уставного капитала</Text>
                  <Text tone="muted" size="xs">20 марта 2022</Text>
                </div>
              </div>
              <div class="flex gap-4 relative">
                <div class="w-8 h-8 rounded-full bg-base-300 flex items-center justify-center z-10">
                  <Icon name="lucide:building" size="16" />
                </div>
                <div class="flex-1">
                  <Text weight="medium" size="sm">Регистрация компании</Text>
                  <Text tone="muted" size="xs">15 марта 2015</Text>
                </div>
              </div>
            </div>
          </div>
        </Card>

        <!-- Sources Footer -->
        <div class="flex flex-wrap items-center justify-between gap-4 text-xs text-base-content/50 px-2">
          <div class="flex items-center gap-4">
            <span class="flex items-center gap-1">
              <Icon name="lucide:database" size="14" />
              Источники: ЕГРЮЛ, ФНС, Росстат, Арбитр
            </span>
          </div>
          <span>Данные актуальны на {{ new Date().toLocaleDateString('ru-RU') }}</span>
        </div>

        <!-- Demo notice -->
        <div class="alert alert-info">
          <Icon name="lucide:info" size="16" />
          <span>{{ $t('kyc.demo.notice') }}</span>
        </div>
      </div>

      <!-- Real KYC Profile Card -->
      <KycProfileCard v-else :kyc-profile-uuid="uuid" />
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav'
})

const route = useRoute()
const localePath = useLocalePath()

const uuid = computed(() => route.params.uuid as string)
const isDemo = computed(() => uuid.value === 'demo-kyc-profile')

// Back URL - try to go back to previous page or catalog
const backUrl = computed(() => {
  return localePath('/catalog')
})
</script>
