import React, { useMemo, useState } from "react";

export type FontOption = {
  label: string;          // human name shown on the tile
  family: string;         // CSS font-family to apply (must match your loaded Google Font)
  group?: "Sans" | "Serif" | "Slab" | "Display" | "Script" | "Mono";
};

type Props = {
  value: string;
  onChange: (family: string) => void;
  sampleText: string;     // usually the brand name
  fonts?: FontOption[];   // optional override list
  height?: number;        // px of the grid area
};

const DEFAULT_FONTS: FontOption[] = [
  // Sans workhorses
  { label: "Inter", family: '"Inter", sans-serif', group: "Sans" },
  { label: "Manrope", family: '"Manrope", sans-serif', group: "Sans" },
  { label: "Montserrat", family: '"Montserrat", sans-serif', group: "Sans" },
  { label: "Poppins", family: '"Poppins", sans-serif', group: "Sans" },
  { label: "Roboto", family: '"Roboto", sans-serif', group: "Sans" },
  { label: "Open Sans", family: '"Open Sans", sans-serif', group: "Sans" },
  { label: "Lato", family: '"Lato", sans-serif', group: "Sans" },
  { label: "Work Sans", family: '"Work Sans", sans-serif', group: "Sans" },
  { label: "Nunito", family: '"Nunito", sans-serif', group: "Sans" },
  { label: "Raleway", family: '"Raleway", sans-serif', group: "Sans" },
  { label: "Rubik", family: '"Rubik", sans-serif', group: "Sans" },
  { label: "Barlow", family: '"Barlow", sans-serif', group: "Sans" },
  { label: "Heebo", family: '"Heebo", sans-serif', group: "Sans" },
  { label: "Archivo", family: '"Archivo", sans-serif', group: "Sans" },
  { label: "Catamaran", family: '"Catamaran", sans-serif', group: "Sans" },
  { label: "Lexend", family: '"Lexend", sans-serif', group: "Sans" },
  { label: "Titillium Web", family: '"Titillium Web", sans-serif', group: "Sans" },
  { label: "Chivo", family: '"Chivo", sans-serif', group: "Sans" },
  { label: "Overpass", family: '"Overpass", sans-serif', group: "Sans" },
  { label: "Ubuntu", family: '"Ubuntu", sans-serif', group: "Sans" },

  // Serif / Slab
  { label: "Playfair Display", family: '"Playfair Display", serif', group: "Serif" },
  { label: "Merriweather", family: '"Merriweather", serif', group: "Serif" },
  { label: "Cormorant Garamond", family: '"Cormorant Garamond", serif', group: "Serif" },
  { label: "PT Serif", family: '"PT Serif", serif', group: "Serif" },
  { label: "Domine", family: '"Domine", serif', group: "Serif" },
  { label: "Zilla Slab", family: '"Zilla Slab", serif', group: "Slab" },

  // Display / Condensed / Tech
  { label: "Bebas Neue", family: '"Bebas Neue", sans-serif', group: "Display" },
  { label: "Oswald", family: '"Oswald", sans-serif', group: "Display" },
  { label: "Orbitron", family: '"Orbitron", sans-serif', group: "Display" },
  { label: "Varela Round", family: '"Varela Round", sans-serif', group: "Display" },
  { label: "Play", family: '"Play", sans-serif', group: "Display" },

  // Script (for playful brands)
  { label: "Pacifico", family: '"Pacifico", cursive', group: "Script" },
  { label: "Dancing Script", family: '"Dancing Script", cursive', group: "Script" },
  { label: "Great Vibes", family: '"Great Vibes", cursive', group: "Script" },
  { label: "Permanent Marker", family: '"Permanent Marker", cursive', group: "Script" },
  { label: "Amatic SC", family: '"Amatic SC", cursive', group: "Script" },
];

export function FontPicker({
  value,
  onChange,
  sampleText,
  fonts = DEFAULT_FONTS,
  height = 320,
}: Props) {
  const [query, setQuery] = useState("");
  const [group, setGroup] = useState<FontOption["group"] | "All">("All");

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return fonts.filter((f) => {
      const inGroup = group === "All" || f.group === group;
      const match = !q || f.label.toLowerCase().includes(q);
      return inGroup && match;
    });
  }, [fonts, query, group]);

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <input
          className="px-3 py-2 rounded-md border flex-1"
          placeholder="Search fonts…"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <select
          className="px-3 py-2 rounded-md border"
          value={group}
          onChange={(e) => setGroup(e.target.value as any)}
        >
          <option value="All">All</option>
          <option value="Sans">Sans</option>
          <option value="Serif">Serif</option>
          <option value="Slab">Slab</option>
          <option value="Display">Display</option>
          <option value="Script">Script</option>
        </select>
      </div>

      <div
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 overflow-auto pr-1"
        style={{ maxHeight: height }}
        role="listbox"
        aria-label="Choose a font"
      >
        {filtered.map((f) => {
          const active = f.family === value;
          return (
            <button
              key={f.label}
              onClick={() => onChange(f.family)}
              className={`text-left rounded-lg border p-3 hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-300 ${
                active ? "border-neutral-900" : "border-neutral-200"
              }`}
              role="option"
              aria-selected={active}
              title={f.label}
            >
              <div className="text-[11px] text-neutral-500 mb-1">{f.label}</div>
              <div
                className="leading-snug"
                style={{ fontFamily: f.family, fontWeight: 700, fontSize: 28 }}
              >
                {sampleText || f.label}
              </div>
            </button>
          );
        })}
      </div>

      <div className="text-xs text-neutral-500">
        Tip: This list uses Google Fonts. Make sure the families are included in your
        page’s `<link>` so they render correctly.
      </div>
    </div>
  );
}

export default FontPicker;
