import { useEffect, useState } from "react"
import { useParams } from "react-router-dom"
import { AlertTriangle, Loader2, Play, RefreshCw, TriangleAlert } from "lucide-react"
import { DiffView } from "@/components/DiffView"
import { DomainHistory } from "@/components/DomainHistory"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  useApplyDomain,
  useCheckDomain,
  useCreateTemplateFromZone,
  useDomains,
  useZoneRecords,
} from "@/hooks/useApi"
import { cn } from "@/lib/utils"

export function DomainDiffPage() {
  const { id = "" } = useParams()
  const domains = useDomains()
  const domain = domains.data?.find((d) => d.id === id)
  const hasTemplate = !!domain?.templateId

  const check = useCheckDomain(id, hasTemplate)
  const apply = useApplyDomain(id)
  // Пока список доменов не загружен ИЛИ загрузка упала ошибкой, hasTemplate
  // недостоверно (false по умолчанию из-за domain === undefined) — не
  // дёргаем provider-запрос записей зоны, пока не будет точно известно
  // (успешный ответ), что шаблона нет.
  const zoneRecords = useZoneRecords(id, !domains.isPending && !domains.isError && !hasTemplate)
  const createTemplateFromZone = useCreateTemplateFromZone()
  const [selectedUpdates, setSelectedUpdates] = useState<Set<string>>(new Set())
  const [selectedPrunes, setSelectedPrunes] = useState<Set<string>>(new Set())

  const changeset = check.data

  // Re-derive the selection whenever the changeset changes (initial load,
  // recheck, or apply's own invalidation): updates default to fully selected
  // (safe — they only bring the zone in line with the template), prunes
  // default to empty (deletion is opt-in and irreversible).
  useEffect(() => {
    setSelectedUpdates(new Set((changeset?.updates ?? []).map((r) => r.key)))
    setSelectedPrunes(new Set())
  }, [changeset])

  const recordList = zoneRecords.data ?? []
  const hasSelection = selectedUpdates.size + selectedPrunes.size > 0

  function toggleUpdate(key: string) {
    setSelectedUpdates((prev) => {
      const next = new Set(prev)
      if (next.has(key)) next.delete(key)
      else next.add(key)
      return next
    })
  }
  function togglePrune(key: string) {
    setSelectedPrunes((prev) => {
      const next = new Set(prev)
      if (next.has(key)) next.delete(key)
      else next.add(key)
      return next
    })
  }
  function toggleAllUpdates(checked: boolean) {
    setSelectedUpdates(checked ? new Set((changeset?.updates ?? []).map((r) => r.key)) : new Set())
  }
  function toggleAllPrunes(checked: boolean) {
    setSelectedPrunes(checked ? new Set((changeset?.prunes ?? []).map((r) => r.key)) : new Set())
  }

  function onApply() {
    apply.mutate({ updates: [...selectedUpdates], prunes: [...selectedPrunes] })
  }

  function onCreateTemplateFromZone() {
    createTemplateFromZone.mutate(id)
  }

  if (domains.isPending) {
    return (
      <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
        <div className="flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-8 text-sm text-muted-foreground">
          <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
          Загрузка…
        </div>
      </div>
    )
  }

  // Список доменов не загрузился — hasTemplate тут недостоверно (domain
  // === undefined из-за domains.data === undefined даёт hasTemplate=false),
  // поэтому без этой проверки страница молча уходит в ветку «без шаблона»
  // и дёргает zoneRecords для несуществующего состояния. Показываем ошибку
  // и не рендерим ни одну из веток решения.
  if (domains.isError) {
    return (
      <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
        <div className="flex items-start gap-2.5 rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
          <AlertTriangle className="mt-0.5 size-4 shrink-0" strokeWidth={1.75} />
          <div className="flex flex-col gap-1">
            <span className="font-medium">Не удалось загрузить список доменов</span>
            <span className="font-dns text-xs opacity-90">{domains.error.message}</span>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
      <header className="flex flex-wrap items-end justify-between gap-4">
        <div className="flex flex-col gap-1">
          <span className="font-dns text-[11px] tracking-wider text-muted-foreground uppercase">
            domain / check
          </span>
          <h1 className="font-dns text-xl font-semibold tracking-tight text-foreground">
            {id}
          </h1>
        </div>
        {hasTemplate && (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => check.refetch()}
            disabled={check.isFetching}
          >
            <RefreshCw className={cn("size-3.5", check.isFetching && "animate-spin")} strokeWidth={1.75} />
            Recheck
          </Button>
        )}
      </header>

      {!hasTemplate && (
        <>
          <div className="flex items-start gap-2.5 rounded-lg border border-border bg-card/60 px-4 py-3 text-sm text-muted-foreground">
            <AlertTriangle className="mt-0.5 size-4 shrink-0" strokeWidth={1.75} />
            <span>Шаблон не привязан — дифф недоступен. Ниже текущие записи зоны.</span>
          </div>

          <div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card/60 p-4">
            <span className="text-xs text-muted-foreground">
              Создать шаблон-эталон из текущего состояния зоны (без NS/SOA).
            </span>
            <Button onClick={onCreateTemplateFromZone} disabled={createTemplateFromZone.isPending}>
              {createTemplateFromZone.isPending ? (
                <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
              ) : (
                <Play className="size-4" strokeWidth={1.75} />
              )}
              Создать шаблон из этой зоны
            </Button>
          </div>
          {createTemplateFromZone.isError && (
            <span role="alert" className="font-dns text-xs text-destructive">
              {createTemplateFromZone.error.message}
            </span>
          )}

          {zoneRecords.isPending && (
            <div className="flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-8 text-sm text-muted-foreground">
              <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
              Загружаю записи зоны…
            </div>
          )}

          {zoneRecords.isError && (
            <div className="flex items-start gap-2.5 rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
              <AlertTriangle className="mt-0.5 size-4 shrink-0" strokeWidth={1.75} />
              <div className="flex flex-col gap-1">
                <span className="font-medium">Не удалось получить записи зоны</span>
                <span className="font-dns text-xs opacity-90">{zoneRecords.error.message}</span>
              </div>
            </div>
          )}

          {recordList.length > 0 && (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Тип</TableHead>
                  <TableHead>Имя</TableHead>
                  <TableHead>TTL</TableHead>
                  <TableHead>Значение</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {recordList.map((r, i) => (
                  <TableRow key={`${r.type}-${r.name}-${i}`}>
                    <TableCell className="font-dns">{r.type}</TableCell>
                    <TableCell className="font-dns">{r.name}</TableCell>
                    <TableCell className="font-dns">{r.ttl}</TableCell>
                    <TableCell className="font-dns whitespace-pre-line break-all">
                      {r.values.join("\n")}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </>
      )}

      {hasTemplate && check.isPending && (
        <div className="flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-8 text-sm text-muted-foreground">
          <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
          Вычисляю дифф…
        </div>
      )}

      {hasTemplate && check.isError && (
        <div className="flex items-start gap-2.5 rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
          <AlertTriangle className="mt-0.5 size-4 shrink-0" strokeWidth={1.75} />
          <div className="flex flex-col gap-1">
            <span className="font-medium">Не удалось получить дифф</span>
            <span className="font-dns text-xs opacity-90">{check.error.message}</span>
          </div>
        </div>
      )}

      {hasTemplate && changeset && (
        <>
          <DiffView
            changeset={changeset}
            selectedUpdates={selectedUpdates}
            selectedPrunes={selectedPrunes}
            onToggleUpdate={toggleUpdate}
            onTogglePrune={togglePrune}
            onToggleAllUpdates={toggleAllUpdates}
            onToggleAllPrunes={toggleAllPrunes}
          />

          <div className="flex flex-col gap-3 rounded-xl border border-border bg-card/60 p-4">
            {selectedPrunes.size > 0 && (
              <div
                className="flex items-start gap-2 rounded-lg px-3 py-2 text-xs"
                style={{
                  color: "var(--diff-delete)",
                  background: "color-mix(in oklch, var(--diff-delete), transparent 90%)",
                }}
                role="alert"
              >
                <TriangleAlert className="mt-px size-3.5 shrink-0" strokeWidth={2} />
                <span>
                  Будет удалено записей:{" "}
                  <span className="font-dns font-semibold">{selectedPrunes.size}</span>. Действие необратимо.
                </span>
              </div>
            )}

            <div className="flex items-center justify-between gap-3 border-t border-border pt-3">
              {apply.isError ? (
                <span className="font-dns text-xs text-destructive">{apply.error.message}</span>
              ) : apply.isSuccess ? (
                <span className="font-dns text-xs" style={{ color: "var(--diff-add)" }}>
                  Применено ✓
                </span>
              ) : (
                <span className="text-xs text-muted-foreground">
                  {hasSelection ? "Готово к применению" : "Изменений для применения нет"}
                </span>
              )}
              <Button onClick={onApply} disabled={apply.isPending || !hasSelection}>
                {apply.isPending ? (
                  <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
                ) : (
                  <Play className="size-4" strokeWidth={1.75} />
                )}
                Apply
              </Button>
            </div>
          </div>
        </>
      )}

      <DomainHistory domainId={id} />
    </div>
  )
}