Blame for apps/web/components/dynamic/DynamicReport.tsx

"use client";

import { useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Download, Copy, Check, Info, ChevronDown, ChevronUp, BarChart3, Eye, EyeOff, Maximize2 } from "lucide-react";
import { ChartRenderer } from "@/components/charts/registry";
import type { UIPlan, ChartComponent } from "./types";
import { CitationsRail } from "@/components/dynamic/CitationsRail";
import { renderRichText } from "./rich";
import { copyToClipboard, downloadFile, rowsToCsv, safeFilename } from "@/lib/export";

const MOOD_TINTS: Record<string, string> = {
  calm:          "from-mb-paper via-white to-mb-amber-50/30",
  urgent:        "from-rose-50 via-white to-rose-50/20",
  celebratory:   "from-yellow-50 via-white to-amber-50/30",
  investigative: "from-sky-50/60 via-white to-sky-50/20",
  neutral:       "from-mb-amber-50/60 via-white to-mb-paper",
};

const PERSONA_ICONS: Record<string, string> = {
  analyst: "📊", investigator: "🔍", executive: "🎯",
  storyteller: "📖", auditor: "✅", strategist: "🧭",
};

const DENSITY_GAP: Record<string, string> = {
  compact: "gap-3", comfortable: "gap-4", spacious: "gap-5",
};

export function DynamicReport({ plan }: { plan: UIPlan }) {
  const [expandedCards, setExpandedCards] = useState<Set<string>>(new Set());
  const [hiddenCards, setHiddenCards] = useState<Set<string>>(new Set());
  
  const cellById = useMemo(
    () => new Map(plan.layout.grid.map((g) => [g.component, g])),
    [plan.layout.grid]
  );
  
  const persona = plan.persona ?? {
    name: "analyst", accent: "#F47C2C", mood: "neutral", density: "comfortable",
  };
  const accent = persona.accent ?? "#F47C2C";
  const mood = MOOD_TINTS[persona.mood ?? "neutral"] ?? MOOD_TINTS.neutral;
  const gap = DENSITY_GAP[persona.density ?? "comfortable"] ?? DENSITY_GAP.comfortable;
  const icon = PERSONA_ICONS[persona.name ?? "analyst"] ?? "📊";

  // Group components by semantic role
  const { kpis, charts, tables, metas } = useMemo(() => {
    const k: ChartComponent[] = [];
    const c: ChartComponent[] = [];
    const t: ChartComponent[] = [];
    const m: ChartComponent[] = [];
    for (const comp of plan.components) {
      if (hiddenCards.has(comp.id)) continue;
      if (comp.type === "kpi") k.push(comp);
      else if (comp.type === "data-table") t.push(comp);
      else if (comp.type === "raw-sql" || comp.type === "callout" || comp.type === "narrative") m.push(comp);
      else c.push(comp);
    }
    return { kpis: k, charts: c, tables: t, metas: m };
  }, [plan.components, hiddenCards]);

  const visibleCount = plan.components.length - hiddenCards.size;

  const toggleExpand = (id: string) => {
    setExpandedCards((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const toggleHide = (id: string) => {
    setHiddenCards((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_320px] overflow-x-hidden">

      <div className="min-w-0 space-y-6">

        {/* ── Narrative Hero ───────────────────────────────────────── */}

        {plan.narrative && plan.narrative.trim().length > 20 ? (

          <motion.div

            initial={{ opacity: 0, y: 8 }}

            animate={{ opacity: 1, y: 0 }}

            transition={{ delay: 0.05, duration: 0.4 }}

            className={`rounded-2xl border bg-gradient-to-br ${mood} p-6 shadow-mb-card backdrop-blur-sm`}

            style={{ borderColor: `${accent}25` }}

          >

            <div className="mb-4 flex items-center gap-3">

              <div

                className="flex h-8 w-8 items-center justify-center rounded-lg text-sm shadow-sm"

                style={{ backgroundColor: `${accent}15` }}

              >

                {icon}

              </div>

              <div className="flex items-center gap-2">

                <span

                  className="rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-[0.15em] text-white shadow-sm"

                  style={{ backgroundColor: accent }}

                >

                  {persona.name}

                </span>

                <span className="text-[10px] uppercase tracking-[0.12em] text-mb-slate/45 font-medium">

                  {persona.mood} · {visibleCount} panels

                </span>

              </div>

              <div className="ml-auto flex h-1 flex-1 max-w-24 rounded-full overflow-hidden bg-mb-amber-100/60">

                <div className="rounded-full" style={{ width: "100%", backgroundImage: `linear-gradient(90deg, ${accent}, #FFC72C)` }} />

              </div>

            </div>

            <div className="font-serif text-[17px] leading-[1.7] text-mb-ink/90">

              {renderRichText(plan.narrative, accent)}

            </div>

            {plan.components.some((c) => c.why) && (

              <div className="mt-4 flex flex-wrap gap-1.5">

                {plan.components

                  .filter((c) => c.why)

                  .slice(0, 4)

                  .map((c) => (

                    <span key={c.id} className="rounded-full bg-white/80 px-2.5 py-1 text-[10px] text-mb-slate/70 border border-mb-amber-200/50 shadow-sm">

                      {c.why!.slice(0, 60)}{c.why!.length > 60 ? "…" : ""}

                    </span>

                  ))}

              </div>

            )}

          </motion.div>

        ) : null}



        {/* ── KPI Strip ─────────────────────────────────────────── */}

        {kpis.length > 0 && (

          <motion.div

            initial={{ opacity: 0 }}

            animate={{ opacity: 1 }}

            transition={{ delay: 0.1 }}

            className={`grid gap-3 ${

              kpis.length === 1 ? "grid-cols-1" :

              kpis.length === 2 ? "grid-cols-1 sm:grid-cols-2" :

              kpis.length === 3 ? "grid-cols-1 sm:grid-cols-3" :

              "grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"

            }`}

          >

            {kpis.slice(0, 8).map((c, i) => (

              <motion.div key={c.id} initial={{ opacity: 0, scale: 0.97 }} animate={{ opacity: 1, scale: 1 }}

                transition={{ delay: 0.1 + i * 0.04 }}>

                <ChartRenderer component={c} accent={accent} />

              </motion.div>

            ))}

          </motion.div>

        )}



        {/* ── Charts Grid ───────────────────────────────────────── */}

        <div className={`grid grid-cols-12 ${gap}`}>

          <AnimatePresence mode="popLayout">

            {charts.map((c, i) => {

              const cell = cellById.get(c.id);

              const isExpanded = expandedCards.has(c.id);

              const w = isExpanded ? 12 : (cell?.w ?? 6);

              return (

                <motion.div

                  key={c.id}

                  layout

                  initial={{ opacity: 0, y: 18, scale: 0.96 }}

                  animate={{ opacity: 1, y: 0, scale: 1 }}

                  exit={{ opacity: 0, scale: 0.92 }}

                  transition={{ delay: 0.12 + i * 0.06, duration: 0.45, type: "spring", stiffness: 260, damping: 24, layout: { duration: 0.3 } }}

                  className="group/card rounded-2xl border bg-white/95 shadow-mb-card backdrop-blur-sm transition-all duration-300 hover:shadow-lg hover:shadow-mb-orange/8"

                  style={{

                    gridColumn: `span ${w} / span ${w}`,

                    minHeight: (cell?.h ?? 5) * 64,

                    borderColor: `${accent}18`,

                  }}

                >

                  <div className="p-4">

                    <CardHeader

                      component={c}

                      accent={accent}

                      expanded={isExpanded}

                      onToggleExpand={() => toggleExpand(c.id)}

                      onToggleHide={() => toggleHide(c.id)}

                    />

                    <ChartRenderer component={c} accent={accent} />

                  </div>

                </motion.div>

              );

            })}

          </AnimatePresence>

        </div>



        {/* ── Callouts / Metas ──────────────────────────────────── */}

        {metas.length > 0 && (

          <div className="space-y-3">

            {metas.map((c, i) => (

              <motion.div

                key={c.id}

                initial={{ opacity: 0, y: 8 }}

                animate={{ opacity: 1, y: 0 }}

                transition={{ delay: 0.15 + i * 0.03 }}

              >

                <CardHeader component={c} accent={accent} />

                <ChartRenderer component={c} accent={accent} />

              </motion.div>

            ))}

          </div>

        )}



        {/* ── Data Tables ───────────────────────────────────────── */}

        {tables.length > 0 && (

          <div className="space-y-4">

            <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.12em] text-mb-slate/50 font-semibold">

              <BarChart3 className="h-3.5 w-3.5" />

              Source Data

            </div>

            {tables.map((c, i) => (

              <motion.div

                key={c.id}

                initial={{ opacity: 0 }}

                animate={{ opacity: 1 }}

                transition={{ delay: 0.2 + i * 0.03 }}

                className="group/card rounded-2xl border bg-white/90 p-4 shadow-sm"

                style={{ borderColor: `${accent}15` }}

              >

                <CardHeader component={c} accent={accent} />

                <ChartRenderer component={c} accent={accent} />

              </motion.div>

            ))}

          </div>

        )}



        {/* ── Hidden panels recovery ────────────────────────────── */}

        {hiddenCards.size > 0 && (

          <div className="flex items-center gap-2 text-[11px] text-mb-slate/50">

            <EyeOff className="h-3 w-3" />

            {hiddenCards.size} panel{hiddenCards.size > 1 ? "s" : ""} hidden ·{" "}

            <button onClick={() => setHiddenCards(new Set())} className="underline hover:text-mb-amber-700">

              Show all

            </button>

          </div>

        )}

      </div>



      <CitationsRail citations={plan.citations} accent={accent} />

    </div>
  );
}

function CardHeader({

  component, accent, expanded, onToggleExpand, onToggleHide,

}: {

  component: ChartComponent;

  accent: string;

  expanded?: boolean;

  onToggleExpand?: () => void;

  onToggleHide?: () => void;

}) {
  const [copied, setCopied] = useState(false);
  const data = component.data;
  const isTabular = Array.isArray(data) && data.length > 0 && typeof data[0] === "object";
  const isSql = component.type === "raw-sql";

  async function onCopySql() {
    const sql = (data as any)?.sql ?? "";
    if (!sql) return;
    if (await copyToClipboard(sql)) {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    }
  }

  function onDownloadCsv() {
    if (!isTabular) return;
    const csv = rowsToCsv(data as any[]);
    if (!csv) return;
    downloadFile(safeFilename(component.title || component.id, "csv"), csv);
  }

  if (!component.title && !component.subtitle && !component.why && !isTabular && !isSql) {
    return null;
  }

  return (
    <div className="mb-3 flex items-start justify-between gap-2">

      <div className="min-w-0 flex-1">

        {component.title ? (

          <h3 className="truncate text-[13px] font-semibold text-mb-ink" title={component.title}>

            <span

              className="mr-1.5 inline-block h-1.5 w-1.5 rounded-full align-middle"

              style={{ backgroundColor: accent }}

            />

            {component.title}

          </h3>

        ) : null}

        {component.subtitle ? (

          <p className="mt-0.5 truncate text-[11px] text-mb-slate/60">{component.subtitle}</p>

        ) : null}

      </div>

      <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity duration-200 group-hover/card:opacity-100">

        {component.why && (

          <span title={component.why} className="rounded-md p-1 text-mb-slate/50 hover:bg-mb-amber-50 hover:text-mb-amber-700 cursor-help">

            <Info className="h-3.5 w-3.5" />

          </span>

        )}

        {onToggleExpand && (

          <button onClick={onToggleExpand} title={expanded ? "Collapse" : "Expand"} className="rounded-md p-1 text-mb-slate/50 hover:bg-mb-amber-50 hover:text-mb-amber-700">

            <Maximize2 className="h-3.5 w-3.5" />

          </button>

        )}

        {onToggleHide && (

          <button onClick={onToggleHide} title="Hide panel" className="rounded-md p-1 text-mb-slate/50 hover:bg-mb-amber-50 hover:text-mb-amber-700">

            <EyeOff className="h-3 w-3" />

          </button>

        )}

        {isSql && (

          <button onClick={onCopySql} title="Copy SQL" className="rounded-md p-1 text-mb-slate/50 hover:bg-mb-amber-50 hover:text-mb-amber-700">

            {copied ? <Check className="h-3.5 w-3.5 text-emerald-600" /> : <Copy className="h-3.5 w-3.5" />}

          </button>

        )}

        {isTabular && (

          <button onClick={onDownloadCsv} title="Download CSV" className="rounded-md p-1 text-mb-slate/50 hover:bg-mb-amber-50 hover:text-mb-amber-700">

            <Download className="h-3.5 w-3.5" />

          </button>

        )}

      </div>

    </div>
  );
}