// ============================================================================
// ResolvedRecord — the after-action artefact for a closed ticket.
// Stakeholder-aware: same record, scoped by persona (treasurer sees invoiced
// items, etc). Renders before/after, plain-English summary, work log, linked
// invoice, compliance impact, evidence list, and export/print/share actions.
// Drops in for the right-pane Intake detail whenever item.resolved is true.
// ============================================================================

function PhotoTile({ side, frame }) {
  if (!frame) return null;
  const palette = frame.tone === 'breach' ? 'tile-breach'
                : frame.tone === 'risk'   ? 'tile-risk'
                : frame.tone === 'ok'     ? 'tile-ok'
                : 'tile-neutral';
  return (
    <figure className={`photo ${palette}`}>
      <div className="photo-tile" aria-hidden="true">
        <span className="photo-icon"><Icon name={frame.glyph || 'image'} /></span>
        <span className="photo-side">{side}</span>
      </div>
      <figcaption className="photo-cap">{frame.caption.replace(/^(BEFORE|AFTER) - ?/, '')}</figcaption>
    </figure>
  );
}

function ResolvedRecord({ item }) {
  const [shareOpen, setShareOpen] = React.useState(false);
  const inv = item.invoiceId ? INVOICES.find(i => i.id === item.invoiceId) : null;
  // Export PDF and Print both go through the browser print pipeline so the
  // user can save the on-screen artefact as A4 PDF. The print stylesheet
  // (see app.css @media print) renders this in clean black-on-white with a
  // header bar and page-break rules.
  const launchPrint = (mode) => {
    document.body.classList.add('print-mode');
    if (mode === 'export') document.body.classList.add('print-export');
    // Give the layout a tick to settle before opening the dialog.
    setTimeout(() => {
      window.print();
      // Cleanup after dialog closes (Chrome + Safari both fire afterprint).
      const cleanup = () => {
        document.body.classList.remove('print-mode', 'print-export');
        window.removeEventListener('afterprint', cleanup);
      };
      window.addEventListener('afterprint', cleanup);
      // Fallback for browsers that don't fire afterprint.
      setTimeout(cleanup, 8000);
    }, 50);
    if (mode === 'export') {
      window.opsToast && window.opsToast('Exporting as PDF', {
        kind: 'info', icon: 'file-down',
        sub: 'Choose "Save as PDF" in the print dialog · A4 portrait'
      });
    }
  };
  const doPrint  = () => launchPrint('print');
  const doExport = () => launchPrint('export');
  const doShare = (target) => {
    window.opsToast && window.opsToast('Sent to ' + target, {
      kind: 'resolved', icon: 'send', sub: item.id + ' · resolved record + evidence pack'
    });
    setShareOpen(false);
  };

  return (
    <div className="detail resolved-record">
      {/* Closed banner */}
      <div className="resolved-banner">
        <span className="rb-ic"><Icon name="check-check" /></span>
        <div>
          <div className="rb-t">Resolved <span className="rb-id">· {item.id}</span></div>
          <div className="rb-s">
            Closed by <b>{item.closedBy}</b> · {item.closedAt} ·
            {' '}<span className={item.slaMet ? 'sla-ok' : 'sla-no'}>
              <Icon name={item.slaMet ? 'shield-check' : 'shield-alert'} />
              {item.slaMet ? 'SLA met' : 'SLA breach'}
            </span> · {item.durationDays} day{item.durationDays === 1 ? '' : 's'} open
          </div>
        </div>
      </div>

      <div className="det-head">
        <div className="bldg">{item.id} · {item.closedAt}</div>
        <h2>{item.summ}</h2>
        <div className="site-line">
          <Icon name="map-pin" />
          <span>{siteOf(item.bldg).short}</span>
          <span className="sep">·</span>
          <span>{siteOf(item.bldg).sp}</span>
        </div>
        <BuildingLocation address={item.bldg.replace(/^[^-]+-\s*/, '').trim() + ', Australia'} size="card" />
        <div className="row">
          <Tag prio={item.prio} />
          <Tag track="done" sub="Closed" />
          <Tag stage="triaged">{item.kv.Category}</Tag>
        </div>
      </div>

      <div className="det-body">
        {/* Before / After */}
        <section className="ba" aria-label="Before and after">
          <header className="blk-h">
            <h4>Before &amp; after</h4>
            <span className="blk-hint">Site evidence at start and at close</span>
          </header>
          <div className="ba-grid">
            <PhotoTile side="BEFORE" frame={item.before} />
            <span className="ba-arrow" aria-hidden="true"><Icon name="arrow-right" /></span>
            <PhotoTile side="AFTER"  frame={item.after}  />
          </div>
        </section>

        {/* What was done — story voice, past tense */}
        {item.story && (
          <section className="story story-past" aria-label="Thread story">
            <header className="story-h">
              <span className="story-ic"><Icon name="book-open" /></span>
              <div>
                <div className="story-t">What was the story?</div>
                <div className="story-s">A plain-English account, for any stakeholder.</div>
              </div>
            </header>
            <ol className="story-rows">
              <li className="story-row started">
                <span className="dot"></span>
                <div><div className="k">How it started</div><p>{item.story.started}</p></div>
              </li>
              <li className="story-row sofar">
                <span className="dot"></span>
                <div><div className="k">What we did</div><p>{item.story.sofar}</p></div>
              </li>
              <li className="story-row next done">
                <span className="dot"></span>
                <div><div className="k">Outcome</div><p>{item.story.next}</p></div>
              </li>
            </ol>
          </section>
        )}

        {/* What was done — paragraph summary */}
        {item.workSummary && (
          <div className="blk">
            <header className="blk-h">
              <h4>Work summary</h4>
              {item.vendor && <span className="blk-hint">Vendor: {item.vendor}</span>}
            </header>
            <p className="work-summary">{item.workSummary}</p>
          </div>
        )}

        {/* Linked invoice */}
        {inv && (
          <section className="invoice-link" aria-label="Linked invoice">
            <div className="il-l">
              <span className="il-ic"><Icon name="receipt-text" /></span>
              <div>
                <div className="il-h">Linked invoice <Tag stage="approved" /></div>
                <div className="il-m">{inv.id} · {inv.ven || 'Vendor'} · {item.amount || ('$' + (inv.amount || 0).toLocaleString())}</div>
              </div>
            </div>
            <button className="btn btn-ghost btn-sm"
              onClick={() => { window.opsNav && window.opsNav('invoices'); window.opsToast && window.opsToast('Opening ' + inv.id, { kind: 'info', icon: 'arrow-right' }); }}>
              <Icon name="arrow-right" />Open invoice
            </button>
          </section>
        )}

        {/* Compliance impact */}
        {item.compliance && (
          <section className="compliance-impact" aria-label="Compliance impact">
            <span className="ci-ic"><Icon name="shield-check" /></span>
            <div>
              <div className="ci-h">Compliance kept on track</div>
              <div className="ci-m">{item.compliance.kept}{item.compliance.nextDue ? ' · ' + item.compliance.nextDue : ''}</div>
            </div>
          </section>
        )}

        {/* Audit log */}
        {item.log && (
          <div className="blk">
            <header className="blk-h">
              <h4>Audit log</h4>
              <span className="blk-hint">{item.log.length} events · immutable</span>
            </header>
            <ol className="audit">
              {item.log.map(([icon, tx, when], i) => (
                <li key={i}>
                  <span className="au-ic"><Icon name={icon} /></span>
                  <span className="au-tx">{tx}</span>
                  <span className="au-when">{when}</span>
                </li>
              ))}
            </ol>
          </div>
        )}

        {/* Evidence pack */}
        {item.evidence && item.evidence.length > 0 && (
          <div className="blk">
            <header className="blk-h">
              <h4>Evidence pack</h4>
              <span className="blk-hint">{item.evidence.length} files · attached on export</span>
            </header>
            <ul className="evidence">
              {item.evidence.map((e, i) => (
                <li key={i}><span className="ev-ic"><Icon name="paperclip" /></span>{e}</li>
              ))}
            </ul>
          </div>
        )}
      </div>

      {/* Sticky actions */}
      <div className="det-actions resolved-actions">
        <button className="btn btn-primary" onClick={doExport}><Icon name="file-down" />Export PDF</button>
        <button className="btn btn-ghost" onClick={doPrint}><Icon name="printer" />Print</button>
        <button className="btn btn-ghost" onClick={() => setShareOpen(true)}><Icon name="share-2" />Share</button>
      </div>

      {/* Share sheet */}
      {shareOpen && (
        <div className="share-sheet" onClick={e => { if (e.target === e.currentTarget) setShareOpen(false); }}>
          <div className="share-card">
            <header className="share-h">
              <h4>Share the resolved record</h4>
              <button className="icon-btn" onClick={() => setShareOpen(false)}><Icon name="x" /></button>
            </header>
            <div className="share-blurb">A 1-page PDF + the {item.evidence?.length || 0}-file evidence pack will be sent.</div>
            <ul className="share-list">
              {(item.shareTargets || []).map(t => (
                <li key={t}>
                  <span><Icon name="user-round" />{t}</span>
                  <button className="btn btn-ghost btn-sm" onClick={() => doShare(t)}><Icon name="send" />Send</button>
                </li>
              ))}
            </ul>
            <div className="share-foot">
              <button className="btn btn-ghost btn-sm" onClick={() => doShare('Copied link to clipboard')}><Icon name="link" />Copy share link</button>
              <button className="btn btn-ghost btn-sm" onClick={() => doShare('Owner portal')}><Icon name="globe" />Post to owner portal</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ResolvedRecord, PhotoTile });