// ─── Win/Loss & Wettbewerb ───────────────────────────────────
// Lose-Analyse · Wettbewerber · KVP-Maßnahmen (Anf. 24/25/26)

const LOSS_REASON = {
  price:        'Preis',
  leadtime:     'Lieferzeit',
  tech:         'Technik / Features',
  relationship: 'Bestandslieferant',
  budget:       'Budget / Projekt gestoppt'
};
const LOSS_REASON_OPTS = Object.keys(LOSS_REASON).map(k => [k, LOSS_REASON[k]]);
const COMPETITORS = ['Festo','Schunk','SMC','Bosch Rexroth','Zimmer Group'];
const COMP_OPTS = [['','— wählen —'], ...COMPETITORS.map(c => [c, c])];

// Mark an opportunity as lost — capture reason, competitor, KVP
function LossForm({ opp, onClose }) {
  const [competitor, setCompetitor] = useS(opp.competitor || '');
  const [reason, setReason] = useS(opp.lossReason || 'price');
  const [kvp, setKvp] = useS(opp.kvp || '');
  const [makeKvp, setMakeKvp] = useS(true);
  const [due, setDue] = useS('');

  const save = () => {
    CRMStore.update('opportunities', opp.id, { stage:'lost', prob:0, competitor, lossReason:reason, kvp });
    if (makeKvp && kvp.trim()) {
      CRMStore.create('kvps', { title: kvp.slice(0, 60), area: reason, status:'open', fromOpp: opp.id, owner: opp.owner, due: due, note: kvp });
    }
    toast('Als verloren erfasst' + (makeKvp && kvp.trim() ? ' · KVP angelegt' : ''));
    onClose();
  };

  return (
    <Modal title={'Verloren melden · ' + opp.name} sub="Verlustgrund und Wettbewerber erfassen — speist die Lose-Analyse." onClose={onClose}
      footer={<>
        <span className="cmodal-note">Fließt in Win/Loss &amp; Wettbewerb ein</span>
        <span className="cmodal-foot-right">
          <button className="btn ghost" onClick={onClose}>Abbrechen</button>
          <button className="btn danger" onClick={save}>Als verloren markieren</button>
        </span>
      </>}>
      <div className="form-grid">
        <Field label="Verlust an Wettbewerber"><Select value={competitor} onChange={setCompetitor} options={COMP_OPTS} /></Field>
        <Field label="Verlustgrund" req><Select value={reason} onChange={setReason} options={LOSS_REASON_OPTS} /></Field>
        <Field label="KVP — Maßnahme für nächste Opportunities" full><TextArea value={kvp} onChange={setKvp} placeholder="Was nehmen wir mit? z. B. Lieferzeit-Garantie 6 Wochen mit SCM abstimmen." /></Field>
        <Field label="Frist" hint="erscheint im Activities-Kalender"><TextInput value={due} onChange={setDue} type="date" /></Field>
      </div>
      <label className="conv-toggle" style={{marginTop:4}}>
        <input type="checkbox" checked={makeKvp} onChange={e => setMakeKvp(e.target.checked)} />
        <span>KVP-Maßnahme automatisch anlegen</span>
      </label>
    </Modal>
  );
}

function KvpForm({ rec, onClose }) {
  const isNew = !rec.id;
  const [f, setF] = useS(Object.assign({ title:'', area:'price', status:'open', fromOpp:'', owner:'JS', due:'', note:'' }, rec));
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const save = () => {
    if (!f.title.trim()) return;
    if (isNew) { CRMStore.create('kvps', f); toast('KVP angelegt'); }
    else { CRMStore.update('kvps', rec.id, f); toast('KVP aktualisiert'); }
    onClose();
  };
  return (
    <Modal title={isNew ? 'Neue KVP-Maßnahme' : 'KVP bearbeiten'} sub={isNew ? 'Verbesserung für nächste Opportunities.' : f.id} onClose={onClose}
      footer={<><span className="cmodal-note">{f.title.trim() ? 'Bereit' : 'Titel erforderlich'}</span>
        <span className="cmodal-foot-right"><button className="btn ghost" onClick={onClose}>Abbrechen</button><button className="btn" disabled={!f.title.trim()} onClick={save}>{isNew ? 'Anlegen' : 'Speichern'}</button></span></>}>
      <div className="form-grid">
        <Field label="Maßnahme" req full><TextInput value={f.title} onChange={v => set('title', v)} placeholder="z. B. Lieferzeit-Garantie 6 Wochen" /></Field>
        <Field label="Themenfeld"><Select value={f.area} onChange={v => set('area', v)} options={LOSS_REASON_OPTS} /></Field>
        <Field label="Status"><Select value={f.status} onChange={v => set('status', v)} options={[['open','Offen'],['done','Umgesetzt']]} /></Field>
        <Field label="Owner"><Select value={f.owner} onChange={v => set('owner', v)} options={OWNER_OPTS} /></Field>
        <Field label="Frist" hint="Activities-Kalender"><TextInput value={f.due} onChange={v => set('due', v)} type="date" /></Field>
        <Field label="Notiz" full><TextArea value={f.note} onChange={v => set('note', v)} /></Field>
      </div>
    </Modal>
  );
}

function WinLossView() {
  const [kvpEdit, setKvpEdit] = useS(null);
  const opps = scopeOwner(CRMStore.list('opportunities'));
  const won = opps.filter(o => o.stage === 'won');
  const lost = opps.filter(o => o.stage === 'lost');
  const closed = won.length + lost.length;
  const winRate = closed ? Math.round(won.length / closed * 100) : 0;
  const lostVol = lost.reduce((s, o) => s + (o.amount || 0), 0);
  const wonVol = won.reduce((s, o) => s + (o.amount || 0), 0);

  // Loss reasons
  const reasons = Object.keys(LOSS_REASON).map(k => {
    const list = lost.filter(o => o.lossReason === k);
    return { k, label: LOSS_REASON[k], count: list.length, vol: list.reduce((s, o) => s + (o.amount || 0), 0) };
  }).filter(r => r.count > 0).sort((a, b) => b.count - a.count);
  const maxReason = Math.max(1, ...reasons.map(r => r.count));

  // Competitor analysis
  const comps = {};
  opps.filter(o => o.competitor && (o.stage === 'won' || o.stage === 'lost')).forEach(o => {
    const c = comps[o.competitor] || (comps[o.competitor] = { name:o.competitor, won:0, lost:0, lostVol:0 });
    if (o.stage === 'won') c.won++; else { c.lost++; c.lostVol += (o.amount || 0); }
  });
  const compRows = Object.values(comps).map(c => ({ ...c, total:c.won + c.lost, wr: (c.won + c.lost) ? Math.round(c.won / (c.won + c.lost) * 100) : 0 }))
    .sort((a, b) => b.total - a.total);
  const topRival = compRows.slice().sort((a, b) => b.lost - a.lost)[0];

  const kvps = scopeOwner(CRMStore.list('kvps'));
  const oppName = (id) => { const o = CRMStore.get('opportunities', id); return o ? o.name : id; };

  return (
    <div className="page">
      <div className="page-title-row">
        <div>
          <h1 className="page-title">Win/Loss &amp; Wettbewerb</h1>
          <p className="page-sub">Warum gewinnen oder verlieren wir Projekte — wer sind die Wettbewerber, und welche KVP-Maßnahmen leiten wir ab.</p>
        </div>
        <button className="btn" onClick={() => setKvpEdit({})}>{Icons.plus} Neue KVP-Maßnahme</button>
      </div>

      <div className="home-metrics">
        <div className="hm"><div className="k">Win-Rate</div><div className="v">{winRate}%</div><div className="s">{won.length} gewonnen / {lost.length} verloren</div></div>
        <div className="hm"><div className="k">Gewonnenes Volumen</div><div className="v">{fmtEUR(wonVol)}</div><div className="s">{won.length} Deals</div></div>
        <div className="hm"><div className="k">Verlorenes Volumen</div><div className="v">{fmtEUR(lostVol)}</div><div className="s">{lost.length} Deals</div></div>
        <div className="hm"><div className="k">Härtester Gegner</div><div className="v" style={{fontSize:20}}>{topRival ? topRival.name : '—'}</div><div className="s">{topRival ? topRival.lost + ' Verluste' : ''}</div></div>
      </div>

      <div className="dash-grid">
        <div className="dash-card" style={{cursor:'default'}}>
          <div className="dash-hd"><h3>Warum verlieren wir? · Lose-Analyse</h3><span className="dash-link">{lost.length} verlorene Deals</span></div>
          <div className="pipe">
            {reasons.length === 0 ? <p className="drawer-note">Noch keine Verlustgründe erfasst.</p> :
              reasons.map(r => (
                <div key={r.k} className="pipe-row">
                  <span className="pipe-label" style={{fontSize:12.5, fontWeight:600, color:'var(--ink)'}}>{r.label}</span>
                  <span className="pipe-track"><span className="pipe-fill" style={{ width:(r.count / maxReason * 100) + '%', background:'linear-gradient(90deg,#e9a0ad,var(--danger))' }}></span></span>
                  <span className="pipe-val"><b>{r.count}×</b><small>{fmtEUR(r.vol)}</small></span>
                </div>
              ))}
          </div>
        </div>

        <div className="dash-card" style={{cursor:'default'}}>
          <div className="dash-hd"><h3>Wettbewerber im Projekt</h3><span className="dash-link">{compRows.length} aktiv</span></div>
          <table className="tbl wl-comp">
            <thead><tr><th>Wettbewerber</th><th className="num">Begegnet</th><th className="num">Win-Rate</th><th className="num">Verlust €</th></tr></thead>
            <tbody>
              {compRows.map(c => (
                <tr key={c.name}>
                  <td><b>{c.name}</b></td>
                  <td className="num">{c.total}× <small style={{color:'var(--muted-2)'}}>({c.won}/{c.lost})</small></td>
                  <td className="num"><span className={"wl-wr " + (c.wr >= 50 ? 'good' : 'bad')}>{c.wr}%</span></td>
                  <td className="num">{fmtEUR(c.lostVol)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="lv-card">
        <div className="lv-card-hd"><h3>KVP-Maßnahmen für nächste Opportunities</h3><span className="sub">{kvps.filter(k => k.status === 'open').length} offen · {kvps.filter(k => k.status === 'done').length} umgesetzt</span></div>
        {kvps.length === 0 ? <div className="empty">Noch keine KVPs. <a onClick={() => setKvpEdit({})}>Erste Maßnahme anlegen →</a></div> : (
        <div className="lv-scroll">
        <table className="tbl">
          <thead><tr><th></th><th>Maßnahme</th><th>Themenfeld</th><th>Frist</th><th>Aus Verlust</th><th>Owner</th><th className="num">Aktion</th></tr></thead>
          <tbody>
            {kvps.map(k => (
              <tr key={k.id} className={k.status === 'done' ? 'act-done' : ''} data-kiki-id={k.id} data-kiki-label={k.title} data-kiki-kind="KVP">
                <td style={{width:34}}><span className="act-check" onClick={() => { CRMStore.update('kvps', k.id, { status: k.status === 'done' ? 'open' : 'done' }); toast(k.status === 'done' ? 'KVP wieder offen' : 'KVP umgesetzt'); }}>{k.status === 'done' ? '✓' : ''}</span></td>
                <td className="name"><b>{k.title}</b><span className="sub">{k.note}</span></td>
                <td><span className="src-tag">{LOSS_REASON[k.area] || k.area}</span></td>
                <td style={{fontFamily:'var(--font-mono)', fontSize:11.5, color: k.due ? 'var(--muted)' : 'var(--muted-2)'}}>{k.due || '—'}</td>
                <td style={{fontSize:12}}>{k.fromOpp ? <span className="ref-link">{oppName(k.fromOpp)}</span> : '—'}</td>
                <td>{k.owner}</td>
                <td className="num"><div className="row-actions"><button className="ra icon" title="Bearbeiten" onClick={() => setKvpEdit(k)}>{Icons.edit}</button></div></td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
        )}
      </div>

      {kvpEdit && <KvpForm rec={kvpEdit} onClose={() => setKvpEdit(null)} />}
    </div>
  );
}