import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";
import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from "recharts";


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

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

const YEAR_MIN = 1990, YEAR_MAX = 2026;
const yearPct = (y) => ((y - YEAR_MIN) / (YEAR_MAX - YEAR_MIN)) * 100;
const fmtM = (v) => (v >= 1000000 ? (v / 1000000).toFixed(v >= 10000000 ? 0 : 1) + "M" : Math.round(v / 1000) + "K");

export default function FourVoicesOneFloat() {
  const lineup = useSQLQuery(`
    SELECT pin_id, display_name, role_2026_parade, origin_label, birth_year,
           signature_work, headline_stat, era_label, era_tagline, active_start,
           active_end, era_color, breakout_year, why_these_four, credentials_line
    FROM "prdp26"."main"."v_lineup"
    ORDER BY breakout_year
  `);

  const reach = useSQLQuery(`
    SELECT pin_id, platform, handle, reach, unit, confidence
    FROM "prdp26"."main"."artist_reach"
    ORDER BY platform, reach DESC
  `);

  const awards = useSQLQuery(`
    SELECT pin_id, year, award
    FROM "prdp26"."main"."artist_awards"
    ORDER BY year
  `);

  const jersey = useSQLQuery(`
    SELECT cta_label, product_line, sku
    FROM "prdp26"."main"."commerce_cta"
    WHERE cta_id = 'CTA-FLOAT'
  `);

  const artists = Array.isArray(lineup.data) ? lineup.data : [];
  const reachRows = Array.isArray(reach.data) ? reach.data : [];
  const awardRows = Array.isArray(awards.data) ? awards.data : [];
  const jerseyRow = Array.isArray(jersey.data) && jersey.data[0] ? jersey.data[0] : null;

  const [voice, setVoice] = useDiveState("voice", "PIN-DY");
  const sel = artists.find((a) => a.pin_id === voice) || artists[0];
  const colorOf = (pid) => (artists.find((a) => a.pin_id === pid) || {}).era_color || C.gold;
  const nameOf = (pid) => (artists.find((a) => a.pin_id === pid) || {}).display_name || pid;

  const platforms = ["Instagram", "YouTube", "Spotify", "Facebook"];
  const bubbles = reachRows
    .filter((r) => platforms.includes(r.platform))
    .map((r) => ({ platform: r.platform, reach: N(r.reach), pin_id: r.pin_id, handle: r.handle, unit: r.unit, confidence: r.confidence }));

  return (
    <div className="p-6" style={{ background: C.bg, color: C.cream }}>
      {/* Header */}
      <div className="flex justify-between items-start">
        <div>
          <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.25em" }}>
            § 02 · WRTH × 69th NPRDP · Somos Más Que 100×35
          </p>
          <h1 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>Four Voices, One Float</h1>
          <p className="text-sm" style={{ color: C.muted }}>Four complementary eras of Puerto Rican influence, 1993 → today</p>
        </div>
        <div className="text-right">
          <p className="text-4xl font-bold" style={{ color: C.gold }}>
            {reach.isLoading ? "…" : fmtM(bubbles.filter((b) => b.platform === "Instagram").reduce((s, b) => s + b.reach, 0))}
          </p>
          <p className="text-xs uppercase" style={{ color: C.muted, letterSpacing: "0.1em" }}>combined IG reach</p>
        </div>
      </div>

      {/* Era arc — 1990 → 2026 */}
      <div className="mt-5 mb-2 relative" style={{ height: 96 }}>
        <div className="absolute" style={{ left: 0, right: 0, top: 44, height: 1, background: C.line }} />
        {[1990, 2000, 2010, 2020, 2026].map((y) => (
          <span key={y} className="absolute text-xs" style={{ left: `${yearPct(y)}%`, top: 52, color: C.muted, transform: "translateX(-50%)" }}>{y}</span>
        ))}
        {lineup.isLoading ? (
          <div className="animate-pulse rounded absolute" style={{ left: 0, right: 0, top: 20, height: 40, background: C.panel }} />
        ) : artists.map((a, i) => {
          const active = a.pin_id === voice;
          const top = i % 2 === 0 ? 30 : 40;
          return (
            <div key={a.pin_id}>
              {/* active-years span */}
              <div onClick={() => setVoice(a.pin_id)}
                className="absolute rounded-full"
                style={{
                  left: `${yearPct(N(a.active_start))}%`,
                  width: `${yearPct(N(a.active_end)) - yearPct(N(a.active_start))}%`,
                  top, height: 5, background: a.era_color,
                  opacity: active ? 1 : 0.32, cursor: "pointer",
                  boxShadow: active ? `0 0 10px ${a.era_color}` : "none",
                }} />
              {/* breakout diamond */}
              <div onClick={() => setVoice(a.pin_id)}
                className="absolute"
                style={{
                  left: `${yearPct(N(a.breakout_year))}%`, top: top - 4,
                  width: 12, height: 12, background: a.era_color,
                  transform: "translateX(-50%) rotate(45deg)",
                  border: `2px solid ${C.bg}`, cursor: "pointer",
                  opacity: active ? 1 : 0.55,
                }} />
              <span onClick={() => setVoice(a.pin_id)}
                className="absolute text-xs font-semibold"
                style={{
                  left: `${Math.min(yearPct(N(a.breakout_year)), 88)}%`, top: top - 24,
                  color: active ? a.era_color : C.muted, cursor: "pointer",
                  transform: "translateX(-50%)", whiteSpace: "nowrap",
                }}>
                {N(a.breakout_year)} · {a.era_label}
              </span>
            </div>
          );
        })}
      </div>

      <div className="grid grid-cols-5 gap-6">
        {/* Selected voice — hero card */}
        <div className="col-span-2 p-5 rounded relative overflow-hidden"
          style={{ background: C.panel, border: `1px solid ${sel ? sel.era_color : C.line}` }}>
          {/* corner crosshair */}
          <span className="absolute text-xs" style={{ top: 6, right: 10, color: sel ? sel.era_color : C.gold }}>+</span>
          {lineup.isLoading || !sel ? (
            <div className="animate-pulse space-y-2">
              <div className="h-5 rounded w-2/3" style={{ background: C.line }} />
              <div className="h-4 rounded w-1/2" style={{ background: C.line }} />
              <div className="h-4 rounded w-3/4" style={{ background: C.line }} />
            </div>
          ) : (
            <div>
              <p className="text-xs uppercase font-semibold" style={{ color: sel.era_color, letterSpacing: "0.2em" }}>
                {sel.era_label} — {sel.era_tagline}
              </p>
              <h2 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>{sel.display_name}</h2>
              <p className="text-xs mt-1" style={{ color: C.muted }}>
                {sel.role_2026_parade} · {sel.origin_label} · active {N(sel.active_start)}–present
              </p>
              <p className="text-sm mt-3" style={{ color: C.cream, lineHeight: 1.5 }}>{sel.why_these_four}</p>
              <p className="text-sm mt-3" style={{ color: C.teal }}>{sel.credentials_line}</p>
              <div className="mt-3 pt-3" style={{ borderTop: `1px solid ${C.line}` }}>
                {awards.isLoading ? (
                  <div className="animate-pulse h-4 rounded w-3/4" style={{ background: C.line }} />
                ) : (
                  awardRows.filter((w) => w.pin_id === sel.pin_id).map((w) => (
                    <p key={w.award} className="text-xs mb-1" style={{ color: C.muted }}>
                      <span style={{ color: sel.era_color, fontWeight: 600 }}>{N(w.year)}</span> — {w.award}
                    </p>
                  ))
                )}
              </div>
            </div>
          )}
        </div>

        {/* Reach bubble field */}
        <div className="col-span-3">
          <p className="text-xs uppercase mb-1" style={{ color: C.muted, letterSpacing: "0.15em" }}>
            Comparative reach by platform — bubble = audience size (log scale) · tap to switch voice
          </p>
          {reach.isLoading ? (
            <div className="animate-pulse rounded" style={{ height: 280, background: C.panel }} />
          ) : (
            <ResponsiveContainer width="100%" height={280}>
              <ScatterChart margin={{ top: 16, right: 16, bottom: 4, left: 4 }}>
                <CartesianGrid strokeDasharray="3 3" stroke={C.line} />
                <XAxis dataKey="platform" type="category" allowDuplicatedCategory={false}
                  tick={{ fill: C.muted, fontSize: 11 }} axisLine={{ stroke: C.line }} tickLine={false} />
                <YAxis dataKey="reach" type="number" scale="log" domain={[80000, 80000000]}
                  allowDataOverflow ticks={[100000, 1000000, 10000000, 50000000]}
                  tickFormatter={fmtM} tick={{ fill: C.muted, fontSize: 11 }}
                  axisLine={{ stroke: C.line }} tickLine={false} width={44} />
                <ZAxis dataKey="reach" range={[120, 1700]} />
                <Tooltip cursor={{ strokeDasharray: "3 3", stroke: C.muted }}
                  content={({ active, payload }) => {
                    if (!active || !payload || !payload.length) return null;
                    const d = payload[0].payload;
                    return (
                      <div className="p-2 rounded text-xs" style={{ background: C.bg, border: `1px solid ${colorOf(d.pin_id)}`, color: C.cream }}>
                        <p className="font-semibold" style={{ color: colorOf(d.pin_id) }}>{nameOf(d.pin_id)}</p>
                        <p>{d.platform} · {d.handle}</p>
                        <p>{fmtM(d.reach)} {d.unit}{d.confidence !== "sourced" ? " (approx)" : ""}</p>
                      </div>
                    );
                  }} />
                <Scatter data={bubbles} onClick={(d) => d && d.pin_id && setVoice(d.pin_id)}>
                  {bubbles.map((b, i) => (
                    <Cell key={i} fill={colorOf(b.pin_id)}
                      fillOpacity={b.pin_id === voice ? 0.95 : 0.28}
                      stroke={b.pin_id === voice ? C.cream : colorOf(b.pin_id)}
                      strokeWidth={b.pin_id === voice ? 1.5 : 0.5}
                      style={{ cursor: "pointer" }} />
                  ))}
                </Scatter>
              </ScatterChart>
            </ResponsiveContainer>
          )}
          <p className="text-xs" style={{ color: C.muted }}>
            IG counts sourced Jun 10 2026; YouTube/Spotify/Facebook approximate — verify before broadcast. Reach isn't the whole story: two voices predate the follower era.
          </p>
        </div>
      </div>

      {/* Cross-fandom funnel → shared jersey */}
      <div className="mt-5 p-4 rounded flex items-center gap-3 flex-wrap"
        style={{ background: C.panel, border: `1px solid ${C.gold}` }}>
        {artists.map((a) => (
          <button key={a.pin_id} onClick={() => setVoice(a.pin_id)}
            className="text-xs px-3 py-2 rounded font-semibold"
            style={{
              background: a.pin_id === voice ? a.era_color : "transparent",
              color: a.pin_id === voice ? C.bg : a.era_color,
              border: `1px solid ${a.era_color}`, cursor: "pointer",
            }}>
            {a.display_name}
          </button>
        ))}
        <span style={{ color: C.muted }}>→</span>
        <div className="flex-1" style={{ minWidth: 220 }}>
          {jersey.isLoading ? (
            <div className="animate-pulse h-5 rounded w-2/3" style={{ background: C.line }} />
          ) : jerseyRow ? (
            <p className="text-sm font-semibold" style={{ color: C.gold }}>
              🛒 {jerseyRow.cta_label} — {jerseyRow.product_line} · {jerseyRow.sku}
            </p>
          ) : null}
          <p className="text-xs" style={{ color: C.muted }}>Every fandom, one funnel. All four cards land here.</p>
        </div>
      </div>

      <p className="text-xs mt-4" style={{ color: C.muted }}>
        WRTH · prdp26 · Four eras — The Crown 1993, The Pioneer 2004, The Storyteller 2015, The Streamer 2017 — one float on Fifth Ave, June 14 2026. Stamped 2026-06-10.
      </p>
    </div>
  );
}

WRTH × 69th NPRDP (June 14, 2026). The float lineup as four complementary eras of Puerto Rican influence: Dayanara Torres (The Crown, 1993), Daddy Yankee (The Pioneer, 2004), Anthony Ramos (The Storyteller, 2015), Ozuna (The Streamer, 2017). Interactive era arc, log-scale reach bubbles by platform, award timelines, and the cross-fandom funnel to the shared WRTH × Lila Nikole float jersey. Powered by prdp26.

WRTH x Lila Nikole - PRDP26 · Four Voices, One Float

Comments