// Incident triage queue — satisfies Brief §1: "Reporting: one-click report
// flow and triage queue". The learner-facing report form lives in incident.jsx;
// this is the manager/compliance-side queue that receives those submissions.
function TriagePage({ onNavigate, toast }) {
  const [statusFilter, setStatusFilter] = useState('all');
  const [selected, setSelected] = useState(null);

  const initialReports = [
    {
      id: 'INC-2026-0427', type: 'Suspicious email', reporter: 'Cardiology Nurse (masked)', dept: 'Cardiology-3B',
      severity: 'Medium', status: 'Received', sla: 'in 23h 42m',
      body: "Received an urgent email asking me to verify my mailbox credentials via an external link. Sender domain had a pipe character replacing an 'l'. Did not click.",
      when: 'Apr 19, 2026 · 08:37',
    },
    {
      id: 'INC-2026-0426', type: 'Lost device', reporter: 'Front desk clerk (masked)', dept: 'Admissions',
      severity: 'High', status: 'Received', sla: 'in 5h 12m',
      body: 'Left a hospital-issued tablet in the staff cafeteria during shift change. Returned 20 minutes later, tablet missing. No patient data opened at the time.',
      when: 'Apr 19, 2026 · 06:14',
    },
    {
      id: 'INC-2026-0425', type: 'Privacy concern', reporter: 'Lab tech (masked)', dept: 'Laboratory',
      severity: 'Medium', status: 'Triaging', sla: 'in 14h 08m',
      body: 'Observed a printout with full patient identifiers left at shared printer for over 10 minutes. Secured and shredded.',
      when: 'Apr 18, 2026 · 18:42',
      assignedTo: 'SOC · L1',
    },
    {
      id: 'INC-2026-0423', type: 'Suspicious email', reporter: 'Radiology (masked)', dept: 'Radiology',
      severity: 'High', status: 'Investigating', sla: 'in 2h 40m',
      body: 'Email impersonating the Chief of Radiology asking for an urgent MRI export. Reported immediately. Campaign appears to target 3 other radiologists.',
      when: 'Apr 18, 2026 · 09:22',
      assignedTo: 'SOC · L2',
    },
    {
      id: 'INC-2026-0418', type: 'Unusual behavior', reporter: 'Pharmacy (masked)', dept: 'Pharmacy',
      severity: 'Low', status: 'Investigating', sla: 'overdue 3h',
      body: 'Visitor attempted to connect a personal USB drive to the pharmacy workstation "to print a document". Refused and redirected to reception.',
      when: 'Apr 17, 2026 · 14:08',
      assignedTo: 'SOC · L1',
    },
    {
      id: 'INC-2026-0412', type: 'Suspicious email', reporter: 'Admissions (masked)', dept: 'Admissions',
      severity: 'Low', status: 'Resolved', sla: '—',
      body: 'Vendor invoice change request from unusual domain. Flagged correctly, SOC confirmed phishing and added domain to blocklist.',
      when: 'Apr 15, 2026 · 11:50',
      assignedTo: 'SOC · L1',
      resolution: 'Phishing confirmed · domain blocklisted · 0 clicks.',
    },
  ];

  const [reports, setReports] = useState(initialReports);

  const statuses = [
    { id: 'all',           label: 'All reports' },
    { id: 'Received',      label: 'Received' },
    { id: 'Triaging',      label: 'Triaging' },
    { id: 'Investigating', label: 'Investigating' },
    { id: 'Resolved',      label: 'Resolved' },
  ];

  const statusChip = (s) => {
    const map = {
      Received:      <span className="chip chip-coral"><I.AlertTriangle size={10}/> {s}</span>,
      Triaging:      <span className="chip chip-amber"><I.Clock size={10}/> {s}</span>,
      Investigating: <span className="chip chip-navy"><I.Eye size={10}/> {s}</span>,
      Resolved:      <span className="chip chip-green"><I.CheckCircle size={10}/> {s}</span>,
    };
    return map[s];
  };

  const severityChip = (s) => {
    if (s === 'High')   return <span className="chip chip-coral">{s}</span>;
    if (s === 'Medium') return <span className="chip chip-amber">{s}</span>;
    return <span className="chip chip-outline">{s}</span>;
  };

  const visible = reports.filter(r => statusFilter === 'all' || r.status === statusFilter);
  const counts = statuses.reduce((acc, s) => ({ ...acc, [s.id]: s.id === 'all' ? reports.length : reports.filter(r => r.status === s.id).length }), {});

  const advance = (next) => {
    if (!selected) return;
    setReports(reports.map(r => r.id === selected.id ? { ...r, status: next, assignedTo: r.assignedTo || 'SOC · L1' } : r));
    setSelected({ ...selected, status: next, assignedTo: selected.assignedTo || 'SOC · L1' });
    toast(`${selected.id} · ${next}`, 'success');
  };

  return (
    <div className="page-enter">
      <div className="breadcrumbs">
        <a href="#" onClick={e => {e.preventDefault(); onNavigate('manager');}}>Compliance</a>
        <I.ChevronRight size={10}/>
        <span>Triage queue</span>
      </div>

      <div className="row-between" style={{marginBottom: 16, alignItems: 'flex-start'}}>
        <div>
          <h1>Incident triage queue</h1>
          <p className="muted" style={{fontSize: 12.5}}>
            {counts.all} reports · {counts.Received} awaiting triage · SLA 24h from submission
          </p>
        </div>
        <button className="btn btn-outline" onClick={() => toast('Queue exported (CSV)', 'success')}>
          <I.Download size={14}/> Export queue
        </button>
      </div>

      <div style={{display: 'flex', gap: 6, marginBottom: 16, flexWrap: 'wrap'}}>
        {statuses.map(s => (
          <button
            key={s.id}
            className={`chip ${statusFilter === s.id ? 'chip-navy' : 'chip-outline'}`}
            onClick={() => setStatusFilter(s.id)}
            style={{cursor: 'pointer', textTransform: 'none', letterSpacing: 0, padding: '4px 10px', fontSize: 12}}
          >
            {s.label}
            <span style={{marginLeft: 6, opacity: 0.7}}>{counts[s.id] || 0}</span>
          </button>
        ))}
      </div>

      <div className="card">
        <table className="data-table">
          <thead>
            <tr>
              <th style={{width: 160}}>ID</th>
              <th style={{width: 180}}>Type</th>
              <th>Reporter</th>
              <th style={{width: 150}}>Department</th>
              <th style={{width: 100}}>Severity</th>
              <th style={{width: 150}}>Status</th>
              <th style={{width: 120}}>SLA</th>
            </tr>
          </thead>
          <tbody>
            {visible.map(r => (
              <tr key={r.id} onClick={() => setSelected(r)} style={{cursor: 'pointer'}}>
                <td><span className="mono" style={{fontSize: 11.5, color: 'var(--navy)', fontWeight: 600}}>#{r.id}</span></td>
                <td style={{fontWeight: 600, color: 'var(--navy)'}}>{r.type}</td>
                <td className="muted">{r.reporter}</td>
                <td>{r.dept}</td>
                <td>{severityChip(r.severity)}</td>
                <td>{statusChip(r.status)}</td>
                <td><span style={{fontSize: 12, color: r.sla.startsWith('overdue') ? 'var(--coral-700)' : 'var(--ink-2)', fontWeight: r.sla.startsWith('overdue') ? 600 : 400}}>{r.sla}</span></td>
              </tr>
            ))}
            {visible.length === 0 && (
              <tr><td colSpan={7} style={{textAlign: 'center', padding: 28, color: 'var(--ink-3)'}}>No reports in this status.</td></tr>
            )}
          </tbody>
        </table>
      </div>

      {selected && (
        <div className="modal-backdrop" onClick={() => setSelected(null)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{width: 620, maxWidth: '94vw'}}>
            <div style={{padding: '18px 24px', borderBottom: '1px solid var(--border-2)', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12}}>
              <div>
                <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6}}>
                  <span className="mono" style={{fontSize: 13, fontWeight: 600, color: 'var(--navy)'}}>#{selected.id}</span>
                  {statusChip(selected.status)}
                  {severityChip(selected.severity)}
                </div>
                <h2 style={{margin: 0}}>{selected.type}</h2>
                <p className="muted" style={{fontSize: 12, marginTop: 4}}>{selected.reporter} · {selected.dept} · {selected.when}</p>
              </div>
              <button className="icon-btn" aria-label="Close" onClick={() => setSelected(null)}><I.XCircle size={16}/></button>
            </div>
            <div style={{padding: 24}}>
              <div style={{fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8}}>
                Report body
              </div>
              <p style={{fontSize: 13.5, lineHeight: 1.6, color: 'var(--ink-2)', margin: '0 0 20px'}}>{selected.body}</p>

              <div style={{fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10}}>
                Timeline
              </div>
              <div style={{display: 'flex', flexDirection: 'column', gap: 4, fontSize: 12.5}}>
                <div className="timeline-item">
                  <div className="timeline-dot past"/>
                  <div>
                    <div style={{fontWeight: 600, color: 'var(--navy)'}}>Received</div>
                    <div className="muted">{selected.when} · auto-logged from learner report flow</div>
                  </div>
                </div>
                {['Triaging', 'Investigating', 'Resolved'].includes(selected.status) && (
                  <div className="timeline-item">
                    <div className={`timeline-dot ${selected.status === 'Triaging' ? '' : 'past'}`}/>
                    <div>
                      <div style={{fontWeight: 600, color: 'var(--navy)'}}>Triaging</div>
                      <div className="muted">Assigned to {selected.assignedTo || 'SOC · L1'}</div>
                    </div>
                  </div>
                )}
                {['Investigating', 'Resolved'].includes(selected.status) && (
                  <div className="timeline-item">
                    <div className={`timeline-dot ${selected.status === 'Investigating' ? '' : 'past'}`}/>
                    <div>
                      <div style={{fontWeight: 600, color: 'var(--navy)'}}>Investigating</div>
                      <div className="muted">Analyst notes pending · correlates with campaign telemetry</div>
                    </div>
                  </div>
                )}
                {selected.status === 'Resolved' && (
                  <div className="timeline-item">
                    <div className="timeline-dot past"/>
                    <div>
                      <div style={{fontWeight: 600, color: 'var(--green)'}}>Resolved</div>
                      <div className="muted">{selected.resolution || 'Closed'}</div>
                    </div>
                  </div>
                )}
              </div>
            </div>
            <div style={{padding: '12px 24px', borderTop: '1px solid var(--border-2)', background: 'var(--bg)', display: 'flex', justifyContent: 'space-between', gap: 8}}>
              <button className="btn btn-ghost" onClick={() => setSelected(null)}>Close</button>
              <div style={{display: 'flex', gap: 8}}>
                {selected.status === 'Received' && (
                  <button className="btn btn-outline" onClick={() => advance('Triaging')}>Mark triaged</button>
                )}
                {selected.status === 'Triaging' && (
                  <button className="btn btn-outline" onClick={() => advance('Investigating')}>Start investigation</button>
                )}
                {selected.status === 'Investigating' && (
                  <button className="btn btn-primary" onClick={() => advance('Resolved')}>Mark resolved</button>
                )}
                {selected.status !== 'Resolved' && (
                  <button className="btn btn-danger" onClick={() => toast(`${selected.id} escalated to SOC L2`, 'success')}>
                    <I.AlertTriangle size={13}/> Escalate
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.TriagePage = TriagePage;