/* global React, SUMMIT, ROLE_TAG */
// DetailDrawer — slides in from the right when a step is clicked.

const drawerCss = {
  scrim: { position: 'absolute', inset: 0, background: 'rgba(4,69,76,0.12)', zIndex: 40, opacity: 0, transition: 'opacity 240ms cubic-bezier(0.2,0.7,0.2,1)' },
  panel: { position: 'absolute', top: 0, right: 0, bottom: 0, width: 420, maxWidth: '92%', background: '#fff', borderLeft: '1px solid #e6e9eb', boxShadow: '-18px 0 50px rgba(4,69,76,0.14)', zIndex: 41, display: 'flex', flexDirection: 'column', transform: 'translateX(100%)', transition: 'transform 320ms cubic-bezier(0.2,0.7,0.2,1)' },
  head: { padding: '22px 26px 18px', borderBottom: '1px solid #eef1f2', flexShrink: 0 },
  body: { padding: '20px 26px 40px', overflowY: 'auto', flex: 1 },
  close: { position: 'absolute', top: 16, right: 18, width: 30, height: 30, borderRadius: 8, border: '1px solid #e6e9eb', background: '#fff', color: '#04454c', cursor: 'pointer', fontSize: 15, display: 'flex', alignItems: 'center', justifyContent: 'center' },
  chip: { display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 999, padding: '4px 11px 4px 8px', fontSize: 11.5, fontWeight: 600 },
  h1: { fontFamily: "'Poppins', sans-serif", fontSize: 23, fontWeight: 700, color: '#04454c', letterSpacing: '-0.02em', lineHeight: 1.15, margin: '14px 0 0' },
  when: { fontSize: 11.5, color: '#aaa', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.07em', marginTop: 10 },
  lede: { fontSize: 14.5, color: '#3b3b3b', lineHeight: 1.6, margin: '0 0 22px' },
  sectionLabel: { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#04454c', margin: '0 0 10px' },
  li: { display: 'flex', gap: 10, fontSize: 13.5, color: '#3b3b3b', lineHeight: 1.5, marginBottom: 9 },
  dot: { width: 6, height: 6, borderRadius: 999, background: '#65ecac', marginTop: 7, flexShrink: 0 },
  standard: { background: '#f5fdf8', border: '1px solid #d1fae1', borderLeft: '3px solid #65ecac', borderRadius: 12, padding: '14px 16px', margin: '0 0 22px' },
  trigger: { background: '#04454c', borderRadius: 12, padding: '14px 16px', margin: '0 0 22px' },
  quote: { borderLeft: '3px solid #cfd5d7', padding: '2px 0 2px 16px', margin: '4px 0 22px' },
  chipsRow: { display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22 },
  artChip: { fontSize: 12, fontWeight: 600, color: '#04454c', background: '#eef0f1', borderRadius: 8, padding: '6px 11px' },
  branch: { border: '1px solid #e6e9eb', borderRadius: 12, padding: '13px 15px', marginBottom: 10 },
  branchHead: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 },
  branchPill: { fontSize: 11.5, fontWeight: 700, color: '#04454c', background: '#d1fae1', borderRadius: 999, padding: '3px 10px' },
  table: { width: '100%', borderCollapse: 'collapse', margin: '0 0 22px' },
  td: { fontSize: 12.5, color: '#3b3b3b', padding: '7px 0', borderBottom: '1px solid #eef1f2' },
  tdQty: { textAlign: 'right', fontWeight: 600, color: '#04454c', whiteSpace: 'nowrap' },
  linkBtn: { display: 'inline-flex', alignItems: 'center', gap: 7, background: '#65ecac', color: '#04454c', border: 0, borderRadius: 999, padding: '11px 18px', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', boxShadow: '0 6px 14px rgba(101,236,172,0.3)', marginBottom: 8 },
};

function DetailDrawer({ nodeId, view, roles, onClose, onOpenView }) {
  const open = !!nodeId;
  const node = open ? view.nodes.find((n) => n.id === nodeId) : null;
  const detail = open ? SUMMIT.DETAILS[nodeId] : null;
  const role = node ? roles[node.role] : null;

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <React.Fragment>
      <div style={{ ...drawerCss.scrim, opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none' }} onClick={onClose} />
      <div style={{ ...drawerCss.panel, transform: open ? 'translateX(0)' : 'translateX(100%)' }}>
        {node && detail && (
          <React.Fragment>
            <div style={drawerCss.head}>
              <button style={drawerCss.close} onClick={onClose} aria-label="Close">✕</button>
              {detail.decision ? (
                <span style={{ ...drawerCss.chip, background: '#d1fae1', color: '#04454c' }}>
                  <span style={{ width: 11, height: 11, background: '#65ecac', transform: 'rotate(45deg)', borderRadius: 2, display: 'inline-block' }} /> Decision point
                </span>
              ) : (
                <span style={{ ...drawerCss.chip, background: role.chipBg, color: role.chipFg }}>
                  <span style={{ width: 8, height: 8, borderRadius: 999, background: role.bar }} /> {ROLE_TAG[node.role]}
                </span>
              )}
              <h1 style={drawerCss.h1}>{node.title}</h1>
              {detail.when && <div style={drawerCss.when}>{detail.when}</div>}
            </div>

            <div style={drawerCss.body}>
              {detail.lede && <p style={drawerCss.lede}>{detail.lede}</p>}

              {detail.branches && (
                <React.Fragment>
                  <p style={drawerCss.sectionLabel}>Branches</p>
                  <div style={{ marginBottom: 14 }}>
                    {detail.branches.map((b) => (
                      <div key={b.label} style={drawerCss.branch}>
                        <div style={drawerCss.branchHead}>
                          <span style={drawerCss.branchPill}>{b.label}</span>
                        </div>
                        <div style={{ fontSize: 13.5, color: '#3b3b3b', lineHeight: 1.5 }}>{b.body}</div>
                      </div>
                    ))}
                  </div>
                </React.Fragment>
              )}

              {detail.link && (
                <button style={drawerCss.linkBtn} onClick={() => onOpenView('dayone')}>
                  Open the day-one map <span>→</span>
                </button>
              )}

              {detail.what && (
                <React.Fragment>
                  <p style={drawerCss.sectionLabel}>{detail.decision ? 'In practice' : 'What happens'}</p>
                  <div style={{ marginBottom: 22 }}>
                    {detail.what.map((w, i) => (
                      <div key={i} style={drawerCss.li}><span style={drawerCss.dot} /><span>{w}</span></div>
                    ))}
                  </div>
                </React.Fragment>
              )}

              {nodeId === 'setup' && (
                <React.Fragment>
                  <p style={drawerCss.sectionLabel}>Delivery — Apex order A-88312</p>
                  <table style={drawerCss.table}>
                    <tbody>
                      {SUMMIT.DELIVERY.map((row) => (
                        <tr key={row[0]}>
                          <td style={drawerCss.td}>{row[0]}</td>
                          <td style={{ ...drawerCss.td, ...drawerCss.tdQty }}>{row[1]}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </React.Fragment>
              )}

              {detail.standard && (
                <div style={drawerCss.standard}>
                  <p style={{ ...drawerCss.sectionLabel, margin: '0 0 6px' }}>Standard</p>
                  <p style={{ fontSize: 13.5, color: '#3b3b3b', lineHeight: 1.55, margin: 0 }}>{detail.standard}</p>
                </div>
              )}

              {detail.triggers && (
                <div style={drawerCss.trigger}>
                  <p style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#65ecac', margin: '0 0 6px' }}>Triggers</p>
                  <p style={{ fontSize: 13.5, color: '#fff', lineHeight: 1.55, margin: 0 }}>{detail.triggers}</p>
                </div>
              )}

              {detail.artifacts && (
                <React.Fragment>
                  <p style={drawerCss.sectionLabel}>Artifacts</p>
                  <div style={drawerCss.chipsRow}>
                    {detail.artifacts.map((a) => <span key={a} style={drawerCss.artChip}>{a}</span>)}
                  </div>
                </React.Fragment>
              )}

              {detail.quote && (
                <div style={drawerCss.quote}>
                  <p style={{ fontFamily: "'Poppins', sans-serif", fontSize: 15, fontWeight: 500, color: '#04454c', lineHeight: 1.45, margin: '0 0 8px', fontStyle: 'normal' }}>“{detail.quote.text}”</p>
                  <p style={{ fontSize: 12, color: '#aaa', fontWeight: 600, margin: 0 }}>— {detail.quote.who}</p>
                </div>
              )}
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}

window.DetailDrawer = DetailDrawer;