function IncidentPage({ onNavigate, toast }) {
  const [type, setType] = useState('phish');
  const [severity, setSeverity] = useState('med');
  const [desc, setDesc] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    toast('Report submitted · #INC-2026-0427', 'success');
  };

  if (submitted) {
    return (
      <div className="page-enter" style={{maxWidth: 640, margin: '40px auto'}}>
        <div className="card">
          <div className="card-body" style={{padding: 40, textAlign: 'center'}}>
            <div style={{width: 80, height: 80, borderRadius: '50%', background: 'var(--green-100)', color: 'var(--green)', display: 'grid', placeItems: 'center', margin: '0 auto 20px'}}>
              <I.CheckCircle size={40}/>
            </div>
            <h1 style={{fontSize: 24, marginBottom: 8}}>Report submitted</h1>
            <p className="muted" style={{fontSize: 14}}>Your report was received and the security team has been notified.</p>
            <div style={{margin: '24px auto', padding: '14px 20px', background: 'var(--bg)', borderRadius: 10, display: 'inline-flex', gap: 20, alignItems: 'center'}}>
              <div>
                <div className="muted" style={{fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600}}>Reference</div>
                <div className="mono" style={{fontSize: 15, fontWeight: 600, color: 'var(--navy)', marginTop: 2}}>#INC-2026-0427</div>
              </div>
              <div style={{width: 1, height: 32, background: 'var(--border)'}}/>
              <div>
                <div className="muted" style={{fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600}}>Response SLA</div>
                <div style={{fontSize: 15, fontWeight: 600, color: 'var(--navy)', marginTop: 2}}>Within 24 hours</div>
              </div>
            </div>
            <div className="callout callout-teal" style={{textAlign: 'left', marginTop: 8}}>
              <I.Info size={18} style={{flexShrink: 0, marginTop: 2}}/>
              <div style={{fontSize: 13}}>
                You'll receive an email update from <span className="mono">soc@stlukes.org</span> when triage begins. For urgent issues (active patient-data exposure), call <b>x4400</b> immediately.
              </div>
            </div>
            <div style={{display: 'flex', gap: 10, justifyContent: 'center', marginTop: 24}}>
              <button className="btn btn-outline" onClick={() => {setSubmitted(false); setDesc('');}}>File another</button>
              <button className="btn btn-primary" onClick={() => onNavigate('dashboard')}>Back to dashboard</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="page-enter" style={{maxWidth: 780, margin: '0 auto'}}>
      <div className="breadcrumbs">
        <a href="#" onClick={e => {e.preventDefault(); onNavigate('dashboard');}}>Dashboard</a>
        <I.ChevronRight size={12}/>
        <span style={{color: 'var(--navy)'}}>Report incident</span>
      </div>

      <div className="row-between" style={{marginBottom: 20}}>
        <div>
          <h1>Report an incident</h1>
          <p className="muted">Confidential. Retaliation is strictly prohibited under hospital policy.</p>
        </div>
        <span className="chip chip-green"><I.ShieldCheck size={12}/> End-to-end encrypted</span>
      </div>

      <form className="card" onSubmit={submit}>
        <div className="card-body" style={{padding: 28}}>
          <div className="stack">
            <div className="field">
              <label>Type of incident</label>
              <select value={type} onChange={e => setType(e.target.value)}>
                <option value="phish">Suspicious email / Phishing</option>
                <option value="lost">Lost or stolen device</option>
                <option value="privacy">Privacy concern (possible ePHI exposure)</option>
                <option value="behavior">Unusual behavior or policy violation</option>
                <option value="other">Other</option>
              </select>
              <div className="hint">Pick the closest match. If unsure, choose <em>Other</em> — we'll route it correctly.</div>
            </div>

            <div className="grid-2">
              <div className="field">
                <label>When did it happen?</label>
                <input type="datetime-local" defaultValue="2026-04-19T08:29"/>
                <div className="hint">Approximate time is fine if you're not certain.</div>
              </div>
              <div className="field">
                <label>Where (department)</label>
                <select defaultValue="cardio">
                  <option value="cardio">Cardiology — Ward 3B</option>
                  <option value="rad">Radiology</option>
                  <option value="lab">Laboratory</option>
                  <option value="pharm">Pharmacy</option>
                  <option value="front">Front Desk / Admissions</option>
                  <option value="other">Other</option>
                </select>
                <div className="hint">Where you were when it occurred — not where the sender is from.</div>
              </div>
            </div>

            <div className="field">
              <label>
                Description
                <HelpIcon title="What to write" text="A few plain sentences about what you saw, what you clicked, or what felt wrong. The security team will follow up for more detail."/>
              </label>
              <textarea
                value={desc}
                onChange={e => setDesc(e.target.value)}
                placeholder="Describe what happened in your own words."
                maxLength={2000}
              />
              <div className="hint" style={{display: 'flex', justifyContent: 'space-between'}}>
                <span><I.Info size={11} style={{verticalAlign: -1, marginRight: 4}}/> Do not include patient names, room numbers, or medical record numbers.</span>
                <span>{desc.length}/2000</span>
              </div>
            </div>

            <div className="field">
              <label>
                Severity (your assessment)
                <HelpIcon title="How to choose" text="Low = routine concern. Medium = possible policy breach. High = active threat or data exposure. The security team will reassess."/>
              </label>
              <div className="pill-group">
                <button type="button" className={`pill low ${severity === 'low' ? 'selected' : ''}`} onClick={() => setSeverity('low')}>
                  <span className="dot" style={{display: 'inline-block', marginRight: 6, background: 'var(--green)'}}/>Low
                </button>
                <button type="button" className={`pill med ${severity === 'med' ? 'selected' : ''}`} onClick={() => setSeverity('med')}>
                  <span className="dot" style={{display: 'inline-block', marginRight: 6, background: 'var(--amber)'}}/>Medium
                </button>
                <button type="button" className={`pill high ${severity === 'high' ? 'selected' : ''}`} onClick={() => setSeverity('high')}>
                  <span className="dot" style={{display: 'inline-block', marginRight: 6, background: 'var(--coral)'}}/>High
                </button>
              </div>
              <div className="hint">
                <b>Low</b> = routine concern · <b>Medium</b> = possible policy breach · <b>High</b> = active threat or data exposure.
              </div>
            </div>

            <div className="field">
              <label>Attachment (optional)</label>
              <div className="upload-zone" onClick={() => toast('File picker — demo only', 'success')}>
                <I.Upload size={24} color="var(--ink-4)"/>
                <div style={{fontSize: 13.5, color: 'var(--ink-2)', marginTop: 8, fontWeight: 500}}>
                  Drop a file or click to upload
                </div>
                <div className="muted" style={{fontSize: 12, marginTop: 2}}>
                  .eml, .png, .jpg, .pdf · max 10 MB · scanned for PII before attaching
                </div>
              </div>
            </div>

            <div className="callout callout-teal">
              <I.Lock size={18} style={{flexShrink: 0, marginTop: 2}}/>
              <div style={{fontSize: 13}}>
                Submitting routes your report to the Security Operations Center. Your identity is visible only to SOC triage and Compliance — never to named parties or your manager without your consent.
              </div>
            </div>
          </div>
        </div>

        <div style={{padding: '16px 28px', borderTop: '1px solid var(--border-2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'var(--bg)'}}>
          <div style={{display: 'flex', gap: 14, fontSize: 12, color: 'var(--ink-3)'}}>
            <span><I.ShieldCheck size={12} style={{verticalAlign: -1, marginRight: 3}}/> Confidential</span>
            <span><I.Clock size={12} style={{verticalAlign: -1, marginRight: 3}}/> ~2 min to complete</span>
          </div>
          <div style={{display: 'flex', gap: 10}}>
            <button type="button" className="btn btn-outline" onClick={() => onNavigate('dashboard')}>Cancel</button>
            <button type="submit" className="btn btn-primary"><I.Send size={14}/> Submit report</button>
          </div>
        </div>
      </form>
    </div>
  );
}

window.IncidentPage = IncidentPage;