// The "money shot" dashboard screen — the AUSTRAC readiness card, alerts panel,
// recent activity. Used as the hero centerpiece in both timelines.

const { FadeIn, ProgressRing, Pill, Card, BRAND, BRAND_700, BRAND_50, ACCENT,
  ACCENT_50, SLATE_900, SLATE_500, SLATE_400, SLATE_200, SLATE_50, EMERALD, RED,
  FONT, MONO } = window;

function StatCard({ icon, label, value, sublabel, tone = 'brand', delay = 0 }) {
  const Ico = window[icon];
  const tones = {
    brand:   { tile: BRAND_50, tileFg: BRAND },
    warn:    { tile: ACCENT_50, tileFg: ACCENT },
    success: { tile: '#ecfdf5', tileFg: EMERALD },
    danger:  { tile: '#fef2f2', tileFg: RED },
  };
  const T = tones[tone];
  return (
    <FadeIn delay={delay}>
      <Card padding={20} style={{ minHeight: 100 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10,
            background: T.tile, color: T.tileFg,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Ico size={18} strokeWidth={2}/>
          </div>
        </div>
        <div style={{ fontSize: 11, fontWeight: 600, color: SLATE_500, marginTop: 14, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
          {label}
        </div>
        <div style={{ fontSize: 26, fontWeight: 700, color: SLATE_900, marginTop: 4, letterSpacing: '-0.02em' }}>
          {value}
        </div>
        {sublabel && <div style={{ fontSize: 11.5, color: SLATE_500, marginTop: 2 }}>{sublabel}</div>}
      </Card>
    </FadeIn>
  );
}

// Readiness card — the headline element. Shows a ring + checklist.
function ReadinessCard({ percent = 87, delay = 0, highlight = false }) {
  const items = [
    { label: 'AML/CTF programme published', done: true },
    { label: 'Compliance Officer nominated', done: true },
    { label: 'Customer base imported (124)', done: true },
    { label: 'Sanctions screening complete', done: true },
    { label: 'Independent reviewer assigned', done: false },
  ];
  return (
    <FadeIn delay={delay}>
      <Card padding={24} style={{
        boxShadow: highlight ? `0 0 0 2px ${BRAND}, 0 12px 40px -10px rgba(13,148,136,0.35)` : 'none',
        transition: 'box-shadow 200ms',
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: SLATE_500, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              AUSTRAC readiness
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, color: SLATE_900, marginTop: 6, letterSpacing: '-0.015em' }}>
              You're on track for 1 July 2026
            </div>
          </div>
          <Pill tone="brand" icon={<window.L_ShieldCheck size={11} strokeWidth={2.5}/>}>On track</Pill>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, marginTop: 18 }}>
          <ProgressRing size={108} stroke={10} value={percent} sublabel="ready"/>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {items.map((it, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: it.done ? SLATE_900 : SLATE_500 }}>
                {it.done ? (
                  <window.L_CheckCircle2 size={14} color={EMERALD} strokeWidth={2.25}/>
                ) : (
                  <window.L_Circle size={14} color={SLATE_400} strokeWidth={1.75}/>
                )}
                <span>{it.label}</span>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </FadeIn>
  );
}

// TTR alert panel — the auto-drafted callout.
function TTRBanner({ delay = 0, highlight = false }) {
  return (
    <FadeIn delay={delay}>
      <div style={{
        background: ACCENT_50,
        border: `1px solid #fde68a`,
        borderRadius: 14,
        padding: '14px 16px',
        display: 'flex', alignItems: 'center', gap: 14,
        boxShadow: highlight ? `0 0 0 2px ${ACCENT}, 0 12px 30px -8px rgba(217,119,6,0.4)` : 'none',
        transition: 'box-shadow 200ms',
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: '#fff', color: ACCENT,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <window.L_AlertTriangle size={18} strokeWidth={2}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: SLATE_900 }}>
            TTR draft auto-created — review by 14 May 2026
          </div>
          <div style={{ fontSize: 11.5, color: '#92400e', marginTop: 2 }}>
            Cash deposit $24,500.00 · John Smith · TXN-2026-0048 · 9 business days remaining
          </div>
        </div>
        <Pill tone="warn" size="sm">Action required</Pill>
      </div>
    </FadeIn>
  );
}

// Recent activity feed.
function ActivityFeed({ delay = 0 }) {
  const items = [
    { icon: 'L_FileText', tone: 'warn', title: 'TTR-2026-0048 drafted', sub: 'John Smith · $24,500.00 cash · auto-detected', time: '12 min ago' },
    { icon: 'L_UserCheck', tone: 'success', title: 'Customer screening clear', sub: 'Patel Holdings Pty Ltd · DFAT, UN, OFAC, PEP', time: '1 hr ago' },
    { icon: 'L_ShieldCheck', tone: 'brand', title: 'Programme v2.3 published', sub: 'Part A risk assessment updated · CO: S. Chen', time: '3 hr ago' },
    { icon: 'L_Activity', tone: 'neutral', title: '4 transactions monitored', sub: 'No threshold breach · Audit log entry #1284', time: '5 hr ago' },
  ];
  return (
    <FadeIn delay={delay}>
      <Card padding={0}>
        <div style={{ padding: '16px 20px 12px', borderBottom: `1px solid ${SLATE_200}` }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: SLATE_900 }}>Recent activity</div>
        </div>
        <div>
          {items.map((it, i) => {
            const Ico = window[it.icon];
            const palette = it.tone === 'warn' ? { bg: ACCENT_50, fg: ACCENT } :
              it.tone === 'success' ? { bg: '#ecfdf5', fg: EMERALD } :
              it.tone === 'brand' ? { bg: BRAND_50, fg: BRAND } :
              { bg: SLATE_50, fg: SLATE_500 };
            return (
              <div key={i} style={{
                padding: '11px 20px', display: 'flex', alignItems: 'center', gap: 12,
                borderBottom: i < items.length - 1 ? `1px solid ${SLATE_200}` : 'none',
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 8,
                  background: palette.bg, color: palette.fg,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <Ico size={14} strokeWidth={2}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: SLATE_900 }}>{it.title}</div>
                  <div style={{ fontSize: 11, color: SLATE_500, marginTop: 1 }}>{it.sub}</div>
                </div>
                <div style={{ fontSize: 10.5, color: SLATE_400, fontFamily: MONO, whiteSpace: 'nowrap' }}>
                  {it.time}
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </FadeIn>
  );
}

// The composed dashboard view.
function DashboardView({ baseDelay = 0, highlightReadiness = false, highlightTTR = false }) {
  const TopRight = (
    <>
      <div style={{
        background: BRAND_50, color: BRAND_700,
        padding: '6px 12px', borderRadius: 999,
        fontSize: 11.5, fontWeight: 600,
        display: 'flex', alignItems: 'center', gap: 6,
        border: '1px solid #99f6e4',
      }}>
        <window.L_Sparkles size={12} strokeWidth={2}/>
        Ask <i>Ami</i>
      </div>
    </>
  );
  return (
    <window.DashboardFrame
      activeNav="Dashboard"
      topTitle="Good morning, Sarah"
      topSubtitle="Wednesday, 13 May 2026 · 9 business days to next deadline"
      topRight={TopRight}
    >
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
        <StatCard icon="L_Users" label="Customers" value="124" sublabel="+8 this week" tone="brand" delay={baseDelay + 0.0}/>
        <StatCard icon="L_Activity" label="Transactions (30d)" value="1,847" sublabel="3 flagged" tone="brand" delay={baseDelay + 0.08}/>
        <StatCard icon="L_FileText" label="Reports filed" value="6" sublabel="2 pending" tone="warn" delay={baseDelay + 0.16}/>
        <StatCard icon="L_ShieldCheck" label="Audit log entries" value="1,284" sublabel="Chain verified" tone="success" delay={baseDelay + 0.24}/>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 16 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <ReadinessCard delay={baseDelay + 0.34} highlight={highlightReadiness}/>
          <TTRBanner delay={baseDelay + 0.5} highlight={highlightTTR}/>
        </div>
        <ActivityFeed delay={baseDelay + 0.42}/>
      </div>
    </window.DashboardFrame>
  );
}

Object.assign(window, { StatCard, ReadinessCard, TTRBanner, ActivityFeed, DashboardView });