// CASL incident drill-down — full-screen overlay

const RECIPIENT_STATUS = {
  complained:    { color:'#B91C1C', bg:'#FEE2E2', label:'Complained' },
  unsubscribed:  { color:'#B45309', bg:'#FEF3C7', label:'Unsubscribed' },
  opened:        { color:'#0369A1', bg:'#E0F2FE', label:'Opened' },
  unopened:      { color:'#475569', bg:'#F1F5F9', label:'Unopened' },
};

const CaslIncident = ({ open, onClose }) => {
  if (!open) return null;
  const i = window.FRANCHISE_DATA.CASL_INCIDENT;

  return (
    <div className="overlay" onClick={onClose}>
      <aside className="casl-pane" onClick={(e) => e.stopPropagation()}>
        <header className="casl-head">
          <div className="casl-head-left">
            <button className="detail-back" onClick={onClose}>
              <Icon name="arrow-right" size={14} stroke={2.2} style={{ transform:'rotate(180deg)' }}/> Back to dashboard
            </button>
            <div className="casl-title-row">
              <div className="casl-banner">CRITICAL · CASL VIOLATION</div>
              <h2>{i.id} — {i.locationName}</h2>
              <div className="casl-sub">
                Customer complaint filed {i.complaintFiledAt} · Campaign "{i.campaign}" ({i.channel})
              </div>
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="close" size={16}/></button>
        </header>

        <div className="casl-body">
          {/* Section 1 — What happened */}
          <section className="casl-block">
            <h3><span className="casl-num">1</span> What happened</h3>
            <p className="casl-summary">
              On <b>{i.sentAt.split(' ')[0]}</b>, the <b>"{i.campaign}"</b> email campaign sent to <b>{i.sent}</b> customers at this location.
              <b> {i.violationCount} of those recipients had not granted email consent</b> (consent flag = false).
              Customer <b>{i.complaintFiledBy}</b> filed a complaint via the {i.complaintChannel.toLowerCase()} on {i.complaintFiledAt}, citing <b>{i.complaintCite}</b>.
            </p>
            <div className="casl-impact">
              <div className="casl-impact-item">
                <div className="casl-impact-l">Recipients without consent</div>
                <div className="casl-impact-v casl-impact-bad">{i.violationCount} / {i.sent}</div>
              </div>
              <div className="casl-impact-item">
                <div className="casl-impact-l">Maximum penalty (CASL)</div>
                <div className="casl-impact-v">$10M / violation</div>
              </div>
              <div className="casl-impact-item">
                <div className="casl-impact-l">Prior violations (90d)</div>
                <div className="casl-impact-v">{i.priorIncidents} · 1 from limit</div>
              </div>
              <div className="casl-impact-item">
                <div className="casl-impact-l">Franchise agreement</div>
                <div className="casl-impact-v">{i.agreementClause}</div>
              </div>
            </div>
          </section>

          {/* Section 2 — The recipients */}
          <section className="casl-block">
            <h3><span className="casl-num">2</span> The {i.violationCount} affected recipients</h3>
            <table className="casl-table">
              <thead><tr>
                <th>Customer</th><th>Added on</th><th>Source</th><th>Consent</th><th>Status</th><th></th>
              </tr></thead>
              <tbody>
                {i.recipients.map((r, idx) => {
                  const s = RECIPIENT_STATUS[r.status];
                  return (
                    <tr key={idx}>
                      <td className="strong">{r.name}</td>
                      <td>{r.addedOn}</td>
                      <td><span className="pill" style={{ background:'#F1F5F9', color:'#475569' }}>{r.source}</span></td>
                      <td><span className="pill" style={{ background:'#FEE2E2', color:'#B91C1C' }}><span className="pill-dot" style={{ background:'#DC2626' }}/>None</span></td>
                      <td><span className="pill" style={{ background: s.bg, color: s.color }}>{s.label}</span></td>
                      <td className="casl-table-link">View record →</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </section>

          {/* Section 3 — Root cause */}
          <section className="casl-block">
            <h3><span className="casl-num">3</span> Root cause</h3>
            <div className="casl-rootcause">
              <Icon name="warn" size={18} stroke={2}/>
              <p>{i.rootCause}</p>
            </div>
          </section>

          {/* Section 4 — Actions */}
          <section className="casl-block">
            <h3><span className="casl-num">4</span> Actions</h3>
            <div className="casl-actions">
              <div className="casl-action casl-action-immediate">
                <div className="casl-action-tag">IMMEDIATE</div>
                <div className="casl-action-body">
                  <b>Lock all outbound marketing for this location</b>
                  <span>Halts every email / SMS / in-app send from {i.locationName} until acknowledged by HQ.</span>
                </div>
                <button className="primary-btn">Lock now</button>
              </div>
              <div className="casl-action casl-action-required">
                <div className="casl-action-tag">REQUIRED</div>
                <div className="casl-action-body">
                  <b>Force CASL re-certification for franchisee</b>
                  <span>Sends a 5-minute e-learning module to K. Manderson. Lock remains until passed.</span>
                </div>
                <button className="ghost-btn">Assign training</button>
              </div>
              <div className="casl-action">
                <div className="casl-action-tag">RECOMMENDED</div>
                <div className="casl-action-body">
                  <b>Disable CSV importer for this account</b>
                  <span>All future list additions must come from gated, consent-stamped sign-up forms.</span>
                </div>
                <button className="ghost-btn">Disable importer</button>
              </div>
              <div className="casl-action">
                <div className="casl-action-tag">RESOLUTION</div>
                <div className="casl-action-body">
                  <b>Document corrective action & close incident</b>
                  <span>Records HQ response for audit. Required before incident can move from Open → Resolved.</span>
                </div>
                <button className="ghost-btn">Document & close</button>
              </div>
            </div>
          </section>

          {/* Section 5 — Audit trail */}
          <section className="casl-block">
            <h3><span className="casl-num">5</span> Audit trail</h3>
            <ol className="casl-audit">
              {i.auditTrail.map((a, idx) => (
                <li key={idx}>
                  <div className="casl-audit-ts">{a.ts}</div>
                  <div className="casl-audit-actor">{a.actor}</div>
                  <div className="casl-audit-action">{a.action}</div>
                </li>
              ))}
            </ol>
            <button className="ghost-btn small" style={{ marginTop: 12 }}>Export audit trail (PDF) <Icon name="arrow-right" size={12} stroke={2.2}/></button>
          </section>

          {/* Section 6 — Repeat offender */}
          <section className="casl-block casl-block-alert">
            <h3><span className="casl-num">6</span> Repeat offender check</h3>
            <p>
              This is <b>{i.locationName}'s {i.priorIncidents + 1}{['st','nd','rd'][i.priorIncidents] || 'th'} CASL flag in {i.priorWindowDays} days</b>.
              Franchise agreement <b>{i.agreementClause}</b> allows formal escalation after 3 violations — including suspension of marketing rights or termination review.
            </p>
            <div className="casl-priors">
              <div className="casl-prior">
                <div className="casl-prior-date">2026-06-02</div>
                <div className="casl-prior-detail">SMS sent to opted-out segment · 8 recipients · Resolved with warning</div>
              </div>
            </div>
          </section>
        </div>
      </aside>
    </div>
  );
};

Object.assign(window, { CaslIncident });