cydweb/components/flasher-panel.tsx

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslations } from "next-intl";
import { RefreshCw, Search } from "lucide-react";
import type { FirmwareInfo } from "@/lib/firmware";
import { DEFAULT_BOARD_ID } from "@/lib/boards";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { BoardSelector } from "@/components/board-selector";
import { FirmwareCard } from "@/components/firmware-card";
import { FirmwareDetail } from "@/components/firmware-detail";

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

export function FlasherPanel() {
  const t = useTranslations();
  const [firmwares, setFirmwares] = useState<FirmwareInfo[]>([]);
  const [boardId, setBoardId] = useState(DEFAULT_BOARD_ID);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [query, setQuery] = useState("");
  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[] };
      setFirmwares(data.firmwares ?? []);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
      setFirmwares([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return firmwares.filter((fw) => {
      if (fw.boardId !== boardId) return false;
      if (!q) return true;
      const hay = [
        fw.name,
        fw.summary,
        fw.description,
        fw.project,
        fw.variant,
        ...fw.tags,
      ]
        .filter(Boolean)
        .join(" ")
        .toLowerCase();
      return hay.includes(q);
    });
  }, [firmwares, boardId, query]);

  useEffect(() => {
    if (selectedId && filtered.some((f) => f.id === selectedId)) return;
    setSelectedId(filtered[0]?.id ?? null);
  }, [filtered, selectedId]);

  const selected = filtered.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>
        <BoardSelector
          value={boardId}
          onChange={(id) => {
            setBoardId(id);
            setQuery("");
          }}
        />
      </Card>

      <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] lg:items-start">
        <Card className="min-w-0">
          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
            <div>
              <h2 className="m-0 font-[family-name:var(--font-display)] text-[1.05rem] font-bold">
                {t("firmware.title")}
              </h2>
              <p className="mt-1 m-0 text-xs text-[var(--muted)]">
                {t("firmware.count", { count: filtered.length })}
              </p>
            </div>
            <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>
          </div>

          <label className="relative mb-4 block">
            <Search
              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--muted)]"
              aria-hidden
            />
            <input
              type="search"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder={t("firmware.search")}
              className="w-full rounded-xl border border-[var(--line)] bg-[rgba(0,0,0,0.28)] py-2.5 pr-3 pl-10 text-sm text-[var(--ink)] outline-none placeholder:text-[var(--muted)] focus:border-[rgba(240,197,10,0.45)]"
            />
          </label>

          {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 && !filtered.length && (
            <p className="m-0 text-sm text-[var(--muted)]">
              {t("firmware.empty")}
            </p>
          )}

          <div
            className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3"
            role="listbox"
            aria-label={t("firmware.title")}
          >
            {filtered.map((fw) => (
              <FirmwareCard
                key={fw.id}
                fw={fw}
                active={fw.id === selectedId}
                onSelect={() => setSelectedId(fw.id)}
              />
            ))}
          </div>
        </Card>

        <div className="lg:sticky lg:top-4">
          <FirmwareDetail fw={selected} serialOk={serialOk} />
        </div>
      </div>
    </div>
  );
}