// 하루결 — 복약 추적 (매일 시간별 체크인 + 연속 복용)

// 신약 카테고리 메타
const MED_KINDS = {
  hormone:  { l: '항호르몬',  c: 'var(--hg-clay)',  bg: 'var(--hg-clay-tint)', desc: '에스트로겐을 차단해 호르몬 양성 유방암의 재발을 막아요.' },
  targeted: { l: '표적치료',  c: 'var(--hg-mist)',  bg: 'var(--hg-mist-tint)', desc: 'CDK4/6·HER2·PARP 같은 특정 표적을 공격하는 신약.' },
  immuno:   { l: '면역항암',  c: 'var(--hg-rose)',  bg: 'var(--hg-rose-soft)', desc: '몸의 면역 시스템이 암을 인식하게 도와요.' },
  chemo:    { l: '항암화학',  c: 'var(--hg-clay-dark)', bg: 'var(--hg-clay-tint)', desc: '암세포의 빠른 분열을 막는 약.' },
  support:  { l: '보조약',    c: 'var(--hg-sage)',  bg: 'var(--hg-sage-tint)', desc: '진통·항구토·면역 회복 등 보조 역할.' },
};

const TONE_MAP = {
  clay:  { c: 'var(--hg-clay)',  bg: 'var(--hg-clay-tint)' },
  sage:  { c: 'var(--hg-sage)',  bg: 'var(--hg-sage-tint)' },
  honey: { c: 'var(--hg-honey)', bg: 'var(--hg-honey-tint)' },
  mist:  { c: 'var(--hg-mist)',  bg: 'var(--hg-mist-tint)' },
  rose:  { c: 'var(--hg-rose)',  bg: 'var(--hg-rose-soft)' },
};
const toneOf = (t) => TONE_MAP[t] || TONE_MAP.clay;

// 오늘의 도즈 상태
function getDoseStatus(medsLog, date, medId, time) {
  const day = medsLog[date] || {};
  return day[`${medId}|${time}`] || 'pending'; // taken | skipped | pending
}

// 연속 복용 일수 — 매일 약 기준
function calcStreak(meds, medsLog, today) {
  const dailyMeds = meds.filter(m => m.type === 'daily' && m.schedule.length > 0);
  if (dailyMeds.length === 0) return 0;
  let streak = 0;
  const d = new Date(today + 'T00:00:00');
  for (let i = 0; i < 365; i++) {
    const iso = d.toISOString().slice(0, 10);
    const allTaken = dailyMeds.every(m =>
      m.schedule.every(t => getDoseStatus(medsLog, iso, m.id, t) === 'taken')
    );
    if (allTaken) streak += 1;
    else if (i === 0) { /* 오늘 미완료는 streak 깨지 않음 */ }
    else break;
    d.setDate(d.getDate() - 1);
  }
  return streak;
}

// 14일 ahdherence
function calc14DayAdherence(meds, medsLog, today) {
  const dailyMeds = meds.filter(m => m.type === 'daily' && m.schedule.length > 0);
  let totalDoses = 0, takenDoses = 0;
  const d = new Date(today + 'T00:00:00');
  for (let i = 13; i >= 0; i--) {
    const dd = new Date(d); dd.setDate(d.getDate() - i);
    const iso = dd.toISOString().slice(0, 10);
    dailyMeds.forEach(m => {
      m.schedule.forEach(t => {
        totalDoses += 1;
        if (getDoseStatus(medsLog, iso, m.id, t) === 'taken') takenDoses += 1;
      });
    });
  }
  return totalDoses > 0 ? Math.round((takenDoses / totalDoses) * 100) : 0;
}

// 다음 외래 (월 단위 추적)
function getNextHospitalVisit(schedules, today) {
  return [...schedules]
    .filter(x => x.date >= today)
    .sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time))[0];
}

// ────────────────────────────────────────────────────────────
// 메인 화면
// ────────────────────────────────────────────────────────────
function MedsScreen({ navigate, medId }) {
  if (medId) {
    const m = (useStore().meds || []).find(x => x.id === medId);
    if (!m) return <MedsListScreen navigate={navigate} />;
    return <MedDetailScreen navigate={navigate} med={m} />;
  }
  return <MedsListScreen navigate={navigate} />;
}

function MedsListScreen({ navigate }) {
  const s = useStore();
  const today = todayISO();
  const [openAdd, setOpenAdd] = React.useState(false);

  const dailyMeds = s.meds.filter(m => m.type === 'daily' && m.schedule.length > 0);
  const asNeededMeds = s.meds.filter(m => m.type !== 'daily' || m.schedule.length === 0);

  // 오늘 시간순 묶기
  const slots = {};
  dailyMeds.forEach(m => {
    m.schedule.forEach(t => {
      (slots[t] = slots[t] || []).push(m);
    });
  });
  const sortedSlots = Object.entries(slots).sort(([a], [b]) => a.localeCompare(b));

  const totalDoses = dailyMeds.reduce((sum, m) => sum + m.schedule.length, 0);
  const takenDoses = dailyMeds.reduce((sum, m) =>
    sum + m.schedule.filter(t => getDoseStatus(s.medsLog, today, m.id, t) === 'taken').length, 0);
  const pct = totalDoses ? Math.round(takenDoses / totalDoses * 100) : 0;

  const streak = calcStreak(s.meds, s.medsLog, today);
  const adherence = calc14DayAdherence(s.meds, s.medsLog, today);
  const nextVisit = getNextHospitalVisit(s.schedules, today);
  const daysToVisit = nextVisit ? daysBetween(today, nextVisit.date) : null;

  return (
    <>
      <ScreenHeader
        title="복용 중인 약"
        sub={`매일 ${dailyMeds.length}가지 · 필요시 ${asNeededMeds.length}가지`}
        back onBack={() => navigate('more')}
        action={<FAB onClick={() => setOpenAdd(true)} />}
      />

      {/* 오늘 히어로 */}
      <div style={{ padding: '6px 22px 0' }}>
        <Panel style={{
          padding: 18,
          background: 'linear-gradient(135deg, #2A241D, #4A4137)',
          color: '#fff', borderColor: 'transparent', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', right: -40, top: -40, width: 140, height: 140, borderRadius: '50%', background: 'rgba(217,166,108,0.15)' }}/>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <Eyebrow color="var(--hg-honey)">오늘 복용</Eyebrow>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4 }}>
                <span className="hg-serif" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1 }}>{takenDoses}</span>
                <span style={{ fontSize: 14, opacity: 0.75 }}>/ {totalDoses}회</span>
              </div>
              <div style={{ display: 'flex', gap: 14, marginTop: 12, fontSize: 11, opacity: 0.85 }}>
                <div>
                  <div style={{ color: 'var(--hg-honey)', fontWeight: 700 }}>🔥 {streak}일 연속</div>
                </div>
                <div style={{ width: 1, background: 'rgba(255,255,255,0.18)' }}/>
                <div>
                  <div>14일 복약률 <strong style={{ color: 'var(--hg-honey)' }}>{adherence}%</strong></div>
                </div>
              </div>
            </div>
            <DoseDonut pct={pct} size={84}/>
          </div>
        </Panel>
      </div>

      {/* 다음 외래 D-day */}
      {nextVisit && (
        <div style={{ padding: '12px 22px 0' }}>
          <button onClick={() => navigate('schedule')} style={{
            width: '100%', textAlign: 'left',
            padding: 16, borderRadius: 18,
            background: 'linear-gradient(135deg, var(--hg-clay-tint), var(--hg-surface) 130%)',
            border: '1px solid rgba(181,117,90,0.24)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 50, height: 50, borderRadius: 14, flexShrink: 0,
              background: 'var(--hg-clay)', color: '#fff',
              display: 'grid', placeItems: 'center',
              fontFamily: '"Noto Serif KR", serif', fontSize: 18, fontWeight: 600,
            }}>D-{daysToVisit}</div>
            <div style={{ flex: 1 }}>
              <Eyebrow>다음 병원 방문</Eyebrow>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>{fmtMonth(nextVisit.date)} · {nextVisit.title}</div>
              <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2 }}>{nextVisit.time} · {nextVisit.dept}</div>
            </div>
            <span style={{ color: 'var(--hg-clay)', fontSize: 18 }}>›</span>
          </button>
        </div>
      )}

      {/* 오늘 일정별 약 */}
      {sortedSlots.length > 0 && (
        <div style={{ padding: '16px 22px 0' }}>
          <Eyebrow>오늘 시간표</Eyebrow>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {sortedSlots.map(([time, meds]) => (
              <TimeSlotCard key={time} time={time} meds={meds} today={today} log={s.medsLog} onToggle={(medId, time, cur) =>
                s.setMedTaken(today, medId, time, cur === 'taken' ? 'pending' : 'taken')
              } onClick={(m) => navigate(`meds/${m.id}`)}/>
            ))}
          </div>
        </div>
      )}

      {/* 필요시 복용 */}
      {asNeededMeds.length > 0 && (
        <div style={{ padding: '18px 22px 0' }}>
          <Eyebrow color="var(--hg-honey)">필요시 복용</Eyebrow>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {asNeededMeds.map(m => <MedRow key={m.id} med={m} onClick={() => navigate(`meds/${m.id}`)}/>)}
          </div>
        </div>
      )}

      {/* 신약 가이드 */}
      <div style={{ padding: '20px 22px 0' }}>
        <Eyebrow color="var(--hg-mist)">신약·치료 가이드</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[
            { id: 'drug-hormone',  l: '항호르몬제',   s: '타목시펜·아로마타제 억제제', c: 'var(--hg-clay)',  bg: 'var(--hg-clay-tint)' },
            { id: 'drug-cdk',      l: 'CDK4/6 억제제',s: '입랜스·키스칼리·버제니오',   c: 'var(--hg-mist)',  bg: 'var(--hg-mist-tint)' },
            { id: 'drug-her2',     l: 'HER2 표적',    s: '허셉틴·엔허투·캐싸일라',      c: 'var(--hg-honey)', bg: 'var(--hg-honey-tint)' },
            { id: 'drug-immuno',   l: '면역항암제',   s: '키트루다·옵디보',             c: 'var(--hg-rose)',  bg: 'var(--hg-rose-soft)' },
          ].map(g => (
            <button key={g.id} onClick={() => navigate(`library/${g.id}`)} style={{
              padding: 14, borderRadius: 14, textAlign: 'left',
              background: g.bg, border: `1px solid ${g.c}22`,
            }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: g.c }}>{g.l}</div>
              <div style={{ fontSize: 10, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 3 }}>{g.s}</div>
            </button>
          ))}
        </div>
      </div>

      <div style={{ padding: '16px 22px 24px' }}>
        <div style={{
          padding: 14, borderRadius: 14,
          background: 'var(--hg-bg-deeper)',
          fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600,
          lineHeight: 1.6, textAlign: 'center',
        }}>
          · 영양제·한약은 시작 전 담당 의료진과 상의해주세요.<br/>
          · 약 변경이 있으면 진료 질문 노트에 적어두세요.
        </div>
      </div>

      {openAdd && <AddMedSheet onClose={() => setOpenAdd(false)} onAdd={(m) => { s.addMed(m); showToast('약 추가됨'); setOpenAdd(false); }}/>}
    </>
  );
}

function DoseDonut({ pct, size = 80 }) {
  const r = (size - 8) / 2;
  const c = 2 * Math.PI * r;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="4"/>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--hg-honey)" strokeWidth="4"
          strokeDasharray={`${c * pct/100} ${c}`} strokeLinecap="round"/>
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
        <span className="hg-serif" style={{ fontSize: 18, fontWeight: 600, color: 'var(--hg-honey)' }}>{pct}%</span>
      </div>
    </div>
  );
}

function TimeSlotCard({ time, meds, today, log, onToggle, onClick }) {
  const allTaken = meds.every(m => getDoseStatus(log, today, m.id, time) === 'taken');
  return (
    <div style={{
      background: allTaken ? 'var(--hg-sage-tint)' : 'var(--hg-surface)',
      border: `1px solid ${allTaken ? 'var(--hg-sage-soft)' : 'var(--hg-line-soft)'}`,
      borderRadius: 18,
      padding: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
        <span className="hg-serif" style={{ fontSize: 20, fontWeight: 600, color: allTaken ? 'var(--hg-sage)' : 'var(--hg-ink)', letterSpacing: '-0.02em' }}>
          {time}
        </span>
        <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>{meds.length}개 약</span>
        {allTaken && <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--hg-sage)', fontWeight: 700 }}>✓ 완료</span>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {meds.map(m => {
          const status = getDoseStatus(log, today, m.id, time);
          const t = toneOf(m.tone);
          const taken = status === 'taken';
          return (
            <div key={m.id} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 12px', borderRadius: 12,
              background: taken ? 'rgba(143,166,126,0.12)' : 'var(--hg-bg-deeper)',
              border: `1px solid ${taken ? 'var(--hg-sage-soft)' : 'var(--hg-line-soft)'}`,
            }}>
              <span style={{ width: 4, height: 28, borderRadius: 2, background: t.c, flexShrink: 0 }}/>
              <button onClick={() => onClick(m)} style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: taken ? 'var(--hg-muted)' : 'var(--hg-ink)', textDecoration: taken ? 'line-through' : 'none' }}>{m.name}</div>
                <div style={{ fontSize: 10, color: 'var(--hg-muted)', fontWeight: 600 }}>{m.dose}</div>
              </button>
              <button onClick={() => onToggle(m.id, time, status)} aria-label="복용" style={{
                width: 36, height: 36, borderRadius: '50%',
                background: taken ? 'var(--hg-sage)' : 'transparent',
                border: `2px solid ${taken ? 'var(--hg-sage)' : t.c}`,
                display: 'grid', placeItems: 'center', flexShrink: 0,
                transition: 'all 160ms',
              }}>
                {taken && <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-8" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>}
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function MedRow({ med, onClick }) {
  const t = toneOf(med.tone);
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left',
      display: 'flex', alignItems: 'center', gap: 12,
      padding: 14, borderRadius: 16,
      background: t.bg, border: `1px solid ${t.c}22`,
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: t.c, color: '#fff',
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}>
        <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
          <rect x="3" y="7" width="16" height="8" rx="4" stroke="#fff" strokeWidth="1.8"/>
          <path d="M11 7v8" stroke="#fff" strokeWidth="1.8"/>
        </svg>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>{med.name}</div>
        <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2 }}>{med.dose} · 필요시</div>
      </div>
      <span style={{ color: t.c, fontSize: 18 }}>›</span>
    </button>
  );
}

// ────────────────────────────────────────────────────────────
// 약 상세
// ────────────────────────────────────────────────────────────
function MedDetailScreen({ navigate, med }) {
  const s = useStore();
  const today = todayISO();
  const t = toneOf(med.tone);
  const kind = MED_KINDS[med.kind] || MED_KINDS.support;

  // 14일 캘린더
  const days = [];
  const d0 = new Date(today + 'T00:00:00');
  for (let i = 13; i >= 0; i--) {
    const dd = new Date(d0); dd.setDate(d0.getDate() - i);
    const iso = dd.toISOString().slice(0, 10);
    const taken = med.schedule.length === 0
      ? null  // 필요시 약은 표시 안함
      : med.schedule.every(time => getDoseStatus(s.medsLog, iso, med.id, time) === 'taken');
    days.push({ iso, label: ['일','월','화','수','목','금','토'][dd.getDay()], dayNum: dd.getDate(), taken, isToday: i === 0 });
  }

  return (
    <>
      <ScreenHeader title={med.name} sub={med.dose}
        back onBack={() => navigate('meds')} />

      {/* 약 정보 카드 */}
      <div style={{ padding: '6px 22px 0' }}>
        <Panel style={{ padding: 18, background: `linear-gradient(135deg, ${t.bg}, var(--hg-surface) 130%)`, borderColor: `${t.c}33` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 56, height: 56, borderRadius: 16, flexShrink: 0,
              background: t.c, color: '#fff',
              display: 'grid', placeItems: 'center',
            }}>
              <svg width="26" height="26" viewBox="0 0 22 22" fill="none">
                <rect x="3" y="7" width="16" height="8" rx="4" stroke="#fff" strokeWidth="1.8"/>
                <path d="M11 7v8" stroke="#fff" strokeWidth="1.8"/>
              </svg>
            </div>
            <div style={{ flex: 1 }}>
              <Chip bg={kind.bg} color={kind.c}>{kind.l}</Chip>
              <div className="hg-serif" style={{ fontSize: 20, fontWeight: 600, color: 'var(--hg-ink)', letterSpacing: '-0.02em', marginTop: 6 }}>{med.name}</div>
              <div style={{ fontSize: 12, color: 'var(--hg-muted)', fontWeight: 600 }}>{med.dose}</div>
            </div>
          </div>
          {med.note && (
            <div style={{ marginTop: 14, padding: 12, borderRadius: 12, background: 'var(--hg-surface-2)', fontSize: 12, color: 'var(--hg-ink-2)', lineHeight: 1.6, fontWeight: 500 }}>
              {med.note}
            </div>
          )}
        </Panel>
      </div>

      {/* 시간표 */}
      {med.schedule.length > 0 && (
        <div style={{ padding: '16px 22px 0' }}>
          <Eyebrow>매일 복용 시간</Eyebrow>
          <Panel style={{ padding: 14 }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {med.schedule.map(time => {
                const status = getDoseStatus(s.medsLog, today, med.id, time);
                const taken = status === 'taken';
                return (
                  <button key={time} onClick={() => s.setMedTaken(today, med.id, time, taken ? 'pending' : 'taken')} style={{
                    padding: '10px 16px', borderRadius: 14,
                    background: taken ? t.c : 'var(--hg-bg-deeper)',
                    color: taken ? '#fff' : t.c,
                    border: `1.5px solid ${t.c}`,
                    fontSize: 13, fontWeight: 700,
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                  }}>
                    {taken && <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-8" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                    {time}
                  </button>
                );
              })}
            </div>
          </Panel>
        </div>
      )}

      {/* 14일 복약 캘린더 */}
      {med.type === 'daily' && (
        <div style={{ padding: '16px 22px 0' }}>
          <Eyebrow>최근 14일</Eyebrow>
          <Panel style={{ padding: 14 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
              {days.map(d => (
                <div key={d.iso} style={{
                  aspectRatio: '1 / 1', borderRadius: 10,
                  background: d.isToday ? t.c :
                              d.taken ? t.bg :
                              d.taken === false ? 'var(--hg-rose-soft)' : 'var(--hg-bg-deeper)',
                  border: '1px solid ' + (d.isToday ? 'transparent' : 'var(--hg-line-soft)'),
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  color: d.isToday ? '#fff' : 'var(--hg-ink-2)',
                  fontSize: 11, fontWeight: 700,
                }}>
                  <span style={{ fontSize: 9, opacity: 0.6 }}>{d.label}</span>
                  <span>{d.dayNum}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--hg-line-soft)', fontSize: 10, fontWeight: 600, color: 'var(--hg-muted)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: t.bg }}/>복용</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: 'var(--hg-rose-soft)' }}/>빠짐</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: t.c }}/>오늘</span>
            </div>
          </Panel>
        </div>
      )}

      {/* 약 분류 안내 */}
      <div style={{ padding: '16px 22px 0' }}>
        <Panel style={{ padding: 16, background: kind.bg, borderColor: `${kind.c}33` }}>
          <Eyebrow color={kind.c}>{kind.l} 분류</Eyebrow>
          <div style={{ fontSize: 12, color: 'var(--hg-ink-2)', lineHeight: 1.7, fontWeight: 500, marginTop: 4 }}>
            {kind.desc}
          </div>
          <button onClick={() => navigate(`library/drug-${med.kind}`)} style={{
            marginTop: 12, padding: '8px 12px', borderRadius: 999,
            background: kind.c, color: '#fff',
            fontSize: 11, fontWeight: 700,
          }}>자세히 보기 →</button>
        </Panel>
      </div>

      {/* 삭제 */}
      <div style={{ padding: '20px 22px 24px' }}>
        <button onClick={() => {
          if (confirm('이 약을 삭제할까요?')) { s.removeMed(med.id); showToast('삭제됨'); navigate('meds'); }
        }} style={{
          width: '100%', minHeight: 50, borderRadius: 14,
          background: 'var(--hg-surface)', border: '1px solid var(--hg-line)',
          color: 'var(--hg-rose)', fontSize: 13, fontWeight: 700,
        }}>약 목록에서 제거</button>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// 약 추가 시트
// ────────────────────────────────────────────────────────────
function AddMedSheet({ onClose, onAdd }) {
  const [form, setForm] = React.useState({
    name: '', dose: '', schedule: ['09:00'], type: 'daily', kind: 'hormone', tone: 'clay', note: '',
  });

  const updateTime = (i, v) => {
    const next = [...form.schedule]; next[i] = v;
    setForm({ ...form, schedule: next });
  };
  const addTime = () => setForm({ ...form, schedule: [...form.schedule, '21:00'] });
  const removeTime = (i) => setForm({ ...form, schedule: form.schedule.filter((_, idx) => idx !== i) });

  const kinds = [
    { v: 'hormone',  l: '항호르몬',  tone: 'clay' },
    { v: 'targeted', l: '표적치료',  tone: 'mist' },
    { v: 'chemo',    l: '항암화학',  tone: 'clay' },
    { v: 'immuno',   l: '면역항암',  tone: 'rose' },
    { v: 'support',  l: '보조약',    tone: 'sage' },
  ];

  return (
    <Sheet title="복용 약 추가" onClose={onClose}>
      <label className="hg-label">약 이름</label>
      <input className="hg-input" placeholder="예: 타목시펜 (Tamoxifen)" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}/>

      <label className="hg-label" style={{ marginTop: 14 }}>용량</label>
      <input className="hg-input" placeholder="예: 20mg" value={form.dose} onChange={(e) => setForm({ ...form, dose: e.target.value })}/>

      <label className="hg-label" style={{ marginTop: 14 }}>분류</label>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {kinds.map(k => (
          <button key={k.v} onClick={() => setForm({ ...form, kind: k.v, tone: k.tone })} style={{
            padding: '8px 14px', borderRadius: 999,
            background: form.kind === k.v ? toneOf(k.tone).c : toneOf(k.tone).bg,
            color: form.kind === k.v ? '#fff' : toneOf(k.tone).c,
            fontSize: 12, fontWeight: 700,
          }}>{k.l}</button>
        ))}
      </div>

      <label className="hg-label" style={{ marginTop: 14 }}>복용 유형</label>
      <div style={{ display: 'flex', gap: 6 }}>
        {[{ v: 'daily', l: '매일 정해진 시간' }, { v: 'asneeded', l: '필요할 때' }].map(t => (
          <button key={t.v} onClick={() => setForm({ ...form, type: t.v, schedule: t.v === 'asneeded' ? [] : (form.schedule.length ? form.schedule : ['09:00']) })} style={{
            flex: 1, padding: '10px 0', borderRadius: 12,
            background: form.type === t.v ? 'var(--hg-clay)' : 'var(--hg-bg-deeper)',
            color: form.type === t.v ? '#fff' : 'var(--hg-ink-2)',
            fontSize: 12, fontWeight: 700,
          }}>{t.l}</button>
        ))}
      </div>

      {form.type === 'daily' && (
        <>
          <label className="hg-label" style={{ marginTop: 14 }}>복용 시간 ({form.schedule.length}회)</label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {form.schedule.map((time, i) => (
              <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                <input type="time" className="hg-input" value={time} onChange={(e) => updateTime(i, e.target.value)} style={{ flex: 1 }}/>
                {form.schedule.length > 1 && (
                  <button onClick={() => removeTime(i)} style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--hg-bg-deeper)', color: 'var(--hg-muted)' }}>✕</button>
                )}
              </div>
            ))}
            <button onClick={addTime} style={{
              padding: 10, borderRadius: 12,
              background: 'var(--hg-bg-deeper)', border: '1px dashed var(--hg-line)',
              color: 'var(--hg-clay)', fontSize: 12, fontWeight: 700,
            }}>＋ 시간 추가</button>
          </div>
        </>
      )}

      <label className="hg-label" style={{ marginTop: 14 }}>메모 (선택)</label>
      <textarea className="hg-textarea" placeholder="식전/식후, 주의사항 등" value={form.note} onChange={(e) => setForm({ ...form, note: e.target.value })}/>

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

Object.assign(window, { MedsScreen, MedsListScreen, MedDetailScreen, AddMedSheet, MED_KINDS, getDoseStatus, calcStreak, calc14DayAdherence });