/* global React, Icons, AZ_DATA */
// Submit confirmation modal — shows what landed in Linear.

function SubmitModal({ enabledIds, customScenarios, integrationsForSummary, total, onClose }) {
  const { STANDARD, APPOINTMENT_MGMT, SALON_PACK, SYSTEM, BUSINESS } = AZ_DATA;
  // For Linear emission: standard scenarios + salon + system as individual sub-issues.
  // Appointment management bundle becomes ONE sub-issue.
  const standardEnabled = STANDARD.filter((s) => enabledIds.includes(s.id));
  const salonEnabled = SALON_PACK.filter((s) => enabledIds.includes(s.id));
  const apptMgmtOn = APPOINTMENT_MGMT.some((s) => enabledIds.includes(s.id));
  const customs = customScenarios || [];
  const integForSum = (integrationsForSummary || []).filter((x) => x.integration);
  const totalSubs = standardEnabled.length + salonEnabled.length + SYSTEM.length
    + (apptMgmtOn ? 1 : 0)
    + integForSum.length
    + customs.length;

  // Generate Linear-style IDs
  const orderId = '0247';
  const parentId = `BLM-${1}`;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="modal-check">
            <Icons.Check size={22} strokeWidth={3} />
          </div>
          <div>
            <h3 className="modal-title">Order submitted — into the build queue.</h3>
            <div className="modal-sub">A Linear project + parent issue were just created. Hamza will take it from here.</div>
          </div>
        </div>

        <div className="modal-body">
          <div className="linear-issue">
            <div className="linear-issue-head">
              <div className="linear-logo">L</div>
              <div className="linear-project">
                {BUSINESS.name}
                <span>· new project · Order #{orderId}</span>
              </div>
            </div>
            <div className="linear-parent">
              <span className="linear-parent-id">{parentId}</span>
              <span className="linear-parent-name">Build — Batch 0</span>
              <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--ink-3)' }}>
                {totalSubs} sub-issues · assigned to Hamza
              </span>
            </div>
            <div className="linear-subs">
              {[...standardEnabled, ...salonEnabled].slice(0, 5).map((s, i) => (
                <div className="linear-sub" key={s.id}>
                  <div className="linear-sub-status"></div>
                  <div className="linear-sub-id">{parentId}-{i + 2}</div>
                  <div className="linear-sub-name">Scenario: {s.name} — enabled</div>
                </div>
              ))}
              {apptMgmtOn && (
                <div className="linear-sub">
                  <div className="linear-sub-status"></div>
                  <div className="linear-sub-id">{parentId}-{standardEnabled.length + salonEnabled.length + 2}</div>
                  <div className="linear-sub-name">
                    <span className="linear-module">Module</span>
                    Appointment management bundle — enabled
                  </div>
                </div>
              )}
              {integForSum.map((x, i) => (
                <div className="linear-sub" key={x.category}>
                  <div className="linear-sub-status"></div>
                  <div className="linear-sub-id">{parentId}-{standardEnabled.length + salonEnabled.length + (apptMgmtOn ? 1 : 0) + i + 2}</div>
                  <div className="linear-sub-name">
                    <span className="linear-integ">Integ</span>
                    Connect {x.integration.name} ({x.category})
                  </div>
                </div>
              ))}
              {customs.map((c, i) => (
                <div className="linear-sub" key={c.id}>
                  <div className="linear-sub-status pending"></div>
                  <div className="linear-sub-id">{parentId}-{standardEnabled.length + salonEnabled.length + (apptMgmtOn ? 1 : 0) + integForSum.length + i + 2}</div>
                  <div className="linear-sub-name">
                    <span className="linear-triage">Triage</span>
                    Custom: “{shortText(c.text)}”
                  </div>
                </div>
              ))}
              {(standardEnabled.length + salonEnabled.length) > 5 && (
                <div className="linear-sub" style={{ color: 'var(--ink-3)', fontStyle: 'italic' }}>
                  <div className="linear-sub-status" style={{ borderStyle: 'dashed' }}></div>
                  <div className="linear-sub-id"></div>
                  <div className="linear-sub-name">+ {(standardEnabled.length + salonEnabled.length) - 5} more scenario sub-issues</div>
                </div>
              )}
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 16,
          }}>
            <Stat label="Charged today" value={`$${total.toLocaleString()}`} sub="one-time" />
            <Stat label="Sub-issues" value={totalSubs} sub={`incl. ${customs.length} for triage`} />
            <Stat label="Live in" value="≈ 5 days" sub="from your build queue" />
          </div>
        </div>

        <div className="modal-foot">
          <div className="modal-stat">
            {customs.length > 0
              ? <>The <b>{customs.length} custom scenario{customs.length > 1 ? 's' : ''}</b> {customs.length > 1 ? 'are' : 'is'} marked for engineer triage — charged only after approval.</>
              : <>Fireflies transcript will attach automatically when the closer's call ends.</>}
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Edit order</button>
          <button className="btn btn-primary btn-sm" onClick={onClose}>
            Open in Linear <Icons.Arrow size={13} />
          </button>
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value, sub }) {
  return (
    <div style={{
      padding: '12px 14px',
      borderRadius: 12,
      background: 'var(--surface-1)',
      border: '1px solid var(--line-1)',
    }}>
      <div style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 700, marginBottom: 6 }}>
        {label}
      </div>
      <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--orange)', fontVariantNumeric: 'tabular-nums', lineHeight: 1, letterSpacing: '-0.025em' }}>
        {value}
      </div>
      {sub && (
        <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 5 }}>
          {sub}
        </div>
      )}
    </div>
  );
}

function shortText(t) {
  const s = t.trim();
  if (s.length <= 48) return s;
  return s.slice(0, 46).trim() + '…';
}

window.SubmitModal = SubmitModal;