import { useEffect, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { Save, Sparkles } from 'lucide-react'
import { api } from '@/lib/api'
import { PageHeader } from '@/components/PageHeader'
import { Button } from '@/components/Button'
import { Field, TextInput, Select, Checkbox } from '@/components/Field'
import { FormSkeleton } from '@/components/Skeleton'
import { useCountries } from '@/lib/useLookups'
import { useOrgSettings, type OrgSettings } from '@/lib/useOrgSettings'

interface DemoSeedSummary {
  alreadySeeded: boolean
  groups: number; products: number; counterparties: number
  supplies: number; sales: number; demands: number
  losses: number; transfers: number; inventories: number; stores: number
}

export function OrganizationSettingsPage() {
  const qc = useQueryClient()
  const settings = useOrgSettings()
  const countries = useCountries()

  const [form, setForm] = useState<OrgSettings | null>(null)
  const [nameErr, setNameErr] = useState<string | null>(null)
  // Синхронизируем форму с актуальным снимком настроек: первый раз — после
  // загрузки; и каждый раз когда сервер вернул свежую версию (например после
  // refetchOnMount или после save в другой вкладке).
  useEffect(() => { if (settings.data) { setForm(settings.data); setNameErr(null) } }, [settings.data])

  // При смене страны подтягиваем её валюту и ставку НДС (оба read-only, из справочника стран).
  const onCountryChange = (countryCode: string) => {
    if (!form) return
    const country = countries.data?.find((c) => c.code === countryCode)
    setForm({
      ...form,
      countryCode,
      defaultCurrencyId: country?.defaultCurrencyId ?? null,
      defaultCurrencyCode: country?.defaultCurrencyCode ?? null,
      defaultCurrencySymbol: country?.defaultCurrencySymbol ?? null,
      vatRate: country?.vatRate ?? 0,
    })
  }

  const save = useMutation({
    mutationFn: async () => {
      if (!form) return
      const payload = {
        name: form.name,
        countryCode: form.countryCode,
        multiCurrencyEnabled: form.multiCurrencyEnabled,
        showVatEnabledOnProduct: form.showVatEnabledOnProduct,
        showServiceOnProduct: form.showServiceOnProduct,
        showMarkedOnProduct: form.showMarkedOnProduct,
        showMinMaxStock: form.showMinMaxStock,
        allowFractionalPrices: form.allowFractionalPrices,
        showReferencePriceOnProduct: form.showReferencePriceOnProduct,
        showCountryOfOriginOnProduct: form.showCountryOfOriginOnProduct,
        showDescriptionOnProduct: form.showDescriptionOnProduct,
      }
      return (await api.put<OrgSettings>('/api/organization/settings', payload)).data
    },
    onSuccess: (d) => {
      if (d) setForm(d)
      qc.invalidateQueries({ queryKey: ['/api/organization/settings'] })
    },
    meta: { successMessage: 'Настройки сохранены' },
  })

  if (!form) return <FormSkeleton />

  return (
    <div className="h-full overflow-auto">
      <div className="p-4 sm:p-6 max-w-2xl">
        <PageHeader title="Настройки организации" description="Страна, валюта, ставка НДС по умолчанию." />

        <section className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-5 space-y-4">
          <Field label="Название организации" error={nameErr ?? undefined}>
            <TextInput value={form.name}
              onChange={(e) => { setForm({ ...form, name: e.target.value }); if (nameErr) setNameErr(null) }}
              onBlur={() => { if (!form.name.trim()) setNameErr('Название обязательно') }} />
          </Field>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <Field label="Страна">
              <Select value={form.countryCode} onChange={(e) => onCountryChange(e.target.value)}>
                {countries.data?.map((c) => <option key={c.code} value={c.code}>{c.name}</option>)}
              </Select>
            </Field>
            <Field label="Валюта по умолчанию">
              <TextInput
                value={form.defaultCurrencyCode ? `${form.defaultCurrencyCode} (${form.defaultCurrencySymbol ?? ''})` : '—'}
                disabled
              />
            </Field>
          </div>

          <Checkbox
            label="Разрешить продажи и закупки в нескольких валютах"
            checked={form.multiCurrencyEnabled}
            onChange={(v) => setForm({ ...form, multiCurrencyEnabled: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            Если выключено — в формах продаж и закупок выбор валюты не показывается, всё считается в валюте по умолчанию.
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <Field label="Ставка НДС">
              <TextInput value={`${form.vatRate.toFixed(2)}%`} disabled />
            </Field>
            <div />
          </div>
          <p className="text-xs text-slate-500 -mt-2">
            Валюта и ставка НДС берутся из страны (<strong>{form.countryCode}</strong>) —
            чтобы изменить — обратитесь к администратору платформы (справочник стран управляется в системной консоли).
          </p>

          <Checkbox
            label='Указывать ставку НДС на товаре'
            checked={form.showVatEnabledOnProduct}
            onChange={(v) => setForm({ ...form, showVatEnabledOnProduct: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            Если выключено — поля «НДС %» и «В том числе НДС» на карточке товара скрыты,
            все новые товары получают ставку из страны организации. Если включено — у каждого
            товара можно задать ставку вручную (хлеб = 0%, лекарства = 0% и т.п.).
          </p>

          <Checkbox
            label='Показывать чекбокс «Услуга» на товаре'
            checked={form.showServiceOnProduct}
            onChange={(v) => setForm({ ...form, showServiceOnProduct: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            Нужно, если помимо физических товаров продаются услуги (доставка, сборка и т.п.).
            По умолчанию галка скрыта.
          </p>

          <Checkbox
            label='Показывать чекбокс «Маркируемый» на товаре'
            checked={form.showMarkedOnProduct}
            onChange={(v) => setForm({ ...form, showMarkedOnProduct: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            Включать, только если продаётся маркируемая категория (алкоголь, табак, лекарства).
            По умолчанию галка скрыта.
          </p>

          <Checkbox
            label='Показывать мин/макс остатки на товаре'
            checked={form.showMinMaxStock}
            onChange={(v) => setForm({ ...form, showMinMaxStock: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            Если включено — на карточке товара есть поля «Минимальный / Максимальный остаток»
            для автозаказа. По умолчанию скрыто.
          </p>

          <Checkbox
            label='Разрешить дробные цены (с копейками)'
            checked={form.allowFractionalPrices}
            onChange={(v) => setForm({ ...form, allowFractionalPrices: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            Включи если хочешь использовать цены с двумя знаками после запятой (1500.50 ₸).
            По умолчанию — целые тенге, без копеек.
          </p>

          <Checkbox
            label='Показывать «Эталонную цену» на товаре'
            checked={form.showReferencePriceOnProduct}
            onChange={(v) => setForm({ ...form, showReferencePriceOnProduct: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            Справочная цена закупа — необязательное поле. Авто-заполняется первой
            проведённой приёмкой и через 30 дней без приёмок переписывается на текущую себестоимость.
          </p>

          <Checkbox
            label='Показывать «Страну происхождения» на товаре'
            checked={form.showCountryOfOriginOnProduct}
            onChange={(v) => setForm({ ...form, showCountryOfOriginOnProduct: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            По умолчанию выключено. Включай если торгуешь импортом или ведёшь
            учёт по странам — тогда в карточке товара будет селект «Страна происхождения».
          </p>

          <Checkbox
            label='Показывать «Описание» на товаре'
            checked={form.showDescriptionOnProduct}
            onChange={(v) => setForm({ ...form, showDescriptionOnProduct: v })}
          />
          <p className="text-xs text-slate-500 -mt-2">
            По умолчанию выключено — описания захламляют карточку. Включай если ведёшь
            подробные тексты на товарах.
          </p>
        </section>

        <div className="mt-4 flex gap-3 items-center">
          <Button onClick={() => save.mutate()} disabled={save.isPending}>
            <Save className="w-4 h-4" /> {save.isPending ? 'Сохраняю…' : 'Сохранить'}
          </Button>
          {save.isSuccess && <span className="text-sm text-emerald-600">Сохранено</span>}
          {save.error && <span className="text-sm text-red-600">{(save.error as Error).message}</span>}
        </div>

        <TelegramSection />
        <DemoSeedSection />
      </div>
    </div>
  )
}

interface TelegramStatus {
  botEnabled: boolean
  botUsername: string | null
  chatId: number | null
  deepLink: string | null
}

/**
 * Привязка Telegram-бота владельца: владелец org вводит свой chat_id
 * (получает из @userinfobot или через deep-link к боту food-market).
 * Сервер проверяет, отправив тестовое сообщение — если 200, сохраняем.
 * После привязки Hangfire-джоб шлёт ежедневную сводку в 09:00 МСК.
 */
function TelegramSection() {
  const qc = useQueryClient()
  const status = useQuery<TelegramStatus>({
    queryKey: ['/api/organization/telegram/status'],
    queryFn: async () => (await api.get<TelegramStatus>('/api/organization/telegram/status')).data,
  })
  const [chatIdInput, setChatIdInput] = useState('')
  const bind = useMutation({
    mutationFn: async () => {
      const cid = Number(chatIdInput.trim())
      if (!Number.isInteger(cid) || cid === 0) throw new Error('ChatId — число, не равное 0')
      return (await api.put('/api/organization/telegram/bind', { chatId: cid })).data
    },
    onSuccess: () => {
      setChatIdInput('')
      qc.invalidateQueries({ queryKey: ['/api/organization/telegram/status'] })
    },
    meta: { successMessage: 'Telegram привязан, тестовое сообщение отправлено' },
  })
  const unbind = useMutation({
    mutationFn: async () => (await api.delete('/api/organization/telegram')).data,
    onSuccess: () => qc.invalidateQueries({ queryKey: ['/api/organization/telegram/status'] }),
    meta: { successMessage: 'Привязка отменена' },
  })

  const s = status.data
  const bound = !!s?.chatId

  return (
    <section className="border-t border-slate-200 pt-6 mt-6">
      <h2 className="text-base font-semibold">📨 Telegram владельца</h2>
      <p className="text-sm text-slate-500 mt-1">
        Ежедневная сводка (выручка вчера, топ-3 товара, low-stock) в 09:00 МСК.
      </p>

      {!s?.botEnabled && (
        <p className="mt-3 text-sm text-amber-700 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 rounded-md p-3">
          Бот не настроен на сервере (нет токена в env <code>Telegram__BotToken</code>).
          Привязка пока недоступна.
        </p>
      )}

      {s?.botEnabled && bound && (
        <div className="mt-3 flex items-center gap-3">
          <span className="text-sm">Привязан: <code>chat_id={s.chatId}</code></span>
          <Button variant="secondary" onClick={() => unbind.mutate()} disabled={unbind.isPending}>
            Отвязать
          </Button>
        </div>
      )}

      {s?.botEnabled && !bound && (
        <div className="mt-3 space-y-3">
          {s.deepLink && (
            <p className="text-sm">
              1. Откройте <a className="text-emerald-700 underline" href={s.deepLink} target="_blank" rel="noreferrer">
                @{s.botUsername}
              </a> в Telegram, отправьте <code>/start</code>.
            </p>
          )}
          <p className="text-sm">
            2. Откройте <a className="text-emerald-700 underline" href="https://t.me/userinfobot" target="_blank" rel="noreferrer">@userinfobot</a>, чтобы узнать свой <code>chat_id</code>.
          </p>
          <div className="flex items-end gap-3">
            <Field label="3. Ваш chat_id">
              <TextInput
                value={chatIdInput}
                onChange={(e) => setChatIdInput(e.target.value)}
                placeholder="например, 123456789"
              />
            </Field>
            <Button onClick={() => bind.mutate()} disabled={bind.isPending || !chatIdInput.trim()}>
              {bind.isPending ? 'Проверяю…' : 'Привязать'}
            </Button>
          </div>
        </div>
      )}
    </section>
  )
}

/**
 * Кнопка «Заполнить демо-данными» — для стейджа: 50 товаров / 10 контрагентов /
 * наполненные отчёты одной кнопкой. Запрос идемпотентен; на уже заполненной org
 * показываем сводку «Уже заполнено: …».
 */
function DemoSeedSection() {
  const qc = useQueryClient()
  const status = useQuery<DemoSeedSummary>({
    queryKey: ['/api/admin/seed-demo/status'],
    queryFn: async () => (await api.get<DemoSeedSummary>('/api/admin/seed-demo/status')).data,
  })
  const seed = useMutation({
    mutationFn: async () => (await api.post<DemoSeedSummary>('/api/admin/seed-demo')).data,
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['/api/admin/seed-demo/status'] })
    },
  })

  const s = status.data
  const seeded = !!s?.alreadySeeded

  return (
    <section className="border-t border-slate-200 pt-6 mt-6">
      <h2 className="text-base font-semibold flex items-center gap-2">
        <Sparkles className="w-4 h-4 text-amber-500" />
        Демо-данные
      </h2>
      <p className="text-sm text-slate-500 mt-1">
        Заполняет организацию реалистичными данными для демонстрации стейджа: 50 товаров
        в 5 группах, 10 контрагентов, 5 приёмок, 30 продаж, 1 опт-отгрузка,
        1 списание, 1 перемещение, 1 инвентаризация. Идемпотентно — повторный
        запуск не создаст дубликатов.
      </p>

      {status.isLoading && (
        <p className="text-sm text-slate-500 mt-3">Загружаю статус…</p>
      )}

      {s && (
        <div className="mt-3 text-xs text-slate-600 grid grid-cols-2 sm:grid-cols-5 gap-x-4 gap-y-1">
          <div>Товаров: <b>{s.products}</b></div>
          <div>Групп: <b>{s.groups}</b></div>
          <div>Контрагентов: <b>{s.counterparties}</b></div>
          <div>Складов: <b>{s.stores}</b></div>
          <div>Приёмок: <b>{s.supplies}</b></div>
          <div>Продаж: <b>{s.sales}</b></div>
          <div>Опт: <b>{s.demands}</b></div>
          <div>Списаний: <b>{s.losses}</b></div>
          <div>Перемещений: <b>{s.transfers}</b></div>
          <div>Инвентар.: <b>{s.inventories}</b></div>
        </div>
      )}

      <div className="mt-4 flex gap-3 items-center">
        <Button
          onClick={() => seed.mutate()}
          disabled={seed.isPending || seeded}
          variant={seeded ? 'secondary' : 'primary'}
        >
          <Sparkles className="w-4 h-4" />
          {seed.isPending ? 'Наполняю…' : seeded ? 'Уже заполнено' : 'Заполнить демо-данными'}
        </Button>
        {seed.isSuccess && !seeded && (
          <span className="text-sm text-emerald-600">
            Демо-данные созданы. Перезагрузите страницу каталога чтобы увидеть.
          </span>
        )}
        {seed.error && (
          <span className="text-sm text-red-600">{(seed.error as Error).message}</span>
        )}
      </div>
    </section>
  )
}
