// 하루결 — 환자: 병원 일정 / 캘린더

function ScheduleScreen({ navigate }) {
  const s = useStore();
  const today = todayISO();
  const [openAdd, setOpenAdd] = React.useState(false);
  const [cursor, setCursor] = React.useState('2026-05'); // YYYY-MM

  const profile = s.profile;
  const upcoming = [...s.schedules]
    .filter(x => x.date >= today)
    .sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time));

  // 캘린더 빌드
  const [yearStr, monthStr] = cursor.split('-');
  const year = +yearStr;
  const month = +monthStr - 1;
  const firstWeekday = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < firstWeekday; i++) cells.push({ blank: true, key: 'p' + i });
  for (let d = 1; d <= daysInMonth; d++) cells.push({ d });
  while (cells.length % 7 !== 0) cells.push({ blank: true, key: 'n' + cells.length });

  const isoOf = (d) => `${year}-${String(month + 1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
  const schedulesByDate = {};
  s.schedules.forEach(x => { (schedulesByDate[x.date] = schedulesByDate[x.date] || []).push(x); });

  // 회복일 추정: 투여일 + 1-7일
  const cycleStarts = s.schedules.filter(x => x.tag === '투여일').map(x => x.date);
  const recovery = new Set();
  cycleStarts.forEach(start => {
    const sd = new Date(start + 'T00:00:00');
    for (let i = 1; i <= 7; i++) {
      const d = new Date(sd); d.setDate(sd.getDate() + i);
      recovery.add(d.toISOString().slice(0, 10));
    }
  });

  const goMonth = (delta) => {
    const m2 = month + delta;
    const y2 = m2 < 0 ? year - 1 : m2 > 11 ? year + 1 : year;
    const mm = ((m2 % 12) + 12) % 12;
    setCursor(`${y2}-${String(mm + 1).padStart(2,'0')}`);
  };

  return (
    <>
      <ScreenHeader
        title="병원 일정"
        sub={`${profile.cycle}차 · 회복 ${daysBetween(profile.cycleStartDate, today) + 1}일차`}
        action={<FAB onClick={() => setOpenAdd(true)} />}
      />

      {/* 주기 진행 바 */}
      <div style={{ padding: '6px 22px 0' }}>
        <Panel style={{ padding: 16, background: 'linear-gradient(135deg, var(--hg-surface-2), var(--hg-clay-tint) 220%)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <Eyebrow>나의 항암 주기</Eyebrow>
            <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>총 {profile.cycleTotal}회 · 3주 간격</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 10 }}>
            {Array.from({ length: profile.cycleTotal }, (_, i) => {
              const n = i + 1;
              const done = n < profile.cycle;
              const now = n === profile.cycle;
              return (
                <React.Fragment key={n}>
                  <div style={{
                    width: 26, height: 26, borderRadius: '50%',
                    background: done ? 'var(--hg-clay)' : now ? 'var(--hg-surface-2)' : 'var(--hg-bg-deeper)',
                    border: now ? '2px solid var(--hg-clay)' : done ? '2px solid var(--hg-clay)' : '1px solid var(--hg-line)',
                    display: 'grid', placeItems: 'center',
                    fontSize: 11, fontWeight: 700,
                    color: done ? '#fff' : now ? 'var(--hg-clay-dark)' : 'var(--hg-muted)',
                    flexShrink: 0,
                  }}>{done ? '✓' : n}</div>
                  {n < profile.cycleTotal && <div style={{ flex: 1, height: 2, background: done ? 'var(--hg-clay)' : 'var(--hg-line)' }} />}
                </React.Fragment>
              );
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>
            <span>1차</span>
            <span style={{ color: 'var(--hg-clay-dark)' }}>{profile.cycle}차 진행</span>
            <span>{profile.cycleTotal}차</span>
          </div>
        </Panel>
      </div>

      {/* 캘린더 */}
      <div style={{ padding: '12px 22px 0' }}>
        <Panel style={{ padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <button onClick={() => goMonth(-1)} style={{ color: 'var(--hg-muted)', fontSize: 22, padding: 4 }}>‹</button>
            <div className="hg-serif" style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }}>{year}년 {month + 1}월</div>
            <button onClick={() => goMonth(1)} style={{ color: 'var(--hg-muted)', fontSize: 22, padding: 4 }}>›</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', textAlign: 'center', fontSize: 10, fontWeight: 700, color: 'var(--hg-muted)', letterSpacing: '0.06em', marginBottom: 8 }}>
            {['일','월','화','수','목','금','토'].map((d, i) => (
              <span key={d} style={{ color: i === 0 ? 'var(--hg-rose)' : 'var(--hg-muted)' }}>{d}</span>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
            {cells.map((c) => {
              if (c.blank) return <div key={c.key} />;
              const iso = isoOf(c.d);
              const items = schedulesByDate[iso] || [];
              const isToday = iso === today;
              const isVisit = items.some(x => x.tag === '투여일' || x.title.includes('외래'));
              const isRec = recovery.has(iso);
              const hasEvent = items.length > 0;
              return (
                <div key={c.d} style={{
                  height: 44, borderRadius: 12,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  position: 'relative',
                  background: isToday ? 'var(--hg-clay)' :
                              isVisit ? 'var(--hg-clay-tint)' :
                              isRec ? 'var(--hg-mist-tint)' : 'transparent',
                  color: isToday ? '#fff' : 'var(--hg-ink-2)',
                  fontWeight: isToday || isVisit ? 700 : 500,
                  fontSize: 13,
                  border: isVisit && !isToday ? '1px solid rgba(181,117,90,0.3)' : 'none',
                }}>
                  <span>{c.d}</span>
                  {hasEvent && !isVisit && <div style={{ position: 'absolute', bottom: 4, width: 4, height: 4, borderRadius: '50%', background: 'var(--hg-honey)' }} />}
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--hg-line-soft)' }}>
            {[
              { l: '오늘',     c: 'var(--hg-clay)' },
              { l: '투여·외래', c: 'var(--hg-clay-tint)', border: true },
              { l: '회복',     c: 'var(--hg-mist-tint)' },
              { l: '기록',     c: 'var(--hg-honey)', dot: true },
            ].map((leg) => (
              <span key={leg.l} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 10, color: 'var(--hg-muted)', fontWeight: 600 }}>
                <span style={{
                  width: leg.dot ? 6 : 12, height: leg.dot ? 6 : 12,
                  borderRadius: leg.dot ? '50%' : 4,
                  background: leg.c,
                  border: leg.border ? '1px solid rgba(181,117,90,0.3)' : 'none',
                }} />
                {leg.l}
              </span>
            ))}
          </div>
        </Panel>
      </div>

      {/* 다가오는 일정 */}
      <div style={{ padding: '16px 22px 24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>다가오는 일정</div>
          <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>{upcoming.length}개</span>
        </div>
        {upcoming.length === 0 && (
          <div style={{ padding: 20, textAlign: 'center', color: 'var(--hg-muted)', fontSize: 13 }}>예약된 일정이 없어요</div>
        )}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {upcoming.map((u, i) => {
            const [, m, d] = u.date.split('-').map(Number);
            const toneBg = {
              clay: 'var(--hg-clay)', sage: 'var(--hg-sage)', honey: 'var(--hg-honey)', mist: 'var(--hg-mist)',
            }[u.tone] || 'var(--hg-clay)';
            return (
              <div key={u.id} style={{
                display: 'flex', alignItems: 'stretch', gap: 12,
                background: 'var(--hg-surface)',
                border: '1px solid var(--hg-line-soft)',
                borderRadius: 18, padding: 14,
                boxShadow: 'var(--hg-shadow-sm)',
              }}>
                <div style={{
                  minWidth: 56, textAlign: 'center',
                  background: i === 0 ? 'var(--hg-clay-tint)' : 'var(--hg-bg-deeper)',
                  borderRadius: 12, padding: '8px 6px',
                  display: 'flex', flexDirection: 'column', justifyContent: 'center',
                }}>
                  <div style={{ fontSize: 10, color: 'var(--hg-muted)', fontWeight: 700 }}>{m}월</div>
                  <div className="hg-serif" style={{ fontSize: 22, fontWeight: 600, color: 'var(--hg-clay-dark)', letterSpacing: '-0.02em', lineHeight: 1 }}>{d}</div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4, flexWrap: 'wrap' }}>
                    <Chip style={{ background: toneBg, color: '#fff' }}>{u.tag || '진료'}</Chip>
                    <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>{u.time}</span>
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--hg-ink)', marginBottom: 2 }}>{u.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 500 }}>{u.dept} {u.memo ? `· ${u.memo}` : ''}</div>
                </div>
                <button onClick={() => { if (confirm('이 일정을 삭제할까요?')) { s.removeSchedule(u.id); showToast('삭제됨'); } }} style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: 'var(--hg-bg-deeper)', color: 'var(--hg-muted)',
                  fontSize: 12, alignSelf: 'center',
                }}>✕</button>
              </div>
            );
          })}
        </div>
      </div>

      {openAdd && <AddScheduleSheet onClose={() => setOpenAdd(false)} onAdd={(x) => { s.addSchedule(x); showToast('일정 추가됨'); setOpenAdd(false); }} />}
    </>
  );
}

function AddScheduleSheet({ onClose, onAdd }) {
  const [form, setForm] = React.useState({
    title: '', date: todayISO(), time: '10:00', dept: '', memo: '', tag: '진료', tone: 'clay',
  });
  const tags = [
    { v: '진료',   c: 'clay' },
    { v: '투여일', c: 'clay' },
    { v: '검사',   c: 'mist' },
    { v: '상담',   c: 'sage' },
    { v: '준비물', c: 'honey' },
  ];

  return (
    <Sheet title="일정 추가" onClose={onClose}>
      <label className="hg-label">제목</label>
      <input className="hg-input" placeholder="예: 항암 4차 외래" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })}/>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
        <div>
          <label className="hg-label">날짜</label>
          <input type="date" className="hg-input" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })}/>
        </div>
        <div>
          <label className="hg-label">시간</label>
          <input type="time" className="hg-input" value={form.time} onChange={(e) => setForm({ ...form, time: e.target.value })}/>
        </div>
      </div>

      <label className="hg-label" style={{ marginTop: 14 }}>진료과 / 장소</label>
      <input className="hg-input" placeholder="예: 종양내과" value={form.dept} onChange={(e) => setForm({ ...form, dept: e.target.value })}/>

      <label className="hg-label" style={{ marginTop: 14 }}>유형</label>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {tags.map(t => (
          <button key={t.v} onClick={() => setForm({ ...form, tag: t.v, tone: t.c })} style={{
            padding: '8px 14px', borderRadius: 999,
            background: form.tag === t.v ? 'var(--hg-clay)' : 'var(--hg-bg-deeper)',
            color: form.tag === t.v ? '#fff' : 'var(--hg-ink-2)',
            fontSize: 12, fontWeight: 700,
            border: '1px solid ' + (form.tag === t.v ? 'transparent' : 'var(--hg-line-soft)'),
          }}>{t.v}</button>
        ))}
      </div>

      <label className="hg-label" style={{ marginTop: 14 }}>메모</label>
      <textarea className="hg-textarea" placeholder="기억해둘 점" value={form.memo} onChange={(e) => setForm({ ...form, memo: e.target.value })}/>

      <div style={{ marginTop: 18 }}>
        <PrimaryButton disabled={!form.title} onClick={() => onAdd(form)}>저장</PrimaryButton>
      </div>
    </Sheet>
  );
}

Object.assign(window, { ScheduleScreen });