"use client";

import { useCallback, useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { RefreshCw } from "lucide-react";
import type { FirmwareInfo } from "@/lib/firmware";
import { formatBytes, cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { EspWebInstall } from "@/components/esp-web-install";

function supportsWebSerial() {
  return typeof navigator !== "undefined" && "serial" in navigator;
}

export function FlasherPanel() {
  const t = useTranslations();
  const [firmwares, setFirmwares] = useState<FirmwareInfo[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [serialOk, setSerialOk] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/firmware", { cache: "no-store" });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = (await res.json()) as { firmwares: FirmwareInfo[] };
      const list = data.firmwares ?? [];
      setFirmwares(list);
      setSelectedId((prev) => {
        if (prev && list.some((f) => f.id === prev)) return prev;
        return list[0]?.id ?? null;
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
      setFirmwares([]);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    setSerialOk(supportsWebSerial());
    void load();
  }, [load]);

  const selected = firmwares.find((f) => f.id === selectedId) ?? null;

  return (
    <div className="flex flex-col gap-5">
      {!serialOk && (
        <Card className="border-[rgba(232,164,90,0.35)] text-[var(--warn)]">
          <p className="m-0 text-sm">{t("browser.unsupported")}</p>
        </Card>
      )}

      <Card>
        <CardHeader>
          <CardTitle>{t("firmware.title")}</CardTitle>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => void load()}
            disabled={loading}
          >
            <RefreshCw className={cn("size-3.5", loading && "animate-spin")} />
            {t("firmware.refresh")}
          </Button>
        </CardHeader>

        <div className="flex flex-col gap-2" role="listbox" aria-label={t("firmware.title")}>
          {loading && !firmwares.length && (
            <p className="m-0 text-sm text-[var(--muted)]">{t("firmware.scanning")}</p>
          )}
          {error && (
            <p className="m-0 text-sm text-[var(--warn)]">
              {t("firmware.error", { message: error })}
            </p>
          )}
          {!loading && !error && !firmwares.length && (
            <p className="m-0 text-sm text-[var(--muted)]">{t("firmware.empty")}</p>
          )}
          {firmwares.map((fw) => {
            const active = fw.id === selectedId;
            const meta = [fw.board, fw.date, fw.git ? `git ${fw.git}` : null]
              .filter(Boolean)
              .join(" · ");
            return (
              <button
                key={fw.id}
                type="button"
                role="option"
                aria-selected={active}
                className={cn(
                  "grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-4 gap-y-1 rounded-[10px] border px-4 py-3.5 text-left transition-colors",
                  active
                    ? "border-[var(--accent)] bg-[rgba(240,197,10,0.1)] shadow-[inset_0_0_0_1px_rgba(240,197,10,0.25)]"
                    : "border-[var(--line)] bg-[rgba(0,0,0,0.2)] hover:border-[rgba(240,197,10,0.35)] hover:bg-[rgba(240,197,10,0.05)]"
                )}
                onClick={() => setSelectedId(fw.id)}
              >
                <span
                  className={cn(
                    "size-4 shrink-0 rounded-full border-2",
                    active
                      ? "border-[var(--accent)] bg-[radial-gradient(circle_at_center,var(--accent)_40%,transparent_45%)]"
                      : "border-[var(--muted)]"
                  )}
                  aria-hidden
                />
                <span className="min-w-0">
                  <span className="block font-semibold leading-snug">{fw.name}</span>
                  <span className="mt-0.5 block text-xs text-[var(--muted)]">
                    {fw.project} / {fw.variant}
                    {meta ? ` · ${meta}` : ""}
                  </span>
                </span>
                <Badge variant="muted" className="justify-self-end tabular-nums">
                  {formatBytes(fw.size)}
                </Badge>
              </button>
            );
          })}
        </div>
      </Card>

      <Card>
        <div className="mb-4 rounded-lg border border-dashed border-[var(--line)] bg-[rgba(0,0,0,0.25)] px-3.5 py-3 text-sm">
          {selected ? (
            <>
              {t("firmware.selectedLabel")}{" "}
              <strong className="font-semibold text-[var(--accent-hot)]">
                {selected.name}
              </strong>
              <span className="text-[var(--muted)]"> ({selected.id})</span>
            </>
          ) : (
            <span className="text-[var(--muted)]">{t("firmware.noneSelected")}</span>
          )}
        </div>

        <EspWebInstall
          manifest={selected?.manifestUrl ?? null}
          label={t("install.cta")}
          disabled={!serialOk || !selected}
        />

        <ol className="mt-5 list-decimal space-y-1.5 pl-5 text-sm text-[var(--muted)]">
          <li>{t("install.steps.1")}</li>
          <li>{t("install.steps.2")}</li>
          <li>{t("install.steps.3")}</li>
          <li>{t("install.steps.4")}</li>
        </ol>
      </Card>
    </div>
  );
}