// combos-view.jsx — CombosView: table + kanban for combos
const { useState, useContext, useMemo } = React;

const COMBO_STATUS_COLS = ['Draft', 'Testing', 'Scaling', 'Winner', 'Loser', 'Paused'];

function CombosView({ searchQuery, onOpenComponent }) {
  const { state, dispatch } = useContext(window.AppCtx);
  const wsId = state.activeWorkspaceId;

  const allCombos = useMemo(() => state.combos.filter(c => c.workspaceId === wsId), [state.combos, wsId]);
  const allComps = useMemo(() => state.components.filter(c => c.workspaceId === wsId), [state.components, wsId]);

  const [viewMode, setViewMode] = useState('table');
  const [statusFilter, setStatusFilter] = useState('all');
  const [sortCol, setSortCol] = useState('id');
  const [sortDir, setSortDir] = useState('asc');
  const [addModal, setAddModal] = useState(false);
  const [detailId, setDetailId] = useState(null);

  const compById = useMemo(() => {
    const m = {};
    allComps.forEach(c => { m[c.id] = c; });
    return m;
  }, [allComps]);

  const filtered = useMemo(() => {
    let items = allCombos;
    if (statusFilter !== 'all') items = items.filter(c => c.status === statusFilter);
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      items = items.filter(c =>
        c.id.toLowerCase().includes(q) ||
        c.name?.toLowerCase().includes(q) ||
        c.hookId?.toLowerCase().includes(q) ||
        c.leadId?.toLowerCase().includes(q) ||
        c.bodyId?.toLowerCase().includes(q) ||
        c.notes?.toLowerCase().includes(q)
      );
    }
    return items;
  }, [allCombos, statusFilter, searchQuery]);

  const sorted = useMemo(() => {
    const arr = [...filtered];
    arr.sort((a, b) => {
      let av, bv;
      if (sortCol === 'id') { av = parseInt(a.id.slice(1)) || 0; bv = parseInt(b.id.slice(1)) || 0; }
      else if (sortCol === 'launchDate') { av = a.launchDate || ''; bv = b.launchDate || ''; }
      else { av = (a[sortCol] || '').toLowerCase(); bv = (b[sortCol] || '').toLowerCase(); }
      if (av < bv) return sortDir === 'asc' ? -1 : 1;
      if (av > bv) return sortDir === 'asc' ? 1 : -1;
      return 0;
    });
    return arr;
  }, [filtered, sortCol, sortDir]);

  const sort = col => {
    if (sortCol === col) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortCol(col); setSortDir('asc'); }
  };
  const sortArrow = col => sortCol === col ? (sortDir === 'asc' ? ' ↑' : ' ↓') : '';

  return (
    <div className="view-area">
      <div className="view-toolbar">
        <div className="seg">
          <button className={`seg-opt${viewMode==='table'?' active':''}`} onClick={() => setViewMode('table')}>Table</button>
          <button className={`seg-opt${viewMode==='kanban'?' active':''}`} onClick={() => setViewMode('kanban')}>Kanban</button>
        </div>
        <div style={{ width: 1, height: 20, background: 'var(--bd)', margin: '0 4px' }} />
        <select className="filter-select" value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
          <option value="all">All statuses</option>
          {COMBO_STATUS_COLS.map(s => <option key={s}>{s}</option>)}
        </select>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 11, color: '#3a3a58', marginRight: 8 }}>{filtered.length} combos</span>
        <button className="btn btn-primary btn-sm" onClick={() => setAddModal(true)}>+ Combo</button>
      </div>

      <div className="view-content">
        {viewMode === 'table'
          ? <CombosTable rows={sorted} sort={sort} sortArrow={sortArrow} compById={compById} onOpen={setDetailId} onOpenComponent={onOpenComponent} dispatch={dispatch} wsId={wsId} />
          : <CombosKanban items={filtered} compById={compById} onOpen={setDetailId} onOpenComponent={onOpenComponent} dispatch={dispatch} wsId={wsId} />
        }
      </div>

      {addModal && <window.AddComboModal onClose={() => setAddModal(false)} />}
      {detailId && <window.ComboDetailModal itemId={detailId} onClose={() => setDetailId(null)} onOpenComponent={onOpenComponent} />}
    </div>
  );
}

function RefBadge({ id, compById, onOpenComponent }) {
  if (!id) return <span style={{ color: '#2a2a40' }}>—</span>;
  const c = compById[id];
  return (
    <span
      className="td-link"
      onClick={e => { e.stopPropagation(); onOpenComponent && onOpenComponent(id); }}
      title={c?.description}
    >{id}</span>
  );
}

function CombosTable({ rows, sort, sortArrow, compById, onOpen, onOpenComponent, dispatch, wsId }) {
  if (rows.length === 0) return (
    <div className="empty">
      <div className="empty-icon">⊞</div>
      <div className="empty-txt">No combos yet — use Launch Test to generate from a matrix, or add one manually</div>
    </div>
  );

  return (
    <div className="tbl-wrap">
      <table className="tbl">
        <colgroup>
          <col style={{ width: 52 }} />
          <col />
          <col style={{ width: 52 }} />
          <col style={{ width: 52 }} />
          <col style={{ width: 52 }} />
          <col style={{ width: 112 }} />
          <col style={{ width: 96 }} />
        </colgroup>
        <thead>
          <tr>
            <th className="sort" onClick={() => sort('id')}>ID{sortArrow('id')}</th>
            <th className="sort" onClick={() => sort('name')}>Name{sortArrow('name')}</th>
            <th>Hook</th>
            <th>Lead</th>
            <th>Body</th>
            <th className="sort" onClick={() => sort('status')}>Status{sortArrow('status')}</th>
            <th className="sort" onClick={() => sort('launchDate')}>Launch{sortArrow('launchDate')}</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(c => (
            <tr key={c.id} onClick={() => onOpen(c.id)}>
              <td><window.IdBadge id={c.id} /></td>
              <td style={{ maxWidth: 0 }}>
                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>
                  {c.name || <span style={{ color: '#3a3a58' }}>—</span>}
                </span>
              </td>
              <td><RefBadge id={c.hookId} compById={compById} onOpenComponent={onOpenComponent} /></td>
              <td><RefBadge id={c.leadId} compById={compById} onOpenComponent={onOpenComponent} /></td>
              <td><RefBadge id={c.bodyId} compById={compById} onOpenComponent={onOpenComponent} /></td>
              <td><window.StatusPill status={c.status} /></td>
              <td style={{ color: '#4a4a68', fontSize: 11 }}>
                {c.launchDate ? new Date(c.launchDate).toLocaleDateString() : <span style={{ color: '#2a2a40' }}>—</span>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function CombosKanban({ items, compById, onOpen, onOpenComponent, dispatch, wsId }) {
  const [dragging, setDragging] = useState(null);
  const [dragOver, setDragOver] = useState(null);

  const drop = status => {
    if (dragging) dispatch({ type: 'UPD_COMBO', id: dragging.id, data: { status } });
    setDragging(null);
    setDragOver(null);
  };

  return (
    <div className="kanban">
      {COMBO_STATUS_COLS.map(status => {
        const colItems = items.filter(c => c.status === status);
        const dot = window.COL_DOTS[status] || '#6a6a88';
        return (
          <div key={status} className="kcol">
            <div className="kcol-hd">
              <div className="kcol-dot" style={{ background: dot }} />
              <span className="kcol-hd-label" style={{ color: dot }}>{status}</span>
              <span className="kcol-cnt">{colItems.length}</span>
            </div>
            <div
              className={`kcol-body${dragOver === status ? ' drag-over' : ''}`}
              onDragOver={e => { e.preventDefault(); setDragOver(status); }}
              onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setDragOver(null); }}
              onDrop={() => drop(status)}
            >
              {colItems.map(c => {
                const hook = compById[c.hookId];
                const lead = compById[c.leadId];
                const body = compById[c.bodyId];
                return (
                  <div
                    key={c.id}
                    className={`kcard${dragging?.id === c.id ? ' dragging' : ''}`}
                    style={{ borderLeftColor: dot }}
                    draggable
                    onDragStart={() => setDragging(c)}
                    onDragEnd={() => { setDragging(null); setDragOver(null); }}
                    onClick={() => onOpen(c.id)}
                  >
                    <div className="kcard-top">
                      <window.IdBadge id={c.id} />
                    </div>
                    <div className="kcard-desc" style={{ fontWeight: 500 }}>
                      {c.name || [c.hookId, c.leadId, c.bodyId].filter(Boolean).join(' + ')}
                    </div>
                    <div className="kcard-meta">
                      {c.hookId && (
                        <span
                          className="idb"
                          style={{ cursor: 'pointer', color: '#9090d4' }}
                          onClick={e => { e.stopPropagation(); onOpenComponent && onOpenComponent(c.hookId); }}
                          title={hook?.description}
                        >{c.hookId}</span>
                      )}
                      {c.leadId && (
                        <span
                          className="idb"
                          style={{ cursor: 'pointer', color: '#9090d4' }}
                          onClick={e => { e.stopPropagation(); onOpenComponent && onOpenComponent(c.leadId); }}
                          title={lead?.description}
                        >{c.leadId}</span>
                      )}
                      {c.bodyId && (
                        <span
                          className="idb"
                          style={{ cursor: 'pointer', color: '#9090d4' }}
                          onClick={e => { e.stopPropagation(); onOpenComponent && onOpenComponent(c.bodyId); }}
                          title={body?.description}
                        >{c.bodyId}</span>
                      )}
                    </div>
                    {c.launchDate && (
                      <div style={{ fontSize: 10, color: '#4a4a68', marginTop: 5 }}>
                        🗓 {new Date(c.launchDate).toLocaleDateString()}
                      </div>
                    )}
                  </div>
                );
              })}
              {colItems.length === 0 && (
                <div style={{ textAlign: 'center', color: '#2a2a40', fontSize: 11, paddingTop: 20 }}>Empty</div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { CombosView });