"use client";

import { ChangeEvent, useRef, useState } from "react";
import { Loader2, Type, Upload } from "lucide-react";
import Button from "@/components/ui/Button";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

export type MenuBoardFont = { preset: "modern" | "editorial" | "rounded" | "mono" | "custom"; url?: string | null };

const OPTIONS: Array<{ value: MenuBoardFont["preset"]; label: "modernSans" | "editorialSerif" | "friendlyRounded" | "monospace"; sample: string }> = [
  { value: "modern", label: "modernSans", sample: "font-sans" },
  { value: "editorial", label: "editorialSerif", sample: "font-serif" },
  { value: "rounded", label: "friendlyRounded", sample: "font-sans" },
  { value: "mono", label: "monospace", sample: "font-mono" },
];

export default function MenuBoardTypographyControl({ businessId, font, disabled, onChange }: { businessId: string; font?: MenuBoardFont; disabled?: boolean; onChange: (font: MenuBoardFont) => void }) {
  const t = useMenuBoardText();
  const inputRef = useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState("");
  const selected = font ?? { preset: "modern" as const };

  async function upload(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file || disabled) return;
    setUploading(true); setError("");
    try {
      const data = new FormData(); data.set("file", file);
      const response = await fetch(`/api/businesses/${businessId}/menu-boards/upload`, { method: "POST", body: data });
      const result = await response.json().catch(() => ({}));
      if (!response.ok || result.type !== "font" || typeof result.url !== "string") throw new Error(typeof result.error === "string" ? result.error : "Font upload failed");
      onChange({ preset: "custom", url: result.url });
    } catch (cause) { setError(cause instanceof Error ? cause.message : "Font upload failed"); }
    finally { setUploading(false); event.target.value = ""; }
  }

  return <div className="rounded-xl border border-[var(--border)] p-4"><div><h3 className="text-sm font-semibold text-[var(--text)]">{t("typography")}</h3><p className="mt-1 text-xs text-[var(--text-faint)]">{t("typographyDescription")}</p></div><div className="mt-3 grid gap-2 sm:grid-cols-2">{OPTIONS.map((option) => <button key={option.value} type="button" disabled={disabled} onClick={() => onChange({ preset: option.value })} className={`rounded-lg border p-3 text-left transition-colors ${selected.preset === option.value ? "border-[var(--accent)] bg-[var(--accent-muted)]" : "border-[var(--border)] hover:bg-[var(--bg-hover)]"}`}><span className={`block text-base ${option.sample}`}>{t(option.label)}</span><span className="mt-1 block text-xs text-[var(--text-faint)]">Aa Bb Cc</span></button>)}<button type="button" disabled={disabled || uploading} onClick={() => inputRef.current?.click()} className={`rounded-lg border p-3 text-left transition-colors ${selected.preset === "custom" ? "border-[var(--accent)] bg-[var(--accent-muted)]" : "border-[var(--border)] hover:bg-[var(--bg-hover)]"}`}><span className="flex items-center gap-2 text-base"><Type className="h-4 w-4" />{selected.preset === "custom" ? t("customFontSelected") : t("uploadCustomFont")}</span><span className="mt-1 block text-xs text-[var(--text-faint)]">WOFF2, WOFF, TTF, or OTF</span></button></div><div className="mt-3"><Button type="button" variant="secondary" size="sm" disabled={disabled || uploading} onClick={() => inputRef.current?.click()}>{uploading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Upload className="h-3.5 w-3.5" />}{uploading ? t("uploadingFont") : t("uploadFont")}</Button>{error && <p className="mt-2 text-xs text-red-400">{error}</p>}</div><input ref={inputRef} className="hidden" type="file" accept="font/woff2,font/woff,font/ttf,font/otf,.woff2,.woff,.ttf,.otf" onChange={upload} disabled={disabled || uploading} /></div>;
}