import { useEffect, useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { Save } 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 { useCountries } from '@/lib/useLookups'
import { useOrgSettings, type OrgSettings } from '@/lib/useOrgSettings'

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

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

  if (!form) return <div className="p-6 text-sm text-slate-500">Загрузка…</div>

  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="Название организации">
            <TextInput value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          </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>
      </div>
    </div>
  )
}
