// matchings.jsx — Mise en relation (placement tracker per mission)

const STATUS_OPTS = [
  { v: 'pending', label: 'En attente', cls: '' },
  { v: 'go', label: 'GO', cls: 'go' },
  { v: 'no-go', label: 'NO GO', cls: 'nogo' },
  { v: 'maybe', label: 'MAYBE', cls: 'maybe' },
];

function MatchingsView({ allLeads, onOpenLead, onToast }) {
  const PLACEMENTS = window.APPORTOO.PLACEMENTS;
  const clients = allLeads.filter(l => l.type === 'client');
  // Sort by total prestas in placement, descending
  const sortedClients = [...clients].sort((a, b) =>
    (PLACEMENTS[b.id]?.length || 0) - (PLACEMENTS[a.id]?.length || 0)
  );
  const firstWithPlacements = sortedClients.find(c => (PLACEMENTS[c.id]?.length || 0) > 0);
  const [selectedId, setSelectedId] = React.useState(firstWithPlacements?.id || sortedClients[0]?.id);
  // Local-state copy of placements so edits are responsive
  const [rowsByClient, setRowsByClient] = React.useState(() => {
    const obj = {};
    Object.keys(PLACEMENTS).forEach(k => { obj[k] = PLACEMENTS[k].map(r => ({ ...r })); });
    return obj;
  });

  const updateRow = (clientId, prestaId, key, val) => {
    setRowsByClient(prev => ({
      ...prev,
      [clientId]: (prev[clientId] || []).map(r =>
        r.prestaId === prestaId ? { ...r, [key]: val } : r
      ),
    }));
  };
  const removeRow = (clientId, prestaId) => {
    setRowsByClient(prev => ({
      ...prev,
      [clientId]: (prev[clientId] || []).filter(r => r.prestaId !== prestaId),
    }));
    onToast('Prestataire retiré de la mise en relation');
  };

  const selectedClient = clients.find(c => c.id === selectedId);
  const rows = rowsByClient[selectedId] || [];

  return (
    <div className="page" style={{ paddingTop: 16, paddingBottom: 16 }}>
      <div className="mer-layout" style={{ height: 'calc(100vh - 60px - 32px)' }}>
        <MissionsRail
          clients={sortedClients}
          rowsByClient={rowsByClient}
          selectedId={selectedId}
          onSelect={setSelectedId}
        />
        {selectedClient ? (
          <Tracker
            client={selectedClient}
            rows={rows}
            allLeads={allLeads}
            onUpdate={(prestaId, key, val) => updateRow(selectedId, prestaId, key, val)}
            onRemove={(prestaId) => removeRow(selectedId, prestaId)}
            onOpenLead={onOpenLead}
            onAddPresta={() => onToast('Sélection de prestataire — picker à compléter')}
            onToast={onToast}
          />
        ) : (
          <div className="empty"><div>Aucune mission sélectionnée.</div></div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// Left rail: missions list
// ─────────────────────────────────────────────────────────────────
function MissionsRail({ clients, rowsByClient, selectedId, onSelect }) {
  return (
    <div className="mer-rail">
      <div className="mer-rail-head">
        <h2>Missions clients</h2>
        <span className="count-pill">{clients.length}</span>
      </div>
      <div className="mer-rail-list">
        {clients.map(c => {
          const rs = rowsByClient[c.id] || [];
          const goCount = rs.filter(r => r.status === 'go').length;
          const nogoCount = rs.filter(r => r.status === 'no-go').length;
          const isActive = c.id === selectedId;
          return (
            <div key={c.id}
                 className={`mer-mission-row ${isActive ? 'active' : ''}`}
                 onClick={() => onSelect(c.id)}>
              <div className="mer-mission-meta">
                <div className="mer-client-co">{c.company}</div>
                <div className="mer-client-mi">{c.mission}</div>
                <div className="mer-client-st">
                  <span className={`chip sm ${c.statusKey}`}>{c.statusLabel}</span>
                  <span className="muted tiny">{rs.length} en lice</span>
                </div>
              </div>
              <div className="mer-mission-count">
                {goCount > 0 && <span className="mer-pill go">{goCount}</span>}
                {nogoCount > 0 && <span className="mer-pill nogo">{nogoCount}</span>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// Tracker: dashboard for selected mission
// ─────────────────────────────────────────────────────────────────
function Tracker({ client, rows, allLeads, onUpdate, onRemove, onOpenLead, onAddPresta, onToast }) {
  const goCount = rows.filter(r => r.status === 'go').length;
  const nogoCount = rows.filter(r => r.status === 'no-go').length;
  const maybeCount = rows.filter(r => r.status === 'maybe').length;
  const pendingCount = rows.filter(r => !r.status || r.status === 'pending').length;

  const copyMarkdown = () => {
    const lines = ['| # | Prestataire | Heure call | Statut | Commentaire |',
                   '|---|-------------|------------|--------|-------------|'];
    rows.forEach((r, i) => {
      const p = allLeads.find(l => l.id === r.prestaId);
      const status = STATUS_OPTS.find(s => s.v === r.status)?.label || '—';
      lines.push(`| ${i+1} | ${p?.name || '?'} | ${r.callTime || '—'} | ${status} | ${r.comment || ''} |`);
    });
    navigator.clipboard?.writeText(lines.join('\n'));
    onToast('Tableau copié en markdown ✓');
  };

  return (
    <div className="mer-tracker">
      <div className="mer-tracker-head">
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="hstack" style={{ gap: 10, alignItems: 'baseline' }}>
            <div className="mer-tracker-co">{client.company}</div>
            <span className={`chip sm ${client.statusKey}`}>{client.statusLabel}</span>
          </div>
          <h2>{client.mission}</h2>
          <div className="mer-tracker-sub">
            Suivi en direct des prestataires sur cette mission · sauvegardé automatiquement.
          </div>
        </div>
        <div className="mer-tracker-counts">
          <span className="cnt go"><i />{goCount} GO</span>
          <span className="cnt nogo"><i />{nogoCount} NO GO</span>
          <span className="cnt maybe"><i />{maybeCount} MAYBE</span>
          <span className="cnt pending"><i />{pendingCount} en attente</span>
          <span className="cnt total">· {rows.length} total</span>
        </div>
      </div>

      <div className="mer-tools">
        <button className="btn primary" onClick={onAddPresta}>
          <window.Icon.plus size={13} /> Ajouter un prestataire
        </button>
        <button className="btn" onClick={copyMarkdown}>
          <window.Icon.copy size={13} /> Copier en markdown
        </button>
        <button className="btn ghost">
          <window.Icon.refresh size={13} /> Réinitialiser
        </button>
        <div className="spacer" />
        <div className="mer-mission-info muted tiny">
          Budget {client.budget} · {client.remote} · démarre {client.start}
        </div>
      </div>

      <div className="mer-table-wrap">
        <table className="mer-table">
          <thead>
            <tr>
              <th style={{ width: 36 }}>#</th>
              <th>Prestataire</th>
              <th style={{ width: 140 }}>Heure call</th>
              <th style={{ width: 150 }}>Statut</th>
              <th>Commentaire</th>
              <th style={{ width: 36 }} />
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => {
              const p = allLeads.find(l => l.id === r.prestaId);
              if (!p) return null;
              return (
                <TrackerRow
                  key={r.prestaId}
                  i={i + 1}
                  row={r}
                  presta={p}
                  onUpdate={(k, v) => onUpdate(r.prestaId, k, v)}
                  onRemove={() => onRemove(r.prestaId)}
                  onOpenLead={() => onOpenLead(p.id)}
                />
              );
            })}
            {rows.length === 0 && (
              <tr><td colSpan={6}>
                <div className="empty" style={{ padding: '36px 24px' }}>
                  <div className="mark"><window.Icon.user size={22} /></div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, color: 'var(--brown)', fontWeight: 500, marginBottom: 4 }}>
                    Aucun prestataire en lice
                  </div>
                  <div className="tiny">Ajoute un presta pour démarrer le suivi.</div>
                </div>
              </td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function TrackerRow({ i, row, presta, onUpdate, onRemove, onOpenLead }) {
  const opt = STATUS_OPTS.find(s => s.v === (row.status || 'pending')) || STATUS_OPTS[0];
  return (
    <tr className="mer-row">
      <td className="mer-row-num muted mono">{i}</td>
      <td className="mer-row-presta" onClick={onOpenLead}>
        <window.Avatar name={presta.name} status={presta.statusKey} size="xs" />
        <div className="vstack" style={{ gap: 1, minWidth: 0 }}>
          <span className="nm">{presta.name}</span>
          <span className="muted tiny" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {presta.headline}
          </span>
        </div>
      </td>
      <td>
        <input
          className="mer-cell mer-time-cell"
          value={row.callTime || ''}
          placeholder="—"
          onChange={(e) => onUpdate('callTime', e.target.value)}
        />
      </td>
      <td>
        <StatusSelect value={row.status} onChange={(v) => onUpdate('status', v)} />
      </td>
      <td>
        <input
          className="mer-cell mer-comment-cell"
          value={row.comment || ''}
          placeholder="Ajouter une note…"
          onChange={(e) => onUpdate('comment', e.target.value)}
        />
      </td>
      <td>
        <button className="mer-del" onClick={onRemove} title="Retirer">
          <window.Icon.x size={12} />
        </button>
      </td>
    </tr>
  );
}

function StatusSelect({ value, onChange }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [open]);

  const opt = STATUS_OPTS.find(s => s.v === (value || 'pending')) || STATUS_OPTS[0];

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button className={`mer-status mer-status-${opt.cls || 'none'}`} onClick={() => setOpen(o => !o)}>
        <span>{opt.label}</span>
        <window.Icon.chevDown size={11} />
      </button>
      {open && (
        <div className="mer-status-menu">
          {STATUS_OPTS.map(s => (
            <div key={s.v} className={`mer-status-opt mer-status-${s.cls || 'none'}`}
                 onClick={() => { onChange(s.v); setOpen(false); }}>
              <span>{s.label}</span>
              {s.v === (value || 'pending') && <window.Icon.check size={12} />}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

window.MatchingsView = MatchingsView;