// Ferien & Feiertage page + Bestätigungen drawer (refocused on care, not payments)

function FerienStatus({ s }) {
  const map = {
    bestaetigt: { lbl: 'Gemeinsam bestätigt', cls: 'bestaetigt', ic: <IcCheckCircle size={11} stroke={2} /> },
    offen: { lbl: 'Wartet auf Bestätigung', cls: 'offen', ic: <IcClock size={11} stroke={2} /> },
    vorschlag: { lbl: 'Änderung vorgeschlagen', cls: 'vorschlag', ic: <IcAlertCircle size={11} stroke={2} /> },
    geplant: { lbl: 'Noch nicht geplant', cls: 'geplant', ic: <IcCalendar size={11} stroke={2} /> },
  };
  const m = map[s] || map.geplant;
  return <span className={`fc-status ${m.cls}`}>{m.ic} {m.lbl}</span>;
}

function FerienPage() {
  const [tab, setTab] = React.useState('Ferien');

  const ferien = [
    {
      kind: 'pfingst',
      nm: 'Pfingstferien Hessen',
      when: '26. Mai – 5. Juni 2026',
      naechte: 11,
      parent: 'Vater',
      ueb_start: 'Di. 26.05. · 17:00 Uhr · Schule',
      ueb_end: 'Fr. 5.06. · 17:00 Uhr · Bürgerpark',
      status: 'bestaetigt',
    },
    {
      kind: 'sommer',
      nm: 'Sommerferien · 1. Hälfte',
      when: '13. – 26. Juli 2026',
      naechte: 13,
      parent: 'Mutter',
      ueb_start: 'Mo. 13.07. · 10:00 Uhr · zu Hause',
      ueb_end: 'So. 26.07. · 17:00 Uhr · Bürgerpark',
      status: 'offen',
    },
    {
      kind: 'sommer',
      nm: 'Sommerferien · 2. Hälfte',
      when: '27. Juli – 22. August 2026',
      naechte: 26,
      parent: 'Vater',
      ueb_start: 'Mo. 27.07. · 09:00 · Bürgerpark',
      ueb_end: 'Sa. 22.08. · 18:00 · Bürgerpark',
      status: 'vorschlag',
    },
    {
      kind: 'herbst',
      nm: 'Herbstferien Hessen',
      when: '12. – 23. Oktober 2026',
      naechte: 11,
      parent: 'Mutter',
      ueb_start: 'Noch nicht geplant',
      ueb_end: '',
      status: 'geplant',
    },
    {
      kind: 'weihnacht',
      nm: 'Weihnachtsferien',
      when: '23.12.2026 – 6.1.2027',
      naechte: 14,
      parent: 'geteilt',
      ueb_start: 'Mi. 23.12. · 18:00 · zu Hause',
      ueb_end: 'Mi. 6.01. · 17:00 · Bürgerpark',
      status: 'offen',
      split: { mutter: '23.12. – 29.12.', vater: '29.12. – 06.01.' },
    },
  ];

  const feiertage = [
    { nm: 'Christi Himmelfahrt', dt: 'Do. 14. Mai 2026', who: 'Vater', status: 'bestaetigt' },
    { nm: 'Pfingstmontag', dt: 'Mo. 25. Mai 2026', who: 'Mutter', status: 'bestaetigt' },
    { nm: 'Liams 9. Geburtstag', dt: 'Mi. 12. August 2026', who: 'beide', status: 'offen', personal: true },
    { nm: 'Tag der Deutschen Einheit', dt: 'Sa. 3. Oktober 2026', who: 'Vater', status: 'bestaetigt' },
    { nm: 'Heiligabend', dt: 'Do. 24. Dezember 2026', who: 'Mutter', status: 'offen' },
    { nm: 'Silvester', dt: 'Do. 31. Dezember 2026', who: 'Vater', status: 'vorschlag' },
  ];

  return (
    <main className="main">
      <div className="page-head">
        <div>
          <div className="page-title">Ferien & Feiertage</div>
          <div style={{fontSize: 13, color: 'var(--ink-500)', marginTop: 6}}>
            Wer hat die Kinder in den Schulferien und an Feiertagen — gemeinsam abgestimmt.
          </div>
        </div>
        <div style={{display:'flex', gap: 8}}>
          <button className="ghost-btn"><IcDownload size={13} /> Übersicht als PDF</button>
          <button className="cta-primary"><IcPlus size={14} stroke={2}/> Ferien planen</button>
        </div>
      </div>

      <div className="subtabs">
        {['Ferien', 'Feiertage', 'Verlauf'].map(s => (
          <button key={s} className={`subtab ${s === tab ? 'on' : ''}`} onClick={() => setTab(s)}>{s}</button>
        ))}
      </div>

      {/* HERO — next ferien spotlight */}
      <div className="ferien-hero">
        <div className="fh-left">
          <div className="fh-eyebrow">Nächste Ferien · in 12 Tagen</div>
          <div className="fh-title">Pfingstferien Hessen</div>
          <div className="fh-when">Di. 26. Mai – Fr. 5. Juni 2026 · <b>11 Nächte</b></div>

          <div className="fh-timeline">
            <div className="fht-start">
              <div className="fht-when">
                <div className="fht-wlbl">Übergabe Start</div>
                <div className="fht-wval">Di. 26.05. · 17:00</div>
                <div className="fht-wmeta"><IcMapPin size={11}/> Schule · Mutter bringt</div>
              </div>
            </div>
            <div className="fht-bar">
              <div className="fhtb-fill"/>
              <div className="fhtb-flag start">
                <span className="fhtb-av v">V</span>
                <span className="fhtb-lbl">Bei Vater</span>
              </div>
            </div>
            <div className="fht-end">
              <div className="fht-when">
                <div className="fht-wlbl">Übergabe Ende</div>
                <div className="fht-wval">Fr. 5.06. · 17:00</div>
                <div className="fht-wmeta"><IcMapPin size={11}/> Bürgerpark · Mutter holt</div>
              </div>
            </div>
          </div>
        </div>

        <div className="fh-right">
          <div className="fh-status-card">
            <div className="fh-sc-row">
              <span className="fc-status bestaetigt"><IcCheckCircle size={11} stroke={2}/> Gemeinsam bestätigt</span>
              <span className="fh-sc-date">am 02.05.2026</span>
            </div>
            <div className="fh-sc-actions">
              <button className="btn-secondary"><IcSwap size={12}/> Änderung vorschlagen</button>
              <button className="btn-secondary"><IcHistory size={12}/> Verlauf</button>
              <button className="btn-secondary"><IcDownload size={12}/> PDF</button>
            </div>
          </div>

          <div className="fh-context">
            <div className="fh-ctx-row">
              <span className="fh-ctx-lbl">Ferien-Saldo 2026</span>
              <span className="fh-ctx-val"><b>13</b> M · <b>39</b> V · 14 offen</span>
            </div>
            <div className="fh-ctx-row">
              <span className="fh-ctx-lbl">Mit-Pfingsten 2025</span>
              <span className="fh-ctx-val">War bei Mutter</span>
            </div>
            <div className="fh-ctx-row">
              <span className="fh-ctx-lbl">Pfingstmontag</span>
              <span className="fh-ctx-val">Mo. 25.05. · bei Mutter</span>
            </div>
          </div>
        </div>
      </div>

      <div className="ferien-balance">
        <div className="fb-head">
          <div className="fb-title">Ferienbalance 2026</div>
          <div className="fb-meta">Bei <b>Mutter</b> 13 Nächte · bei <b>Vater</b> 39 Nächte · noch offen 14 Nächte</div>
        </div>
        <div className="fb-track">
          <div className="fb-mutter" style={{width: '20%'}}><span>Mutter · 13</span></div>
          <div className="fb-vater" style={{width: '60%'}}><span>Vater · 39</span></div>
          <div className="fb-open" style={{width: '20%'}}><span>offen · 14</span></div>
        </div>
      </div>

      {tab === 'Ferien' && (
        <div className="ferien-grid">
          {ferien.map((f, i) => (
            <div key={i} className={`ferien-card ${f.kind}`}>
              <div className="fc-head">
                <div className="fc-icon">
                  {f.kind === 'sommer' ? <IcSun size={16}/> :
                   f.kind === 'pfingst' ? <IcLeaf size={16}/> :
                   f.kind === 'herbst' ? <IcLeaf size={16}/> :
                   <IcSparkle size={16}/>}
                </div>
                <div className="fc-title">
                  <div className="fc-nm">{f.nm}</div>
                  <div className="fc-when">{f.when} · {f.naechte} Nächte</div>
                </div>
                <FerienStatus s={f.status}/>
              </div>

              {f.parent === 'geteilt' && f.split ? (
                <div className="fc-split">
                  <div className="fc-split-row m">
                    <span className="fc-who">Mutter</span><span>{f.split.mutter}</span>
                  </div>
                  <div className="fc-split-row v">
                    <span className="fc-who">Vater</span><span>{f.split.vater}</span>
                  </div>
                </div>
              ) : (
                <div className="fc-who-row">
                  <span className="fc-avatar" style={{background: f.parent === 'Vater' ? 'var(--forest-800)' : 'var(--forest-600)'}}>{f.parent[0]}</span>
                  <div>
                    <div className="fc-who-big">Bei {f.parent}</div>
                    <div className="fc-who-sub">Ganztägig · Übernachtungen</div>
                  </div>
                </div>
              )}

              <div className="fc-ueb">
                <div className="fc-ueb-row">
                  <span className="fc-ueb-lbl">Übergabe Start</span>
                  <span className="fc-ueb-val">{f.ueb_start}</span>
                </div>
                {f.ueb_end && (
                  <div className="fc-ueb-row">
                    <span className="fc-ueb-lbl">Übergabe Ende</span>
                    <span className="fc-ueb-val">{f.ueb_end}</span>
                  </div>
                )}
              </div>

              <div className="fc-actions">
                {f.status === 'bestaetigt' ? (
                  <>
                    <button className="btn-secondary"><IcHistory size={12}/> Verlauf</button>
                    <button className="btn-secondary"><IcSwap size={12}/> Änderung vorschlagen</button>
                  </>
                ) : f.status === 'vorschlag' ? (
                  <>
                    <button className="btn-secondary">Ablehnen</button>
                    <button className="btn-secondary">Gegenvorschlag</button>
                    <button className="cta-primary" style={{height: 32, padding: '0 12px', fontSize: 12.5}}>
                      <IcCheck size={12} stroke={2.2}/> Bestätigen
                    </button>
                  </>
                ) : (
                  <>
                    <button className="btn-secondary"><IcSwap size={12}/> Vorschlag senden</button>
                    <button className="btn-secondary">Erinnern</button>
                  </>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === 'Feiertage' && (
        <div className="table" style={{marginTop: 4}}>
          <table className="tbl">
            <thead>
              <tr><th>Feiertag / Anlass</th><th>Datum</th><th>Betreuung</th><th>Status</th><th></th></tr>
            </thead>
            <tbody>
              {feiertage.map((f, i) => (
                <tr key={i}>
                  <td style={{fontWeight: 600, color: 'var(--ink-900)'}}>
                    {f.personal && <IcSparkle size={12} style={{verticalAlign:-1, marginRight: 6, color: 'var(--terracotta)'}}/>}
                    {f.nm}
                  </td>
                  <td>{f.dt}</td>
                  <td>
                    {f.who === 'beide' ? (
                      <span style={{display:'inline-flex', alignItems:'center', gap: 6}}>
                        <span className="avatar" style={{width: 22, height: 22, background: 'var(--forest-600)', fontSize: 10}}>M</span>
                        <span className="avatar" style={{width: 22, height: 22, background: 'var(--forest-800)', fontSize: 10}}>V</span>
                        Beide Eltern
                      </span>
                    ) : (
                      <span style={{display:'inline-flex', alignItems:'center', gap: 6}}>
                        <span className="avatar" style={{width: 22, height: 22, background: f.who === 'Vater' ? 'var(--forest-800)' : 'var(--forest-600)', fontSize: 10}}>{f.who[0]}</span>
                        Bei {f.who}
                      </span>
                    )}
                  </td>
                  <td><FerienStatus s={f.status} /></td>
                  <td style={{textAlign: 'right'}}>
                    <button className="btn-secondary" style={{height: 28, padding: '0 10px', fontSize: 12}}>
                      {f.status === 'bestaetigt' ? 'Anzeigen' : 'Bestätigen'}
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'Verlauf' && (
        <div className="agree-main" style={{marginTop: 4}}>
          <h3>Änderungsverlauf · Ferien & Feiertage</h3>
          <div style={{display:'flex', flexDirection:'column', gap: 10}}>
            {[
              { dt: '02.05.2026', who: 'Vater', what: 'Pfingstferien Hessen', act: 'bestätigt', note: '11 Nächte bei Vater · 26.05.–05.06.' },
              { dt: '28.04.2026', who: 'Mutter', what: 'Sommerferien · 1. Hälfte', act: 'vorgeschlagen', note: 'Tausch der ersten Woche gewünscht.' },
              { dt: '20.04.2026', who: 'Vater', what: 'Sommerferien · 2. Hälfte', act: 'vorgeschlagen', note: 'Reise nach Italien geplant.' },
              { dt: '15.03.2026', who: 'Mutter', what: 'Pfingstferien Hessen', act: 'vorgeschlagen', note: 'Erstvorschlag · 11 Nächte bei Vater.' },
            ].map((h, i) => (
              <div key={i} className="verlauf-row">
                <div className="verlauf-dot"><IcHistory size={12}/></div>
                <div className="verlauf-body">
                  <div className="verlauf-title">
                    <b>{h.who}</b> hat <b>{h.what}</b> <span style={{color: h.act === 'bestätigt' ? 'var(--forest-700)' : 'var(--ink-700)'}}>{h.act}</span>
                  </div>
                  <div className="verlauf-meta">{h.dt} · {h.note}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </main>
  );
}

// ===================================================================
// Bestätigungen drawer (slides in from right)
// ===================================================================
function ConfirmationsDrawer({ open, onClose, onProposeChange }) {
  const items = [
    {
      kind: 'change',
      title: 'Übergabe-Ort am 16.05. ändern',
      whoLong: 'vorgeschlagen von Vater · vor 2 Tagen',
      from: 'Sie',
      old: 'Parkplatz Bürgerpark',
      neu: 'Sporthalle Offenbach',
      note: 'Liam hat Fußballtraining direkt im Anschluss.',
    },
    {
      kind: 'sent',
      title: 'Tausch Wochenende 20.05.',
      whoLong: 'von Ihnen gesendet · gestern · wartet auf Vater',
      from: 'Vater',
      old: 'Liam bei Vater · Sa+So',
      neu: 'Liam bei Mutter · Tausch mit 13.06.',
      note: 'Familienfeier meiner Mutter.',
    },
    {
      kind: 'holiday',
      title: 'Sommerferien · 2. Hälfte',
      whoLong: 'vorgeschlagen von Vater · vor 5 Tagen',
      from: 'Sie',
      old: '12 Nächte bei Vater · 24.07. – 04.08.',
      neu: '26 Nächte bei Vater · 27.07. – 22.08.',
      note: 'Wir möchten 3,5 Wochen am Stück nach Italien reisen.',
    },
  ];

  return (
    <div className={`drawer-bg ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-head">
          <div>
            <div className="modal-eyebrow">Offene Bestätigungen</div>
            <div className="modal-title">3 Punkte warten auf Abstimmung</div>
            <div className="modal-sub">Vorschläge werden erst nach Bestätigung wirksam — oder mit einem Gegenvorschlag beantworten.</div>
          </div>
          <button className="close-btn" onClick={onClose}><IcX size={14}/></button>
        </div>

        <div className="drawer-tabs">
          <button className="dr-tab on">Alle <span>3</span></button>
          <button className="dr-tab">Wartet auf Sie <span>2</span></button>
          <button className="dr-tab">Von Ihnen gesendet <span>1</span></button>
        </div>

        <div className="drawer-body">
          {items.map((it, i) => (
            <div key={i} className={`confirm-card ${it.kind === 'sent' ? 'sent' : ''}`}>
              <div className="cc-head">
                <div className={`cc-icon ${it.kind}`}>
                  {it.kind === 'holiday' ? <IcSun size={14}/> : it.kind === 'sent' ? <IcClock size={14}/> : <IcSwap size={14}/>}
                </div>
                <div style={{flex: 1, minWidth: 0}}>
                  <div className="cc-title">{it.title}</div>
                  <div className="cc-who">{it.whoLong}</div>
                </div>
                <span className={`fc-status ${it.kind === 'sent' ? 'offen' : 'vorschlag'}`}>
                  {it.kind === 'sent'
                    ? <><IcClock size={11} stroke={2}/> Wartet auf {it.from}</>
                    : <><IcAlertCircle size={11} stroke={2}/> Wartet auf {it.from}</>}
                </span>
              </div>

              <div className="cc-diff">
                <div className="cc-diff-col old">
                  <div className="cc-diff-lbl">Bisher</div>
                  <div className="cc-diff-val">{it.old}</div>
                </div>
                <div className="cc-diff-arrow"><IcChevronRight size={16}/></div>
                <div className="cc-diff-col neu">
                  <div className="cc-diff-lbl">Vorgeschlagen</div>
                  <div className="cc-diff-val">{it.neu}</div>
                </div>
              </div>

              {it.note && (
                <div className="cc-note">
                  <IcMessage size={12} style={{flexShrink: 0, marginTop: 2}}/>
                  „{it.note}"
                </div>
              )}

              <div className="cc-actions">
                {it.kind === 'sent' ? (
                  <>
                    <button className="btn-secondary">Erinnern</button>
                    <button className="btn-secondary">Bearbeiten</button>
                    <button className="btn-secondary" style={{color: 'var(--terracotta)'}}>Zurückziehen</button>
                  </>
                ) : (
                  <>
                    <button className="btn-secondary"><IcHistory size={12}/> Verlauf</button>
                    <button className="btn-secondary" onClick={onProposeChange}>Gegenvorschlag</button>
                    <button className="btn-secondary" style={{color: 'var(--terracotta)'}}>Ablehnen</button>
                    <button className="cta-primary" style={{height: 32, padding: '0 14px', fontSize: 12.5}}>
                      <IcCheck size={12} stroke={2.2}/> Bestätigen
                    </button>
                  </>
                )}
              </div>
            </div>
          ))}
        </div>

        <div className="drawer-foot">
          <span style={{fontSize: 12, color: 'var(--ink-500)', lineHeight: 1.4, maxWidth: 380}}>
            <IcShield size={11} style={{verticalAlign:-1, marginRight: 4}}/>
            Bestätigungen dokumentieren Absprachen nachvollziehbar — zur Orientierung, kein Ersatz für rechtliche Beratung.
          </span>
          <button className="ghost-btn"><IcDownload size={13}/> Verlauf exportieren</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FerienPage, ConfirmationsDrawer, FerienStatus });