"use client";

import type { FirmwareInfo } from "@/lib/firmware";
import { cn } from "@/lib/utils";

/** Renders HTML on-device UI mock (preferred) — never uses raster covers. */
export function FirmwarePreview({
  fw,
  className,
  title,
}: {
  fw: FirmwareInfo;
  className?: string;
  title?: string;
}) {
  if (fw.media.preview) {
    return (
      <iframe
        title={title || `${fw.name} UI preview`}
        src={fw.media.preview}
        className={cn("h-full w-full border-0 bg-[#0A1016]", className)}
        loading="lazy"
        sandbox="allow-scripts"
        tabIndex={-1}
      />
    );
  }

  const initials = fw.name
    .replace(/[^A-Za-z0-9\u4e00-\u9fff]+/g, " ")
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? "")
    .join("");

  return (
    <div
      className={cn(
        "flex h-full w-full flex-col items-center justify-center gap-2 bg-[radial-gradient(ellipse_at_30%_20%,rgba(240,197,10,0.18),transparent_55%),linear-gradient(160deg,#1a1610,#0e0c09)]",
        className
      )}
    >
      <span className="font-[family-name:var(--font-display)] text-3xl font-extrabold tracking-tight text-[var(--accent-hot)]/80">
        {initials || "FW"}
      </span>
      <span className="text-[0.65rem] uppercase tracking-[0.14em] text-[var(--muted)]">
        HTML preview soon
      </span>
    </div>
  );
}