import Link from "next/link"
import { PageHeader } from "@/components/page-header"
import { OpsPanel } from "@/components/ops-panel"
import { buttonVariants } from "@/components/ui/button"
import { formatAppVersionLabel, getAppVersion, getReleaseUrl } from "@/lib/app-version"
import {
  formatCommitSubject,
  getReleaseCommitPreview,
} from "@/lib/release-commits"
import { readReleaseManifest } from "@/lib/release-manifest"
import { cn } from "@/lib/utils"
import { ExternalLinkIcon } from "lucide-react"

export const dynamic = "force-dynamic"

function formatPublishedAt(value: string | null, isProdBuild: boolean): string {
  if (value) {
    return "Дата манифеста: " + new Intl.DateTimeFormat("ru-RU", {
      dateStyle: "long",
      timeStyle: "short",
    }).format(new Date(value))
  }
  return isProdBuild ? "Дата манифеста не указана" : "Локальная сборка"
}

export default function ReleasesPage() {
  const manifest = readReleaseManifest()
  const version = getAppVersion()
  const isProdBuild = !version.endsWith("-dev")
  const releaseUrl = getReleaseUrl() || manifest?.releaseUrl || null
  const commits = getReleaseCommitPreview(manifest?.commits ?? [])

  return (
    <div className="flex min-h-0 flex-col h-full">
      <PageHeader
        crumbs={[{ label: "Система" }, { label: "Релизы" }]}
        actions={
          releaseUrl ? (
            <Link
              href={releaseUrl}
              target="_blank"
              rel="noopener noreferrer"
              className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-8 inline-flex items-center gap-2")}
            >
              <ExternalLinkIcon className="size-4" aria-hidden />
              Открыть релиз
            </Link>
          ) : null
        }
      />

      <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-6">
        <div className="max-w-[960px] mx-auto space-y-6">
          <OpsPanel
            title="Текущая версия"
            description={isProdBuild ? "Версия запущенной сборки MikrotikManager." : "Локальная разработка. Публикация релиза не подтверждена."}
            contentClassName="flex flex-col gap-3 px-5 pb-5"
          >
              <div className="flex flex-wrap items-center gap-3">
                <span className="text-2xl font-semibold tracking-tight break-all">{formatAppVersionLabel(version)}</span>
                <span className="text-sm text-muted-foreground">{isProdBuild ? formatPublishedAt(manifest?.version === version ? manifest.publishedAt : null, true) : "Локальная сборка"}</span>
              </div>
              <p className="text-sm text-muted-foreground">
                Версия формируется автоматически от базы <span className="font-mono">v1.0.0</span> по Conventional Commits.
              </p>
          </OpsPanel>

          {!manifest ? <p role="alert" className="text-sm text-destructive">Метаданные релиза недоступны или повреждены. Дата, ссылка и список коммитов не подтверждены.</p> : manifest.version !== version && isProdBuild ? <p role="status" className="text-sm text-muted-foreground">Манифест относится к {formatAppVersionLabel(manifest.version)}; версия запущенной сборки отличается.</p> : null}

          <OpsPanel
            title="Сводка коммитов"
            description={
              commits.length > 0
                ? `Коммиты манифеста ${formatAppVersionLabel(manifest!.version)}: ${commits.length}.`
                : manifest ? "В манифесте нет коммитов. При публикации список формируется CI." : "Список коммитов не подтверждён."
            }
            contentClassName="px-5 pb-5"
          >
              {commits.length === 0 ? (
                <p className="text-sm text-muted-foreground">{manifest ? "Коммитов для отображения пока нет." : "Нет подтверждённых метаданных."}</p>
              ) : (
                <ul className="flex flex-col gap-3">
                  {commits.map((commit) => (
                    <li key={commit.sha} className="rounded-md border px-3 py-2 break-words">
                      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                        <span className="font-mono uppercase">{commit.type}</span>
                        <span className="font-mono">{commit.shortSha}</span>
                        <span>{commit.author}</span>
                      </div>
                      <p className="mt-1 text-sm break-words">{formatCommitSubject(commit.subject)}</p>
                    </li>
                  ))}
                </ul>
              )}
          </OpsPanel>
        </div>
      </div>
    </div>
  )
}