/* ========================================================================
   SENTINEL — Power features part 2
   Remaining 7 upgrades: Annonce full-page, Kanban DnD, bulk actions,
   inline edit, compare 2 annonces, saved searches chips, chart tooltips
   ======================================================================== */

const { useState: _S2, useEffect: _E2, useRef: _R2, useMemo: _M2, useCallback: _C2 } = React;
const _W2 = window;

/* ============================================================ */
/* ANNONCE DETAIL — FULL PAGE                                     */
/* ============================================================ */
const AnnonceDetailFull = ({ annonce, onBack }) => {
  const { toast } = _W2.useApp();
  const { PageHeader, Card, Pill, I, MetricRow, ScoreBar } = _W2;
  const a = annonce;
  return (
    <div className="page">
      <PageHeader
        crumb={<a onClick={onBack} style={{cursor:'pointer'}}>← Annonces</a>}
        title={a.title}
        sub={`${a.ville} · publié le 13/05/2026 · source ${a.source}`}
        actions={<>
          <Pill tone="success" dot>Score max {a.score || 0} %</Pill>
          <button className="btn"><I.send /> Envoyer à Marie L.</button>
          <button className="btn"><I.external /> Source originale</button>
          <button className="btn btn--primary"><I.refresh /> Relancer matching</button>
        </>}
      />

      <div className="grid grid--detail" style={{gap:16, marginBottom:16}}>
        {/* LEFT — photo + map + similars */}
        <div className="stack">
          <Card flush>
            <div style={{aspectRatio:'16/9', background:'#0d0d0d', position:'relative', overflow:'hidden', borderRadius:'4px 4px 0 0'}}>
              <svg viewBox="0 0 320 180" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
                <rect width="320" height="120" fill="#1f2522"/>
                <rect y="120" width="320" height="60" fill="#0d1110"/>
                <g stroke="rgba(255,255,255,.08)" strokeWidth=".5" fill="none">
                  <rect x="40" y="30" width="240" height="90"/>
                  <line x1="40" y1="60" x2="280" y2="60"/>
                  <line x1="40" y1="90" x2="280" y2="90"/>
                  {Array.from({length:6}).map((_,i) => <rect key={i} x={50 + i*40} y={36} width={28} height={20} fill="rgba(255,255,255,.04)"/>)}
                  {Array.from({length:6}).map((_,i) => <rect key={i} x={50 + i*40} y={66} width={28} height={20} fill="rgba(255,255,255,.04)"/>)}
                  {Array.from({length:6}).map((_,i) => <rect key={i} x={50 + i*40} y={96} width={28} height={20} fill="rgba(255,255,255,.04)"/>)}
                </g>
                <text x="12" y="172" fontFamily="Geist Mono" fontSize="6" fill="rgba(255,255,255,.3)" letterSpacing="1.2">PHOTO 1 / 12 · CRÉDIT SELOGER</text>
              </svg>
              <div style={{position:'absolute', bottom:12, right:12, display:'flex', gap:6}}>
                <button className="btn btn--sm">‹</button>
                <button className="btn btn--sm">›</button>
              </div>
            </div>
            <div style={{padding:'18px 20px', display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(130px, 1fr))', gap:18, borderTop:'1px solid var(--color-border)'}}>
              <div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:4}}>Prix</div>
                <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:200, letterSpacing:'-.025em'}}>{a.prix?.toLocaleString('fr-FR')} €</div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--color-text-muted)'}}>{Math.round(a.prix/a.surf).toLocaleString('fr-FR')} €/m²</div>
              </div>
              <div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:4}}>Surface</div>
                <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:200, letterSpacing:'-.025em'}}>{a.surf} m²</div>
              </div>
              <div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:4}}>Pièces</div>
                <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:200, letterSpacing:'-.025em'}}>{a.pieces}</div>
              </div>
              <div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:4}}>Type</div>
                <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:300, letterSpacing:'-.015em', textTransform:'capitalize'}}>{a.type}</div>
              </div>
            </div>
          </Card>

          <Card title="Carte" flush>
            <div className="map-canvas" style={{height:280, borderRadius:0, position:'relative'}}>
              <div className="map-tile" />
              <div className="map-marker map-marker--xl" data-tier="high" style={{top:'50%', left:'50%', borderColor:'var(--color-bg)'}}>
                <span style={{color:'#000', fontWeight:600}}>!</span>
              </div>
              <div className="map-overlay map-overlay--tl">45,7689° N · 4,8900° E · Approx</div>
            </div>
          </Card>

          <Card title="Annonces similaires (4)" flush>
            <table className="table">
              <thead><tr><th>Bien</th><th className="num" style={{textAlign:'right'}}>Prix</th><th className="num" style={{textAlign:'right'}}>€/m²</th><th>Écart</th></tr></thead>
              <tbody>
                {[
                  { t:'T4 Vieux-Lille · 88 m²',  p:410000, em:4659, d:-2 },
                  { t:'T4 République · 92 m²',  p:445000, em:4837, d:+2 },
                  { t:'T4 Wazemmes · 95 m²',    p:399000, em:4200, d:-8 },
                  { t:'T4 Lille Centre · 90 m²',p:435000, em:4833, d:+2 },
                ].map((s,i) => (
                  <tr key={i}>
                    <td>{s.t}</td>
                    <td className="num" style={{textAlign:'right'}}>{s.p.toLocaleString('fr-FR')} €</td>
                    <td className="num" style={{textAlign:'right'}}>{s.em.toLocaleString('fr-FR')}</td>
                    <td><Pill tone={s.d > 0 ? 'success' : 'danger'}>{s.d > 0 ? '+' : ''}{s.d} %</Pill></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>
        </div>

        {/* RIGHT */}
        <div className="stack">
          <Card title="Clients matchés (1)" flush>
            <table className="table">
              <thead><tr><th>Score</th><th>Client</th><th></th></tr></thead>
              <tbody>
                <tr>
                  <td><ScoreBar score={a.score || 92} /></td>
                  <td>
                    <div style={{fontFamily:'var(--font-display)', fontSize:13}}>Marie Dupont</div>
                    <div style={{fontSize:11, color:'var(--color-text-muted)'}}>4P · ≤ 200 k€</div>
                  </td>
                  <td className="actions"><button className="btn btn--sm">Fiche</button></td>
                </tr>
              </tbody>
            </table>
          </Card>

          <Card title="Géolocalisation">
            <div className="metric-list">
              <MetricRow label="Statut" value="Approximatif" />
              <MetricRow label="Niveau" value="3 / 4" />
              <MetricRow label="Confiance" value="0,6" />
            </div>
            <button className="btn btn--sm" style={{width:'100%', justifyContent:'center', marginTop:12}}><I.refresh /> Relancer</button>
          </Card>

          <Card title="DVF · prix au m²">
            <div className="metric-list">
              <MetricRow label="Médiane secteur" value="4 320" unit=" €" />
              <MetricRow label="Cette annonce" value={Math.round(a.prix/a.surf).toLocaleString('fr-FR')} unit=" €" />
              <MetricRow label="Écart" value="+1,4" unit=" %" />
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

/* ============================================================ */
/* KANBAN DRAG & DROP                                             */
/* ============================================================ */
const KanbanDnD = ({ clients: initial, onMove }) => {
  const { Pill } = _W2;
  const { toast } = _W2.useApp();
  const [clients, setClients] = _S2(initial);
  const [draggingId, setDraggingId] = _S2(null);
  const [hoverCol, setHoverCol] = _S2(null);
  // Le parent recharge/filtre la liste : on se resynchronise sur la prop.
  _E2(() => { setClients(initial); }, [initial]);
  const cols = [
    { id:'prospect', label:'Prospect' },
    { id:'actif',    label:'Actif' },
    { id:'chaud',    label:'Chaud' },
    { id:'signe',    label:'Signé' },
    { id:'perdu',    label:'Perdu' },
  ];

  /* ── Glisser-deposer en Pointer Events : souris ET tactile ──────────
     (l'API HTML5 drag&drop ne fonctionne pas au doigt)
     - Souris : le glisser demarre apres 6px de mouvement.
     - Tactile : APPUI LONG (~220ms sans bouger) souleve la carte ; un
       mouvement avant ca reste un scroll normal de la page.
     - Un fantome de la carte suit le pointeur, la colonne sous le doigt
       s'illumine (elementFromPoint), et la page auto-scrolle pres des
       bords (sur mobile les colonnes sont empilees verticalement).
     Session mutable dans un ref : rien a re-rendre pendant le geste. */
  const sess = _R2(null);

  const _colAt = (x, y) => {
    const el = document.elementFromPoint(x, y);
    const col = el && el.closest ? el.closest('.kanban__col') : null;
    return col ? col.dataset.state : null;
  };
  const _moveGhost = (g, x, y) => {
    g.style.left = (x - 30) + 'px';
    g.style.top = (y - 24) + 'px';
  };
  const _blockScroll = (e) => { if (sess.current && sess.current.active) e.preventDefault(); };

  const _activate = (s, x, y) => {
    s.active = true;
    const r = s.el.getBoundingClientRect();
    const g = s.el.cloneNode(true);
    g.className = 'kanban-card kanban-ghost';
    g.style.width = r.width + 'px';
    document.body.appendChild(g);
    _moveGhost(g, x, y);
    s.ghost = g;
    setDraggingId(s.id);
    setHoverCol(_colAt(x, y));
    // Bloque le scroll natif pendant le drag (listener non-passif requis)
    document.addEventListener('touchmove', _blockScroll, { passive: false });
    // Auto-scroll du conteneur quand le pointeur approche des bords
    const main = document.querySelector('.app__main');
    const step = () => {
      const cur = sess.current;
      if (!cur || !cur.active) return;
      if (main && cur.last) {
        const rc = main.getBoundingClientRect();
        if (cur.last.y < rc.top + 80) main.scrollTop -= 12;
        else if (cur.last.y > rc.bottom - 80) main.scrollTop += 12;
      }
      cur.raf = requestAnimationFrame(step);
    };
    s.raf = requestAnimationFrame(step);
  };

  const _cleanup = () => {
    const s = sess.current;
    if (!s) return;
    if (s.timer) clearTimeout(s.timer);
    if (s.raf) cancelAnimationFrame(s.raf);
    if (s.ghost) s.ghost.remove();
    document.removeEventListener('touchmove', _blockScroll);
    sess.current = null;
    setDraggingId(null); setHoverCol(null);
  };
  // Filet : jamais de fantome orphelin si le composant se demonte en plein geste
  _E2(() => _cleanup, []);

  const onCardDown = (e, c) => {
    if (e.pointerType === 'mouse' && e.button !== 0) return;
    const s = { id: c.id, el: e.currentTarget, x0: e.clientX, y0: e.clientY,
                active: false, last: { x: e.clientX, y: e.clientY } };
    sess.current = s;
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
    if (e.pointerType !== 'mouse') {
      s.timer = setTimeout(() => {
        if (sess.current === s && !s.active) _activate(s, s.last.x, s.last.y);
      }, 220);
    }
  };
  const onCardMove = (e) => {
    const s = sess.current; if (!s) return;
    s.last = { x: e.clientX, y: e.clientY };
    if (!s.active) {
      const dist = Math.hypot(e.clientX - s.x0, e.clientY - s.y0);
      if (e.pointerType === 'mouse') {
        if (dist > 6) _activate(s, e.clientX, e.clientY);
      } else if (dist > 12 && s.timer) {
        // Le doigt bouge avant l'appui long : c'est un scroll, on abandonne.
        clearTimeout(s.timer); s.timer = null; sess.current = null;
      }
      if (!sess.current || !sess.current.active) return;
    }
    _moveGhost(s.ghost, e.clientX, e.clientY);
    setHoverCol(_colAt(e.clientX, e.clientY));
  };
  const onCardUp = (e) => {
    const s = sess.current; if (!s) return;
    if (s.active) {
      const col = _colAt(e.clientX, e.clientY);
      const c = clients.find(x => x.id === s.id);
      if (col && c && c.state !== col) {
        setClients(clients.map(x => x.id === s.id ? { ...x, state: col } : x));
        if (onMove) onMove(s.id, col); // persistance (PATCH) geree par le parent
        else toast(`${c.name} déplacé vers ${col}.`, 'success');
      }
    }
    _cleanup();
  };
  const onCardCancel = () => _cleanup();

  return (
    <div className="kanban">
      {cols.map(col => {
        const items = clients.filter(c => c.state === col.id);
        return (
          <div key={col.id} className="kanban__col" data-state={col.id} data-hover={hoverCol === col.id || undefined}>
            <div className="kanban__col-head">
              <span className="kanban__col-title">{col.label}</span>
              <span className="kanban__col-count">{items.length}</span>
            </div>
            <div className="kanban__col-body">
              {items.length === 0 ? (
                <div style={{textAlign:'center', padding:'40px 0', color:'var(--color-text-faint)', fontSize:11, fontFamily:'var(--font-mono)', letterSpacing:'.14em', textTransform:'uppercase'}}>
                  {hoverCol === col.id ? '✓ Déposer ici' : '—'}
                </div>
              ) : items.map(c => (
                <div key={c.id}
                  className="kanban-card"
                  onPointerDown={(e)=>onCardDown(e, c)}
                  onPointerMove={onCardMove}
                  onPointerUp={onCardUp}
                  onPointerCancel={onCardCancel}
                  onContextMenu={(e)=>{ if (draggingId) e.preventDefault(); }}
                  data-dragging={draggingId === c.id || undefined}>
                  <span className="kanban-card__name">{c.name}</span>
                  <span className="kanban-card__meta">{c.villes}</span>
                  <span className="kanban-card__meta">{c.budget}</span>
                  <div className="kanban-card__foot">
                    <span style={{fontSize:10, color:'var(--color-text-dim)', fontFamily:'var(--font-mono)', letterSpacing:'.04em'}}>{c.critères}</span>
                    <Pill tone={c.lastContact > 14 ? 'warning' : 'neutral'}>{c.lastContact}j</Pill>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
};

/* ============================================================ */
/* BULK ACTIONS BAR (Annonces)                                    */
/* ============================================================ */
const BulkBar = ({ count, onClear, onAction }) => {
  if (count === 0) return null;
  return (
    <div className="bulk-bar">
      <span className="bulk-bar__count">
        <span className="bulk-bar__num">{count}</span> sélectionné{count > 1 ? 's' : ''}
      </span>
      <button className="btn btn--sm" onClick={()=>onAction('tag')}>Tag</button>
      <button className="btn btn--sm" onClick={()=>onAction('export')}>Export CSV</button>
      <button className="btn btn--sm" onClick={()=>onAction('compare')}>Comparer</button>
      <button className="btn btn--sm btn--danger" onClick={()=>onAction('delete')}>Supprimer</button>
      <button className="bulk-bar__close" onClick={onClear} aria-label="Fermer">×</button>
    </div>
  );
};

/* ============================================================ */
/* INLINE EDITABLE CELL                                           */
/* ============================================================ */
const InlineEdit = ({ value, onSave, format = (v) => v }) => {
  const [editing, setEditing] = _S2(false);
  const [val, setVal] = _S2(value);
  const ref = _R2(null);
  _E2(() => { if (editing) ref.current?.focus(); }, [editing]);
  const commit = () => { setEditing(false); if (val !== value) onSave(val); };
  if (editing) {
    return (
      <input ref={ref} className="input inline-edit" value={val}
        onChange={(e)=>setVal(e.target.value)}
        onBlur={commit}
        onKeyDown={(e)=>{ if (e.key === 'Enter') commit(); if (e.key === 'Escape') { setVal(value); setEditing(false); } }}
      />
    );
  }
  return (
    <span className="inline-edit__display" onDoubleClick={()=>setEditing(true)}
      onClick={()=>{ /* tactile : pas de double-clic au doigt */ if (window.matchMedia('(pointer: coarse)').matches) setEditing(true); }}
      title="Double-clique pour éditer">
      {format(val)}
    </span>
  );
};

/* ============================================================ */
/* COMPARE 2 ANNONCES — modal split view                          */
/* ============================================================ */
const CompareModal = ({ open, items, onClose }) => {
  if (!open || items.length < 2) return null;
  const [a, b] = items.slice(0, 2);
  const diff = (av, bv, suffix = '') => {
    const aa = Number(av) || 0;
    const bb = Number(bv) || 0;
    if (aa === 0 || bb === 0) return null;
    const pct = ((bb - aa) / aa * 100).toFixed(1);
    return <span style={{color: bb > aa ? 'var(--color-success)' : 'var(--color-danger)', fontFamily:'var(--font-mono)', fontSize:10, marginLeft:6}}>{bb > aa ? '+' : ''}{pct} %{suffix}</span>;
  };
  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__panel" onClick={(e)=>e.stopPropagation()} style={{maxWidth:920}}>
        <div className="modal__head">
          <span className="modal__title">Comparer 2 annonces</span>
          <button className="modal__close" onClick={onClose}>×</button>
        </div>
        <div className="modal__body" style={{padding:0}}>
          <div className="compare-grid">
            <div className="compare-col">
              <div className="compare-col__head">A</div>
              <div className="compare-col__title">{a.title}</div>
              <dl className="compare-list">
                <div><dt>Prix</dt><dd>{a.prix?.toLocaleString('fr-FR')} €</dd></div>
                <div><dt>Surface</dt><dd>{a.surf} m²</dd></div>
                <div><dt>€/m²</dt><dd>{Math.round(a.prix/a.surf).toLocaleString('fr-FR')}</dd></div>
                <div><dt>Pièces</dt><dd>{a.pieces}</dd></div>
                <div><dt>Ville</dt><dd>{a.ville}</dd></div>
                <div><dt>Score max</dt><dd>{a.score || '—'} %</dd></div>
              </dl>
            </div>
            <div className="compare-col">
              <div className="compare-col__head">B</div>
              <div className="compare-col__title">{b.title}</div>
              <dl className="compare-list">
                <div><dt>Prix</dt><dd>{b.prix?.toLocaleString('fr-FR')} €{diff(a.prix, b.prix)}</dd></div>
                <div><dt>Surface</dt><dd>{b.surf} m²{diff(a.surf, b.surf)}</dd></div>
                <div><dt>€/m²</dt><dd>{Math.round(b.prix/b.surf).toLocaleString('fr-FR')}{diff(a.prix/a.surf, b.prix/b.surf)}</dd></div>
                <div><dt>Pièces</dt><dd>{b.pieces}</dd></div>
                <div><dt>Ville</dt><dd>{b.ville}</dd></div>
                <div><dt>Score max</dt><dd>{b.score || '—'} %</dd></div>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============================================================ */
/* SAVED SEARCHES — chips                                         */
/* ============================================================ */
const SavedSearches = ({ items, active, onSelect, onAdd, onRemove }) => (
  <div className="saved-row">
    <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>Recherches</span>
    <div className="saved-chips">
      {items.map(s => (
        <button key={s.id} className={`saved-chip ${active === s.id ? 'is-active' : ''}`} onClick={()=>onSelect(s)}>
          <span>{s.label}</span>
          <span className="saved-chip__count">{s.count}</span>
          <span className="saved-chip__x" onClick={(e)=>{e.stopPropagation(); onRemove(s.id);}}>×</span>
        </button>
      ))}
      <button className="saved-chip saved-chip--add" onClick={onAdd}>+ Sauvegarder</button>
    </div>
  </div>
);

/* ============================================================ */
/* CHART TOOLTIP — replacement ChartArea                          */
/* ============================================================ */
const ChartAreaInteractive = ({ data, labels }) => {
  const [hover, setHover] = _S2(null);
  const w = 600, h = 200;
  const pad = { t: 12, r: 16, b: 24, l: 32 };
  const innerW = w - pad.l - pad.r;
  const innerH = h - pad.t - pad.b;
  const max = Math.max(...data, 6);
  const yTicks = [0, 2, 4, 6];
  const pts = data.map((v, i) => ({
    x: pad.l + (i / (data.length - 1)) * innerW,
    y: pad.t + innerH - (v / max) * innerH,
    v,
  }));
  const lineD = pts.map((p, i) => (i === 0 ? `M ${p.x},${p.y}` : `L ${p.x},${p.y}`)).join(' ');
  const fillD = `${lineD} L ${pts[pts.length-1].x},${pad.t + innerH} L ${pad.l},${pad.t + innerH} Z`;
  const onMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width * w;
    const idx = Math.round(((x - pad.l) / innerW) * (data.length - 1));
    if (idx >= 0 && idx < data.length) setHover(idx);
  };
  return (
    <div style={{padding:'0 8px 8px', position:'relative'}}>
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{width:'100%', height:240, display:'block', cursor:'crosshair'}}
        onMouseMove={onMove} onMouseLeave={()=>setHover(null)}>
        <g className="chart-area__grid">
          {yTicks.map((t, i) => {
            const y = pad.t + innerH - (t / max) * innerH;
            return <line key={i} x1={pad.l} x2={w - pad.r} y1={y} y2={y} stroke="var(--color-border)" strokeWidth="1" />;
          })}
        </g>
        {yTicks.map((t, i) => {
          const y = pad.t + innerH - (t / max) * innerH;
          return <text key={i} x={pad.l - 8} y={y + 3} textAnchor="end" fontFamily="Geist Mono" fontSize="9" fill="var(--color-text-dim)">{t}</text>;
        })}
        <path className="chart-area__fill" d={fillD} />
        <path className="chart-area__line" d={lineD} />
        {pts.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r={hover === i ? 5 : (p.v === 0 ? 2.5 : 3.5)}
            className={p.v === 0 ? 'chart-area__dot--ghost' : 'chart-area__dot'} />
        ))}
        {hover != null && (
          <line x1={pts[hover].x} x2={pts[hover].x} y1={pad.t} y2={pad.t + innerH} stroke="var(--accent)" strokeWidth="1" strokeDasharray="2 3" />
        )}
        {labels.map((l, i) => {
          const x = pad.l + (i / (labels.length - 1)) * innerW;
          return <text key={i} x={x} y={h - 6} textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="var(--color-text-dim)" letterSpacing=".04em">{l}</text>;
        })}
      </svg>
      {hover != null && (
        <div className="chart-tip" style={{ left: `${(pts[hover].x / w) * 100}%`, top: `${(pts[hover].y / h) * 100}%` }}>
          <div className="chart-tip__date">{labels[hover]}</div>
          <div className="chart-tip__val">{data[hover]} annonces</div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, {
  AnnonceDetailFull, KanbanDnD, BulkBar, InlineEdit,
  CompareModal, SavedSearches, ChartAreaInteractive,
});