/* ============================================================
   IJMA AI — comparison layouts (3 approaches to the same data)
   ============================================================ */

/* ---------- 1 · PARALLEL COLUMNS ----------
   Each school a column; agreement/divergence read left-to-right. */
function ComparisonColumns({ ruling }) {
  const cols = ruling.positions.length;
  return (
    <div className="cmp-cols" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0,1fr))` }}>
      {ruling.positions.map(p => {
        const s = D.schools[p.school];
        return (
          <div className="cmp-col" key={p.school} style={schoolStyle(p.school)}>
            <div className="cmp-col-head">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '.4em' }}>
                <span className="cmp-school-name">{s.name}</span>
                {p.dissent && <span className="dissent-flag">Dissent</span>}
              </div>
              <div className="cmp-school-meta"><Ar>{s.ar}</Ar> · {s.tradition}</div>
              <div style={{ marginTop: '.6rem' }}><StanceLabel stanceKey={p.stance} /></div>
            </div>
            <div className="cmp-col-body">
              <div className="cmp-claim">{p.claim}</div>
              {p.detail && <div className="cmp-detail">{p.detail}</div>}
              <Evidence items={p.evidence} />
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------- 2 · GROUPED BY STANCE ("the shape") ----------
   Schools cluster under their position so agreement is a visible mass. */
function ComparisonShape({ ruling }) {
  const groups = useMemo(() => {
    const g = {};
    ruling.positions.forEach(p => { (g[p.stance] = g[p.stance] || []).push(p); });
    return Object.entries(g).sort((a, b) => b[1].length - a[1].length);
  }, [ruling]);
  return (
    <div>
      {groups.map(([stanceKey, ps]) => (
        <div className="shape-group" key={stanceKey}>
          <div className="shape-group-head">
            <StanceLabel stanceKey={stanceKey} />
            <span className="shape-count">{ps.length} {ps.length === 1 ? 'school' : 'schools'}</span>
            <span style={{ flex: 1 }} />
            <span style={{ display: 'flex', gap: '.4em' }}>
              {ps.map(p => <SchoolDot key={p.school} id={p.school} />)}
            </span>
          </div>
          <div className="shape-cards">
            {ps.map(p => {
              const s = D.schools[p.school];
              return (
                <div className="shape-card" key={p.school} style={schoolStyle(p.school)}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <strong style={{ fontSize: '16px', color: 'var(--sc)' }}>{s.name}</strong>
                    {p.dissent && <span className="dissent-flag">Dissent</span>}
                  </div>
                  <div className="cmp-claim" style={{ fontSize: '14.5px', margin: '.4rem 0 .2rem' }}>{p.claim}</div>
                  {p.detail && <div className="cmp-detail">{p.detail}</div>}
                  <Evidence items={p.evidence} />
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- 3 · MATRIX ----------
   Dense scan: school × position × primary source × evidence. */
function ComparisonMatrix({ ruling }) {
  const [openRow, setOpenRow] = useState(null);
  return (
    <table className="matrix">
      <thead>
        <tr>
          <th style={{ width: '13%' }}>School</th>
          <th style={{ width: '15%' }}>Position</th>
          <th>Holding</th>
          <th style={{ width: '20%' }}>Primary source</th>
          <th style={{ width: '90px' }}>Evidence</th>
        </tr>
      </thead>
      <tbody>
        {ruling.positions.map(p => {
          const s = D.schools[p.school];
          const primary = p.evidence.find(e => e.title) || p.evidence[0] || {};
          const isOpen = openRow === p.school;
          return (
            <React.Fragment key={p.school}>
              <tr>
                <td className="m-school" style={schoolStyle(p.school)}>
                  <strong>{s.name}</strong>{p.dissent && <span className="dissent-flag" style={{ marginLeft: '.5em' }}>Dissent</span>}
                  <div style={{ fontFamily: 'var(--mono)', fontSize: '10px', color: 'var(--ink-3)', marginTop: '.2em' }}>{s.tradition}</div>
                </td>
                <td><StanceLabel stanceKey={p.stance} /></td>
                <td style={{ color: 'var(--ink-2)' }}>{p.claim}</td>
                <td>
                  {primary.title ? <span className="ev-work">{primary.title}</span> : <span className="ev-method">{primary.method || '—'}</span>}
                  {primary.author && <div style={{ fontSize: '12.5px', color: 'var(--ink-3)' }}>{primary.author}</div>}
                  {primary.single && <div style={{ marginTop: '.3em' }}><SingleSource /></div>}
                </td>
                <td>
                  <button className="btn btn-ghost" style={{ padding: '.3em .6em' }} onClick={() => setOpenRow(isOpen ? null : p.school)}>
                    {p.evidence.length} <Icon name="chevron" size={11} className="chev" style={{ transform: isOpen ? 'rotate(90deg)' : 'none', marginLeft: '.3em' }} />
                  </button>
                </td>
              </tr>
              {isOpen && (
                <tr>
                  <td colSpan={5} style={{ background: 'var(--paper-2)', padding: '.4rem 1.1rem 1rem' }}>
                    {p.evidence.map((ev, i) => <EvidenceItem key={i} ev={ev} />)}
                  </td>
                </tr>
              )}
            </React.Fragment>
          );
        })}
      </tbody>
    </table>
  );
}

Object.assign(window, { ComparisonColumns, ComparisonShape, ComparisonMatrix });