// Variation 1 — Compliance Pulse
// Spacious executive overview. KPI strip, "Needs your attention" featuring
// the AI suggestion inbox, then a project list.

const { useState: useState1, useMemo: useMemo1 } = React;

function PulseDashboard({ density, showAttention }) {
  const { ORG, PROJECTS, SUGGESTIONS, FRAMEWORKS, MEMBERS, ACTIVITY, projectStats, orgStats } = window.MockData;
  const stats = orgStats();
  const newSuggestions = SUGGESTIONS.filter((s) => s.status === "new");
  const [dismissed, setDismissed] = useState1(new Set());

  return (
    <div className="px-8 py-8 max-w-[1400px] mx-auto">
      {/* Title */}
      <div className="flex items-end justify-between mb-7">
        <div>
          <p className="text-xs uppercase tracking-[0.12em] text-main/55 font-semibold mb-1">Organization Dashboard</p>
          <h1 className="text-3xl font-semibold tracking-tight text-main">{ORG.name}</h1>
          <p className="text-main/60 text-sm mt-1">{PROJECTS.length} active frameworks · {MEMBERS.length} members · audit window opens in 38 days</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="md"><Icon name="arrow-up-tray" className="h-4 w-4" />Add Evidence</Button>
          <Button variant="main" size="md"><Icon name="plus" className="h-4 w-4" />Add Framework</Button>
        </div>
      </div>

      {/* KPI Strip */}
      <div className="grid grid-cols-4 gap-3 mb-6">
        <KpiTile label="Avg Maturity" value={stats.avg ?? "—"} sublabel="/ 5" trend={0.3} trendLabel="vs last month" icon="arrow-trending-up" dark />
        <KpiTile label="Controls Assessed" value={`${stats.completion}%`} sublabel={`${stats.assessed}/${stats.total}`} trend={4} trendLabel="this week" icon="check-circle" />
        <KpiTile label="At Risk (≤2)" value={stats.atRisk} sublabel="controls" icon="exclamation-circle" />
        <KpiTile label="Evidence Items" value="284" trend={12} trendLabel="this week" icon="document" />
      </div>

      {/* Attention Banner — AI suggestions inbox */}
      {showAttention && (
        <DarkCard className="mb-6 overflow-hidden">
          <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="h-9 w-9 rounded-lg bg-secondary/20 flex items-center justify-center text-secondary">
                <Icon name="sparkles" className="h-5 w-5" strokeWidth={1.7} />
              </div>
              <div>
                <p className="font-semibold text-white text-[15px] flex items-center gap-2">
                  Needs your attention
                  <Badge variant="secondary-on-dark">{newSuggestions.length - dismissed.size} new</Badge>
                </p>
                <p className="text-xs text-white/60">AI-suggested evidence to upload, ranked by impact across frameworks</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="ghost-on-dark" size="sm"><Icon name="funnel" className="h-3.5 w-3.5" />Filter</Button>
              <Button variant="outline-on-dark" size="sm">Open inbox<Icon name="arrow-right" className="h-3 w-3" /></Button>
            </div>
          </div>
          <div className="divide-y divide-white/8">
            {newSuggestions.slice(0, 4).filter(s => !dismissed.has(s.id)).map((s) => (
              <SuggestionRow key={s.id} suggestion={s} onDismiss={() => setDismissed(new Set([...dismissed, s.id]))} />
            ))}
          </div>
        </DarkCard>
      )}

      {/* Two columns: Projects + Right rail */}
      <div className="grid grid-cols-3 gap-6">
        <div className="col-span-2 space-y-3">
          <div className="flex items-center justify-between mb-1">
            <h2 className="text-base font-semibold text-main">Compliance Projects</h2>
            <button className="text-xs text-main/55 hover:text-main flex items-center gap-1">
              <Icon name="bars" className="h-3 w-3" /> Sort: Recent
            </button>
          </div>
          {PROJECTS.map((p) => <ProjectRowCard key={p.id} project={p} density={density} />)}
        </div>
        <div className="space-y-4">
          <RightRail />
        </div>
      </div>
    </div>
  );
}

function SuggestionRow({ suggestion, onDismiss }) {
  const [accepted, setAccepted] = useState1(false);
  const impactColors = {
    high: "bg-[#E07A5F]/20 text-[#ffb09a]",
    medium: "bg-[#F4C28A]/20 text-[#f4c28a]",
    low: "bg-secondary/20 text-secondary",
  };
  return (
    <div className={`px-6 py-4 transition-colors ${accepted ? "opacity-50" : "hover:bg-white/[0.03]"}`}>
      <div className="flex items-start gap-4">
        <div className={`h-8 w-8 rounded-md flex items-center justify-center mt-0.5 shrink-0 ${impactColors[suggestion.impact]}`}>
          <Icon name="document" className="h-4 w-4" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <p className="font-medium text-white text-[14px]">{suggestion.title}</p>
            <Badge variant="outline-on-dark">{suggestion.evidenceType}</Badge>
            <ConfidencePill value={suggestion.confidence} />
          </div>
          <p className="text-[12.5px] text-white/65 mt-1">{suggestion.description}</p>
          <div className="flex items-center gap-2 mt-2.5 flex-wrap">
            <span className="text-[10.5px] uppercase tracking-wider text-white/45 font-semibold">Improves</span>
            {suggestion.controls.map((c) => (
              <div key={c.controlId} className="inline-flex items-center gap-1 rounded-md border border-white/15 bg-white/5 px-1.5 py-0.5">
                <span className="text-[10.5px] font-mono text-white/85">{c.controlId}</span>
                <span className="text-[10px] text-white/50">{c.currentScore ?? "—"}</span>
                <Icon name="arrow-right" className="h-2.5 w-2.5 text-white/40" />
                <span className="text-[10px] text-secondary font-semibold">{c.projectedScore}</span>
              </div>
            ))}
          </div>
          <p className="text-[11px] text-white/40 mt-2 italic">{suggestion.reason}</p>
        </div>
        <div className="flex items-center gap-1.5 shrink-0">
          <Button variant="default" size="sm" onClick={() => setAccepted(true)}>
            {accepted ? <><Icon name="check" className="h-3.5 w-3.5" />Uploading</> : <><Icon name="arrow-up-tray" className="h-3.5 w-3.5" />Upload</>}
          </Button>
          <button title="Snooze" className="h-7 w-7 rounded-md border border-white/15 text-white/60 hover:text-white hover:bg-white/10 flex items-center justify-center">
            <Icon name="moon" className="h-3.5 w-3.5" />
          </button>
          <button onClick={onDismiss} title="Dismiss" className="h-7 w-7 rounded-md border border-white/15 text-white/60 hover:text-white hover:bg-white/10 flex items-center justify-center">
            <Icon name="x" className="h-3.5 w-3.5" />
          </button>
        </div>
      </div>
    </div>
  );
}

function ProjectRowCard({ project, density }) {
  const { FRAMEWORKS, projectStats } = window.MockData;
  const fw = FRAMEWORKS.find((f) => f.key === project.framework);
  const s = projectStats(project);
  const [expanded, setExpanded] = useState1(false);
  const dueText = project.dueDate ? `Due ${new Date(project.dueDate).toLocaleDateString(undefined, { month: "short", day: "numeric" })}` : "No due date";

  return (
    <Card hoverable className={density === "compact" ? "p-3" : "p-5"}>
      <div className="flex items-start gap-4">
        <div className="h-10 w-10 rounded-lg flex items-center justify-center shrink-0" style={{ backgroundColor: `${fw.color}30` }}>
          <Icon name="briefcase" className="h-5 w-5" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-[15px] text-main">{project.name}</h3>
            <Badge variant="secondary">{fw.short}</Badge>
          </div>
          <p className="text-xs text-main/55 mt-0.5">{project.description}</p>
          <div className="mt-3 flex items-center gap-6">
            <div className="flex-1 max-w-md">
              <div className="flex items-center justify-between text-[11px] text-main/60 mb-1">
                <span>{s.assessed}/{s.total} assessed · {s.completion}%</span>
                <span>avg {s.avg ?? "—"}</span>
              </div>
              <ProgressBar value={s.completion} />
            </div>
            <div className="flex items-center gap-3 text-xs text-main/60">
              <span className="inline-flex items-center gap-1"><span className="h-2 w-2 rounded-sm" style={{ backgroundColor: window.MockData.maturityColor(5) }}></span>{s.strong} strong</span>
              <span className="inline-flex items-center gap-1"><span className="h-2 w-2 rounded-sm" style={{ backgroundColor: window.MockData.maturityColor(1) }}></span>{s.atRisk} at risk</span>
            </div>
          </div>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          <button onClick={() => setExpanded(!expanded)} className="text-xs text-main/60 hover:text-main flex items-center gap-1">
            <Icon name="grid" className="h-3.5 w-3.5" />Matrix
            <Icon name={expanded ? "chevronUp" : "chevronDown"} className="h-3 w-3" />
          </button>
          <Button variant="secondary" size="sm">Enter<Icon name="arrow-right" className="h-3 w-3" /></Button>
        </div>
      </div>
      {expanded && (
        <div className="mt-4 pt-4 border-t border-main/10">
          <ControlMatrix controls={project.controls} density={density} />
        </div>
      )}
    </Card>
  );
}

function RightRail() {
  const { MEMBERS, ACTIVITY } = window.MockData;
  return (
    <>
      <Card className="p-5">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-sm font-semibold text-main">Team</h3>
          <button className="text-xs text-main/55 hover:text-main">Invite</button>
        </div>
        <div className="space-y-2">
          {MEMBERS.slice(0, 5).map((m) => (
            <div key={m.id} className="flex items-center gap-2.5">
              <Avatar initials={m.initials} color={m.color} size="sm" />
              <div className="flex-1 min-w-0">
                <p className="text-[13px] font-medium text-main truncate">{m.name}</p>
                <p className="text-[11px] text-main/55">{m.role}</p>
              </div>
            </div>
          ))}
        </div>
      </Card>
      <Card className="p-5">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-sm font-semibold text-main">Recent Activity</h3>
          <button className="text-xs text-main/55 hover:text-main">View all</button>
        </div>
        <div className="space-y-3">
          {ACTIVITY.slice(0, 6).map((a) => (
            <div key={a.id} className="flex items-start gap-2.5">
              <div className={`h-6 w-6 rounded-md flex items-center justify-center shrink-0 mt-0.5 ${
                a.icon === "sparkles" ? "bg-secondary/20 text-secondary" : "bg-main/8 text-main/70"
              }`}>
                <Icon name={a.icon === "upload" ? "arrow-up-tray" : a.icon === "check" ? "check" : a.icon === "sparkles" ? "sparkles" : a.icon === "chat" ? "chat" : "flag"} className="h-3 w-3" />
              </div>
              <div className="text-[12px] text-main/75 leading-snug">
                <span className="font-medium text-main">{a.actor}</span>{" "}{a.action}{" "}<span className="text-main">{a.target}</span>
                <p className="text-[10.5px] text-main/45 mt-0.5">{a.time}</p>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </>
  );
}

window.PulseDashboard = PulseDashboard;