// me.jsx — Mes missions view (my own profile + missions I'm pursuing + adaptive PDF dossier)

function MeView({ onOpenLead, onAskAgent }) {
  const me = window.APPORTOO.ME;
  const missions = window.APPORTOO.MY_MISSIONS;
  const skills = window.APPORTOO.SKILLS;
  const [dossierMission, setDossierMission] = React.useState(null);
  const [selectedMission, setSelectedMission] = React.useState(null);

  const wonCount = missions.filter((m) => m.status === 'won').length;
  const activeCount = missions.filter((m) => m.status !== 'won').length;
  const avgTjm = '780€';

  return (
    <div className="page" style={{ paddingTop: 16, paddingBottom: 16 }}>
      <div className="me-grid" style={{ height: 'calc(100vh - 60px - 32px)' }}>
        {/* Profile column */}
        <div className="me-profile">
          <div className="hero">
            <div className="av-xl">FB</div>
            <div>
              <div className="nm" style={{ fontFamily: "Lora" }}>{me.name}</div>
              <div className="hd">{me.headline}</div>
            </div>
            <div className="hstack" style={{ gap: 6, flexWrap: 'wrap', justifyContent: 'center' }}>
              <span className="chip turq dot sm">Disponible</span>
              <span className="chip sm">{me.tarifJour}/j</span>
              <span className="chip sm">{me.anglais}</span>
              <span className="chip sm">{me.location}</span>
            </div>
          </div>
          <div className="me-stats">
            <div className="me-stat">
              <div className="v">{activeCount}</div>
              <div className="l">Missions actives</div>
            </div>
            <div className="me-stat">
              <div className="v">{wonCount}</div>
              <div className="l">Signées cette année</div>
            </div>
            <div className="me-stat">
              <div className="v">{avgTjm}</div>
              <div className="l">TJM moyen visé</div>
            </div>
            <div className="me-stat">
              <div className="v">62%</div>
              <div className="l">Taux de conversion</div>
            </div>
          </div>
          <div className="me-body">
            <div className="linkedin-sync">
              <div className="li-logo">in</div>
              <div className="li-meta">
                <b>Synchronisé depuis LinkedIn</b>
                <span>Auto · dernière màj il y a 12 min</span>
              </div>
              <button className="btn ghost icon" title="Resynchroniser">
                <window.Icon.refresh size={13} />
              </button>
            </div>
            <div>
              <div className="me-sect">Bio</div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>{me.bio}</div>
            </div>
            <div>
              <div className="me-sect">Stack principale</div>
              <div className="me-tags">
                {me.stack.map((s) => <span key={s} className={`tag ${skills[s]?.cls || ''}`}>{skills[s]?.label || s}</span>)}
              </div>
              <div className="me-sect" style={{ marginTop: 10 }}>Secondaire</div>
              <div className="me-tags">
                {me.stackSecondary.map((s) => <span key={s} className="tag">{skills[s]?.label || s}</span>)}
              </div>
            </div>
            <div>
              <div className="me-sect">Expériences récentes</div>
              <div className="vstack" style={{ gap: 8 }}>
                {me.experiences.map((e, i) =>
                <div key={i} style={{ paddingBottom: 8, borderBottom: i < me.experiences.length - 1 ? '1px dashed var(--line)' : '' }}>
                    <div className="tiny mono muted">{e.years}</div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{e.role}</div>
                    <div className="tiny" style={{ color: 'var(--ink-3)', fontStyle: 'italic' }}>{e.client}</div>
                    <div className="tiny" style={{ color: 'var(--ink-2)', marginTop: 2 }}>{e.desc}</div>
                  </div>
                )}
              </div>
            </div>
            <div className="hstack" style={{ gap: 6, marginTop: 8 }}>
              <button className="btn" style={{ flex: 1 }}><window.Icon.external size={12} /> Voir LinkedIn</button>
              <button className="btn" style={{ flex: 1 }} onClick={() => setDossierMission({ master: true })}>
                <window.Icon.file size={12} /> Dossier
              </button>
            </div>
          </div>
        </div>

        {/* Missions column */}
        <div className="me-missions">
          <div className="me-missions-head">
            <h2>Pipeline</h2>
            <span className="count-pill">{missions.length}</span>
            <div className="spacer" />
            <button className="btn"><window.Icon.refresh size={13} /> Synchro IA</button>
            <button className="btn primary"><window.Icon.plus size={13} /> Nouvelle mission</button>
          </div>

          <div style={{ marginBottom: 12, padding: '10px 14px', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 10, display: 'flex', gap: 10, alignItems: 'center', fontSize: 12.5 }}>
            <window.Icon.sparkle size={14} style={{ color: 'var(--brown)', flexShrink: 0 }} />
            <div style={{ flex: 1, color: 'var(--ink-2)' }}>
              <b style={{ color: 'var(--ink)' }}>L'agent surveille</b> tes 4 missions actives. <b>Carrefour</b> arrive à 5j sans retour — il propose une relance soft.
            </div>
            <button className="btn ghost" onClick={() => onAskAgent && onAskAgent({ supervisor: true, query: 'Analyse mes 4 missions actives' })}>
              <window.Icon.chev size={13} />
            </button>
          </div>

          <div className="me-missions-list">
            {missions.map((m) =>
            <MissionCard key={m.id} mission={m}
            client={window.APPORTOO.byId(m.clientId)}
            onOpen={() => setSelectedMission(m)}
            onAdaptDossier={() => setDossierMission(m)}
            onOpenClient={() => onOpenLead(m.clientId)} />
            )}
          </div>
        </div>
      </div>

      {dossierMission &&
      <DossierModal
        mission={dossierMission.master ? null : dossierMission}
        isMaster={!!dossierMission.master}
        onClose={() => setDossierMission(null)} />

      }
      {selectedMission && (
        <MissionDetailModal
          mission={selectedMission}
          client={window.APPORTOO.byId(selectedMission.clientId)}
          onClose={() => setSelectedMission(null)}
          onOpenClient={() => { onOpenLead(selectedMission.clientId); setSelectedMission(null); }}
          onAdaptDossier={() => { setDossierMission(selectedMission); setSelectedMission(null); }}
          onAskAgent={onAskAgent}
        />
      )}
    </div>);

}

function MissionCard({ mission, client, onOpen, onAdaptDossier, onOpenClient }) {
  const skills = window.APPORTOO.SKILLS;
  const stop = (fn) => (e) => { e.stopPropagation(); fn && fn(); };
  return (
    <div className={`mission-card ${mission.status}`} onClick={onOpen}>
      <div className="mc-head">
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="mc-client">{mission.clientLabel}</div>
          <div className="mc-title">{mission.mission}</div>
        </div>
        <div className="mc-score">{mission.score.toFixed(1)}</div>
      </div>
      <div>
        <div className="mc-step">
          <span><b style={{ color: 'var(--ink)' }}>{mission.statusLabel}</b> · {mission.progressStep}</span>
          <span className="mono">{mission.progress}%</span>
        </div>
        <div className="mc-progress" style={{ marginTop: 6 }}><i style={{ width: `${mission.progress}%` }} /></div>
      </div>
      <div className="mc-tags">
        {mission.keywords.map((k) =>
        <span key={k} className={`tag ${skills[k]?.cls || ''}`}>{skills[k]?.label || k}</span>
        )}
      </div>
      <div className="mc-next">
        <window.Icon.zap size={13} style={{ color: 'var(--coral)', flexShrink: 0 }} />
        <div style={{ flex: 1 }}>
          <div>{mission.nextAction}</div>
        </div>
        <span className="tiny mono muted">{mission.nextActionDate}</span>
      </div>
      <div className="mc-actions">
        <button className="btn" onClick={stop(onOpenClient)}>
          <window.Icon.external size={12} /> Voir client
        </button>
        <button className="btn primary" onClick={stop(onAdaptDossier)}>
          <window.Icon.wand size={12} />
          {mission.dossierAdapted ? 'Dossier adapté' : 'Adapter dossier'}
        </button>
        <div className="spacer" />
        <button className="btn ghost icon" title="Plus" onClick={stop()}>
          <window.Icon.more size={14} />
        </button>
      </div>
      <div className="mc-meta">
        TJM cible {mission.tjm} · {mission.duree} · démarrage {mission.start} · soumis {mission.submittedAt}
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────
// PDF Dossier modal — preview + AI-adapted version per client
// ─────────────────────────────────────────────────────────────────
function DossierModal({ mission, isMaster, onClose }) {
  const me = window.APPORTOO.ME;
  const skills = window.APPORTOO.SKILLS;
  const [adapted, setAdapted] = React.useState(mission ? mission.dossierAdapted : false);
  const [regenerating, setRegenerating] = React.useState(false);

  const client = mission ? window.APPORTOO.byId(mission.clientId) : null;

  const suggestions = mission ? [
  {
    icon: 'sparkle',
    text: <>Mettre <b>{mission.keywords[0] || 'la stack principale'}</b> en gras dans le résumé — mentionné 3× dans le brief.</>,
    done: adapted
  },
  {
    icon: 'trending',
    text: <>Réordonner les expériences : <b>Criteo</b> remonte (référence forte pour {client?.company || 'le client'}).</>,
    done: adapted
  },
  {
    icon: 'wand',
    text: <>Surligner <b>"streaming Kafka"</b> dans Criteo — match parfait avec le brief.</>,
    done: adapted
  },
  {
    icon: 'zap',
    text: <>Ajouter une ligne d'accroche "Lead Data Engineer · BFSI" en sous-titre.</>,
    done: adapted
  }] :
  [];

  const regen = () => {
    setRegenerating(true);
    setTimeout(() => {setAdapted(true);setRegenerating(false);}, 1200);
  };

  return (
    <div className="dossier-back" onClick={onClose}>
      <div className="dossier" onClick={(e) => e.stopPropagation()}>
        <div className="dossier-head">
          <window.Icon.file size={20} style={{ color: 'var(--brown)' }} />
          <div style={{ flex: 1 }}>
            <h2>Dossier de compétences {isMaster ? '· Master' : `· adapté pour ${client?.company}`}</h2>
            <div className="tiny muted">
              {isMaster ?
              'Version générique · mise à jour 11 mai' :
              <>Adapté à : <b>{mission.mission}</b> · {mission.clientLabel}</>}
            </div>
          </div>
          {!isMaster &&
          <span className={`chip ${adapted ? 'turq' : 'warm'} dot`}>
              {adapted ? 'Adapté' : 'Non adapté'}
            </span>
          }
          <button className="btn"><window.Icon.download size={13} /> Télécharger</button>
          <button className="btn ghost icon" onClick={onClose}><window.Icon.x size={14} /></button>
        </div>

        <div className="dossier-body" style={{ gridTemplateColumns: isMaster ? '1fr' : '1fr 360px' }}>
          <div className="dossier-preview">
            <div className="dossier-page">
              <h1>François Berland</h1>
              <div className="dp-sub">
                {adapted && !isMaster ?
                <><b>Lead Data Engineer</b> · BFSI · Spark/Kafka — 10 ans</> :
                <>Senior Data Engineer freelance — 10 ans · Spark/dbt/Snowflake</>}
              </div>
              <div className="dp-stripe" />

              <div className="dp-row"><span>Localisation</span><b>Paris · remote OK</b></div>
              <div className="dp-row"><span>Tarif jour</span><b>780€ HT</b></div>
              <div className="dp-row"><span>Anglais</span><b>C1 (mission internationale OK)</b></div>
              <div className="dp-row"><span>Disponibilité</span><b>Fin mai 2026</b></div>

              <h2>Résumé</h2>
              <p style={{ fontSize: 12.5, color: '#4c5454', lineHeight: 1.55, margin: '6px 0 0' }}>
                Data Engineer freelance senior — 10 ans d'expérience sur des architectures lakehouse pour des clients BFSI et retail.
                {adapted && !isMaster &&
                <> Spécialisé sur le <span className="highlight">streaming Kafka/Spark à grande échelle</span> et la gouvernance data pour banques d'investissement. Track record reconnu sur les <span className="highlight">marchés financiers</span> (Criteo, BNP CIB).</>
                }
              </p>

              <h2>Stack technique</h2>
              <div className="dp-stack">
                {[...me.stack, ...me.stackSecondary].map((s) => {
                  const isKeyword = mission && mission.keywords.includes(s);
                  return (
                    <span key={s} className={`tag ${adapted && isKeyword ? 'highlighted' : ''}`}>
                      {skills[s]?.label || s}
                    </span>);

                })}
              </div>

              <h2>Expériences</h2>
              {(adapted && mission && mission.keywords.includes('kafka') ?
              [me.experiences[2], me.experiences[0], me.experiences[1]] :
              me.experiences).map((e, i) =>
              <div key={i} className="dp-exp">
                  <div className="y">{e.years}</div>
                  <div className="r">{e.role}</div>
                  <div className="c">{e.client}</div>
                  <div className="d">
                    {adapted && e.client.includes('Criteo') ?
                  <>Streaming <span className="highlight">Kafka/Spark</span> à très grande échelle (1Tb/jour). ML serving production.</> :
                  e.desc}
                  </div>
                </div>
              )}
            </div>
          </div>

          {!isMaster &&
          <div className="dossier-side">
              <div>
                <h3>Brief du client</h3>
                <div className="tiny muted" style={{ marginTop: 2 }}>{client?.company} · {mission.mission}</div>
              </div>

              <div>
                <div className="me-sect" style={{ marginBottom: 6 }}>Stack demandée</div>
                <div className="kw-list">
                  {mission.keywords.map((k) =>
                <span key={k} className="tag match">
                      <window.Icon.check size={9} style={{ verticalAlign: -1 }} /> {skills[k]?.label || k}
                    </span>
                )}
                  {mission.keywordsMissing.map((k) =>
                <span key={k} className="tag miss">! {k}</span>
                )}
                </div>
              </div>

              <div className="dseparator" />

              <div>
                <div className="me-sect">Suggestions de l'agent</div>
                <div className="vstack" style={{ gap: 6, marginTop: 6 }}>
                  {suggestions.map((s, i) => {
                  const Ico = window.Icon[s.icon];
                  return (
                    <div key={i} className="dossier-suggest">
                        <Ico size={14} className="icn" />
                        <span className="lbl">{s.text}</span>
                        {s.done ?
                      <window.Icon.check size={14} style={{ color: 'var(--turq)', flexShrink: 0 }} /> :
                      <button>Appliquer</button>}
                      </div>);

                })}
                </div>
              </div>

              <div className="dseparator" />

              <button
              className="btn primary"
              style={{ width: '100%', justifyContent: 'center' }}
              onClick={regen}
              disabled={regenerating}>
                <window.Icon.wand size={13} />
                {regenerating ?
              'Régénération…' :
              adapted ? 'Re-générer pour ce client' : 'Adapter pour ce client'}
              </button>
              <div className="tiny muted" style={{ textAlign: 'center' }}>
                L'agent réécrit le dossier en mettant en avant les mots-clés du brief client.
              </div>
            </div>
          }
        </div>
      </div>
    </div>);

}

window.MeView = MeView;

// ─────────────────────────────────────────────────────────────────
// Mission detail modal — full info + match analysis + timeline
// ─────────────────────────────────────────────────────────────────
function MissionDetailModal({ mission, client, onClose, onOpenClient, onAdaptDossier, onAskAgent }) {
  const skills = window.APPORTOO.SKILLS;
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  const timeline = [
    { when: 'Aujourd\'hui · 10:30', what: mission.nextAction, who: 'À faire', cls: '' },
    { when: '11 mai · 14:02', what: 'Dossier consulté par le client', who: client?.name || 'Contact client', cls: 'turq' },
    { when: '10 mai · 09:14', what: 'Dossier de compétences envoyé', who: 'Toi → ' + (client?.company || mission.clientLabel), cls: 'brown' },
    { when: mission.submittedAt, what: 'Mission ajoutée au pipeline', who: 'Toi · qualifiée Hot par l\'agent', cls: 'cold' },
  ];

  return (
    <div className="dossier-back" onClick={onClose}>
      <div className="dossier" style={{ maxWidth: 980, maxHeight: '85vh' }} onClick={e => e.stopPropagation()}>
        <div className="dossier-head">
          <div className={`status-stripe ${mission.statusColor}`} style={{ width: 4, height: 36 }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="tiny mono muted" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>
              {mission.clientLabel}
            </div>
            <h2 style={{ marginTop: 2 }}>{mission.mission}</h2>
          </div>
          <span className={`chip ${mission.statusColor} dot`}>{mission.statusLabel}</span>
          <div className="mc-score" style={{ fontSize: 14 }}>{mission.score.toFixed(1)} / 10</div>
          <button className="btn ghost icon" onClick={onClose}><window.Icon.x size={14} /></button>
        </div>

        <div className="dossier-body" style={{ gridTemplateColumns: '1fr 320px', overflow: 'auto' }}>
          {/* Main panel */}
          <div style={{ padding: '20px 24px', overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 18 }}>
            <section>
              <div className="me-sect">Progression</div>
              <div className="hstack" style={{ gap: 12, marginBottom: 8 }}>
                <div style={{ flex: 1 }}>
                  <div className="mc-progress"><i style={{ width: `${mission.progress}%`, background: 'var(--' + (mission.statusColor === 'cold' ? 'cold' : mission.statusColor === 'warm' ? 'warm' : 'turq') + ')' }} /></div>
                </div>
                <span className="mono tiny muted">{mission.progress}%</span>
              </div>
              <div className="tiny" style={{ color: 'var(--ink-2)' }}>
                <b>{mission.progressStep}</b> · prochaine étape estimée d'ici {mission.nextActionDate}
              </div>
            </section>

            <section>
              <div className="me-sect">Détails de la mission</div>
              <dl className="kv" style={{ gridTemplateColumns: '140px 1fr' }}>
                <dt>Client</dt>
                <dd>
                  <b>{client?.company || mission.clientLabel}</b>
                  <span className="muted" style={{ marginLeft: 6, fontSize: 12 }}>· contact {client?.name || '—'}</span>
                </dd>
                <dt>TJM cible</dt><dd>{mission.tjm}</dd>
                <dt>Durée</dt><dd>{mission.duree}</dd>
                <dt>Démarrage</dt><dd>{mission.start}</dd>
                <dt>Mode</dt><dd>{client?.remote || '—'}</dd>
                <dt>Soumise</dt><dd>{mission.submittedAt}</dd>
              </dl>
            </section>

            <section>
              <div className="me-sect">Analyse du match</div>
              <div style={{ padding: '12px 14px', background: 'var(--surface-soft)', border: '1px solid var(--line-soft)', borderRadius: 10, display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13 }}>
                <window.Icon.sparkle size={14} style={{ color: 'var(--brown)', flexShrink: 0, marginTop: 3 }} />
                <span>{mission.matchReason}</span>
              </div>
              <div className="hstack" style={{ marginTop: 10, gap: 14, flexWrap: 'wrap' }}>
                <div>
                  <div className="tiny muted" style={{ marginBottom: 4 }}>Stack matchée</div>
                  <div className="hstack" style={{ gap: 4, flexWrap: 'wrap' }}>
                    {mission.keywords.map(k => (
                      <span key={k} className="tag turq" style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                        <window.Icon.check size={9} /> {skills[k]?.label || k}
                      </span>
                    ))}
                  </div>
                </div>
                {mission.keywordsMissing && mission.keywordsMissing.length > 0 && (
                  <div>
                    <div className="tiny muted" style={{ marginBottom: 4 }}>À renforcer</div>
                    <div className="hstack" style={{ gap: 4, flexWrap: 'wrap' }}>
                      {mission.keywordsMissing.map(k => (
                        <span key={k} className="tag" style={{ background: 'var(--coral-soft)', color: 'var(--coral-deep)' }}>! {k}</span>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </section>

            <section>
              <div className="me-sect">Activité</div>
              <div className="timeline">
                {timeline.map((t, i) => (
                  <div key={i} className={`tl-item ${t.cls}`}>
                    <div className="when">{t.when}</div>
                    <div className="what">{t.what}</div>
                    <div className="who">{t.who}</div>
                  </div>
                ))}
              </div>
            </section>
          </div>

          {/* Side panel */}
          <div className="dossier-side">
            <div>
              <h3>Prochaine action</h3>
              <div className="mc-next" style={{ marginTop: 8 }}>
                <window.Icon.zap size={13} style={{ color: 'var(--coral)', flexShrink: 0 }} />
                <div style={{ flex: 1 }}><div>{mission.nextAction}</div></div>
                <span className="tiny mono muted">{mission.nextActionDate}</span>
              </div>
            </div>

            <div className="dseparator" />

            <div>
              <h3>Contact client</h3>
              {client && (
                <div className="agent-fs-ctx-lead" style={{ marginTop: 6, background: 'var(--surface-soft)', padding: '10px 12px' }} onClick={onOpenClient}>
                  <window.Avatar name={client.name} status={client.statusKey} size="sm" />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="l">{client.name}</div>
                    <div className="h">{client.headline}</div>
                  </div>
                  <window.Icon.chev size={13} style={{ color: 'var(--ink-4)' }} />
                </div>
              )}
            </div>

            <div className="dseparator" />

            <div className="vstack" style={{ gap: 6 }}>
              <button className="btn primary" style={{ width: '100%', justifyContent: 'center' }} onClick={onAdaptDossier}>
                <window.Icon.wand size={13} /> {mission.dossierAdapted ? 'Voir dossier adapté' : 'Adapter dossier'}
              </button>
              <button className="btn" style={{ width: '100%', justifyContent: 'center' }} onClick={onOpenClient}>
                <window.Icon.external size={13} /> Ouvrir fiche client
              </button>
              <button className="btn ghost" style={{ width: '100%', justifyContent: 'center' }}
                      onClick={() => onAskAgent && onAskAgent({ supervisor: true, query: `Stratégie pour ${mission.mission}` })}>
                <window.Icon.sparkle size={13} /> Stratégie avec l'agent
              </button>
            </div>

            <div className="dseparator" />

            <div className="agent-fs-ctx-block">
              <b>Statut</b>
              <div style={{ marginTop: 6 }}>
                <select className="btn" style={{ width: '100%', justifyContent: 'space-between' }} defaultValue={mission.status}>
                  <option value="pending">En attente</option>
                  <option value="shortlist">En shortlist</option>
                  <option value="sent">Dossier envoyé</option>
                  <option value="won">Signée</option>
                  <option value="lost">Perdue</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.MissionDetailModal = MissionDetailModal;