/* acme-dashboard.jsx — Analyst dashboard for Acme Bank */

const RECENT_DECISIONS = [
  { name: 'Patricia L. Warren', product: 'Auto Loan', amount: '$28,500', decision: 'Approved', time: '11:42 AM' },
  { name: 'Kevin J. Mitchell', product: 'Personal', amount: '$12,000', decision: 'Declined', time: '11:15 AM' },
  { name: 'Angela M. Torres', product: 'HELOC', amount: '$60,000', decision: 'Approved', time: '10:58 AM' },
  { name: 'William H. Brooks', product: 'Mortgage', amount: '$340,000', decision: 'Committee', time: '10:31 AM' },
  { name: 'Diana K. Patel', product: 'Personal', amount: '$8,500', decision: 'Approved', time: '9:47 AM' },
];

const KpiCard = ({ label, value, sub, subColor, icon }) => (
  <div style={{ background: ACME.card, borderRadius: 12, padding: '20px 22px', boxShadow: '0 1px 3px rgba(0,0,0,0.06)', flex: 1, minWidth: 0 }}>
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
      <div>
        <div style={{ fontSize: 12, fontWeight: 600, color: ACME.muted, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 8, fontFamily: ACME.font }}>{label}</div>
        <div style={{ fontSize: 28, fontWeight: 700, color: ACME.text, fontFamily: ACME.font, lineHeight: 1 }}>{value}</div>
        {sub && <div style={{ fontSize: 12, color: subColor || ACME.muted, marginTop: 6, fontWeight: 500, fontFamily: ACME.font }}>{sub}</div>}
      </div>
      <div style={{ width: 40, height: 40, borderRadius: 10, background: ACME.primaryBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        {icon}
      </div>
    </div>
  </div>
);

/* Simple horizontal bar chart */
const MiniBar = ({ label, value, max, color }) => (
  <div style={{ marginBottom: 10 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: ACME.muted, marginBottom: 4, fontFamily: ACME.font }}>
      <span>{label}</span><span style={{ fontWeight: 600, color: ACME.text }}>{value}</span>
    </div>
    <div style={{ height: 6, background: '#F3F4F6', borderRadius: 3, overflow: 'hidden' }}>
      <div style={{ height: '100%', width: (value / max * 100) + '%', background: color, borderRadius: 3, transition: 'width 0.8s ease' }}></div>
    </div>
  </div>
);

const AcmeDashboard = ({ onOpenApplication, model }) => {
  const statusColors = {
    'approved-conditions': { bg: '#FEF3C7', text: '#B45309', dot: '#F59E0B', label: 'Conditions' },
    'review': { bg: '#DBEAFE', text: '#1D4ED8', dot: '#3B82F6', label: 'Review' },
    'approved': { bg: '#D1FAE5', text: '#065F46', dot: '#10B981', label: 'Approved' },
    'declined': { bg: '#FEE2E2', text: '#991B1B', dot: '#EF4444', label: 'Declined' },
  };
  const decisionColors = {
    'Approved': { color: '#065F46', bg: '#D1FAE5' },
    'Declined': { color: '#991B1B', bg: '#FEE2E2' },
    'Committee': { color: '#1D4ED8', bg: '#DBEAFE' },
  };

  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '24px 32px' }}>
      {/* Greeting */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 24, fontWeight: 700, color: ACME.text, fontFamily: ACME.font }}>Good morning, David</div>
          <div style={{ fontSize: 14, color: ACME.muted, marginTop: 4, fontFamily: ACME.font }}>Wednesday, January 15, 2025 · Consumer Lending Division</div>
        </div>
        <div style={{ fontSize: 12, color: ACME.subtle, fontFamily: ACME.font, textAlign: 'right' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'flex-end' }}>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: '#10B981' }}></div>
            {model.engine} — All systems operational
          </span>
        </div>
      </div>

      {/* KPI row */}
      <div style={{ display: 'flex', gap: 16, marginBottom: 24 }}>
        <KpiCard label="Queue Depth" value="47" sub="↑ 3 from yesterday" subColor="#B45309"
          icon={<svg width="20" height="20" fill="none" stroke={ACME.primary} strokeWidth="1.8" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>} />
        <KpiCard label="Reviewed Today" value="12" sub="of 15 daily target (80%)" subColor={ACME.primary}
          icon={<svg width="20" height="20" fill="none" stroke={ACME.primary} strokeWidth="1.8" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>} />
        <KpiCard label="Avg. Decision Time" value="4.2m" sub="↓ 12% vs. last week" subColor={ACME.success}
          icon={<svg width="20" height="20" fill="none" stroke={ACME.primary} strokeWidth="1.8" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>} />
        <KpiCard label="Model Accuracy" value="94.7%" sub="30-day rolling avg." subColor={ACME.muted}
          icon={<svg width="20" height="20" fill="none" stroke={ACME.primary} strokeWidth="1.8" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>} />
      </div>

      {/* Main grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 20 }}>
        {/* Priority Queue */}
        <div style={{ background: ACME.card, borderRadius: 12, boxShadow: '0 1px 3px rgba(0,0,0,0.06)', overflow: 'hidden' }}>
          <div style={{ padding: '16px 22px', borderBottom: '1px solid ' + ACME.border, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700, color: ACME.text, fontFamily: ACME.font }}>Priority Queue</div>
              <div style={{ fontSize: 12, color: ACME.muted, marginTop: 2, fontFamily: ACME.font }}>Applications awaiting your review</div>
            </div>
            <div style={{ padding: '5px 14px', borderRadius: 8, border: '1px solid ' + ACME.border, fontSize: 13, color: ACME.muted, cursor: 'pointer', fontFamily: ACME.font }}>View All</div>
          </div>
          {/* Table header */}
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 0.8fr 1fr 100px', padding: '10px 22px', borderBottom: '1px solid ' + ACME.border, fontSize: 11, fontWeight: 600, color: ACME.subtle, textTransform: 'uppercase', letterSpacing: 0.8, fontFamily: ACME.font }}>
            <span>Applicant</span>
            <span>Product</span>
            <span>Amount</span>
            <span>Score</span>
            <span>Status</span>
            <span></span>
          </div>
          {/* Rows */}
          {APPLICANTS.map((app, i) => {
            const sc = statusColors[app.decisionType];
            return (
              <div key={app.id} style={{ display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 0.8fr 1fr 100px', padding: '14px 22px', borderBottom: '1px solid ' + ACME.border, alignItems: 'center', cursor: 'pointer', transition: 'background 0.15s' }}
                onMouseEnter={(e) => e.currentTarget.style.background = '#F9FAFB'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                onClick={() => onOpenApplication(i)}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: ACME.text, fontFamily: ACME.font }}>{app.name}</div>
                  <div style={{ fontSize: 11, color: ACME.subtle, fontFamily: ACME.font }}>{app.id}</div>
                </div>
                <span style={{ fontSize: 13, color: ACME.text, fontFamily: ACME.font }}>{app.productShort}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: ACME.text, fontFamily: ACME.font }}>{app.amount}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: app.score >= 740 ? ACME.success : app.score >= 670 ? ACME.primary : app.score >= 580 ? '#B45309' : ACME.danger, fontFamily: ACME.font }}>{app.score}</span>
                <div>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 10px', borderRadius: 10, background: sc.bg, fontSize: 11, fontWeight: 600, color: sc.text, fontFamily: ACME.font }}>
                    <div style={{ width: 5, height: 5, borderRadius: 3, background: sc.dot }}></div>
                    {sc.label}
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <span style={{ fontSize: 13, fontWeight: 600, color: ACME.primary, fontFamily: ACME.font }}>Review →</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Right column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Model Performance */}
          <div style={{ background: ACME.card, borderRadius: 12, padding: '18px 22px', boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: ACME.text, marginBottom: 4, fontFamily: ACME.font }}>Model Performance</div>
            <div style={{ fontSize: 12, color: ACME.muted, marginBottom: 16, fontFamily: ACME.font }}>{model.label} · 30-day metrics</div>
            <MiniBar label="Accuracy" value={94.7} max={100} color={ACME.primary} />
            <MiniBar label="Precision" value={92.1} max={100} color="#0D9488" />
            <MiniBar label="Recall" value={89.8} max={100} color="#0284C7" />
            <div style={{ borderTop: '1px solid ' + ACME.border, paddingTop: 12, marginTop: 8, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div>
                <div style={{ fontSize: 11, color: ACME.muted, fontFamily: ACME.font }}>Avg. Inference</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: ACME.text, fontFamily: ACME.font }}>856ms</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: ACME.muted, fontFamily: ACME.font }}>Uptime</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: ACME.text, fontFamily: ACME.font }}>99.97%</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: ACME.muted, fontFamily: ACME.font }}>Requests (24h)</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: ACME.text, fontFamily: ACME.font }}>2,847</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: ACME.muted, fontFamily: ACME.font }}>GPU Utilization</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: ACME.text, fontFamily: ACME.font }}>68%</div>
              </div>
            </div>
          </div>

          {/* Recent Decisions */}
          <div style={{ background: ACME.card, borderRadius: 12, padding: '18px 22px', boxShadow: '0 1px 3px rgba(0,0,0,0.06)', flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: ACME.text, marginBottom: 14, fontFamily: ACME.font }}>Recent Decisions</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {RECENT_DECISIONS.map((d, i) => {
                const dc = decisionColors[d.decision] || { color: ACME.muted, bg: ACME.bg };
                return (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 12px', borderRadius: 8, background: '#FAFAFA' }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: ACME.text, fontFamily: ACME.font }}>{d.name}</div>
                      <div style={{ fontSize: 11, color: ACME.muted, marginTop: 1, fontFamily: ACME.font }}>{d.product} · {d.amount}</div>
                    </div>
                    <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 3 }}>
                      <div style={{ padding: '2px 8px', borderRadius: 6, background: dc.bg, fontSize: 11, fontWeight: 600, color: dc.color, fontFamily: ACME.font }}>{d.decision}</div>
                      <div style={{ fontSize: 10, color: ACME.subtle, fontFamily: ACME.font }}>{d.time}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.AcmeDashboard = AcmeDashboard;