// 하루결 — 환자: 부작용 기록 + 응급 시트

const SYMPTOM_TYPES = [
  { l: '피로',     icon: 'fatigue', c: 'var(--hg-clay)',  bg: 'var(--hg-clay-tint)' },
  { l: '메스꺼움', icon: 'nausea',  c: 'var(--hg-honey)', bg: 'var(--hg-honey-tint)' },
  { l: '구내염',   icon: 'mouth',   c: 'var(--hg-sage)',  bg: 'var(--hg-sage-tint)' },
  { l: '손발저림', icon: 'tingle',  c: 'var(--hg-mist)',  bg: 'var(--hg-mist-tint)' },
  { l: '통증',     icon: 'pain',    c: 'var(--hg-clay)',  bg: 'var(--hg-clay-tint)' },
  { l: '발열',     icon: 'fever',   c: 'var(--hg-rose)',  bg: 'var(--hg-rose-soft)' },
];

function SymptomsScreen({ navigate, initialOpen }) {
  const s = useStore();
  const [openAdd, setOpenAdd] = React.useState(initialOpen || false);

  return (
    <>
      <ScreenHeader title="부작용 기록" sub="작은 변화도 기록해두면 진료에 도움돼요" />

      {/* 큰 빠른 추가 버튼 */}
      <div style={{ padding: '6px 22px 0' }}>
        <button onClick={() => setOpenAdd(true)} style={{
          width: '100%', minHeight: 64,
          background: 'linear-gradient(135deg, var(--hg-clay), var(--hg-clay-dark))',
          color: '#fff', borderRadius: 18,
          padding: '14px 18px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
          boxShadow: '0 8px 24px rgba(181,117,90,0.32)',
        }}>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', opacity: 0.85 }}>방금 느낀 증상</div>
            <div className="hg-serif" style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 2 }}>지금 바로 기록하기</div>
          </div>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: 'rgba(255,255,255,0.2)',
            display: 'grid', placeItems: 'center', fontSize: 24, fontWeight: 300,
          }}>＋</div>
        </button>
      </div>

      {/* 응급 신호 카드 */}
      <div style={{ padding: '12px 22px 0' }}>
        <button onClick={() => navigate('emergency')} style={{
          width: '100%', textAlign: 'left',
          padding: 16, borderRadius: 18,
          background: 'linear-gradient(135deg, #FCEEEC, var(--hg-surface) 120%)',
          border: '1px solid rgba(194,85,74,0.24)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: 'var(--hg-rose-soft)', color: 'var(--hg-rose)',
            display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 18, flexShrink: 0,
          }}>!</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>위급한 증상인가요?</div>
            <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2, lineHeight: 1.5 }}>
              38°C 이상, 출혈, 호흡곤란 등
            </div>
          </div>
          <span style={{
            padding: '6px 12px', borderRadius: 999,
            background: 'var(--hg-rose)', color: '#fff',
            fontSize: 11, fontWeight: 700,
          }}>병원 콜 →</span>
        </button>
      </div>

      {/* 이번 주기 통계 */}
      <div style={{ padding: '14px 22px 0' }}>
        <Panel>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <Eyebrow>이번 주기</Eyebrow>
            <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>최근 7일</span>
          </div>
          <SymptomChart symptoms={s.symptoms} />
        </Panel>
      </div>

      {/* 도서관 링크 */}
      <div style={{ padding: '14px 22px 0' }}>
        <button onClick={() => navigate('library')} style={{
          width: '100%', textAlign: 'left',
          padding: 14, borderRadius: 16,
          background: 'var(--hg-surface-2)',
          border: '1px dashed var(--hg-line)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 10,
            background: 'var(--hg-honey-tint)', color: 'var(--hg-honey)',
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}>
            <svg width="16" height="16" viewBox="0 0 22 22" fill="none">
              <path d="M4 4h14v14H4z M4 8h14 M9 4v14" stroke="currentColor" strokeWidth="1.6" fill="none"/>
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>부작용 관리 정보 더 보기</div>
            <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2 }}>병원·공식 자료로 정리한 가이드</div>
          </div>
          <span style={{ color: 'var(--hg-muted)', fontSize: 16 }}>›</span>
        </button>
      </div>

      {/* 최근 기록 */}
      <div style={{ padding: '18px 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 }}>총 {s.symptoms.length}건</span>
        </div>
        {s.symptoms.length === 0 ? (
          <div style={{ padding: 24, textAlign: 'center', color: 'var(--hg-muted)', fontSize: 13, background: 'var(--hg-surface)', borderRadius: 16, border: '1px dashed var(--hg-line)' }}>
            아직 기록이 없어요
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {s.symptoms.map((r) => {
              const isToday = r.date === todayISO();
              return (
                <div key={r.id} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: 14, borderRadius: 16,
                  background: 'var(--hg-surface)',
                  border: '1px solid var(--hg-line-soft)',
                }}>
                  <div style={{ minWidth: 44, fontSize: 10, color: 'var(--hg-muted)', fontWeight: 700, textAlign: 'center' }}>
                    <div>{isToday ? '오늘' : r.date.slice(5).replace('-','/')}</div>
                    <div style={{ fontSize: 9, marginTop: 2 }}>{r.time}</div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
                      <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>{r.name}</span>
                      <span style={{
                        fontSize: 10, fontWeight: 700,
                        padding: '2px 8px', borderRadius: 999,
                        background: r.severity >= 4 ? 'var(--hg-rose-soft)' : r.severity >= 3 ? 'var(--hg-honey-tint)' : 'var(--hg-sage-tint)',
                        color: r.severity >= 4 ? 'var(--hg-rose)' : r.severity >= 3 ? 'var(--hg-honey)' : 'var(--hg-sage)',
                      }}>강도 {r.severity}</span>
                    </div>
                    {r.memo && <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 500 }}>{r.memo}</div>}
                  </div>
                  <button onClick={() => { s.removeSymptom(r.id); showToast('삭제됨'); }} style={{
                    width: 26, height: 26, borderRadius: '50%',
                    background: 'var(--hg-bg-deeper)', color: 'var(--hg-muted)', fontSize: 11,
                  }}>✕</button>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {openAdd && <AddSymptomSheet onClose={() => setOpenAdd(false)} onAdd={(x) => { s.addSymptom(x); showToast('기록됨'); setOpenAdd(false); }} />}
    </>
  );
}

function AddSymptomSheet({ onClose, onAdd }) {
  const [form, setForm] = React.useState({
    date: todayISO(), time: nowHM(), name: '', severity: 3, memo: '',
  });

  const canSave = !!form.name;

  return (
    <Sheet title="증상 기록" onClose={onClose}>
      <label className="hg-label">어떤 증상이에요?</label>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {SYMPTOM_TYPES.map((sym) => {
          const on = form.name === sym.l;
          return (
            <button key={sym.l} onClick={() => setForm({ ...form, name: sym.l })} style={{
              aspectRatio: '1 / 1', borderRadius: 16,
              background: on ? sym.bg : 'var(--hg-surface-2)',
              border: on ? `1.5px solid ${sym.c}` : '1px solid var(--hg-line-soft)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
              padding: 0,
            }}>
              <SymptomIcon name={sym.icon} color={on ? sym.c : 'var(--hg-muted)'} />
              <span style={{ fontSize: 12, fontWeight: on ? 700 : 600, color: on ? sym.c : 'var(--hg-ink-2)' }}>{sym.l}</span>
            </button>
          );
        })}
      </div>

      <label className="hg-label" style={{ marginTop: 18 }}>불편한 정도</label>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6 }}>
        {[1,2,3,4,5].map((n) => {
          const on = n === form.severity;
          return (
            <button key={n} onClick={() => setForm({ ...form, severity: n })} style={{
              height: 44, borderRadius: 12,
              background: on ? 'var(--hg-clay)' :
                          n <= form.severity ? 'var(--hg-clay-tint)' : 'var(--hg-bg-deeper)',
              color: on ? '#fff' : n <= form.severity ? 'var(--hg-clay-dark)' : 'var(--hg-muted)',
              fontSize: 13, fontWeight: 700,
              boxShadow: on ? '0 4px 12px rgba(181,117,90,0.32)' : 'none',
              border: '1px solid ' + (on ? 'transparent' : 'var(--hg-line-soft)'),
            }}>{n}</button>
          );
        })}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 8 }}>
        <span>조금 불편</span>
        <span>일상 어려움</span>
        <span>병원 연락</span>
      </div>

      <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>
      <textarea className="hg-textarea" placeholder="언제 시작됐고 어떻게 느껴졌나요?" value={form.memo} onChange={(e) => setForm({ ...form, memo: e.target.value })}/>

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

function SymptomIcon({ name, color }) {
  const sw = 1.6, c = color;
  if (name === 'fatigue') return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="7" stroke={c} strokeWidth={sw}/><path d="M8 12c0 1 1.5 2 3 2s3-1 3-2M8 9h.01M14 9h.01" stroke={c} strokeWidth={sw} strokeLinecap="round"/></svg>;
  if (name === 'nausea')  return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M5 9c1-3 4-4 6-4s5 1 6 4M4 13c0 3 3 5 7 5s7-2 7-5M9 16l-1 3M13 16l1 3" stroke={c} strokeWidth={sw} strokeLinecap="round"/></svg>;
  if (name === 'mouth')   return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><ellipse cx="11" cy="12" rx="6" ry="4" stroke={c} strokeWidth={sw}/><path d="M7 11h8" stroke={c} strokeWidth={sw}/></svg>;
  if (name === 'tingle')  return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 4v8M7 8l4 4 4-4M11 15v3M9 17v-1M13 17v-1" stroke={c} strokeWidth={sw} strokeLinecap="round"/></svg>;
  if (name === 'pain')    return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 3l2 4 4 .5-3 3 .8 4-3.8-2-3.8 2L8 10.5l-3-3L9 7l2-4z" stroke={c} strokeWidth={sw} strokeLinejoin="round"/></svg>;
  if (name === 'fever')   return <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="9" y="3" width="4" height="12" rx="2" stroke={c} strokeWidth={sw}/><circle cx="11" cy="17" r="2.5" stroke={c} strokeWidth={sw} fill={c}/></svg>;
  return null;
}

// 간단한 주간 증상 차트
function SymptomChart({ symptoms }) {
  const days = [];
  const todayD = new Date(todayISO() + 'T00:00:00');
  for (let i = 6; i >= 0; i--) {
    const d = new Date(todayD); d.setDate(todayD.getDate() - i);
    const iso = d.toISOString().slice(0, 10);
    const items = symptoms.filter(s => s.date === iso);
    const avg = items.length ? items.reduce((a, b) => a + b.severity, 0) / items.length : 0;
    days.push({
      iso,
      label: ['일','월','화','수','목','금','토'][d.getDay()],
      avg,
      count: items.length,
      isToday: i === 0,
    });
  }
  const max = 5;

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 110 }}>
        {days.map((d) => {
          const h = (d.avg / max) * 100;
          return (
            <div key={d.iso} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ flex: 1, width: '100%', display: 'flex', alignItems: 'flex-end' }}>
                <div style={{
                  width: '100%',
                  height: d.count ? `${Math.max(h, 8)}%` : '4%',
                  background: d.isToday ? 'var(--hg-clay)' :
                              d.avg >= 4 ? 'var(--hg-rose)' :
                              d.avg >= 3 ? 'var(--hg-honey)' :
                              d.avg > 0 ? 'var(--hg-sage)' : 'var(--hg-line)',
                  borderRadius: 6,
                  transition: 'height 240ms',
                }} />
              </div>
              <div style={{ fontSize: 10, color: d.isToday ? 'var(--hg-clay-dark)' : 'var(--hg-muted)', fontWeight: 700 }}>{d.label}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { SymptomsScreen, SymptomIcon, SYMPTOM_TYPES });