// pages/pro-calendar.jsx — 行事曆: same calendar style as booking-flow (Card + month nav + real grid),
// in sage accent. Day grid shows 已開放/已被預約; below it, per-day available-slot toggles.
const { useState: uSP } = React;
const PC_WD = ['日', '一', '二', '三', '四', '五', '六'];
const pc2 = (n) => String(n).padStart(2, '0');

function ProCalendar({ onNav = () => {} }) {
  const [ym, setYm] = uSP({ y: 2025, m: 5 });   // June 2025
  const [day, setDay] = uSP(4);
  const [slots, setSlots] = uSP({ 9: true, 11: false, 13: true, 15: false, 18: true, 20: false });
  const avail = { 4: 1, 5: 1, 6: 1, 11: 1, 12: 1, 18: 1, 19: 1, 25: 1, 26: 1 };
  const booked = new Set([4, 12, 25]);
  const HOURS = [9, 11, 13, 15, 18, 20];

  const moveMonth = (delta) => setYm(({ y, m }) => {
    let nm = m + delta, ny = y;
    if (nm < 0) { nm = 11; ny -= 1; }
    if (nm > 11) { nm = 0; ny += 1; }
    return { y: ny, m: nm };
  });
  const { y, m } = ym;
  const inJune = y === 2025 && m === 5;
  const first = new Date(y, m, 1).getDay();
  const dim = new Date(y, m + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < first; i++) cells.push(null);
  for (let d = 1; d <= dim; d++) cells.push(d);
  const navBtn = { width: 30, height: 30, borderRadius: '50%', border: 'none', background: 'var(--bgSoft)', color: 'var(--ink2)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 };
  const toggleSlot = (h) => setSlots(s => ({ ...s, [h]: !s[h] }));

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } },
    A('div', { style: { padding: '4px 20px 8px', flexShrink: 0 } },
      A('h1', { style: { fontSize: 22, fontWeight: 800, letterSpacing: -0.5, margin: '4px 0' } }, '行事曆')),
    A(Scroll, { style: { padding: '6px 20px 16px' } },
      // calendar (booking-flow style)
      A(Card, { pad: 16 },
        A('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 } },
          A('button', { className: 'ccaTap', onClick: () => moveMonth(-1), style: navBtn }, A(Icon, { name: 'chevL', size: 18 })),
          A('div', { className: 'num', style: { fontSize: 14.5, fontWeight: 800 } }, `${y} 年 ${m + 1} 月`),
          A('button', { className: 'ccaTap', onClick: () => moveMonth(1), style: navBtn }, A(Icon, { name: 'chevR', size: 18 }))),
        A('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 4, marginBottom: 6 } },
          PC_WD.map(d => A('div', { key: d, style: { textAlign: 'center', fontSize: 10.5, color: 'var(--ink3)', fontWeight: 700 } }, d))),
        A('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 4 } },
          cells.map((d, i) => {
            if (!d) return A('div', { key: 'b' + i });
            const open = inJune && avail[d];
            const isSel = inJune && day === d;
            const isBooked = inJune && booked.has(d);
            return A('button', { key: i, className: 'ccaTap', onClick: () => setDay(d), style: {
              aspectRatio: '1', border: 'none', borderRadius: 10, fontFamily: 'inherit', padding: 0, position: 'relative',
              background: isSel ? 'var(--accent)' : open ? 'var(--accentSoft)' : 'transparent',
              color: isSel ? '#fff' : open ? 'var(--accentDeep)' : 'var(--ink3)', cursor: 'pointer' } },
              A('span', { className: 'num', style: { fontSize: 13, fontWeight: 700 } }, d),
              isBooked && A('div', { style: { position: 'absolute', bottom: 5, left: '50%', transform: 'translateX(-50%)', width: 5, height: 5, borderRadius: 3, background: isSel ? '#fff' : 'var(--brand)' } }));
          })),
        A('div', { style: { display: 'flex', gap: 16, justifyContent: 'center', marginTop: 14, fontSize: 11, color: 'var(--ink3)' } },
          A('span', { style: { display: 'flex', alignItems: 'center', gap: 5 } }, A('span', { style: { width: 11, height: 11, borderRadius: 3, background: 'var(--accentSoft)' } }), '已開放'),
          A('span', { style: { display: 'flex', alignItems: 'center', gap: 5 } }, A('span', { style: { width: 5, height: 5, borderRadius: 3, background: 'var(--brand)' } }), '已被預約')),
        // per-day open slots (booking-flow time-range style)
        A('div', { style: { marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--line2)' } },
          A('div', { style: { display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 } },
            A('div', { style: { fontSize: 13.5, fontWeight: 800 } }, `6/${day}（三）開放時段`),
            A('span', { style: { fontSize: 11, fontWeight: 600, color: 'var(--ink3)' } }, '飼主只能約到你開放的')),
          A('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 } },
            HOURS.map(h => {
              const on = slots[h];
              return A('button', { key: h, className: 'ccaTap', onClick: () => toggleSlot(h), style: {
                display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '11px 0', borderRadius: 12, border: 'none', fontFamily: 'inherit',
                background: on ? 'var(--accentSoft)' : 'var(--surface)',
                boxShadow: on ? 'inset 0 0 0 1.5px var(--accent)' : 'inset 0 0 0 1px var(--line)',
                color: on ? 'var(--accentDeep)' : 'var(--ink3)' } },
                A('span', { className: 'num', style: { fontSize: 13, fontWeight: 700 } }, `${pc2(h)}:00–${pc2(h + 1)}:00`));
            })))) ),
    A(BottomNavPro, { active: 'cal', onNav }));
}

Object.assign(window, { ProCalendar });