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

// DEMO TEMPLATES — replace svg strings with your real SVG masters.
// Use tokens {Brand_Name}, {Tagline}, {Est_Year}
// Colors should reference CSS vars: var(--primary), var(--secondary), var(--accent)
const DEMO_TEMPLATES: LogoTemplate[] = [
  {
    id: "logo-emblem-law-v1",
    name: "Law Firm Emblem",
    previewUrl: "/templates/logo/previews/logo-emblem-law-v1.jpg",
    defaultFields: { Brand_Name: "Name Attorney's At Law", Tagline: "Established Year", Est_Year: "1998" },
    fieldOrder: ["Brand_Name", "Tagline", "Est_Year"],
    defaultColors: { primary: "#231f20", secondary: "#978752", accent: "#6dc282" },
    svg: `
<svg width="2000" height="2000" viewBox="0 0 2000 2000" xmlns="http://www.w3.org/2000/svg">
  <style>
    .stroke { stroke: var(--primary); }
    .fill-primary { fill: var(--primary); }
    .fill-secondary { fill: var(--secondary); }
    .fill-accent { fill: var(--accent); }
    .txt { fill: var(--primary); font-family: 'Poppins', sans-serif; text-anchor: middle; }
  </style>
  <circle cx="1000" cy="1000" r="920" class="stroke" stroke-width="20" fill="none"/>
  <!-- Scales / laurel simplified placeholder -->
  <circle cx="1000" cy="1000" r="400" class="stroke" stroke-width="10" fill="none"/>
  <text x="1000" y="700" class="txt" font-size="110">{Brand_Name}</text>
  <text x="1000" y="1280" class="txt" font-size="80">{Tagline}</text>
  <text x="1000" y="1400" class="txt" font-size="60">{Est_Year}</text>
</svg>`
  },
  {
    id: "logo-wordmark-bakery-v1",
    name: "Baker’s Café Wordmark",
    previewUrl: "/templates/logo/previews/logo-wordmark-bakery-v1.jpg",
    defaultFields: { Brand_Name: "Baker’s Cafe", Tagline: "Breads & Desserts", Est_Year: "2019" },
    fieldOrder: ["Brand_Name", "Tagline", "Est_Year"],
    defaultColors: { primary: "#4b3b32", secondary: "#c9a27d", accent: "#6dc282" },
    svg: `
<svg width="2000" height="800" viewBox="0 0 2000 800" xmlns="http://www.w3.org/2000/svg">
  <style>
    .txt-1 { fill: var(--primary); font-family: 'Poppins', sans-serif; text-anchor: middle; font-weight: 700;}
    .txt-2 { fill: var(--secondary); font-family: 'Inter', sans-serif; text-anchor: middle;}
  </style>
  <text x="1000" y="380" class="txt-1" font-size="180">{Brand_Name}</text>
  <text x="1000" y="520" class="txt-2" font-size="80">{Tagline}</text>
  <text x="1000" y="620" class="txt-2" font-size="48">{Est_Year}</text>
</svg>`
  },
  {
    id: "logo-emblem-cafe-v1",
    name: "Cafe Emblem Badge",
    previewUrl: "/templates/logo/previews/logo-emblem-cafe-v1.jpg",
    defaultFields: { Brand_Name: "Cafe Logo", Tagline: "French Cafe", Est_Year: "Authentic Coffee" },
    fieldOrder: ["Brand_Name", "Tagline", "Est_Year"],
    defaultColors: { primary: "#4b3b32", secondary: "#c49a6c", accent: "#6dc282" },
    svg: `
<svg width="2000" height="2000" viewBox="0 0 2000 2000" xmlns="http://www.w3.org/2000/svg">
  <style>
    .ring { stroke: var(--secondary); stroke-width: 24; fill: none; }
    .txt { fill: var(--primary); font-family: 'Poppins', sans-serif; text-anchor: middle; }
  </style>
  <circle cx="1000" cy="1000" r="820" class="ring"/>
  <text x="1000" y="740" class="txt" font-size="80">{Est_Year}</text>
  <text x="1000" y="1120" class="txt" font-size="160">{Brand_Name}</text>
  <text x="1000" y="1250" class="txt" font-size="96">{Tagline}</text>
</svg>`
  }
];

export default function LogoTemplatesPage() {
  const [selected, setSelected] = useState<LogoTemplate | null>(null);

  return (
    <DashboardTemplatePage title="Logo Templates">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {DEMO_TEMPLATES.map(t => (
          <button
            key={t.id}
            className="group rounded-2xl border border-gray-200 p-3 hover:shadow-md transition"
            onClick={() => setSelected(t)}
          >
            <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">{t.name}</div>
          </button>
        ))}
      </div>

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