import { useState } from "react";
import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";


export const REQUIRED_DATABASES = [
  { type: 'database', path: 'md:prdp26', alias: 'prdp26' }
];
const N = (v) => (v != null ? Number(v) : 0);

// WRTH house palette
const C = {
  bg: "#0E1B1B", panel: "#122222", gold: "#C9A24A", teal: "#6FB89A",
  coral: "#D17765", cream: "#F7EAD1", muted: "#9DB0A6", line: "#24403A",
};

// Island bounds for the pin projection (approx)
const LON_MIN = -67.38, LON_MAX = -65.18, LAT_MIN = 17.83, LAT_MAX = 18.60;
const MAP_W = 720, MAP_H = 250;
const px = (lon) => ((lon - LON_MIN) / (LON_MAX - LON_MIN)) * MAP_W;
const py = (lat) => ((LAT_MAX - lat) / (LAT_MAX - LAT_MIN)) * MAP_H;

export default function CulturalOriginMap() {
  // Live queries -------------------------------------------------
  const counter = useSQLQuery(`
    SELECT total_pins, real_pins, pins_last_hour, municipalities_represented
    FROM "prdp26"."main"."v_live_counter"
  `);

  const heroes = useSQLQuery(`
    SELECT pin_id, display_name, role_2026_parade, origin_label, lat, lng,
           birth_year, signature_work, headline_stat, pin_color_hex, sort_order, pin_type,
           micro_doc_title, target_runtime_sec, cta_label, sku
    FROM "prdp26"."main"."v_artist_card"
    ORDER BY sort_order
  `);

  const munis = useSQLQuery(`
    SELECT municipality, municipality_slug, lat, lng, island_region, jersey_sku, pin_count
    FROM "prdp26"."main"."v_pins_by_municipality"
    ORDER BY municipality
  `);

  const regions = useSQLQuery(`
    SELECT region_id, region_label, region_group, pin_count
    FROM "prdp26"."main"."v_pins_by_region"
    WHERE region_id NOT IN ('INTL')
    ORDER BY pin_count DESC, sort_order
  `);

  const heroRows = Array.isArray(heroes.data) ? heroes.data : [];
  const muniRows = Array.isArray(munis.data) ? munis.data : [];
  const regionRows = Array.isArray(regions.data) ? regions.data : [];
  const counterRow = Array.isArray(counter.data) && counter.data[0] ? counter.data[0] : null;

  // Selection + participatory layer ------------------------------
  const [selected, setSelected] = useDiveState("selected", "PIN-VB");
  const [myTown, setMyTown] = useState("");
  const [myRegion, setMyRegion] = useState("");
  const [localPins, setLocalPins] = useState([]);

  const islandHeroes = heroRows.filter((h) => N(h.lat) < 20);
  const diasporaHeroes = heroRows.filter((h) => N(h.lat) >= 20);
  const sel = heroRows.find((h) => h.pin_id === selected);
  const selMuni = muniRows.find((m) => "MUNI-" + m.municipality_slug === selected);

  const dropPin = () => {
    if (!myTown || !myRegion) return;
    const m = muniRows.find((x) => x.municipality === myTown);
    if (m) setLocalPins([...localPins, { municipality: myTown, lat: N(m.lat), lng: N(m.lng), region: myRegion }]);
  };

  const kpi = (label, value, accent) => (
    <div>
      {counter.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: 40, width: 80, background: C.line }} />
      ) : (
        <p className="text-4xl font-bold" style={{ color: accent || C.cream }}>{value}</p>
      )}
      <p className="text-xs mt-1 uppercase" style={{ color: C.muted, letterSpacing: "0.1em" }}>{label}</p>
    </div>
  );

  return (
    <div className="p-6" style={{ background: C.bg, color: C.cream, minHeight: 600 }}>
      {/* Header */}
      <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.25em" }}>
        § 01 · WRTH × 69th National Puerto Rican Day Parade · June 14 2026
      </p>
      <h1 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>
        The Cultural Origin Map
      </h1>
      <p className="text-sm mb-5" style={{ color: C.muted }}>
        Where the float comes from, and where you come from — Somos Más Que 100×35
      </p>

      {/* KPIs */}
      <div className="grid grid-cols-4 gap-8 mb-6">
        {kpi("Diaspora pins", counterRow ? N(counterRow.total_pins) + localPins.length : "—", C.gold)}
        {kpi("Pins last hour", counterRow ? N(counterRow.pins_last_hour) + localPins.length : "—", C.teal)}
        {kpi("Municipios on the map", counterRow ? N(counterRow.municipalities_represented) : "—", C.cream)}
        {kpi("Float origin pins", heroRows.length || "—", C.coral)}
      </div>

      {/* Island map */}
      <p className="text-xs uppercase mb-1" style={{ color: C.muted, letterSpacing: "0.15em" }}>
        100 × 35 — tap a gold pin for the artist, any dot for its barrio jersey
      </p>
      {munis.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: MAP_H, background: C.panel }} />
      ) : (
        <svg viewBox={`0 0 ${MAP_W} ${MAP_H}`} width="100%" style={{ background: C.panel, borderRadius: 6, border: `1px solid ${C.line}` }}>
          {/* municipality dots (the island silhouette) */}
          {muniRows.map((m) => {
            const r = 3 + Math.sqrt(N(m.pin_count)) * 3;
            const id = "MUNI-" + m.municipality_slug;
            return (
              <circle key={id} cx={px(N(m.lng))} cy={py(N(m.lat))} r={r}
                fill={selected === id ? C.teal : N(m.pin_count) > 0 ? "#3E6B5C" : "#27443C"}
                stroke={selected === id ? C.cream : "none"} strokeWidth={1.5}
                style={{ cursor: "pointer" }} onClick={() => setSelected(id)}>
                <title>{m.municipality} · {N(m.pin_count)} pins</title>
              </circle>
            );
          })}
          {/* visitor pins added this session */}
          {localPins.map((p, i) => (
            <circle key={"local" + i} cx={px(p.lng)} cy={py(p.lat)} r={5} fill={C.teal} stroke={C.cream} strokeWidth={1} />
          ))}
          {/* hero pins */}
          {islandHeroes.map((h) => (
            <g key={h.pin_id} style={{ cursor: "pointer" }} onClick={() => setSelected(h.pin_id)}>
              <circle cx={px(N(h.lng))} cy={py(N(h.lat))} r={selected === h.pin_id ? 11 : 8}
                fill={h.pin_color_hex || C.gold} stroke={C.bg} strokeWidth={2} />
              <text x={px(N(h.lng))} y={py(N(h.lat)) - 14} textAnchor="middle"
                fontSize="11" fill={C.cream} fontWeight="600">{h.display_name}</text>
            </g>
          ))}
        </svg>
      )}

      {/* Diaspora hero chips */}
      <div className="flex gap-2 mt-3 mb-5 flex-wrap">
        {diasporaHeroes.map((h) => (
          <button key={h.pin_id} onClick={() => setSelected(h.pin_id)}
            className="text-xs px-3 py-2 rounded"
            style={{
              background: selected === h.pin_id ? C.gold : C.panel,
              color: selected === h.pin_id ? C.bg : C.cream,
              border: `1px solid ${selected === h.pin_id ? C.gold : C.line}`, cursor: "pointer",
            }}>
            {h.display_name} · {h.origin_label}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-2 gap-6">
        {/* Detail card */}
        <div className="p-4 rounded" style={{ background: C.panel, border: `1px solid ${C.line}` }}>
          {heroes.isLoading ? (
            <div className="animate-pulse space-y-2">
              <div className="h-4 rounded w-3/4" style={{ background: C.line }} />
              <div className="h-4 rounded w-1/2" style={{ background: C.line }} />
            </div>
          ) : sel ? (
            <div>
              <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.15em" }}>{sel.role_2026_parade}</p>
              <h2 className="text-xl font-semibold mt-1" style={{ color: C.cream }}>
                {sel.display_name}{sel.birth_year ? <span style={{ color: C.muted, fontWeight: 400 }}> · b. {N(sel.birth_year)}</span> : null}
              </h2>
              <p className="text-sm mt-1" style={{ color: C.teal }}>{sel.origin_label}</p>
              <p className="text-sm mt-2" style={{ color: C.cream }}><span style={{ color: C.muted }}>Signature: </span>{sel.signature_work}</p>
              <p className="text-sm mt-2" style={{ color: C.muted }}>{sel.headline_stat}</p>
              <div className="mt-3 pt-3" style={{ borderTop: `1px solid ${C.line}` }}>
                <p className="text-xs" style={{ color: C.muted }}>▶ {sel.micro_doc_title} ({N(sel.target_runtime_sec)}s micro-doc)</p>
                {sel.cta_label ? (
                  <p className="text-sm mt-2 font-semibold" style={{ color: C.gold }}>🛒 {sel.cta_label} → {sel.sku}</p>
                ) : null}
              </div>
            </div>
          ) : selMuni ? (
            <div>
              <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.15em" }}>{selMuni.island_region} · municipio</p>
              <h2 className="text-xl font-semibold mt-1" style={{ color: C.cream }}>{selMuni.municipality}</h2>
              <p className="text-sm mt-2" style={{ color: C.muted }}>{N(selMuni.pin_count)} diaspora pins from this town</p>
              <p className="text-sm mt-3 font-semibold" style={{ color: C.gold }}>🛒 Rep your barrio → {selMuni.jersey_sku}</p>
            </div>
          ) : (
            <p className="text-sm" style={{ color: C.muted }}>Select a pin on the map.</p>
          )}
        </div>

        {/* Right column: add-your-pin + region table */}
        <div>
          <div className="p-4 rounded mb-4" style={{ background: C.panel, border: `1px solid ${C.gold}` }}>
            <p className="text-xs uppercase mb-2" style={{ color: C.gold, letterSpacing: "0.15em" }}>Drop your pin — join the diaspora</p>
            <div className="flex gap-2">
              <select value={myTown} onChange={(e) => setMyTown(e.target.value)}
                className="text-xs p-2 rounded flex-1" style={{ background: C.bg, color: C.cream, border: `1px solid ${C.line}` }}>
                <option value="">Family&apos;s town…</option>
                {muniRows.map((m) => <option key={m.municipality}>{m.municipality}</option>)}
              </select>
              <select value={myRegion} onChange={(e) => setMyRegion(e.target.value)}
                className="text-xs p-2 rounded flex-1" style={{ background: C.bg, color: C.cream, border: `1px solid ${C.line}` }}>
                <option value="">Where you live now…</option>
                {regionRows.map((r) => <option key={r.region_id} value={r.region_id}>{r.region_label}</option>)}
              </select>
              <button onClick={dropPin} className="text-xs px-3 rounded font-semibold"
                style={{ background: C.gold, color: C.bg, border: "none", cursor: "pointer" }}>Pin it</button>
            </div>
            <p className="text-xs mt-2" style={{ color: C.muted }}>
              Session preview — production pins write via the WRTH ingest API into prdp26.visitor_pins.
            </p>
          </div>

          {regions.isLoading ? (
            <div className="animate-pulse rounded" style={{ height: 150, background: C.panel }} />
          ) : (
            <table className="w-full text-sm">
              <thead>
                <tr style={{ color: C.muted }} className="text-left text-xs uppercase">
                  <th className="pb-1">Diaspora region</th><th className="pb-1 text-right">Pins</th>
                </tr>
              </thead>
              <tbody>
                {regionRows.filter((r) => N(r.pin_count) > 0).slice(0, 7).map((r) => (
                  <tr key={r.region_id} style={{ borderTop: `1px solid ${C.line}` }}>
                    <td className="py-1" style={{ color: C.cream }}>{r.region_label}</td>
                    <td className="py-1 text-right font-semibold" style={{ color: C.teal }}>
                      {N(r.pin_count) + localPins.filter((p) => p.region === r.region_id).length}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      <p className="text-xs mt-5" style={{ color: C.muted }}>
        WRTH · prdp26 · 3.2M on the island, 5.8M+ across the States — one map, one people. Stamped 2026-06-10.
      </p>
    </div>
  );
}

WRTH × 69th National Puerto Rican Day Parade (June 14, 2026). Island origin map with hero artist pins (Daddy Yankee, Ozuna, Dayanara Torres), diaspora honorees (Anthony Ramos, Lila Nikole), the Vega Baja dedication, live visitor diaspora pins by region, and Rep Your Barrio commerce CTAs. Powered by prdp26.

WRTH x LILA Nikole - PRDP26 · The Cultural Origin Map

Comments