import React, { useEffect, useState } from "react";
import { DashboardTemplatePage } from "./DashboardTemplatePage";
import { useLogoManifest } from "./useLogoManifest";
import { LogoTemplateItem } from "./logo-manifest";
import { LogoCustomizerModal } from "./LogoCustomizerModal";
import { LogoTemplate } from "./logo-types";

export default function LogoTemplatesPage() {
  const state = useLogoManifest("/site/data/manifest.logo.json");
  const [selected, setSelected] = useState<LogoTemplate | null>(null);
  const [loadingSvgId, setLoadingSvgId] = useState<string | null>(null);

  const openTemplate = async (item: LogoTemplateItem) => {
    try {
      setLoadingSvgId(item.id);
      const res = await fetch(item.svgUrl, { cache: "no-cache" });
      if (!res.ok) throw new Error(`Failed to load SVG: ${item.svgUrl}`);
      const svgText = await res.text();
      setSelected({
        id: item.id,
        name: item.name,
        previewUrl: item.previewUrl,
        svg: svgText,
        defaultFields: item.defaultFields,
        fieldOrder: item.fieldOrder,
        defaultColors: item.defaultColors
      });
    } catch (e) {
      console.error(e);
      alert((e as any)?.message || "Failed to load template");
    } finally {
      setLoadingSvgId(null);
    }
  };

  return (
    <DashboardTemplatePage title="Logo Templates">
      {state.status === "loading" || state.status === "idle" ? (
        <div className="text-sm text-gray-500">Loading templates…</div>
      ) : state.status === "error" ? (
        <div className="text-sm text-red-600">Error: {state.error}</div>
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {state.items.map((t) => (
              <button
                key={t.id}
                className="group rounded-2xl border border-gray-200 p-3 hover:shadow-md transition"
                onClick={() => openTemplate(t)}
                disabled={loadingSvgId === t.id}
              >
                <div className="aspect-square rounded-xl bg-white overflow-hidden flex items-center justify-center">
                  {t.previewUrl ? (
                    <img src={t.previewUrl} alt={t.name} className="object-contain w-full h-full" />
                  ) : (
                    <div className="text-sm text-gray-500">Preview</div>
                  )}
                </div>
                <div className="mt-3 text-sm font-medium flex items-center justify-between">
                  <span>{t.name}</span>
                  {loadingSvgId === t.id && (
                    <span className="text-xs text-gray-400">loading…</span>
                  )}
                </div>
              </button>
            ))}
          </div>

          <LogoCustomizerModal
            open={!!selected}
            onOpenChange={(o) => !o && setSelected(null)}
            template={selected || undefined}
          />
        </>
      )}
    </DashboardTemplatePage>
  );
}
