// pages-overview.jsx — Dashboard, Pipeline, Kunden-Liste

// ============ DASHBOARD ============
function Dashboard({ go, openObjekt, openKunde }) {
  const objekte = SAMPLE_OBJEKTE;
  const kunden = SAMPLE_KUNDEN;
  const aktiv = objekte.filter(o => o.status === 'aktiv').length;
  const reserviert = objekte.filter(o => o.status === 'reserviert').length;
  const portfolioVolumen = objekte.reduce((s,o) => s + o.kaufpreis, 0);
  const offenePipeline = SAMPLE_PARTNER.reduce((s,p) => s + p.pipeline, 0);

  return (
    <div style={{ flex: 1, overflowY: 'auto' }}>
      <TopBar
        title="Dashboard"
        subtitle="Übersicht über Pipeline, Objekte und Aktivitäten."
        actions={<>
          <Button variant="secondary" leadingIcon={<Icon.calendar size={14} />}>Mai 2026</Button>
          <Button variant="primary" leadingIcon={<Icon.plus size={14} />} onClick={() => go('objekte')}>Neues Objekt</Button>
        </>}
      />

      <div style={{ padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 20 }}>
        {/* KPIs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          <Stat label="Aktive Objekte" value={aktiv} icon={<Icon.building size={18} />} delta="+3" sub="vs. Vormonat" />
          <Stat label="Portfolio-Volumen" value={fmtEUR(portfolioVolumen)} icon={<Icon.euro size={18} />} delta="+12,4 %" sub="YTD" />
          <Stat label="Offene Pipeline" value={fmtEUR(offenePipeline)} icon={<Icon.pipeline size={18} />} delta="14 Deals" deltaTone="amber" />
          <Stat label="Provision YTD" value={fmtEUR(408_400)} icon={<Icon.receipt size={18} />} delta="+18 %" sub="vs. Vorjahr" />
        </div>

        {/* Pipeline overview + Activity */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
          <Card padding={0}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)' }}>Verkaufs-Pipeline</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>{kunden.length} Kontakte · {fmtEUR(offenePipeline)} potentielles Volumen</div>
              </div>
              <Button variant="ghost" size="sm" trailingIcon={<Icon.arrowRight size={14} />} onClick={() => go('pipeline')}>Pipeline öffnen</Button>
            </div>
            <div style={{ padding: 16, display: 'grid', gridTemplateColumns: `repeat(${PIPELINE_STAGES.length}, 1fr)`, gap: 10 }}>
              {PIPELINE_STAGES.map(stage => {
                const list = kunden.filter(k => k.stage === stage.key);
                const sum = list.reduce((s,k) => s + (k.budget || 0), 0);
                return (
                  <div key={stage.key} style={{
                    border: '1px solid var(--border-default)', borderRadius: 12, padding: 12,
                    background: 'var(--surface-app)', minHeight: 160, display: 'flex', flexDirection: 'column', gap: 8,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
                      <Pill tone={stage.tone} size="sm">{stage.label}</Pill>
                      <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-3)' }}>{list.length}</span>
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--fg-4)', marginTop: -4 }}>{fmtEUR(sum)}</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      {list.slice(0, 3).map(k => (
                        <button key={k.id} onClick={() => openKunde(k.id)} style={{
                          background: '#fff', border: '1px solid var(--border-default)', borderRadius: 8,
                          padding: '7px 9px', textAlign: 'left', cursor: 'pointer',
                          display: 'flex', flexDirection: 'column', gap: 2,
                        }}>
                          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-1)' }}>{k.name}</span>
                          <span style={{ fontSize: 10.5, color: 'var(--fg-4)' }}>{fmtEUR(k.budget)} · {k.berater.split(' ')[0]}</span>
                        </button>
                      ))}
                      {list.length > 3 && <div style={{ fontSize: 11, color: 'var(--fg-4)', textAlign: 'center' }}>+ {list.length - 3} weitere</div>}
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>

          <Card padding={0}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-default)' }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)' }}>Aktivitäten</div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>Live-Stream aller Vertriebsereignisse</div>
            </div>
            <div style={{ padding: '6px 12px 14px', display: 'flex', flexDirection: 'column' }}>
              {SAMPLE_AKTIVITAET.map((a, i) => {
                const Ic = Icon[a.icon];
                const colors = { green: '#16A34A', amber: '#D98E00', yellow: '#A16207', blue: '#2563EB', grey: '#6B7280' };
                return (
                  <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 8px', borderBottom: i < SAMPLE_AKTIVITAET.length-1 ? '1px solid var(--border-subtle)' : 0 }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: 999, background: 'var(--surface-sunken)',
                      color: colors[a.tone] || colors.grey,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    }}><Ic size={14} /></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, color: 'var(--fg-1)', fontWeight: 500 }}>{a.text}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--fg-4)', marginTop: 2 }}>{a.meta}</div>
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--fg-4)', whiteSpace: 'nowrap' }}>{a.zeit}</div>
                  </div>
                );
              })}
            </div>
          </Card>
        </div>

        {/* Hot Objects + Top Partner */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
          <Card padding={0}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)' }}>Heiße Objekte</div>
              <Button variant="ghost" size="sm" trailingIcon={<Icon.arrowRight size={14} />} onClick={() => go('objekte')}>Alle Objekte</Button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, padding: 16 }}>
              {objekte.filter(o => o.status === 'aktiv').slice(0,3).map(o => (
                <button key={o.id} onClick={() => openObjekt(o.id)} style={{
                  background: '#fff', border: '1px solid var(--border-default)', borderRadius: 12,
                  overflow: 'hidden', cursor: 'pointer', textAlign: 'left', display: 'flex', flexDirection: 'column', padding: 0,
                }}>
                  <div style={{ height: 110, backgroundImage: `url(${o.cover})`, backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
                    {o.badge && <div style={{ position: 'absolute', top: 8, left: 8 }}><Pill tone="amber" size="sm">{o.badge}</Pill></div>}
                  </div>
                  <div style={{ padding: '10px 12px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{o.titel}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--fg-4)' }}>{o.ort} · {o.wfl} m² · {o.zimmer} Zi.</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 6, marginTop: 4 }}>
                      <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--fg-1)' }}>{fmtEUR(o.kaufpreis)}</span>
                      <span style={{ fontSize: 11, color: 'var(--wholix-amber-700)', fontWeight: 600 }}>{o.interessenten} Interessenten</span>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </Card>

          <Card padding={0}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)' }}>Top Vertriebspartner</div>
              <Button variant="ghost" size="sm" trailingIcon={<Icon.arrowRight size={14} />} onClick={() => go('partner')}>Alle</Button>
            </div>
            <div style={{ padding: '6px 12px 14px' }}>
              {SAMPLE_PARTNER.slice(0,4).map((p, i) => (
                <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 8px', borderBottom: i < 3 ? '1px solid var(--border-subtle)' : 0 }}>
                  <Avatar name={p.name} size={36} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-1)' }}>{p.name}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--fg-4)' }}>{p.region} · {p.kunden} Kunden</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg-1)' }}>{fmtEUR(p.provisionYTD)}</div>
                    <div style={{ fontSize: 11, color: 'var(--success-500)', fontWeight: 600 }}>{p.abschluesse} Abschlüsse</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

// ============ PIPELINE (Kanban) ============
function Pipeline({ openKunde }) {
  const kunden = SAMPLE_KUNDEN;
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      <TopBar
        title="Verkaufs-Pipeline"
        subtitle="Drag & drop Interessenten zwischen den Phasen."
        actions={<>
          <Button variant="secondary" size="sm" leadingIcon={<Icon.filter size={14} />}>Filter</Button>
          <Button variant="primary" size="sm" leadingIcon={<Icon.plus size={14} />}>Neuer Lead</Button>
        </>}
      />
      <div style={{ flex: 1, padding: 20, overflow: 'auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${PIPELINE_STAGES.length}, minmax(220px, 1fr))`, gap: 12, height: '100%' }}>
          {PIPELINE_STAGES.map(stage => {
            const list = kunden.filter(k => k.stage === stage.key);
            const sum = list.reduce((s,k) => s + (k.budget||0), 0);
            return (
              <div key={stage.key} style={{
                background: 'var(--surface-app)', borderRadius: 12, border: '1px solid var(--border-default)',
                display: 'flex', flexDirection: 'column', minHeight: 0,
              }}>
                <div style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--border-default)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Pill tone={stage.tone} size="sm">{stage.label}</Pill>
                    <span style={{ fontSize: 12, color: 'var(--fg-4)' }}>{list.length}</span>
                  </div>
                  <span style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 600 }}>{fmtEUR(sum)}</span>
                </div>
                <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 8, overflowY: 'auto' }}>
                  {list.map(k => {
                    const obj = SAMPLE_OBJEKTE.find(o => o.id === k.objektId);
                    return (
                      <button key={k.id} onClick={() => openKunde(k.id)} style={{
                        background: '#fff', border: '1px solid var(--border-default)', borderRadius: 10,
                        padding: 10, textAlign: 'left', cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 6,
                      }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <Avatar name={k.name} size={26} />
                          <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--fg-1)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{k.name}</span>
                          <span style={{
                            fontSize: 10, fontWeight: 700, padding: '2px 5px', borderRadius: 4,
                            background: k.score >= 85 ? 'var(--success-soft)' : k.score >= 70 ? 'var(--accent-soft)' : 'var(--surface-sunken)',
                            color: k.score >= 85 ? '#166534' : k.score >= 70 ? 'var(--wholix-amber-800)' : 'var(--fg-3)',
                          }}>{k.score}</span>
                        </div>
                        <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{fmtEUR(k.budget)} · EK {fmtEUR(k.ek)}</div>
                        {obj && <div style={{ fontSize: 10.5, color: 'var(--fg-4)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>📍 {obj.titel}</div>}
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6, marginTop: 2 }}>
                          <span style={{ fontSize: 10.5, color: 'var(--fg-4)' }}>{k.berater.split(' ')[0]}</span>
                          <span style={{ fontSize: 10.5, color: 'var(--fg-4)' }}>{k.lastTouch}</span>
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ============ KUNDEN-LISTE ============
function KundenListe({ openKunde }) {
  const [q, setQ] = React.useState('');
  const [stage, setStage] = React.useState('alle');
  const list = SAMPLE_KUNDEN.filter(k =>
    (stage === 'alle' || k.stage === stage) &&
    (q === '' || k.name.toLowerCase().includes(q.toLowerCase()) || k.email.toLowerCase().includes(q.toLowerCase()))
  );
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      <TopBar
        title="Kunden & Interessenten"
        subtitle={`${SAMPLE_KUNDEN.length} Kontakte · ${SAMPLE_KUNDEN.filter(k => k.selbstauskunft === 'eingegangen' || k.selbstauskunft === 'unterschrieben').length} mit Selbstauskunft`}
        actions={<>
          <Button variant="secondary" size="sm" leadingIcon={<Icon.upload size={14} />}>CSV-Import</Button>
          <Button variant="primary" size="sm" leadingIcon={<Icon.plus size={14} />}>Neuer Kunde</Button>
        </>}
      />
      <div style={{ padding: '18px 28px', display: 'flex', gap: 10, alignItems: 'center', borderBottom: '1px solid var(--border-default)' }}>
        <div style={{ flex: 1, position: 'relative' }}>
          <span style={{ position: 'absolute', left: 12, top: 11, color: 'var(--fg-4)' }}><Icon.search size={16} /></span>
          <Input placeholder="Suche nach Name, E-Mail, Stadt…" value={q} onChange={e=>setQ(e.target.value)} style={{ paddingLeft: 36 }} />
        </div>
        <Select value={stage} onChange={e=>setStage(e.target.value)} style={{ width: 200 }}>
          <option value="alle">Alle Phasen</option>
          {PIPELINE_STAGES.map(s => <option key={s.key} value={s.key}>{s.label}</option>)}
        </Select>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '0 28px 24px' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 8 }}>
          <thead>
            <tr style={{ fontSize: 11, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.05em', textAlign: 'left' }}>
              {['Kunde','Phase','Objekt','Budget','Score','Selbstauskunft','Berater','Letzter Kontakt',''].map(h => (
                <th key={h} style={{ padding: '12px 8px', borderBottom: '1px solid var(--border-default)', fontWeight: 600 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {list.map(k => {
              const stage = PIPELINE_STAGES.find(s => s.key === k.stage);
              const obj = SAMPLE_OBJEKTE.find(o => o.id === k.objektId);
              const sa = k.selbstauskunft;
              const saTone = sa === 'unterschrieben' ? 'green' : sa === 'eingegangen' ? 'blue' : sa === 'angefragt' ? 'amber' : 'grey';
              return (
                <tr key={k.id} onClick={() => openKunde(k.id)} style={{ cursor: 'pointer', borderBottom: '1px solid var(--border-subtle)' }}
                    onMouseOver={e => e.currentTarget.style.background = 'var(--surface-app)'}
                    onMouseOut={e => e.currentTarget.style.background = 'transparent'}>
                  <td style={{ padding: '14px 8px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar name={k.name} size={32} />
                      <div>
                        <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--fg-1)' }}>{k.name}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--fg-4)' }}>{k.email}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: '14px 8px' }}><Pill tone={stage.tone} size="sm">{stage.label}</Pill></td>
                  <td style={{ padding: '14px 8px', fontSize: 12.5, color: 'var(--fg-2)' }}>{obj ? obj.titel : <span style={{ color: 'var(--fg-4)' }}>—</span>}</td>
                  <td style={{ padding: '14px 8px', fontSize: 13, color: 'var(--fg-1)', fontWeight: 600 }}>{fmtEUR(k.budget)}</td>
                  <td style={{ padding: '14px 8px' }}>
                    <span style={{
                      display: 'inline-block', padding: '3px 8px', borderRadius: 6, fontSize: 12, fontWeight: 700,
                      background: k.score >= 85 ? 'var(--success-soft)' : k.score >= 70 ? 'var(--accent-soft)' : 'var(--surface-sunken)',
                      color: k.score >= 85 ? '#166534' : k.score >= 70 ? 'var(--wholix-amber-800)' : 'var(--fg-3)',
                    }}>{k.score}</span>
                  </td>
                  <td style={{ padding: '14px 8px' }}>{sa === '—' ? <span style={{ color: 'var(--fg-4)', fontSize: 12 }}>—</span> : <Pill tone={saTone} size="sm">{sa}</Pill>}</td>
                  <td style={{ padding: '14px 8px', fontSize: 12.5, color: 'var(--fg-2)' }}>{k.berater}</td>
                  <td style={{ padding: '14px 8px', fontSize: 12, color: 'var(--fg-4)' }}>{k.lastTouch}</td>
                  <td style={{ padding: '14px 8px', textAlign: 'right' }}><Icon.chevronRight size={14} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;
window.Pipeline = Pipeline;
window.KundenListe = KundenListe;