// Insurance Portal — Shell + Screens

const { useState, useEffect, useMemo, useRef } = React;

const INS_NAV = [
  { id: 'home',    label: 'Home',           icon: 'Home' },
  { id: 'lookup',  label: 'Patient Lookup', icon: 'Search' },
  { id: 'scan',    label: 'Scan Results',   icon: 'Scan' },
  { id: 'history', label: 'History',        icon: 'History' },
  { id: 'fraud',   label: 'Risk Analytics', icon: 'Shield' },
  { id: 'reports', label: 'Reports',        icon: 'Chart' },
  { id: 'settings',label: 'Settings',       icon: 'Settings' },
];

// ─── Sidebar ─────────────────────────────────────────────
function InsSidebar({ current, onNav, mode, accent }) {
  const collapsed = mode === 'icon';
  return (
    <aside className={`ins-sidebar ins-sidebar-${mode}`}>
      <div className="ins-sb-inner">
        <div className="ins-sb-brand">
          <div className="ins-sb-mark" style={{ background: `linear-gradient(135deg, ${accent}, #67e8f9)` }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M9 12l2 2 4-4" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          {!collapsed && (
            <div>
              <div className="ins-sb-name">ArogyaSync</div>
              <div className="ins-sb-sub">Insurance Portal</div>
            </div>
          )}
        </div>

        <nav className="ins-sb-nav">
          {INS_NAV.map((item, i) => {
            const I = window.InsIcon[item.icon];
            const active = current === item.id;
            return (
              <button key={item.id} onClick={() => onNav(item.id)}
                className={`ins-sb-item ${active ? 'active' : ''}`}
                style={{ animationDelay: `${i * 35}ms` }}>
                <span className="ins-sb-icon"><I /></span>
                {!collapsed && <span className="ins-sb-label">{item.label}</span>}
                {active && <span className="ins-sb-rail" style={{ background: accent }} />}
              </button>
            );
          })}
        </nav>

        {!collapsed && (
          <div className="ins-sb-tag">
            <div className="ins-sb-tag-label">ACTIVE COMPANY</div>
            <div className="ins-sb-tag-name">A-Risk Underwriting</div>
            <div className="ins-sb-tag-meta">License · IRDAI-7281</div>
          </div>
        )}

        <div className="ins-sb-footer">
          {!collapsed ? (
            <div className="ins-sb-user">
              <div className="ins-sb-avatar" style={{ background: `linear-gradient(135deg, ${accent}, #67e8f9)` }}>
                {window.INS_AGENT.name.split(' ').map(n => n[0]).join('')}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="ins-sb-uname">{window.INS_AGENT.name}</div>
                <div className="ins-sb-urole">{window.INS_AGENT.agentId}</div>
              </div>
              <button className="ins-sb-logout"><window.InsIcon.Logout /></button>
            </div>
          ) : (
            <div className="ins-sb-avatar" style={{ background: `linear-gradient(135deg, ${accent}, #67e8f9)`, margin: '0 auto' }}>
              {window.INS_AGENT.name.split(' ').map(n => n[0]).join('')}
            </div>
          )}
        </div>
      </div>
    </aside>
  );
}

// ─── Header ──────────────────────────────────────────────
function InsHeader({ title, subtitle, dark, onToggleDark, live, onToggleLive, search, onSearch }) {
  const [time, setTime] = useState(new Date());
  useEffect(() => { const id = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(id); }, []);
  const t = time.toTimeString().slice(0, 8);
  const d = time.toLocaleDateString('en-GB', { weekday: 'short', day: '2-digit', month: 'short', year: 'numeric' });

  return (
    <header className="ins-header">
      <div className="ins-h-left">
        <h1 className="ins-page-title">{title}</h1>
        {subtitle && <div className="ins-page-sub">{subtitle}</div>}
      </div>
      <div className="ins-h-right">
        <div className="ins-search">
          <window.InsIcon.Search />
          <input placeholder="Search patient, scan ID, policy…" value={search} onChange={e => onSearch(e.target.value)}/>
          <kbd>⌘K</kbd>
        </div>
        <button className={`ins-live ${live ? 'on' : ''}`} onClick={onToggleLive}>
          <span className="ins-live-dot"/>{live ? 'LIVE' : 'PAUSED'}
        </button>
        <div className="ins-h-clock">
          <div className="ins-h-time">{t}</div>
          <div className="ins-h-date">{d}</div>
        </div>
        <button className="ins-icon-btn" onClick={onToggleDark}>{dark ? <window.InsIcon.Sun/> : <window.InsIcon.Moon/>}</button>
      </div>
    </header>
  );
}

// ─── HOME (KPIs + recent scans + risk leaderboard) ──────
function InsHome({ accent, cardStyle, onOpenScan, live }) {
  const k = window.INS_KPIS;
  // Live-update KPIs
  const [kpis, setKpis] = useState({
    scans: k.totalScans, match: k.matchRate, flagged: k.flagged, saved: k.fraudSaved,
  });
  useEffect(() => {
    if (!live) return;
    const id = setInterval(() => {
      setKpis(prev => ({
        scans: prev.scans + (Math.random() < 0.3 ? 1 : 0),
        match: parseFloat((prev.match + (Math.random() - 0.5) * 0.15).toFixed(2)),
        flagged: prev.flagged + (Math.random() < 0.08 ? 1 : 0),
        saved: prev.saved + (Math.random() < 0.2 ? Math.round(Math.random() * 30000) : 0),
      }));
    }, 3000);
    return () => clearInterval(id);
  }, [live]);

  return (
    <div className="ins-home">
      {/* Hero KPI strip */}
      <div className="ins-kpi-row">
        <div className={`ins-kpi ins-kpi-hero card-${cardStyle}`}>
          <div className="ins-kpi-label">Scans this week</div>
          <div className="ins-kpi-value"><window.InsTicker value={kpis.scans} /></div>
          <div className="ins-kpi-delta up">
            <window.InsIcon.ArrowUp/> 12.4% vs last week
          </div>
          <div className="ins-kpi-spark">
            <window.InsSpark data={k.scansSpark} color={accent} width={220} height={42} />
          </div>
        </div>
        <div className={`ins-kpi card-${cardStyle}`}>
          <div className="ins-kpi-label">Match rate</div>
          <div className="ins-kpi-value"><window.InsTicker value={kpis.match} decimals={1} suffix="%" /></div>
          <div className="ins-kpi-delta up">
            <window.InsIcon.ArrowUp/> 1.2pp
          </div>
          <div className="ins-kpi-spark">
            <window.InsSpark data={k.matchRateSpark} color="#16a34a" width={160} height={36} />
          </div>
        </div>
        <div className={`ins-kpi card-${cardStyle}`}>
          <div className="ins-kpi-label">Flagged</div>
          <div className="ins-kpi-value" style={{ color: '#ea580c' }}><window.InsTicker value={kpis.flagged} /></div>
          <div className="ins-kpi-delta down">
            <window.InsIcon.ArrowDown/> 3 vs last week
          </div>
          <div className="ins-kpi-spark">
            <window.InsSpark data={k.flaggedSpark} color="#ea580c" width={160} height={36} />
          </div>
        </div>
        <div className={`ins-kpi card-${cardStyle}`}>
          <div className="ins-kpi-label">Fraud prevented (₹)</div>
          <div className="ins-kpi-value">
            ₹<window.InsTicker value={kpis.saved / 100000} decimals={1} suffix="L" />
          </div>
          <div className="ins-kpi-delta up">
            <window.InsIcon.ArrowUp/> ₹4.2L this week
          </div>
          <div className="ins-kpi-spark">
            <window.InsSpark data={k.fraudSavedSpark} color={accent} width={160} height={36} />
          </div>
        </div>
      </div>

      {/* Trend chart + field analysis */}
      <div className="ins-row-2">
        <div className={`ins-panel card-${cardStyle}`}>
          <div className="ins-panel-head">
            <div>
              <div className="ins-panel-title">Match rate · last 30 days</div>
              <div className="ins-panel-sub">CSV-vs-DB verification across all agents in your company</div>
            </div>
            <div className="ins-panel-actions">
              <button className="ins-chip">30d</button>
              <button className="ins-chip">90d</button>
              <button className="ins-chip">YTD</button>
            </div>
          </div>
          <window.InsTrendChart data={window.INS_TRENDS} color={accent} height={260}/>
        </div>

        <div className={`ins-panel card-${cardStyle}`}>
          <div className="ins-panel-head">
            <div>
              <div className="ins-panel-title">Most-mismatched fields</div>
              <div className="ins-panel-sub">Top fraud signals this month</div>
            </div>
          </div>
          <div className="ins-fields">
            {window.INS_FIELD_ANALYSIS.map((f, i) => {
              const max = window.INS_FIELD_ANALYSIS[0].mismatches;
              const pct = (f.mismatches / max) * 100;
              return (
                <div key={f.field} className="ins-field-row" style={{ animationDelay: `${i * 80}ms` }}>
                  <div className="ins-field-label">
                    <span>{f.field}</span>
                    <span className="ins-field-num"><window.InsTicker value={f.mismatches} /></span>
                  </div>
                  <div className="ins-field-bar">
                    <div className="ins-field-fill" style={{ width: `${pct}%`, background: f.color }}/>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Recent scans + risk leaderboard */}
      <div className="ins-row-2">
        <div className={`ins-panel card-${cardStyle}`} style={{ minWidth: 0 }}>
          <div className="ins-panel-head">
            <div>
              <div className="ins-panel-title">Recent scans</div>
              <div className="ins-panel-sub">{window.INS_RECENT_SCANS.length} comprehensive scans · last 48h</div>
            </div>
            <button className="ins-chip"><window.InsIcon.Filter/> Filter</button>
          </div>
          <div className="ins-scan-list">
            {window.INS_RECENT_SCANS.slice(0, 6).map((s, i) => (
              <button key={s.id} className="ins-scan-row" onClick={() => onOpenScan(s)} style={{ animationDelay: `${i * 50}ms` }}>
                <div className="ins-scan-id">{s.id}</div>
                <div className="ins-scan-patient">
                  <div className="ins-scan-pname">{s.patient}</div>
                  <div className="ins-scan-pmeta">{s.insuranceId} · {s.date}</div>
                </div>
                <div className="ins-scan-rate">
                  <div className="ins-scan-rate-num"><window.InsTicker value={s.matchRate} decimals={1} suffix="%" /></div>
                  <div className="ins-scan-rate-bar">
                    <div className="ins-scan-rate-fill" style={{
                      width: `${s.matchRate}%`,
                      background: s.matchRate >= 95 ? '#16a34a' : s.matchRate >= 85 ? '#84cc16' : s.matchRate >= 70 ? '#ca8a04' : s.matchRate >= 50 ? '#ea580c' : '#dc2626'
                    }}/>
                  </div>
                </div>
                <div className="ins-scan-cell">
                  <div className="ins-scan-cell-num">{s.mismatches}</div>
                  <div className="ins-scan-cell-lbl">mismatch</div>
                </div>
                <window.FraudBadge level={s.fraudLevel} size="sm" />
                <window.InsIcon.ChevronRight />
              </button>
            ))}
          </div>
        </div>

        <div className={`ins-panel card-${cardStyle}`}>
          <div className="ins-panel-head">
            <div>
              <div className="ins-panel-title">Risk leaderboard</div>
              <div className="ins-panel-sub">Highest-risk patients · auto-flagged for review</div>
            </div>
          </div>
          <div className="ins-leaderboard">
            {window.INS_RISK_LEADERBOARD.map((r, i) => (
              <div key={r.insuranceId} className="ins-lb-row" style={{ animationDelay: `${i * 80}ms` }}>
                <div className="ins-lb-rank">{i + 1}</div>
                <div className="ins-lb-score" style={{ '--score': r.score / 100, '--score-color': window.INS_FRAUD_LEVELS[r.level].color }}>
                  <svg viewBox="0 0 36 36">
                    <circle cx="18" cy="18" r="15" fill="none" stroke="var(--ins-border)" strokeWidth="3"/>
                    <circle cx="18" cy="18" r="15" fill="none" stroke={window.INS_FRAUD_LEVELS[r.level].color} strokeWidth="3" strokeDasharray={`${r.score / 100 * 94}, 94`} strokeLinecap="round" transform="rotate(-90 18 18)"/>
                  </svg>
                  <span className="ins-lb-score-num">{r.score}</span>
                </div>
                <div className="ins-lb-body">
                  <div className="ins-lb-name">{r.patient}</div>
                  <div className="ins-lb-meta">{r.insuranceId} · {r.scans} scans</div>
                  <div className="ins-lb-flags">{r.flags}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── PATIENT LOOKUP ─────────────────────────────────────
function InsLookup({ cardStyle, accent, onScanComplete }) {
  const [form, setForm] = useState({ name: '', dob: '', insuranceId: '', dateFrom: '', dateTo: '' });
  const [scanning, setScanning] = useState(false);
  const [progress, setProgress] = useState(0);
  const toast = window.useInsToast();

  const submit = () => {
    setScanning(true);
    setProgress(0);
    const id = setInterval(() => {
      setProgress(p => {
        const next = p + 8 + Math.random() * 4;
        if (next >= 100) {
          clearInterval(id);
          setTimeout(() => {
            setScanning(false);
            setProgress(0);
            toast.push({ sev: 'success', title: 'Scan complete', body: `Match rate 78.2% · 19 mismatches detected` });
            onScanComplete(window.INS_SCAN_DETAIL);
          }, 350);
          return 100;
        }
        return next;
      });
    }, 220);
  };

  return (
    <div className="ins-lookup">
      <div className={`ins-lookup-card card-${cardStyle}`}>
        <div className="ins-lookup-head">
          <div className="ins-lookup-icon" style={{ background: `linear-gradient(135deg, ${accent}, #67e8f9)` }}>
            <window.InsIcon.Scan style={{ color: 'white' }} />
          </div>
          <div>
            <div className="ins-lookup-title">Comprehensive scan</div>
            <div className="ins-lookup-sub">Verify a patient's vitals CSV against the live database. Returns per-vital match/mismatch + a session timeline.</div>
          </div>
        </div>

        <div className="ins-form">
          <div className="ins-form-row">
            <div className="ins-field">
              <label>Patient name</label>
              <input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} placeholder="e.g. Rahul Sharma" />
            </div>
            <div className="ins-field">
              <label>Date of birth</label>
              <input type="text" value={form.dob} onChange={e => setForm(f => ({ ...f, dob: e.target.value }))} placeholder="DD-MM-YYYY" />
            </div>
            <div className="ins-field">
              <label>Insurance / Policy ID</label>
              <input value={form.insuranceId} onChange={e => setForm(f => ({ ...f, insuranceId: e.target.value }))} placeholder="PLN-XXXXXX" />
            </div>
          </div>
          <div className="ins-form-row">
            <div className="ins-field">
              <label>Date from</label>
              <input type="text" value={form.dateFrom} onChange={e => setForm(f => ({ ...f, dateFrom: e.target.value }))} placeholder="DD-MM-YYYY" />
            </div>
            <div className="ins-field">
              <label>Date to</label>
              <input type="text" value={form.dateTo} onChange={e => setForm(f => ({ ...f, dateTo: e.target.value }))} placeholder="DD-MM-YYYY" />
            </div>
            <div className="ins-field ins-field-action">
              <button className="ins-btn ins-btn-primary ins-btn-lg" onClick={submit} disabled={scanning}>
                {scanning ? `Scanning… ${Math.round(progress)}%` : 'Run comprehensive scan'}
                {!scanning && <window.InsIcon.ArrowRight />}
              </button>
            </div>
          </div>

          {scanning && (
            <div className="ins-scan-progress">
              <div className="ins-progress-bar"><div className="ins-progress-fill" style={{ width: `${progress}%` }}/></div>
              <div className="ins-progress-steps">
                <div className={progress > 20 ? 'done' : ''}><window.InsIcon.Check/> Fetching CSV records</div>
                <div className={progress > 40 ? 'done' : ''}><window.InsIcon.Check/> Querying live database</div>
                <div className={progress > 70 ? 'done' : ''}><window.InsIcon.Check/> Per-vital comparison</div>
                <div className={progress > 90 ? 'done' : ''}><window.InsIcon.Check/> Fraud scoring</div>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="ins-quick-lookup">
        <div className="ins-ql-title">Or pick a recent patient</div>
        <div className="ins-ql-grid">
          {window.INS_RECENT_SCANS.slice(0, 4).map((s, i) => (
            <button key={s.id} className={`ins-ql-card card-${cardStyle}`} onClick={() => onScanComplete(window.INS_SCAN_DETAIL)} style={{ animationDelay: `${i * 60}ms` }}>
              <div className="ins-ql-name">{s.patient}</div>
              <div className="ins-ql-meta">{s.insuranceId}</div>
              <window.FraudBadge level={s.fraudLevel} size="sm" />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── SCAN RESULTS ────────────────────────────────────────
function InsScanResults({ scan, onBack, cardStyle }) {
  const [filter, setFilter] = useState('all');
  const [sessionFilter, setSessionFilter] = useState(null);
  if (!scan) return null;
  const meta = window.INS_FRAUD_LEVELS[scan.fraudLevel];
  const filtered = scan.records.filter(r =>
    (filter === 'all' || r.status === filter) &&
    (sessionFilter == null || r.session === sessionFilter)
  );

  return (
    <div className="ins-scan-results">
      {/* Hero risk banner */}
      <div className={`ins-risk-banner card-${cardStyle}`} style={{ '--risk-color': meta.color, '--risk-bg': meta.bg }}>
        <button onClick={onBack} className="ins-back"><window.InsIcon.ChevronLeft/> Back</button>
        <div className="ins-risk-body">
          <div className="ins-risk-score">
            <svg viewBox="0 0 100 100" width="120" height="120">
              <circle cx="50" cy="50" r="42" fill="none" stroke="var(--ins-border)" strokeWidth="6"/>
              <circle cx="50" cy="50" r="42" fill="none" stroke={meta.color} strokeWidth="6" strokeDasharray={`${scan.fraudScore / 100 * 264}, 264`} strokeLinecap="round" transform="rotate(-90 50 50)" style={{ transition: 'stroke-dasharray 0.8s' }}/>
              <text x="50" y="50" textAnchor="middle" fill={meta.color} fontSize="26" fontWeight="700" fontFamily="Inter">
                <window.InsTicker value={scan.fraudScore} />
              </text>
              <text x="50" y="68" textAnchor="middle" fill="var(--ins-muted)" fontSize="9" fontFamily="Inter" letterSpacing="0.1em">RISK SCORE</text>
            </svg>
          </div>
          <div className="ins-risk-info">
            <div className="ins-risk-eyebrow">{scan.scanId}</div>
            <div className="ins-risk-name">{scan.patient}</div>
            <div className="ins-risk-meta">{scan.insuranceId} · {scan.totalScans} records · {scan.sessions.length} sessions</div>
            <window.FraudBadge level={scan.fraudLevel} />
          </div>
          <div className="ins-risk-actions">
            <button className="ins-btn ins-btn-ghost"><window.InsIcon.Download/> Export CSV</button>
            <button className="ins-btn ins-btn-primary">Flag for review</button>
          </div>
        </div>
      </div>

      {/* Metrics row */}
      <div className="ins-metrics-row">
        <Metric label="Total scans"  value={scan.totalScans} color="#06b6d4" cardStyle={cardStyle}/>
        <Metric label="Matches"      value={scan.matches}    color="#16a34a" cardStyle={cardStyle}/>
        <Metric label="Mismatches"   value={scan.mismatches} color="#ea580c" cardStyle={cardStyle}/>
        <Metric label="CSV missing"  value={scan.csvMissing} color="#94a3b8" cardStyle={cardStyle}/>
        <Metric label="Match rate"   value={scan.matchRate}  suffix="%" decimals={1} color="#16a34a" cardStyle={cardStyle}/>
      </div>

      {/* Sessions table */}
      <div className={`ins-panel card-${cardStyle}`}>
        <div className="ins-panel-head">
          <div>
            <div className="ins-panel-title">Patient visit sessions</div>
            <div className="ins-panel-sub">Click a session to filter the detail table below</div>
          </div>
          {sessionFilter !== null && (
            <button className="ins-chip" onClick={() => setSessionFilter(null)}>
              <window.InsIcon.X/> Clear session filter
            </button>
          )}
        </div>
        <table className="ins-table">
          <thead>
            <tr><th>#</th><th>Device</th><th>Check-in</th><th>Check-out</th><th>Duration</th><th>Vitals</th><th>Status</th></tr>
          </thead>
          <tbody>
            {scan.sessions.map((s) => (
              <tr key={s.idx} className={`ins-row ${sessionFilter === s.idx ? 'active' : ''}`} onClick={() => setSessionFilter(s.idx)}>
                <td className="mono"><strong>S{s.idx}</strong></td>
                <td className="mono" style={{ fontSize: 11 }}>{s.device}</td>
                <td className="mono" style={{ fontSize: 12 }}>{s.start}</td>
                <td className="mono" style={{ fontSize: 12 }}>{s.end}</td>
                <td className="mono" style={{ fontSize: 12 }}>{s.duration}</td>
                <td><strong>{s.vitals}</strong></td>
                <td>
                  <span className={`ins-status-pill ${s.status}`}>
                    {s.status === 'active' ? '● Active' : '✓ Completed'}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Per-vital records */}
      <div className={`ins-panel card-${cardStyle}`}>
        <div className="ins-panel-head">
          <div>
            <div className="ins-panel-title">Vital records · per-record detail</div>
            <div className="ins-panel-sub">{filtered.length} records {sessionFilter !== null && `· Session ${sessionFilter}`}</div>
          </div>
          <div className="ins-tabs">
            {['all', 'match', 'mismatch'].map(f => (
              <button key={f} onClick={() => setFilter(f)} className={`ins-tab ${filter === f ? 'active' : ''}`}>{f}</button>
            ))}
          </div>
        </div>
        <div className="ins-records">
          {filtered.map((r, i) => (
            <div key={i} className={`ins-record ins-record-${r.status}`} style={{ animationDelay: `${i * 30}ms` }}>
              <div className="ins-record-time mono">{r.time}</div>
              <div className="ins-record-vital">{r.vital}</div>
              <div className="ins-record-vals">
                <div><span className="ins-rv-lbl">DB</span><span className="ins-rv-val">{r.db}</span></div>
                <div className="ins-rv-arrow">→</div>
                <div><span className="ins-rv-lbl">CSV</span><span className="ins-rv-val">{r.csv}</span></div>
              </div>
              <div className="ins-record-delta mono" style={{ color: r.status === 'mismatch' ? 'var(--ins-red)' : 'var(--ins-green)' }}>{r.delta}</div>
              <div className={`ins-record-status ${r.status}`}>
                {r.status === 'match' ? <><window.InsIcon.Check/> MATCH</> : <><window.InsIcon.Cross/> MISMATCH</>}
              </div>
              <div className="ins-record-session mono">S{r.session}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Metric({ label, value, suffix = '', decimals = 0, color, cardStyle }) {
  return (
    <div className={`ins-metric card-${cardStyle}`}>
      <div className="ins-m-label">{label}</div>
      <div className="ins-m-value" style={{ color }}>
        <window.InsTicker value={value} decimals={decimals} suffix={suffix} />
      </div>
      <div className="ins-m-bar" style={{ background: color, opacity: 0.4 }}/>
    </div>
  );
}

// ─── HISTORY / Risk Analytics / Reports / Settings (simpler) ──
function InsHistory({ cardStyle }) {
  const all = [...window.INS_RECENT_SCANS, ...window.INS_RECENT_SCANS.map(s => ({ ...s, id: s.id.replace('SCN-', 'SCN-3'), date: s.date.replace('2026-05-1', '2026-05-0') }))];
  return (
    <div className={`ins-panel card-${cardStyle}`}>
      <div className="ins-panel-head">
        <div>
          <div className="ins-panel-title">Scan history · all time</div>
          <div className="ins-panel-sub">{all.length} comprehensive scans</div>
        </div>
        <button className="ins-chip"><window.InsIcon.Download/> Export</button>
      </div>
      <table className="ins-table">
        <thead><tr><th>Scan ID</th><th>Patient</th><th>Policy</th><th>Date</th><th>Match rate</th><th>Mismatches</th><th>Fraud level</th></tr></thead>
        <tbody>
          {all.map((s, i) => (
            <tr key={s.id + i} className="ins-row" style={{ animationDelay: `${i * 25}ms` }}>
              <td className="mono"><strong>{s.id}</strong></td>
              <td>{s.patient}</td>
              <td className="mono">{s.insuranceId}</td>
              <td className="mono" style={{ fontSize: 12 }}>{s.date}</td>
              <td>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div className="ins-mini-bar"><div className="ins-mini-fill" style={{ width: `${s.matchRate}%`, background: s.matchRate >= 85 ? '#16a34a' : s.matchRate >= 70 ? '#ca8a04' : '#dc2626' }}/></div>
                  <span className="mono" style={{ fontSize: 12 }}>{s.matchRate.toFixed(1)}%</span>
                </div>
              </td>
              <td><strong>{s.mismatches}</strong></td>
              <td><window.FraudBadge level={s.fraudLevel} size="sm"/></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function InsRiskAnalytics({ cardStyle, accent }) {
  return (
    <div className="ins-home">
      <div className="ins-row-2">
        <div className={`ins-panel card-${cardStyle}`}>
          <div className="ins-panel-head"><div><div className="ins-panel-title">Risk distribution</div><div className="ins-panel-sub">All scans · current quarter</div></div></div>
          <div className="ins-risk-dist">
            {Object.entries(window.INS_FRAUD_LEVELS).map(([k, m], i) => {
              const pct = [42, 26, 18, 10, 4][i];
              return (
                <div key={k} className="ins-rd-row" style={{ animationDelay: `${i * 60}ms` }}>
                  <div className="ins-rd-label">
                    <span className="ins-rd-dot" style={{ background: m.color }}/>
                    <span>{m.label}</span>
                  </div>
                  <div className="ins-rd-bar"><div className="ins-rd-fill" style={{ width: `${pct}%`, background: m.color }}/></div>
                  <div className="ins-rd-pct">{pct}%</div>
                </div>
              );
            })}
          </div>
        </div>
        <div className={`ins-panel card-${cardStyle}`}>
          <div className="ins-panel-head"><div><div className="ins-panel-title">Top problematic devices</div><div className="ins-panel-sub">Highest mismatch rates</div></div></div>
          <div className="ins-devices">
            {[
              { mac: 'AA:BB:CC:DD:01:01', hospital: 'Apollo · ICU', mismatch: 28.4, scans: 142 },
              { mac: 'AA:BB:CC:DD:02:03', hospital: 'AIIMS · ICU', mismatch: 19.2, scans: 88 },
              { mac: 'AA:BB:CC:DD:01:06', hospital: 'Apollo · Cardiac', mismatch: 14.8, scans: 67 },
              { mac: 'AA:BB:CC:DD:03:02', hospital: 'Fortis · ICU', mismatch: 11.2, scans: 51 },
            ].map((d, i) => (
              <div key={d.mac} className="ins-device-row" style={{ animationDelay: `${i * 60}ms` }}>
                <div className="ins-device-mac mono">{d.mac}</div>
                <div className="ins-device-name">{d.hospital}</div>
                <div className="ins-device-score">
                  <strong style={{ color: 'var(--ins-amber)' }}>{d.mismatch.toFixed(1)}%</strong>
                  <span style={{ fontSize: 11, color: 'var(--ins-muted)' }}>{d.scans} scans</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className={`ins-panel card-${cardStyle}`}>
        <div className="ins-panel-head"><div><div className="ins-panel-title">Fraud trend · last 30 days</div></div></div>
        <window.InsTrendChart data={window.INS_TRENDS} color={accent} height={260}/>
      </div>
    </div>
  );
}

function InsPlaceholder({ title, sub, cardStyle }) {
  return (
    <div className={`ins-placeholder card-${cardStyle}`}>
      <div className="ins-ph-icon">⚙</div>
      <div className="ins-ph-title">{title}</div>
      <div className="ins-ph-sub">{sub}</div>
    </div>
  );
}

Object.assign(window, {
  InsSidebar, InsHeader, InsHome, InsLookup, InsScanResults,
  InsHistory, InsRiskAnalytics, InsPlaceholder, INS_NAV,
});