import { useState } from "react";
import HexLattice, { HexNode } from "./HexLattice";

export default function HexLatticeDemo() {
  const [activeNode, setActiveNode] = useState<string | undefined>();

  const demoNodes: HexNode[] = [
    // R1 — Inner Circle (all filled for demo)
    { id: "r1-0", ring: 1, position: 0, label: "Alex", type: "person", resonanceSignal: "hearts" },
    { id: "r1-1", ring: 1, position: 1, label: "Sam", type: "person", resonanceSignal: "stars" },
    { id: "r1-2", ring: 1, position: 2, label: "Jordan", type: "person", resonanceSignal: "hearts" },
    { id: "r1-3", ring: 1, position: 3, label: "Morgan", type: "dim" },
    { id: "r1-4", ring: 1, position: 4, label: "Taylor", type: "person" },
    { id: "r1-5", ring: 1, position: 5, label: "Casey", type: "person", resonanceSignal: "moons" },
    
    // R2 — Archetypes (partially filled)
    { id: "r2-0", ring: 2, position: 0, label: "Hero", type: "person", resonanceSignal: "stars" },
    { id: "r2-1", ring: 2, position: 3, label: "Sage", type: "person", resonanceSignal: "hourglass" },
    { id: "r2-2", ring: 2, position: 6, label: "Nurturer", type: "person", resonanceSignal: "balloon" },
    { id: "r2-3", ring: 2, position: 9, label: "Explorer", type: "empty" },
    
    // R3 — The Longing (some filled, some empty)
    { id: "r3-0", ring: 3, position: 1, type: "person", resonanceSignal: "stars" },
    { id: "r3-1", ring: 3, position: 5, type: "person", resonanceSignal: "hearts" },
    { id: "r3-2", ring: 3, position: 10, type: "empty" },
    { id: "r3-3", ring: 3, position: 14, type: "person", resonanceSignal: "moons" },
    
    // R4 — The Echo
    { id: "r4-0", ring: 4, position: 2, type: "person", resonanceSignal: "balloon" },
    { id: "r4-1", ring: 4, position: 8, type: "person", resonanceSignal: "stars" },
    { id: "r4-2", ring: 4, position: 15, type: "empty" },
    
    // R5 — The Wave
    { id: "r5-0", ring: 5, position: 3, type: "person", resonanceSignal: "hearts" },
    { id: "r5-1", ring: 5, position: 12, type: "empty" },
    
    // R6 — The Current (ambient — only signals shown)
    { id: "r6-0", ring: 6, position: 0, type: "resonance-hot" },
    { id: "r6-1", ring: 6, position: 6, type: "resonance-warm" },
    { id: "r6-2", ring: 6, position: 12, type: "resonance-cool" },
    { id: "r6-3", ring: 6, position: 18, type: "resonance-hot" },
    { id: "r6-4", ring: 6, position: 24, type: "resonance-warm" },
    { id: "r6-5", ring: 6, position: 30, type: "empty" },
  ];

  const handleNodeClick = (node: HexNode) => {
    setActiveNode(node.id);
  };

  return (
    <div style={{
      minHeight: "100vh",
      background: "#0d0d12",
      color: "#e8e0d4",
      padding: "32px",
      fontFamily: "system-ui, sans-serif",
    }}>
      <div style={{ maxWidth: 600, margin: "0 auto" }}>
        <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 8, color: "#d4a574" }}>
          Cascade — Hex Lattice
        </h1>
        <p style={{ fontSize: 14, color: "#8a8a9a", marginBottom: 24 }}>
          Rings 1–6 with resonance signals · Click any hex to select
        </p>
        
        <HexLattice
          nodes={demoNodes}
          onNodeClick={handleNodeClick}
          activeNodeId={activeNode}
          showLabels={true}
          size="medium"
        />
        
        <div style={{ marginTop: 24, padding: 16, background: "#16161e", borderRadius: 12 }}>
          <p style={{ fontSize: 13, color: "#8a8a9a", marginBottom: 8 }}>
            {activeNode
              ? `Selected: ${activeNode}`
              : "Click a hex to see selection state"}
          </p>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", fontSize: 12 }}>
            <span style={{ color: "#ff6b8a" }}>❤ Hearts</span>
            <span style={{ color: "#ffd93d" }}>⭐ Stars</span>
            <span style={{ color: "#a8d4ff" }}>🌙 Moons</span>
            <span style={{ color: "#c9a8d4" }}>⏳ Hourglass</span>
            <span style={{ color: "#ff9f43" }}>🎈 Balloon</span>
          </div>
        </div>
      </div>
    </div>
  );
}