// Kick counter — daily fetal movement logger with 10-kick timer.

function KicksPage() {
  const todayKey = () => new Date().toISOString().slice(0,10);

  const loadLogs = () => {
    try { return JSON.parse(localStorage.getItem('kick_logs') || '{}'); } catch(e) { return {}; }
  };
  const saveLogs = (logs) => localStorage.setItem('kick_logs', JSON.stringify(logs));

  const [logs, setLogs] = React.useState(loadLogs);
  const [timerStart, setTimerStart] = React.useState(() => {
    const v = localStorage.getItem('kick_timerStart');
    return v ? parseInt(v) : null;
  });
  const [elapsed, setElapsed] = React.useState(0);
  const [flash, setFlash] = React.useState(false);

  const today = todayKey();
  const todayKicks = logs[today] || [];
  const count = todayKicks.length;

  // 10-kick goal timer
  const tenKickTime = React.useMemo(() => {
    if (todayKicks.length < 10) return null;
    const first = todayKicks[todayKicks.length - 10];
    const tenth = todayKicks[todayKicks.length - 1];
    return Math.round((tenth - first) / 60000);
  }, [todayKicks]);

  React.useEffect(() => {
    if (!timerStart) return;
    const id = setInterval(() => setElapsed(Math.floor((Date.now() - timerStart) / 1000)), 500);
    return () => clearInterval(id);
  }, [timerStart]);

  const recordKick = () => {
    if (!timerStart) {
      const now = Date.now();
      setTimerStart(now);
      localStorage.setItem('kick_timerStart', String(now));
    }
    const now = Date.now();
    const next = { ...logs, [today]: [...(logs[today]||[]), now] };
    setLogs(next);
    saveLogs(next);
    setFlash(true);
    setTimeout(() => setFlash(false), 300);

    // Auto-stop timer after 10 kicks
    if ((logs[today]||[]).length + 1 >= 10) {
      setTimerStart(null);
      localStorage.removeItem('kick_timerStart');
    }
  };

  const resetToday = () => {
    const next = { ...logs };
    delete next[today];
    setLogs(next);
    saveLogs(next);
    setTimerStart(null);
    setElapsed(0);
    localStorage.removeItem('kick_timerStart');
  };

  const fmtTime = (sec) => {
    const m = Math.floor(sec/60).toString().padStart(2,'0');
    const s = (sec%60).toString().padStart(2,'0');
    return `${m}:${s}`;
  };
  const fmtTs = (ts) => {
    const d = new Date(ts);
    return `${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`;
  };

  const goalMet = count >= 10;
  const btnColor = goalMet ? 'var(--sage)' : 'var(--accent)';

  // Past 7 days summary
  const past7 = Array.from({length:7}).map((_,i) => {
    const d = new Date(); d.setDate(d.getDate()-i);
    const key = d.toISOString().slice(0,10);
    return { key, date: d, count: (logs[key]||[]).length };
  }).reverse();

  return (
    <div style={{ padding:'16px 16px 100px', display:'flex', flexDirection:'column', gap:16 }}>
      <SectionTitle zh="胎動計數" en="Kick Counter" />

      {/* Status banner */}
      {goalMet ? (
        <div style={{
          padding:'12px 16px', borderRadius:10,
          background:'var(--sage-soft)', border:'1px solid color-mix(in oklab,var(--sage) 30%,var(--line))',
          display:'flex', alignItems:'center', gap:10,
        }}>
          <div style={{ fontSize:24 }}>✓</div>
          <div>
            <div style={{ fontSize:13, fontWeight:600, color:'#556a52' }}>今日達標！10 次胎動</div>
            <div style={{ fontSize:11, color:'var(--ink-soft)' }}>
              耗時 {tenKickTime} 分鐘 · {tenKickTime && tenKickTime <= 120 ? '正常範圍內 ✓' : '超過 2 小時，建議就醫'}
            </div>
          </div>
        </div>
      ) : (
        <div style={{
          padding:'12px 16px', borderRadius:10,
          background:'var(--bg-soft)', border:'1px solid var(--line)',
        }}>
          <div style={{ fontSize:12, color:'var(--ink-soft)', lineHeight:1.6 }}>
            目標：<strong>2 小時內感受 10 次胎動</strong><br/>
            <span className="en" style={{ fontSize:10.5 }}>Goal: 10 kicks within 2 hours · start timing when you begin counting</span>
          </div>
        </div>
      )}

      {/* Big kick button */}
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:20, padding:'10px 0' }}>
        <div style={{ position:'relative' }}>
          <BigButton
            onClick={recordKick}
            label={count.toString()}
            sublabel={goalMet ? '達標 ✓' : `/ 10 今日`}
            color={btnColor}
            pulse={!goalMet && count > 0}
          />
          {flash && (
            <div style={{
              position:'absolute', top:'50%', left:'50%',
              transform:'translate(-50%,-50%)',
              width:180, height:180, borderRadius:'50%',
              background: btnColor,
              opacity:0.2,
              animation:'tick-in 0.3s ease-out forwards',
              pointerEvents:'none',
            }}/>
          )}
        </div>

        {/* Timer */}
        {timerStart && (
          <div style={{ textAlign:'center' }}>
            <div className="mono" style={{ fontSize:32, color:'var(--ink)', fontWeight:500, letterSpacing:'0.04em' }}>
              {fmtTime(elapsed)}
            </div>
            <div style={{ fontSize:10.5, color:'var(--ink-faint)' }}>計時中 · counting since first kick</div>
          </div>
        )}

        <button className="btn-reset" onClick={resetToday} style={{
          fontSize:11.5, color:'var(--ink-faint)', borderBottom:'1px dashed var(--line)',
          paddingBottom:2,
        }}>重置今日 · Reset today</button>
      </div>

      {/* Today's kicks timeline */}
      {todayKicks.length > 0 && (
        <Card pad="14px">
          <div style={{ fontSize:10.5, color:'var(--ink-faint)', letterSpacing:'0.06em', marginBottom:10 }}>
            今日記錄 · TODAY'S LOG
          </div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
            {todayKicks.map((ts, i) => (
              <div key={ts} style={{
                padding:'4px 9px', borderRadius:99,
                background: i < 10 ? 'var(--accent-soft)' : 'var(--bg-soft)',
                border:`1px solid ${i < 10 ? 'color-mix(in oklab,var(--accent) 25%,var(--line))' : 'var(--line)'}`,
                fontFamily:"'JetBrains Mono',monospace",
                fontSize:11, color: i < 10 ? 'var(--accent-ink)' : 'var(--ink-soft)',
              }}>
                {i+1}· {fmtTs(ts)}
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* 7-day chart */}
      <Card pad="14px">
        <div style={{ fontSize:10.5, color:'var(--ink-faint)', letterSpacing:'0.06em', marginBottom:12 }}>
          近 7 天 · 7-DAY HISTORY
        </div>
        <div style={{ display:'flex', gap:6, alignItems:'flex-end', height:60 }}>
          {past7.map(({ key, date, count: c }) => {
            const isToday = key === today;
            const h = Math.max(4, Math.min(52, c * 5));
            return (
              <div key={key} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
                <div className="mono" style={{ fontSize:9, color: c>=10 ? 'var(--sage)' : 'var(--ink-faint)' }}>
                  {c || ''}
                </div>
                <div style={{
                  width:'100%', height:h,
                  background: isToday ? 'var(--accent)' : c>=10 ? 'var(--sage)' : 'var(--line)',
                  borderRadius:4, transition:'height 0.3s',
                  opacity: isToday ? 1 : 0.65,
                }}/>
                <div style={{ fontSize:9, color:'var(--ink-faint)' }}>
                  {['日','一','二','三','四','五','六'][date.getDay()]}
                </div>
              </div>
            );
          })}
        </div>
      </Card>

      <div style={{
        fontSize:11, color:'var(--ink-faint)', lineHeight:1.6,
        padding:'10px 14px', border:'1px dashed var(--line)', borderRadius:10,
      }}>
        <strong style={{ color:'var(--ink-soft)' }}>※</strong> 建議從 28 週起每日計數。若 2 小時內未達 10 次，或胎動突然減少，請立即聯繫醫師。<br/>
        <span className="en" style={{ fontSize:10 }}>If fewer than 10 movements in 2 hours, or if fetal movement decreases significantly, contact your doctor immediately.</span>
      </div>
    </div>
  );
}

Object.assign(window, { KicksPage });