import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";
import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Tooltip } 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 ARTIST_COLOR = { "PIN-DY": "#C9A24A", "PIN-OZ": "#6FB89A", "PIN-AR": "#F7EAD1", "PIN-DT": "#D17765" };
const fmt$ = (v) => "$" + (v >= 1000 ? (v / 1000).toFixed(v >= 100000 ? 0 : 1) + "K" : v);

export default function CollectorDNA() {
  const dna = useSQLQuery(`
    SELECT pin_id, display_name, persona_name, category_id, category_label,
           wrth_vertical, sort_order, affinity, evidence_level, note
    FROM "prdp26"."main"."v_collector_dna"
    ORDER BY sort_order, pin_id
  `);

  const personas = useSQLQuery(`
    SELECT pin_id, persona_name, collects_summary, signature_style, anchor_note, evidence_level
    FROM "prdp26"."main"."collector_personas"
  `);

  const vault = useSQLQuery(`
    SELECT pin_id, display_name, category_label, item_name, oracle_low_usd,
           oracle_high_usd, provenance_status, auth_layer, sort_order
    FROM "prdp26"."main"."v_vault"
    ORDER BY pin_id, sort_order
  `);

  const ctas = useSQLQuery(`
    SELECT cta_id, cta_label, product_line, sku
    FROM "prdp26"."main"."commerce_cta"
    WHERE cta_id IN ('CTA-VAULT','CTA-COLL','CTA-COLLP')
    ORDER BY cta_id
  `);

  const dnaRows = Array.isArray(dna.data) ? dna.data : [];
  const personaRows = Array.isArray(personas.data) ? personas.data : [];
  const vaultRows = Array.isArray(vault.data) ? vault.data : [];
  const ctaRows = Array.isArray(ctas.data) ? ctas.data : [];

  const [collector, setCollector] = useDiveState("collector", "PIN-DY");
  const [category, setCategory] = useDiveState("category", "ALL");

  const artists = [...new Map(dnaRows.map((r) => [r.pin_id, { pin_id: r.pin_id, name: r.display_name, persona: r.persona_name }])).values()];
  const categories = [...new Map(dnaRows.map((r) => [r.category_id, { id: r.category_id, label: r.category_label, vertical: r.wrth_vertical, sort: N(r.sort_order) }])).values()].sort((a, b) => a.sort - b.sort);

  // Pivot for the radar: one row per category, one key per artist
  const radarData = categories.map((c) => {
    const row = { category: c.label.replace(" Memorabilia", "").replace(" & Stage Archives", " Archives").replace(" & Artisanal", "").replace(" & Fashion", "") };
    dnaRows.filter((r) => r.category_id === c.id).forEach((r) => { row[r.pin_id] = N(r.affinity); });
    return row;
  });

  const selPersona = personaRows.find((p) => p.pin_id === collector);
  const selArtist = artists.find((a) => a.pin_id === collector);
  const selVault = vaultRows.filter((v) => v.pin_id === collector);
  const catCompare = category !== "ALL"
    ? dnaRows.filter((r) => r.category_id === category).sort((a, b) => N(b.affinity) - N(a.affinity))
    : [];
  const catLabel = (categories.find((c) => c.id === category) || {}).label;

  return (
    <div className="p-6" style={{ background: C.bg, color: C.cream }}>
      {/* Header */}
      <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.25em" }}>
        § 03 · WRTH × 69th NPRDP · Home Turf
      </p>
      <h1 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>Collector DNA — What They Collect</h1>
      <p className="text-sm mb-4" style={{ color: C.muted }}>
        Four superstars, reframed as collectors — the exact audience WRTH serves. Personas are creative direction; documented anchors marked.
      </p>

      {/* Artist switcher */}
      <div className="flex gap-2 mb-4 flex-wrap">
        {artists.map((a) => (
          <button key={a.pin_id} onClick={() => setCollector(a.pin_id)}
            className="text-xs px-3 py-2 rounded font-semibold"
            style={{
              background: a.pin_id === collector ? ARTIST_COLOR[a.pin_id] : "transparent",
              color: a.pin_id === collector ? C.bg : ARTIST_COLOR[a.pin_id],
              border: `1px solid ${ARTIST_COLOR[a.pin_id]}`, cursor: "pointer",
            }}>
            {a.name} · {a.persona}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-5 gap-6">
        {/* Radar — all four overlaid, selected glows */}
        <div className="col-span-3">
          {dna.isLoading ? (
            <div className="animate-pulse rounded" style={{ height: 320, background: C.panel }} />
          ) : (
            <ResponsiveContainer width="100%" height={320}>
              <RadarChart data={radarData} outerRadius="72%">
                <PolarGrid stroke={C.line} />
                <PolarAngleAxis dataKey="category" tick={{ fill: C.muted, fontSize: 10 }} />
                <PolarRadiusAxis domain={[0, 100]} tick={false} axisLine={false} />
                <Tooltip content={({ active, payload, label }) => {
                  if (!active || !payload || !payload.length) return null;
                  return (
                    <div className="p-2 rounded text-xs" style={{ background: C.bg, border: `1px solid ${C.line}`, color: C.cream }}>
                      <p className="font-semibold mb-1" style={{ color: C.gold }}>{label}</p>
                      {payload.sort((a, b) => N(b.value) - N(a.value)).map((p) => (
                        <p key={p.dataKey} style={{ color: ARTIST_COLOR[p.dataKey] }}>
                          {(artists.find((x) => x.pin_id === p.dataKey) || {}).name}: {N(p.value)}
                        </p>
                      ))}
                    </div>
                  );
                }} />
                {artists.map((a) => (
                  <Radar key={a.pin_id} name={a.name} dataKey={a.pin_id}
                    stroke={ARTIST_COLOR[a.pin_id]}
                    fill={ARTIST_COLOR[a.pin_id]}
                    strokeWidth={a.pin_id === collector ? 2.5 : 1}
                    fillOpacity={a.pin_id === collector ? 0.32 : 0.05}
                    strokeOpacity={a.pin_id === collector ? 1 : 0.35} />
                ))}
              </RadarChart>
            </ResponsiveContainer>
          )}
          {/* Category compare chips */}
          <div className="flex gap-1 flex-wrap mt-1">
            <button onClick={() => setCategory("ALL")}
              className="text-xs px-2 py-1 rounded"
              style={{ background: category === "ALL" ? C.gold : "transparent", color: category === "ALL" ? C.bg : C.muted, border: `1px solid ${C.line}`, cursor: "pointer" }}>
              All verticals
            </button>
            {categories.map((c) => (
              <button key={c.id} onClick={() => setCategory(c.id)}
                className="text-xs px-2 py-1 rounded"
                style={{ background: category === c.id ? C.gold : "transparent", color: category === c.id ? C.bg : C.muted, border: `1px solid ${C.line}`, cursor: "pointer" }}>
                {c.label}
              </button>
            ))}
          </div>
          {category !== "ALL" && (
            <div className="mt-2 p-3 rounded" style={{ background: C.panel, border: `1px solid ${C.line}` }}>
              <p className="text-xs uppercase mb-2" style={{ color: C.gold, letterSpacing: "0.15em" }}>
                {catLabel} — who collects it hardest
              </p>
              {catCompare.map((r) => (
                <div key={r.pin_id} className="flex items-center gap-2 mb-1">
                  <span className="text-xs" style={{ color: C.cream, width: 110 }}>{r.display_name}</span>
                  <div className="flex-1 rounded-full" style={{ height: 8, background: C.bg }}>
                    <div className="rounded-full" style={{ height: 8, width: `${N(r.affinity)}%`, background: ARTIST_COLOR[r.pin_id] }} />
                  </div>
                  <span className="text-xs font-semibold" style={{ color: ARTIST_COLOR[r.pin_id], width: 40, textAlign: "right" }}>
                    {N(r.affinity)}{r.evidence_level === "documented" ? " ◆" : ""}
                  </span>
                </div>
              ))}
              <p className="text-xs mt-1" style={{ color: C.muted }}>◆ documented anchor · all other scores are creative direction</p>
            </div>
          )}
        </div>

        {/* Persona card */}
        <div className="col-span-2 p-5 rounded relative" style={{ background: C.panel, border: `1px solid ${ARTIST_COLOR[collector] || C.line}` }}>
          <span className="absolute text-xs" style={{ top: 6, right: 10, color: ARTIST_COLOR[collector] }}>+</span>
          {personas.isLoading || !selPersona ? (
            <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-3/4" style={{ background: C.line }} />
            </div>
          ) : (
            <div>
              <p className="text-xs uppercase font-semibold" style={{ color: ARTIST_COLOR[collector], letterSpacing: "0.2em" }}>
                {selPersona.persona_name}
              </p>
              <h2 className="text-xl font-semibold mt-1" style={{ color: C.cream }}>{selArtist ? selArtist.name : ""}</h2>
              <p className="text-xs uppercase mt-3" style={{ color: C.muted, letterSpacing: "0.1em" }}>Collects</p>
              <p className="text-sm" style={{ color: C.cream }}>{selPersona.collects_summary}</p>
              <p className="text-xs uppercase mt-3" style={{ color: C.muted, letterSpacing: "0.1em" }}>Signature style / most worn</p>
              <p className="text-sm" style={{ color: C.cream }}>{selPersona.signature_style}</p>
              <p className="text-xs mt-3 p-2 rounded" style={{
                color: selPersona.evidence_level === "documented_partial" ? C.teal : C.coral,
                background: C.bg, border: `1px solid ${C.line}`, lineHeight: 1.5,
              }}>
                {selPersona.anchor_note}
              </p>
            </div>
          )}
        </div>
      </div>

      {/* Vault: if they ran it on WRTH */}
      <p className="text-xs uppercase mt-5 mb-1" style={{ color: C.gold, letterSpacing: "0.2em" }}>
        If {selArtist ? selArtist.name : "they"} ran this collection on WRTH — Oracle AI × Xion provenance (demo values)
      </p>
      {vault.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: 100, background: C.panel }} />
      ) : (
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left text-xs uppercase" style={{ color: C.muted }}>
              <th className="pb-1">Item</th><th className="pb-1">Vertical</th>
              <th className="pb-1 text-right">Oracle est.</th><th className="pb-1 text-right">Provenance</th>
            </tr>
          </thead>
          <tbody>
            {selVault.map((v) => (
              <tr key={v.item_name} style={{ borderTop: `1px solid ${C.line}` }}>
                <td className="py-1" style={{ color: C.cream }}>{v.item_name}</td>
                <td className="py-1 text-xs" style={{ color: C.muted }}>{v.category_label}</td>
                <td className="py-1 text-right font-semibold" style={{ color: C.gold }}>
                  {fmt$(N(v.oracle_low_usd))}–{fmt$(N(v.oracle_high_usd))}
                </td>
                <td className="py-1 text-right text-xs">
                  <span className="px-2 py-1 rounded-full" style={{
                    color: v.provenance_status === "Xion minted" ? C.teal : C.coral,
                    border: `1px solid ${v.provenance_status === "Xion minted" ? C.teal : C.coral}`,
                  }}>
                    {v.provenance_status} · {v.auth_layer}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      {/* Commerce strip */}
      <div className="mt-4 p-4 rounded flex items-center gap-3 flex-wrap" style={{ background: C.panel, border: `1px solid ${C.gold}` }}>
        {ctas.isLoading ? (
          <div className="animate-pulse h-6 rounded w-2/3" style={{ background: C.line }} />
        ) : (
          ctaRows.sort((a, b) => (a.cta_id === "CTA-VAULT" ? -1 : 1)).map((k) => (
            <span key={k.cta_id} className="text-xs px-3 py-2 rounded font-semibold"
              style={{
                background: k.cta_id === "CTA-VAULT" ? C.gold : "transparent",
                color: k.cta_id === "CTA-VAULT" ? C.bg : C.gold,
                border: `1px solid ${C.gold}`,
              }}>
              {k.cta_id === "CTA-VAULT" ? "🔐 " : ""}{k.cta_label}
            </span>
          ))
        )}
        <p className="text-xs flex-1" style={{ color: C.muted, minWidth: 200 }}>
          Agentic Commerce OS showcase — Oracle valuation, Veritas authentication, Xion on-chain provenance. § 06 Vault entry.
        </p>
      </div>

      <p className="text-xs mt-4" style={{ color: C.muted }}>
        WRTH · prdp26 · Vault values are illustrative Oracle demos, not appraisals. Verify persona specifics before publishing. Stamped 2026-06-10.
      </p>
    </div>
  );
}

WRTH × 69th NPRDP (June 14, 2026). The four float voices reframed as collectors — WRTH's home turf. Overlaid Collector DNA radar across 8 WRTH verticals, per-artist persona cards with documented-anchor flags (Daddy Yankee's Mariners tryout, Ramos's Brooklyn Boricua roots), category compare mode, an "if they ran it on WRTH" Oracle AI × Xion provenance vault demo, and Collector/Collector+/Vault commerce funnels. Powered by prdp26.

WRTH / LILA Nikole - PRDP26 · Collector DNA — What They Collect

Comments