import { useQuery } from "@tanstack/react-query";
import { Info, Sparkles } from "lucide-react";
import { api } from "../lib/api";
import { FRONTEND_VERSION, FRONTEND_SHA, FRONTEND_BUILD_DATE } from "../lib/version";
import Modal from "./Modal";

function fmtDate(d?: string | null): string {
  if (!d) return "—";
  const t = new Date(d);
  return isNaN(t.getTime()) ? d : t.toLocaleString();
}

// About dialog: app + build + schema versions (frontend/backend/database), plus a
// shortcut into the release notes.
export default function About({
  onClose,
  onOpenReleaseNotes,
}: {
  onClose: () => void;
  onOpenReleaseNotes: () => void;
}) {
  const { data } = useQuery({ queryKey: ["version"], queryFn: api.version, staleTime: 5 * 60_000 });

  const rows: [string, string][] = [
    ["Frontend", FRONTEND_VERSION + (FRONTEND_SHA !== "unknown" ? ` · ${FRONTEND_SHA}` : "")],
    [
      "Backend",
      data ? data.app_version + (data.git_sha !== "unknown" ? ` · ${data.git_sha}` : "") : "…",
    ],
    ["Database", data?.db_revision ?? "…"],
    ["Build date", fmtDate(data?.build_date ?? FRONTEND_BUILD_DATE)],
  ];

  return (
    <Modal
      title={
        <span className="flex items-center gap-2">
          <Info className="w-5 h-5 text-accent" /> About
        </span>
      }
      onClose={onClose}
    >
      <div className="flex items-baseline gap-2">
        <div className="text-2xl font-bold tracking-tight">
          Sift<span className="text-accent">lode</span>
        </div>
        <div className="text-sm text-muted">v{FRONTEND_VERSION}</div>
      </div>
      <p className="text-sm text-muted mt-2">
        Self-hosted, multi-user reader for your own YouTube subscriptions.
      </p>

      <div className="mt-4 rounded-xl border border-border overflow-hidden text-sm">
        {rows.map(([k, v], i) => (
          <div
            key={k}
            className={`flex justify-between gap-4 px-3 py-2 ${i % 2 ? "bg-surface/40" : ""}`}
          >
            <span className="text-muted">{k}</span>
            <span className="font-medium text-right break-all">{v}</span>
          </div>
        ))}
      </div>

      <button
        onClick={onOpenReleaseNotes}
        className="mt-4 w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
      >
        <Sparkles className="w-4 h-4" /> What's new
      </button>
    </Modal>
  );
}