/* ========================================================================
   SENTINEL — Power features
   19 upgrades : notifications inbox, cheatsheet, tour, skeletons,
   page transitions, focus mode, konami egg, sound toggle, live activity,
   AI suggestions, heatmap, saved searches, bulk actions, inline edit,
   client detail, annonce detail full, kanban drag & drop, comparison
   ======================================================================== */

const { useState: _useS, useEffect: _useE, useRef: _useR, useMemo: _useM, useCallback: _useC } = React;
const _W = window;

/* ============================================================ */
/* NOTIFICATIONS BELL — inbox dropdown                            */
/* ============================================================ */
const NOTIF_SEEN_KEY = 'sentinel.notifLastSeen';

const NotifBell = () => {
  const [open, setOpen] = _useS(false);
  const [items, setItems] = _useS([]);
  const [lastSeen, setLastSeen] = _useS(() => {
    try { return localStorage.getItem(NOTIF_SEEN_KEY) || ''; } catch (e) { return ''; }
  });
  const ref = _useR(null);

  _useE(() => {
    let alive = true;
    const api = _W.SentinelAPI;
    if (!api) return;
    api.fetchAuth('/api/dashboard/notifications')
      .then((r) => { if (alive) setItems((r && r.data) || []); })
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  _useE(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  }, []);

  const isUnread = (n) => !!n.date && (!lastSeen || n.date > lastSeen);
  const unread = items.filter(isUnread).length;
  const markAllRead = () => {
    const now = new Date().toISOString();
    try { localStorage.setItem(NOTIF_SEEN_KEY, now); } catch (e) {}
    setLastSeen(now);
  };

  return (
    <div className="notif" ref={ref}>
      <button className="notif__btn" onClick={()=>setOpen(o=>!o)} aria-label="Notifications">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
          <path d="M13.73 21a2 2 0 0 1-3.46 0" />
        </svg>
        {unread > 0 && <span className="notif__badge">{unread}</span>}
      </button>
      {open && (
        <div className="notif__panel" role="menu">
          <header className="notif__head">
            <span>Notifications</span>
            <button className="notif__mark" onClick={markAllRead}>Tout marquer lu</button>
          </header>
          <div className="notif__list">
            {items.length === 0 ? (
              <div className="notif__item">
                <div className="notif__body"><div className="notif__meta">Aucune notification récente.</div></div>
              </div>
            ) : items.map(n => (
              <div key={n.id} className={`notif__item ${isUnread(n) ? 'is-unread' : ''}`}>
                <span className={`notif__dot notif__dot--${n.tone}`} />
                <div className="notif__body">
                  <div className="notif__title">{n.title}</div>
                  <div className="notif__meta">{n.meta}</div>
                </div>
                <span className="notif__time">{n.time}</span>
              </div>
            ))}
          </div>
          <footer className="notif__foot">
            <a href="#/dashboard" onClick={() => setOpen(false)}>Voir tout l'historique <span style={{marginLeft:6}}>→</span></a>
          </footer>
        </div>
      )}
    </div>
  );
};

/* ============================================================ */
/* COMMAND CHEATSHEET — ? key                                     */
/* ============================================================ */
const Cheatsheet = ({ open, onClose }) => {
  _useE(() => {
    if (!open) return;
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, [open, onClose]);
  if (!open) return null;
  const groups = [
    { title:'Navigation', items:[
      ['G puis D', 'Tableau de bord'],
      ['G puis C', 'Clients'],
      ['G puis A', 'Annonces'],
      ['G puis M', 'Carte'],
      ['G puis L', 'Juridique'],
      ['G puis R', 'Rapports'],
    ]},
    { title:'Actions', items:[
      ['⌘ K', 'Recherche / palette'],
      ['N',   'Nouveau client'],
      ['/',   'Filtrer la table'],
      ['E',   'Éditer la sélection'],
      ['⌫',   'Supprimer la sélection'],
    ]},
    { title:'Affichage', items:[
      ['?',         'Afficher cette aide'],
      ['[  ]',      'Replier / déplier le menu'],
      ['F',         'Mode focus (masquer la nav)'],
      ['⌘ /',       'Basculer mode clair / sombre'],
      ['⌘ Shift S', 'Console debug'],
    ]},
  ];
  return (
    <div className="cmdk" onClick={onClose}>
      <div className="cmdk__panel" onClick={(e)=>e.stopPropagation()} style={{maxWidth:720}}>
        <header style={{padding:'18px 20px', borderBottom:'1px solid var(--color-border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <span style={{fontFamily:'var(--font-display)', fontWeight:400, fontSize:18}}>Raccourcis clavier</span>
          <button className="modal__close" onClick={onClose}>×</button>
        </header>
        <div style={{padding:20, display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap:24}}>
          {groups.map(g => (
            <div key={g.title}>
              <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)', marginBottom:12}}>{g.title}</div>
              <div style={{display:'grid', gap:10}}>
                {g.items.map(([k, v]) => (
                  <div key={k} style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:12, fontSize:12}}>
                    <span style={{color:'var(--color-text-muted)'}}>{v}</span>
                    <span className="kbd-group">{k.split(' ').map((part, i) => <span key={i} className="kbd">{part}</span>)}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <footer style={{padding:'12px 20px', borderTop:'1px solid var(--color-border)', display:'flex', justifyContent:'space-between', fontFamily:'var(--font-mono)', fontSize:9, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>
          <span>Sentinel · v1.0</span>
          <span>Esc pour fermer</span>
        </footer>
      </div>
    </div>
  );
};

/* ============================================================ */
/* TOUR — first-time onboarding                                   */
/* ============================================================ */
const TOUR_STEPS = [
  { sel:'.nav__brand',     title:'Bienvenue dans Sentinel', desc:'Votre navigation est rangée en quatre groupes : Pilotage, Activité, Intelligence, Cabinet.' },
  { sel:'.top__search',    title:'⌘K — recherche universelle', desc:'Tapez ⌘K (ou Ctrl+K) à tout moment pour ouvrir la palette de commandes. Pages, clients, annonces, actions — tout est trouvable.' },
  { sel:'.nav__item.is-active', title:'Le Tableau de bord est votre QG', desc:'Matches du jour, alertes clients, KPIs et activité récente. Tout ce qui compte ce matin est ici.' },
  { sel:'.notif',          title:'Notifications en temps réel', desc:'Paul vous prévient sur Telegram pour les matches qualifiés, mais une copie reste toujours dans cette cloche.' },
];

const Tour = ({ open, onClose }) => {
  const [i, setI] = _useS(0);
  const [box, setBox] = _useS(null);
  _useE(() => {
    if (!open) return;
    const step = TOUR_STEPS[i];
    if (!step) return;
    const el = document.querySelector(step.sel);
    if (!el) { setBox(null); return; }
    const r = el.getBoundingClientRect();
    setBox({ top: r.top - 8, left: r.left - 8, width: r.width + 16, height: r.height + 16 });
  }, [open, i]);
  if (!open) return null;
  const step = TOUR_STEPS[i];
  const last = i === TOUR_STEPS.length - 1;
  const tipStyle = box ? { top: box.top + box.height + 16, left: Math.min(box.left, window.innerWidth - 360) } : { top:'50%', left:'50%', transform:'translate(-50%, -50%)' };
  return (
    <>
      <div className="tour__veil" />
      {box && (
        <div className="tour__spot" style={{ top: box.top, left: box.left, width: box.width, height: box.height }} />
      )}
      <div className="tour__tip" style={tipStyle}>
        <div className="tour__count">{i + 1} / {TOUR_STEPS.length}</div>
        <div className="tour__title">{step.title}</div>
        <div className="tour__desc">{step.desc}</div>
        <div className="tour__actions">
          <button className="btn btn--sm" onClick={onClose}>Passer</button>
          <div style={{flex:1}} />
          {i > 0 && <button className="btn btn--sm" onClick={()=>setI(i-1)}>Précédent</button>}
          <button className="btn btn--sm btn--primary" onClick={()=>last ? onClose() : setI(i+1)}>{last ? 'Terminer' : 'Suivant →'}</button>
        </div>
      </div>
    </>
  );
};

/* ============================================================ */
/* LIVE ACTIVITY TICKER                                           */
/* ============================================================ */
const LIVE_LINES = [
  '🟢 Paul vient de scanner SeLoger Lille 3e · 142 annonces',
  '🟡 Géocodage en cours · 8 annonces sans coordonnées',
  '🟢 Match 100 % détecté · Marie Dupont · T4 Vieux-Lille',
  '🔵 Sophie M. (Paris-Marais) a ouvert son dashboard',
  '🟢 Bot Telegram Paul · 3 SMS envoyés en 60 s',
  '🟡 DVF synchronisation · 1 247 transactions importées',
  '🟢 Nouvelle annonce indexée · Tourcoing · 580 k€',
];

const LiveTicker = () => (
  <div className="live-ticker" role="status" aria-live="polite">
    <span className="live-ticker__pulse" />
    <span className="live-ticker__label">LIVE</span>
    <div className="live-ticker__rail">
      <div className="live-ticker__strip">
        {LIVE_LINES.concat(LIVE_LINES).map((line, i) => (
          <span key={i} className="live-ticker__item">{line}</span>
        ))}
      </div>
    </div>
  </div>
);

/* ============================================================ */
/* AI SUGGESTIONS — proactive card on dashboard                   */
/* ============================================================ */
const AI_ICONS = { relance: '💡', match: '📈', diag: '⏰' };

const AISuggestions = ({ onAction }) => {
  const [items, setItems] = _useS(null); // null = chargement
  _useE(() => {
    let alive = true;
    const api = _W.SentinelAPI;
    if (!api) { setItems([]); return; }
    api.fetchAuth('/api/dashboard/suggestions')
      .then((r) => { if (alive) setItems((r && r.data) || []); })
      .catch(() => { if (alive) setItems([]); });
    return () => { alive = false; };
  }, []);
  const list = Array.isArray(items) ? items : [];
  const countLabel = items === null
    ? 'analyse…'
    : `${list.length} proposition${list.length > 1 ? 's' : ''}`;
  return (
    <div className="card ai-card" style={{padding:0, overflow:'hidden'}}>
      <header style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 20px', borderBottom:'1px solid var(--color-border)'}}>
        <div className="row" style={{gap:10}}>
          <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-muted)'}}>Suggestions Paul</span>
          <span style={{fontFamily:'var(--font-mono)', fontSize:9, letterSpacing:'.14em', color:'var(--color-success)'}}>IA · {countLabel}</span>
        </div>
        {/* Le backend plafonne a 2 suggestions par type : « Tout voir » ouvre
            la page Clients, ou vivent relances et matches. */}
        <button className="btn btn--sm" onClick={() => onAction?.({ goto: 'clients', cta: 'Voir les clients' })}>Tout voir</button>
      </header>
      <div>
        {/* etats vides : display block, sans quoi la grille .ai-row
            (36px 1fr auto) ecrase le texte dans la colonne de 36px */}
        {items === null ? (
          <div className="ai-row" style={{color:'var(--color-text-dim)', fontSize:13, display:'block'}}>Analyse en cours…</div>
        ) : list.length === 0 ? (
          <div className="ai-row" style={{color:'var(--color-text-dim)', fontSize:13, display:'block'}}>Aucune suggestion pour le moment.</div>
        ) : list.map(s => (
          <div key={s.id} className="ai-row">
            <span className={`ai-row__chip ai-row__chip--${s.tone}`}>{AI_ICONS[s.kind] || '•'}</span>
            <span className="ai-row__title">{s.title}</span>
            <button className="btn btn--sm" onClick={()=>onAction?.(s)}>{s.cta} <span style={{marginLeft:4}}>→</span></button>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ============================================================ */
/* HEATMAP — activity calendar 8 weeks                            */
/* ============================================================ */
const Heatmap = () => {
  const weeks = 8;
  const days = 7;
  const [cells, setCells] = _useS(null); // null = chargement
  _useE(() => {
    let alive = true;
    const api = _W.SentinelAPI;
    if (!api) { setCells([]); return; }
    api.fetchAuth(`/api/dashboard/match-density?weeks=${weeks}`)
      .then((r) => { if (alive) setCells((r && r.data && r.data.cells) || []); })
      .catch(() => { if (alive) setCells([]); });
    return () => { alive = false; };
  }, []);
  const { data, dates } = _useM(() => {
    const d = Array.from({length: weeks * days}, () => 0);
    const dt = Array.from({length: weeks * days}, () => null);
    if (Array.isArray(cells)) {
      for (let i = 0; i < cells.length && i < d.length; i++) {
        d[i] = cells[i].count || 0;
        dt[i] = cells[i].date || null;
      }
    }
    return { data: d, dates: dt };
  }, [cells]);
  const intensity = (v) => {
    if (v === 0) return 'var(--color-surface-3)';
    if (v <= 2) return 'color-mix(in oklch, var(--accent) 25%, var(--color-surface-3))';
    if (v <= 4) return 'color-mix(in oklch, var(--accent) 55%, var(--color-surface-3))';
    return 'var(--accent)';
  };
  return (
    <div className="heatmap">
      <div className="heatmap__head">
        <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--color-text-muted)'}}>Activité · 8 dernières semaines</span>
        <span style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--color-text-dim)'}}>{data.reduce((s,v) => s + v, 0)} matches</span>
      </div>
      <div className="heatmap__grid">
        {Array.from({length: weeks}, (_, w) => (
          <div key={w} className="heatmap__col">
            {Array.from({length: days}, (_, d) => (
              <span key={d} className="heatmap__cell" style={{background: intensity(data[w * days + d])}} title={dates[w * days + d] ? `${dates[w * days + d]} · ${data[w * days + d]} matches` : `${data[w * days + d]} matches`} />
            ))}
          </div>
        ))}
      </div>
      <div className="heatmap__legend">
        <span style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--color-text-dim)'}}>Moins</span>
        {[0, 2, 4, 6].map(v => (
          <span key={v} className="heatmap__cell" style={{background: intensity(v)}} />
        ))}
        <span style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--color-text-dim)'}}>Plus</span>
      </div>
    </div>
  );
};

/* ============================================================ */
/* SKELETON                                                       */
/* ============================================================ */
const Skeleton = ({ w = '100%', h = 14, r = 3, mb }) => (
  <span className="skeleton" style={{ width: w, height: h, borderRadius: r, marginBottom: mb }} />
);

/* ============================================================ */
/* KONAMI + FOCUS MODE                                            */
/* ============================================================ */
const KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];

const useKonami = (onUnlock) => {
  _useE(() => {
    let idx = 0;
    const onKey = (e) => {
      if (e.key === KONAMI[idx]) {
        idx++;
        if (idx === KONAMI.length) { onUnlock(); idx = 0; }
      } else idx = 0;
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onUnlock]);
};

const KonamiEgg = ({ active }) => {
  if (!active) return null;
  return <div className="konami" aria-hidden="true"><div className="konami__inner">⚡ WIREFRAME MODE</div></div>;
};

/* ============================================================ */
/* SOUND TOGGLE                                                   */
/* ============================================================ */
const useSounds = (enabled) => {
  const ctxRef = _useR(null);
  const play = _useC((freq, dur = 0.06, vol = 0.06) => {
    if (!enabled) return;
    try {
      const Ctx = window.AudioContext || window.webkitAudioContext;
      if (!ctxRef.current) ctxRef.current = new Ctx();
      const ctx = ctxRef.current;
      const o = ctx.createOscillator();
      const g = ctx.createGain();
      o.frequency.value = freq;
      o.type = 'sine';
      g.gain.value = vol;
      o.connect(g); g.connect(ctx.destination);
      o.start();
      g.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + dur);
      o.stop(ctx.currentTime + dur);
    } catch (_) {}
  }, [enabled]);
  return play;
};

/* ============================================================ */
/* CLIENT DETAIL — full page                                      */
/* ============================================================ */
const ClientDetailView = ({ client, onBack }) => {
  const PageHeader = _W.PageHeader;
  const Card = _W.Card;
  const Pill = _W.Pill;
  const I = _W.I;
  const score = 92;
  return (
    <div className="page">
      <PageHeader
        crumb={<a onClick={onBack} style={{cursor:'pointer'}}>← Clients</a>}
        title={client.name}
        sub={`${client.critères} · ${client.budget} · ${client.villes}`}
        actions={<>
          <Pill tone="warning" pulse dot>Actif · 47 min</Pill>
          <button className="btn"><I.send /> Email</button>
          <button className="btn"><I.clock /> Programmer un appel</button>
          <button className="btn btn--primary"><I.edit /> Éditer</button>
        </>}
      />

      <div className="grid grid--detail" style={{gap:16, marginBottom:16}}>
        <Card title="Timeline des interactions" actions={<button className="btn btn--sm">Ajouter une note</button>} flush>
          <ol className="client-timeline">
            <li className="client-timeline__item" data-tone="success">
              <span className="client-timeline__dot" />
              <div>
                <div className="client-timeline__top"><strong>Match 100 % détecté</strong><span className="client-timeline__time">il y a 47 min</span></div>
                <div className="client-timeline__desc">T4 Vieux-Lille · 420 k€ · 92 m² · balcon</div>
                <div className="client-timeline__cta"><a>Voir l'annonce →</a></div>
              </div>
            </li>
            <li className="client-timeline__item" data-tone="info">
              <span className="client-timeline__dot" />
              <div>
                <div className="client-timeline__top"><strong>Email reçu</strong><span className="client-timeline__time">hier · 18:42</span></div>
                <div className="client-timeline__desc">« Toujours intéressée si vous trouvez un T4 sous 200 k€ »</div>
              </div>
            </li>
            <li className="client-timeline__item" data-tone="neutral">
              <span className="client-timeline__dot" />
              <div>
                <div className="client-timeline__top"><strong>Budget mis à jour</strong><span className="client-timeline__time">13/05 · 09:14</span></div>
                <div className="client-timeline__desc">140 000 € → 200 000 € (par l'agent)</div>
              </div>
            </li>
            <li className="client-timeline__item" data-tone="info">
              <span className="client-timeline__dot" />
              <div>
                <div className="client-timeline__top"><strong>Visite réalisée</strong><span className="client-timeline__time">06/05 · 11:30</span></div>
                <div className="client-timeline__desc">Studio Wazemmes · pas concluant</div>
              </div>
            </li>
            <li className="client-timeline__item" data-tone="neutral">
              <span className="client-timeline__dot" />
              <div>
                <div className="client-timeline__top"><strong>Inscription Sentinel</strong><span className="client-timeline__time">05/05/2026</span></div>
                <div className="client-timeline__desc">Premier contact via le formulaire site</div>
              </div>
            </li>
          </ol>
        </Card>

        <div className="stack">
          <Card title="Score d'engagement" padded>
            <div style={{display:'flex', alignItems:'baseline', gap:10, marginBottom:14}}>
              <span style={{fontFamily:'var(--font-display)', fontWeight:200, fontSize:64, letterSpacing:'-.035em', color:'var(--color-success)', lineHeight:1}}>{score}</span>
              <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--color-text-dim)'}}>/ 100 · chaud</span>
            </div>
            <div className="score-bar" style={{marginBottom:14}}>
              <div className="score-bar__track" style={{width:'100%', height:6}}>
                <div className="score-bar__fill" data-tier="high" style={{width:'92%'}} />
              </div>
            </div>
            <ul className="score-list">
              <li><span>3 matches précédents</span><span style={{color:'var(--color-success)'}}>+18</span></li>
              <li><span>1 visite réalisée</span><span style={{color:'var(--color-success)'}}>+22</span></li>
              <li><span>Budget récemment relevé</span><span style={{color:'var(--color-success)'}}>+12</span></li>
              <li><span>Email cliqué &lt; 24 h</span><span style={{color:'var(--color-success)'}}>+8</span></li>
              <li><span>15 j sans contact</span><span style={{color:'var(--color-danger)'}}>−14</span></li>
            </ul>
          </Card>
          <Card title="Critères de recherche">
            <div className="metric-list">
              <_W.MetricRow label="Type"    value="Appartement" />
              <_W.MetricRow label="Pièces"  value="4" unit=" +" />
              <_W.MetricRow label="Budget"  value="140 000 → 200 000" unit=" €" />
              <_W.MetricRow label="Villes"  value="Ronchin · Lille" />
              <_W.MetricRow label="Options" value="Balcon · Ascenseur" />
            </div>
          </Card>
        </div>
      </div>

      <Card title="Historique des matches" meta="3 derniers · 100 / 84 / 71 %" flush>
        <table className="table">
          <thead><tr><th>Score</th><th>Annonce</th><th>Prix</th><th>Statut</th><th>Reçu</th><th></th></tr></thead>
          <tbody>
            <tr>
              <td><_W.ScoreBar score={100} /></td>
              <td>T4 Vieux-Lille · 92 m²</td>
              <td className="num">420 000 €</td>
              <td><Pill tone="success" dot>Envoyé · ouvert</Pill></td>
              <td className="num" style={{color:'var(--color-text-muted)', fontSize:12}}>à l'instant</td>
              <td className="actions"><button className="btn btn--sm">Détail</button></td>
            </tr>
            <tr>
              <td><_W.ScoreBar score={84} /></td>
              <td>T4 Ronchin · 88 m²</td>
              <td className="num">189 000 €</td>
              <td><Pill tone="warning" dot>Envoyé · sans réponse</Pill></td>
              <td className="num" style={{color:'var(--color-text-muted)', fontSize:12}}>il y a 3 j</td>
              <td className="actions"><button className="btn btn--sm">Détail</button></td>
            </tr>
            <tr>
              <td><_W.ScoreBar score={71} /></td>
              <td>T3 Lille Centre · 65 m²</td>
              <td className="num">175 000 €</td>
              <td><Pill>Pas envoyé · sous seuil</Pill></td>
              <td className="num" style={{color:'var(--color-text-muted)', fontSize:12}}>il y a 5 j</td>
              <td className="actions"><button className="btn btn--sm">Détail</button></td>
            </tr>
          </tbody>
        </table>
      </Card>
    </div>
  );
};

/* ============================================================ */
/* EXPORTS                                                        */
/* ============================================================ */
Object.assign(window, {
  NotifBell, Cheatsheet, Tour, LiveTicker,
  AISuggestions, Heatmap, Skeleton,
  useKonami, KonamiEgg, useSounds,
  ClientDetailView,
});