// Calendar grid + month overview stats.

// Day descriptors for May 2026. Mon-start, Mo 27.4 -> So 31.5.
// Liam at Mutter Mon-Thu, Vater Fri-Sun, with handovers on Fri 17:00 + Mon 08:00 (varies)
const MAY_DAYS = (() => {
  const days = [];
  // Apr trailing 27, 28, 29, 30
  for (let d = 27; d <= 30; d++) {
    days.push({ d, month: 'apr', muted: true, parent: null });
  }
  for (let d = 1; d <= 31; d++) {
    days.push({ d, month: 'may', muted: false });
  }
  return days.map(x => ({ ...x }));
})();

// Pattern: who has the kid each calendar day in May 2026
// Days 1 (Fr), 2 (Sa), 3 (So) — Vater
// Days 4-7 (Mo-Do) — Mutter
// Day 8 — handover Mutter→Vater 17:00
// Days 9-10 — Vater
// Days 11-14 — Mutter
// Day 15 — handover (selected reference)
// Day 16 — Vater (the one selected in screenshot)
// etc.
const PARENT_BY_DAY = {
  1: 'Vater', 2: 'Vater', 3: 'Vater',
  4: 'Mutter', 5: 'Mutter', 6: 'Mutter', 7: 'Mutter',
  8: 'handover-out', 9: 'Vater', 10: 'Vater',
  11: 'Mutter', 12: 'Mutter', 13: 'Mutter', 14: 'Mutter', 15: 'handover-out',
  16: 'Vater', 17: 'Vater',
  18: 'Mutter', 19: 'Mutter', 20: 'Mutter', 21: 'Mutter',
  22: 'handover-out', 23: 'Vater', 24: 'Vater',
  25: 'Mutter', 26: 'Mutter', 27: 'Mutter', 28: 'Mutter',
  29: 'handover-out', 30: 'Vater', 31: 'Vater'
};

const HOLIDAY_RANGE = { start: 18, end: 22, label: 'Pfingstferien Hessen' };

const DAY_BADGES = {
  1: { pay: '€' },
  3: { activity: 'Frühlingsfest' },
  6: { school: true },
  8: { handover: '17:00 Uhr' },
  10: { lock: true },
  12: { school: true, lock: true },
  14: { warn: true },
  15: { handover: '17:00 Uhr' },
  18: { holiday: true },
  19: { holiday: true },
  20: { holiday: true, school: true, lock: true },
  21: { holiday: true },
  22: { holiday: true, handover: '17:00 Uhr' },
  29: { handover: '17:00 Uhr' },
  31: { pay: '€' },
};

const DOW = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];

function CalendarCard({ selected, onSelect, viewMode, onViewModeChange }) {
  return (
    <div className="cal-card">
      {/* Self-explaining hero */}
      <div className="cal-hero">
        <div className="ch-left">
          <div className="ch-eyebrow">Wer hat Liam wann · Mai 2026</div>
          <div className="ch-line">
            <span className="ch-pill"><span className="ch-swatch m"/>Mutter <b>14 Tage</b></span>
            <span className="ch-pill"><span className="ch-swatch v"/>Vater <b>17 Tage</b></span>
            <span className="ch-pill"><span className="ch-swatch u"/>Übergaben <b>4×</b></span>
            <span className="ch-pill"><span className="ch-swatch f"/>Ferien <b>6 Tage</b></span>
            <span className="ch-pill warn"><IcAlertCircle size={11} stroke={2}/> <b>2</b> offen</span>
          </div>
        </div>
        <div className="ch-next">
          <div className="ch-next-lbl">Nächste Übergabe in 4 Tagen</div>
          <div className="ch-next-val">Fr. 8.05. · 17:00 · Bürgerpark</div>
        </div>
      </div>

      <div className="cal-head">
        <div className="cal-title">
          <span className="cal-month">Mai 2026</span>
        </div>
        <div className="cal-head-mid">
          <button className="chev"><IcChevronLeft size={14} /></button>
          <button className="ghost-btn">Heute</button>
          <button className="chev"><IcChevronRight size={14} /></button>
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <div className="seg">
            {['Monat','Woche','Liste'].map(m => (
              <button key={m} className={viewMode === m ? 'on' : ''} onClick={() => onViewModeChange(m)}>
                {m}
              </button>
            ))}
          </div>
          <button className="ghost-btn"><IcFilter size={13} /> Filter</button>
          <button className="ghost-btn"><IcDownload size={13} /> PDF</button>
        </div>
      </div>

      <div className="cal-grid">
        {DOW.map((dow, i) => (
          <div key={dow} className={`cal-dow ${i >= 5 ? 'weekend' : ''}`}>{dow}</div>
        ))}
        {MAY_DAYS.map((day, idx) => (
          <DayCell key={idx} day={day} selected={selected} onSelect={onSelect} />
        ))}
      </div>

      <div className="legend">
        <div className="legend-group">
          <span className="legend-lbl">Betreuung</span>
          <span className="chip lg-m"><span className="lg-sw m"/>Mutter</span>
          <span className="chip lg-v"><span className="lg-sw v"/>Vater</span>
          <span className="chip lg-u"><span className="lg-sw u"/>Übergabe-Tag</span>
          <span className="chip lg-f"><span className="lg-sw f"/>Ferien / Feiertag</span>
        </div>
        <div className="legend-group">
          <span className="legend-lbl">Symbole</span>
          <span className="chip"><IcSchool size={11} stroke={1.8} /> Schule</span>
          <span className="chip"><IcActivity size={11} stroke={1.8} /> Aktivität</span>
          <span className="chip"><IcAlertCircle size={11} stroke={2}/> Wartet auf Bestätigung</span>
          <span className="chip"><IcEuro size={11} stroke={1.8} /> Zahlung</span>
        </div>
      </div>
    </div>
  );
}

function DayCell({ day, selected, onSelect }) {
  if (day.muted) {
    return (
      <div className="day muted">
        <div className="day-head"><span className="d-num">{day.d}</span></div>
      </div>
    );
  }
  const d = day.d;
  const parentRaw = PARENT_BY_DAY[d];
  const isHandover = parentRaw === 'handover-out';
  const parent = isHandover ? (d === 15 || d === 22 || d === 29 || d === 8 ? 'Vater' : 'Mutter') : parentRaw;
  const badges = DAY_BADGES[d] || {};
  const isToday = d === 4;
  const isSelected = selected === d;
  const isHoliday = badges.holiday;
  const cls = [
    'day',
    isHandover ? 'handover' : (parent === 'Mutter' ? 'mutter' : 'vater'),
    isToday ? 'today' : '',
    isSelected ? 'selected' : '',
    isHoliday ? 'holiday-strip' : ''
  ].filter(Boolean).join(' ');

  return (
    <div className={cls} onClick={() => onSelect(d)}>
      <div className="day-head">
        <span className="d-num">{d}</span>
        <span className="d-icons">
          {badges.school && <IcSchool size={12} />}
          {badges.lock && <IcLock size={12} className="lock" />}
          {badges.warn && <IcAlert size={12} className="warn" stroke={2}/>}
          {badges.pay && <IcEuro size={12} stroke={2}/>}
          {d === 10 && !badges.warn && <IcAlertCircle size={12} className="alert" stroke={2}/>}
        </span>
      </div>
      <div className="d-tag">
        <span className={`swatch ${parent === 'Mutter' ? 'm' : 'v'}`} />
        {parent}
      </div>
      {isHoliday && d === 18 && (
        <div className="chip holiday-bar">
          <IcSun size={10}/> Pfingstferien
        </div>
      )}
      {isHoliday && d !== 18 && (
        <div className="chip holiday-bar"><IcSun size={10} /> Ferien</div>
      )}
      {isHandover && (
        <div className="chip handover">
          <IcSwap size={11} stroke={2}/> {badges.handover || '17:00'}
          <span style={{color:'var(--ink-500)',fontWeight:500}}>· Übergabe</span>
        </div>
      )}
      {badges.activity && (
        <div className="chip activity"><IcActivity size={11} stroke={2}/> {badges.activity}</div>
      )}
      {badges.pay && d === 1 && (
        <div className="chip pay"><IcEuro size={11} stroke={2}/> Zahlung</div>
      )}
    </div>
  );
}

// ---------- MONTH OVERVIEW ----------
function MonthOverview() {
  const stats = [
    { key: 'm', big: '14', lbl: 'Tage bei Mutter', sub: '45 % · Soll 50 %', tone: 'mutter', delta: '−1 T.' },
    { key: 'v', big: '17', lbl: 'Tage bei Vater', sub: '55 % · Soll 50 %', tone: 'vater', delta: '+1 T.' },
    { key: 'u', big: '4', lbl: 'Übergaben', sub: 'Alle gemeinsam bestätigt', tone: 'neutral', ico: <IcSwap size={14}/> },
    { key: 'f', big: '6', lbl: 'Ferien- & Feiertage', sub: 'Pfingstferien · 18.–22.05.', tone: 'holiday', ico: <IcSun size={14}/> },
    { key: 'a', big: '3', lbl: 'Aktivitäten', sub: 'Fußball · Klavier · Schwimmen', tone: 'neutral', ico: <IcActivity size={14}/> },
    { key: 'c', big: '2', lbl: 'Offene Änderungen', sub: '1 wartet auf Sie · 1 auf Vater', tone: 'warn', ico: <IcAlertCircle size={14} stroke={2}/> },
  ];

  return (
    <div className="overview">
      <div className="overview-head">
        <div>
          <div className="overview-title">Mai 2026 im Überblick</div>
          <div className="overview-sub">Wie hat sich die Betreuung im Monat verteilt — und was ist noch offen?</div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button className="ghost-btn"><IcDownload size={13}/> Monatsübersicht als PDF</button>
          <button className="overview-link">Vergleich Vormonat →</button>
        </div>
      </div>

      <div className="balance-bar">
        <div className="bb-track">
          <div className="bb-mutter" style={{width:'45%'}}>
            <span className="bb-av">M</span>
            <span className="bb-name">Mutter</span>
            <span className="bb-num">14 Tage · 45 %</span>
          </div>
          <div className="bb-vater" style={{width:'55%'}}>
            <span className="bb-num">17 Tage · 55 %</span>
            <span className="bb-name">Vater</span>
            <span className="bb-av v">V</span>
          </div>
          <div className="bb-marker" style={{left: '50%'}} title="Soll 50/50">
            <span>Soll 50/50</span>
          </div>
        </div>
        <div className="bb-meta">
          <span><IcAlertCircle size={11}/> Differenz zu Soll: <b>−1 Tag bei Mutter</b> · Ausgleich am 6./7. Juni geplant</span>
          <span style={{color: 'var(--forest-700)'}}><IcCheckCircle size={11}/> Wechselmodell 50/50 · gemeinsam bestätigt seit 01.01.2026</span>
        </div>
      </div>

      <div className="stat-row">
        {stats.map(s => (
          <div key={s.key} className={`stat tone-${s.tone}`}>
            <div className="stat-ico">{s.key === 'm' ? <span className="si-av m">M</span> : s.key === 'v' ? <span className="si-av v">V</span> : s.ico}</div>
            <div className="stat-num">{s.big}</div>
            <div className="stat-lbl">{s.lbl}</div>
            <div className="stat-sub">{s.sub}</div>
            {s.delta && <span className={`stat-delta ${s.key === 'v' ? 'up' : 'down'}`}>{s.delta}</span>}
          </div>
        ))}
      </div>

      <div className="month-mini-timeline">
        <div className="mmt-head">
          <span className="mmt-title">Monats-Timeline</span>
          <span className="mmt-sub">Wer hatte Liam an welchem Tag</span>
        </div>
        <div className="mmt-strip">
          {Array.from({length:31}, (_,i) => i+1).map(d => {
            const parent = ({1:'v',2:'v',3:'v',4:'m',5:'m',6:'m',7:'m',8:'u',9:'v',10:'v',11:'m',12:'m',13:'m',14:'m',15:'u',16:'v',17:'v',18:'m',19:'m',20:'m',21:'m',22:'u',23:'v',24:'v',25:'m',26:'m',27:'m',28:'m',29:'u',30:'v',31:'v'})[d];
            const holiday = d >= 18 && d <= 22;
            const today = d === 4;
            return <div key={d} className={`mmt-cell p-${parent} ${holiday ? 'hol' : ''} ${today ? 'today' : ''}`} title={`${d}. Mai`}>
              {(d === 1 || d % 5 === 0 || today) && <span className="mmt-num">{d}</span>}
            </div>;
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CalendarCard, MonthOverview });