import React, { useMemo, useState } from "react";
import { useBrandKit } from "../../../utils/brand";
import { useLocalStorage } from "../../../hooks/useLocalStorage";

// --- Types ---
type Size = "16x9" | "4x3";
type LayoutType = "hubSpoke" | "stepsHorizontal" | "mindmap" | "circularList";

type LibraryItem = {
  id: string;
  name: string;
  layout: LayoutType;
  count: number;
  defaultLabels: string[];
  defaultNotes?: string[];
  colorAIdx?: number; // index into brand accents (primary)
  colorBIdx?: number; // index into brand accents (secondary)
};

// --- Demo library (expand anytime) ---
const LIBRARY: LibraryItem[] = [
  {
    id: "hub6",
    name: "Hub & Spoke (6)",
    layout: "hubSpoke",
    count: 6,
    defaultLabels: ["What","Why","Who","Where","When","How"],
    defaultNotes: ["","Optional","","","",""]
  },
  {
    id: "steps6",
    name: "Steps (6)",
    layout: "stepsHorizontal",
    count: 6,
    defaultLabels: ["Discover","Define","Design","Develop","Deploy","Debrief"],
  },
  {
    id: "mind6",
    name: "Mindmap (6)",
    layout: "mindmap",
    count: 6,
    defaultLabels: ["Strategy","People","Process","Tech","Brand","Finance"],
  },
  {
    id: "circle6",
    name: "Radial Timeline (6)",
    layout: "circularList",
    count: 6,
    defaultLabels: ["Q1","Q2","Q3","Q4","Q5","Q6"],
  },
];

// --- Simple SVG previews for each layout (schematic) ---
function Preview({ layout, count=6, colorA="#0EA5E9", colorB="#64748B" }: {layout: LayoutType; count?: number; colorA?: string; colorB?: string;}) {
  const size = 200;
  const cx = size/2, cy = size/2;
  const R = size*0.32;
  const dot = 12;

  if (layout === "hubSpoke") {
    const pts = Array.from({length: count}, (_,i)=> {
      const a = (Math.PI*2*i)/count - Math.PI/2;
      return { x: cx + R*Math.cos(a), y: cy + R*Math.sin(a) };
    });
    return (
      <svg width="100%" viewBox={`0 0 ${size} ${size}`}>
        <circle cx={cx} cy={cy} r={R*0.6} fill="#0F172A" stroke="#fff" strokeWidth="1"/>
        {pts.map((p,i)=>(
          <g key={i}>
            <line x1={cx} y1={cy} x2={p.x} y2={p.y} stroke="#CBD5E1" strokeWidth="1.5"/>
            <circle cx={p.x} cy={p.y} r={dot/2} fill={i%2?colorB:colorA} stroke="#fff" strokeWidth="1"/>
          </g>
        ))}
      </svg>
    );
  }

  if (layout === "stepsHorizontal") {
    const margin=16, gap=6;
    const boxW=(size - margin*2 - gap*(count-1))/count, boxH=38, y= size*0.45;
    return (
      <svg width="100%" viewBox={`0 0 ${size} ${size}`}>
        {Array.from({length: count}, (_,i)=>{
          const x = margin + i*(boxW+gap);
          return (
            <g key={i}>
              <rect x={x} y={y} width={boxW} height={boxH} rx="8" fill={i%2?colorB:colorA} stroke="#fff" strokeWidth="1"/>
              <text x={x+8} y={y+14} fontSize="10" fill="#fff" fontWeight="700">{String(i+1).padStart(2,"0")}</text>
            </g>
          );
        })}
        <line x1={margin} y1={y+boxH+6} x2={size-margin} y2={y+boxH+6} stroke="#CBD5E1" strokeWidth="1"/>
      </svg>
    );
  }
