import { useEffect, useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Save, AlertTriangle, CheckCircle2 } from 'lucide-react'
import { api } from '@/lib/api'
import { PageHeader } from '@/components/PageHeader'
import { Field, Select } from '@/components/Field'
import { Button } from '@/components/Button'

interface SystemSettingsDto { archiveRetentionDays: number }

const RETENTION_OPTIONS = [
  { value: 0, label: 'Немедленно (0 дней)' },
  { value: 1, label: '1 день' },
  { value: 3, label: '3 дня' },
  { value: 7, label: '7 дней' },
  { value: 14, label: '14 дней' },
  { value: 30, label: '30 дней (рекомендуется)' },
]

export function SuperAdminSettingsPage() {
  const qc = useQueryClient()
  const { data } = useQuery({
    queryKey: ['/api/super-admin/settings'],
    queryFn: async () => (await api.get<SystemSettingsDto>('/api/super-admin/settings')).data,
  })
  const [retention, setRetention] = useState<number | null>(null)
  const [savedHint, setSavedHint] = useState(false)
  useEffect(() => { if (data && retention === null) setRetention(data.archiveRetentionDays) }, [data, retention])

  const save = useMutation({
    mutationFn: async () => {
      if (retention === null) return
      await api.put<SystemSettingsDto>('/api/super-admin/settings', { archiveRetentionDays: retention })
    },
    onSuccess: async () => {
      await qc.invalidateQueries({ queryKey: ['/api/super-admin/settings'] })
      setSavedHint(true)
      setTimeout(() => setSavedHint(false), 2500)
    },
  })

  const dirty = retention !== null && data && retention !== data.archiveRetentionDays
  const isImmediate = retention === 0

  return (
    <div className="h-full overflow-auto">
      <div className="max-w-2xl mx-auto p-4 sm:p-6 space-y-5">
        <PageHeader
          title="Системные настройки"
          description="Глобальные параметры платформы. Применяются ко всем организациям."
        />

        <section className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 space-y-3">
          <h3 className="font-semibold">Архивирование организаций</h3>
          <Field label="Период до полного удаления из архива">
            <Select value={String(retention ?? 30)} onChange={(e) => setRetention(Number(e.target.value))}>
              {RETENTION_OPTIONS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
            </Select>
          </Field>
          <p className="text-xs text-slate-500">
            Через указанное время архивная организация может быть удалена навсегда.
            При значении «Немедленно» — кнопка удаления доступна сразу после архивации.
            Рекомендуется 7–30 дней в продакшене.
          </p>

          {isImmediate && (
            <div className="flex items-start gap-2 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 px-3 py-2">
              <AlertTriangle className="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" />
              <p className="text-xs text-amber-800 dark:text-amber-200">
                ⚠️ Удалённые организации нельзя восстановить. Это поведение подходит для разработки/тестирования,
                в продакшене не рекомендуется.
              </p>
            </div>
          )}

          <div className="flex items-center gap-3 pt-2">
            <Button onClick={() => save.mutate()} disabled={!dirty || save.isPending}>
              <Save className="w-4 h-4" /> {save.isPending ? 'Сохраняю…' : 'Сохранить'}
            </Button>
            {savedHint && (
              <span className="text-sm text-emerald-600 inline-flex items-center gap-1">
                <CheckCircle2 className="w-4 h-4" /> Сохранено
              </span>
            )}
          </div>
        </section>
      </div>
    </div>
  )
}
