// Top nav, sidebar, right detail panel.

function TopNav({ onProposeChange, onOpenConfirmations, activeTab, onTabChange, openConfirmCount = 2 }) {
  const tabs = ['Kalender', 'Ferien & Feiertage', 'Vereinbarungen', 'Zahlungen', 'Dokumente', 'Nachrichten'];
  return (
    <div className="topnav">
      <div className="brand">
        <div className="logo-mark">FK</div>
        <div className="brand-text">
          <div className="brand-name">FamilienKalender</div>
          <div className="brand-sub">Für getrennte Eltern · <b>UnterhaltsPlan</b></div>
        </div>
      </div>
      <div className="nav-tabs">
        {tabs.map(t => (
          <button key={t} className={`nav-tab ${activeTab === t ? 'active' : ''}`} onClick={() => onTabChange(t)}>
            {t}{t === 'Nachrichten' && <span className="badge">2</span>}
          </button>
        ))}
      </div>
      <div className="nav-actions">
        <button className="confirm-btn" onClick={onOpenConfirmations} title="Offene Bestätigungen">
          <IcAlertCircle size={14} stroke={2} />
          <span className="cb-label">Bestätigungen</span>
          {openConfirmCount > 0 && <span className="confirm-btn-badge">{openConfirmCount}</span>}
        </button>
        <button className="icon-btn" aria-label="Benachrichtigungen">
          <IcBell size={16} />
          <span className="dot" />
        </button>
        <button className="user-pill">
          <span className="avatar">M</span>
          <span className="up-label">Mutter</span>
          <IcChevronDown size={14} />
        </button>
        <button className="cta-primary" onClick={onProposeChange}>
          <IcSwap size={14} stroke={2} />
          <span className="cta-label">Änderung vorschlagen</span>
          <span className="cta-label-short">Vorschlag</span>
        </button>
      </div>
    </div>
  );
}

function Sidebar({ child, onSelectChild, model, onOpenConfirmations }) {
  return (
    <aside className="sidebar">
      <div className="panel today-card">
        <div className="panel-title">Heute · Mo. 4. Mai 2026</div>
        <div>
          <div className="who">
            <span className="child">{child.name}</span> ist bei
          </div>
          <div className="who" style={{ marginTop: 0 }}>
            <em style={{ color: 'var(--forest-700)', fontStyle: 'italic' }}>Mutter</em>
          </div>
          <div className="meta">
            <IcClock size={12} />
            Seit heute 08:00 Uhr · bis Fr. 17:00
          </div>
        </div>
        <div className="today-strip" />
        <div className="today-strip-labels">
          <span>Mo</span><span>Di</span><span>Mi</span><span style={{color:'var(--forest-800)',fontWeight:600}}>Do</span><span>Fr</span><span>Sa</span><span>So</span>
        </div>
      </div>

      <div className="panel">
        <div className="panel-title">Aktuelles Modell</div>
        <div className="kv">
          <div className="big">{model}</div>
          <div className="sub" style={{display:'flex',alignItems:'center',gap:6, marginTop:4}}>
            <span style={{display:'inline-block',width:8,height:8,borderRadius:99,background:'var(--forest-700)'}}/>
            Gemeinsam bestätigt · seit 01.01.2026
          </div>
        </div>
      </div>

      <div className="panel handover-panel">
        <div className="panel-title">Nächste Übergabe</div>
        <div className="handover-row">
          <div className="handover-when">
            <div className="hw-day">Fr. 8. Mai</div>
            <div className="hw-time">17:00 Uhr</div>
          </div>
          <div className="handover-arrow">
            <div className="ha-from">M</div>
            <div className="ha-line"><IcSwap size={11} stroke={2}/></div>
            <div className="ha-to">V</div>
          </div>
        </div>
        <div className="handover-meta">
          <IcMapPin size={11} /> Parkplatz am Bürgerpark
          <span style={{color:'var(--ink-400)'}}> · </span>
          Vater holt ab
        </div>
        <div className="handover-status"><IcCheckCircle size={11}/> Gemeinsam bestätigt</div>
      </div>

      <div className="panel">
        <div className="panel-title">
          Offene Bestätigungen
          <span className="pill">2</span>
        </div>
        <div className="confirm-list">
          <div className="confirm-item">
            <div className="confirm-dot"><IcAlertCircle size={14} stroke={2} /></div>
            <div className="confirm-text">
              Änderung am 14.05. vorgeschlagen
              <span className="who">von Vater · vor 2 Tagen</span>
            </div>
          </div>
          <div className="confirm-item you">
            <div className="confirm-dot" style={{color:'var(--ink-500)'}}><IcClock size={14} stroke={2} /></div>
            <div className="confirm-text">
              Termin am 20.05. wartet auf Bestätigung
              <span className="who">von Ihnen · seit gestern</span>
            </div>
          </div>
        </div>
        <button className="panel-link" onClick={onOpenConfirmations}>Alle anzeigen →</button>
      </div>

      <div className="panel">
        <div className="panel-title">
          Kinder
          <button className="confirm-dot" style={{width:22,height:22,background:'var(--cream-2)'}}>
            <IcPlus size={12} stroke={2} />
          </button>
        </div>
        <div className="kid-list">
          {KIDS.map(k => (
            <button key={k.id} className={`kid ${child.id === k.id ? 'active' : ''}`} onClick={() => onSelectChild(k.id)}>
              <span className={`kid-avatar ${k.tone}`}>{k.name[0]}</span>
              <span>
                <div className="kid-name">{k.name}</div>
                <div className="kid-age">{k.age} Jahre · {k.school}</div>
              </span>
            </button>
          ))}
        </div>
      </div>

      <div className="panel pay-mini">
        <div className="panel-title">Nächste Zahlung</div>
        <div className="pay-mini-row">
          <div>
            <div className="pay-mini-amt">429 €</div>
            <div className="pay-mini-sub">Fällig 01.06.2026 · in 28 Tagen</div>
          </div>
          <span className="pay-status geplant">Geplant</span>
        </div>
      </div>

      <button className="settings-row">
        <IcSettings size={15} />
        Einstellungen
      </button>
    </aside>
  );
}

const KIDS = [
  { id: 'liam', name: 'Liam', age: 8, school: 'Grundschule', tone: 'a' },
  { id: 'bianca', name: 'Bianca', age: 11, school: 'Gymnasium', tone: 'b' },
  { id: 'ariana', name: 'Ariana', age: 5, school: 'Kita', tone: 'c' },
];

// ---------- RIGHT DETAIL PANEL ----------
function DetailPanel({ day, child, onClose, onProposeChange }) {
  if (!day) return null;
  return (
    <aside className="detail">
      <div className="detail-head">
        <div>
          <div className="detail-eyebrow">Tagesdetail</div>
          <div className="detail-date">{day.fullLabel}</div>
        </div>
        <button className="close-btn" onClick={onClose}><IcX size={14} /></button>
      </div>

      <div className="detail-section">
        <div className="detail-label">Betreuung</div>
        <div className="care-card">
          <div className="care-avatar" style={{background: day.parent === 'Vater' ? 'var(--forest-800)' : 'var(--forest-600)'}}>
            {day.parent[0]}
          </div>
          <div className="care-text">
            <div className="lead">{child.name} ist bei</div>
            <div className="lead-big">{day.parent}</div>
            <div className="lead-sub">Ganztägig · Übernachtung bei {day.parent}</div>
          </div>
          <span className="row-tag" style={{marginLeft:'auto', alignSelf:'flex-start'}}>Bestätigt</span>
        </div>
      </div>

      <div className="detail-section">
        <div className="detail-label">Übergabe</div>
        <div className="row-item">
          <div className="row-icon"><IcSwap size={14} /></div>
          <div className="row-body">
            <div className="row-title">Mutter → Vater · 17:00 Uhr</div>
            <div className="row-meta">
              <IcMapPin size={11} style={{verticalAlign:-1}} /> Parkplatz am Bürgerpark<br/>
              Vater holt Liam ab · Mutter bringt
            </div>
          </div>
          <span className="row-tag">Bestätigt</span>
        </div>
      </div>

      <div className="detail-section">
        <div className="detail-label">Aktivitäten</div>
        <div className="row-item">
          <div className="row-icon terra"><IcActivity size={14} /></div>
          <div className="row-body">
            <div className="row-title" style={{display:'flex',gap:8,alignItems:'center'}}>
              Fußballtraining
              <span className="row-tag">Vater bringt</span>
            </div>
            <div className="row-meta">17:00 – 18:30 · Sporthalle Offenbach</div>
          </div>
        </div>
        <button className="add-btn" style={{marginTop:8}}>
          <IcPlus size={12} /> Aktivität hinzufügen
        </button>
      </div>

      <div className="detail-section">
        <div className="detail-label">Notizen</div>
        <div className="notes">
          Liam hat am Wochenende sein Mathebuch noch in der Schule liegen — bitte am Montag mitbringen.
        </div>
      </div>

      <div className="detail-section">
        <div className="detail-label collapse-label">Zahlung an diesem Tag <span className="lbl-sub">(sekundär)</span></div>
        <div className="pay-row compact">
          <div className="row-icon"><IcEuro size={14} /></div>
          <div className="row-body">
            <div className="row-title">Kindesunterhalt</div>
            <div className="row-meta">Fällig 01.06.2026</div>
          </div>
          <div className="pay-amount-mini">
            <div className="pa-num">429 €</div>
            <span className="pay-status geplant">Geplant</span>
          </div>
        </div>
      </div>

      <div className="detail-section">
        <div className="detail-label">Status</div>
        <div className="status-card">
          <div className="si"><IcCheckCircle size={18} stroke={2} /></div>
          <div>
            <div className="st-title">Gemeinsam bestätigt</div>
            <div className="st-sub">Von beiden Eltern bestätigt am 02.05.2026</div>
          </div>
        </div>
        <div className="detail-actions">
          <button className="btn-secondary" onClick={onProposeChange}>
            <IcSwap size={13} /> Änderung vorschlagen
          </button>
          <button className="btn-secondary">
            <IcHistory size={13} /> Verlauf
          </button>
          <button className="btn-secondary">
            <IcDownload size={13} /> Export
          </button>
        </div>
      </div>
    </aside>
  );
}

Object.assign(window, { TopNav, Sidebar, DetailPanel, KIDS });