"use client"

import * as React from "react"
import Link from "next/link"
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { formatAppVersionLabel, getAppVersion } from "@/lib/app-version"
import {
  formatCommitSubject,
  getReleaseCommitPreview,
} from "@/lib/release-commits"
import {parseReleaseManifest,shouldShowReleaseNotes,type ReleaseManifest} from "@/lib/release-metadata"
import { hasSeenReleaseModal, markReleaseModalSeen } from "@/lib/release-modal-storage"

export function ReleaseNotesModal() {
  const [open, setOpen] = React.useState(false)
  const [manifest, setManifest] = React.useState<ReleaseManifest | null>(null)

  React.useEffect(() => {
    let cancelled = false
    const controller=new AbortController()
    const timeout=setTimeout(()=>controller.abort(),8000)

    async function loadManifest() {
      try {
        const response = await fetch("/release-manifest.json", { cache: "no-store", signal:controller.signal })
        if (!response.ok) return

        const data = parseReleaseManifest(await response.json())
        if (cancelled || controller.signal.aborted || !data || !shouldShowReleaseNotes(data,getAppVersion()) || hasSeenReleaseModal(data.tag)) return

        setManifest(data)
        setOpen(true)
      } catch {
        // Локальная сборка или недоступный manifest — модалку не показываем.
      } finally {clearTimeout(timeout)}
    }

    void loadManifest()

    return () => {
      cancelled = true
      clearTimeout(timeout)
      controller.abort()
    }
  }, [])

  const handleOpenChange = (nextOpen: boolean) => {
    setOpen(nextOpen)
    if (!nextOpen && manifest) {
      markReleaseModalSeen(manifest.tag)
    }
  }

  const versionLabel = formatAppVersionLabel(manifest?.version ?? getAppVersion())
  const commits = getReleaseCommitPreview(manifest?.commits ?? [])

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="flex max-h-[min(85vh,720px)] w-full max-w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-lg">
        <DialogHeader className="gap-1.5 border-b px-6 py-5 pr-12 text-left">
          <DialogTitle className="text-base leading-snug">
            Что нового в {versionLabel}
          </DialogTitle>
          <DialogDescription className="text-sm leading-relaxed">
            Коммиты текущей сборки MikrotikManager: {commits.length}.
          </DialogDescription>
        </DialogHeader>

        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4">
          {commits.length ? (
            <ul className="flex flex-col gap-2">
              {commits.map((commit) => (
                <li
                  key={commit.sha}
                  className="rounded-lg border bg-card/80 p-3 break-words"
                >
                  <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                    <Badge variant="secondary" className="font-mono uppercase">
                      {commit.type}
                    </Badge>
                    <span className="font-mono text-xs text-muted-foreground">{commit.shortSha}</span>
                    <span className="text-xs text-muted-foreground">{commit.author}</span>
                  </div>
                  <p className="mt-2 text-sm leading-relaxed text-foreground">
                    {formatCommitSubject(commit.subject)}
                  </p>
                </li>
              ))}
            </ul>
          ) : null}
        </div>

        <DialogFooter className="mx-0 mb-0 shrink-0 gap-3 border-t bg-muted/30 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
          <Button
            variant="outline"
            nativeButton={false}
            render={<Link href="/releases" />}
            onClick={() => handleOpenChange(false)}
          >
            Все релизы
          </Button>
          <Button onClick={() => handleOpenChange(false)}>Понятно</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}