/* global React */
const { useState: useState_D, useMemo: useMemo_D } = React;

// ═══════════════ DASHBOARD ═══════════════
function Dashboard({ day, checkins, setCheckins, vocabLearned, videosDone }) {
  const today = new Date().toISOString().slice(0, 10);
  const todayChecks = checkins[today] || {};

  const tasks = [
    { id: 'vocab',  label: '背 5 個新詞彙',    zh: 'Flashcards ×5' },
    { id: 'video',  label: '聽一部無字幕短片', zh: 'Listen before read' },
    { id: 'tactic', label: '讀一則戰術筆記',   zh: 'Tactic note' },
    { id: 'write',  label: '寫一句英文觀後感', zh: 'One sentence' },
  ];

  function toggle(id) {
    setCheckins({
      ...checkins,
      [today]: { ...todayChecks, [id]: !todayChecks[id] }
    });
  }

  // 過去 14 天的格子圖
  const grid = useMemo_D(() => {
    const arr = [];
    for (let i = 13; i >= 0; i--) {
      const d = new Date();
      d.setDate(d.getDate() - i);
      const key = d.toISOString().slice(0, 10);
      const c = checkins[key] || {};
      const done = Object.values(c).filter(Boolean).length;
      arr.push({ key, done, total: tasks.length, label: d.getDate() });
    }
    return arr;
  }, [checkins]);

  const doneToday = Object.values(todayChecks).filter(Boolean).length;
  const streak = useMemo_D(() => {
    let s = 0;
    for (let i = 0; i < 30; i++) {
      const d = new Date();
      d.setDate(d.getDate() - i);
      const key = d.toISOString().slice(0, 10);
      const c = checkins[key] || {};
      const done = Object.values(c).filter(Boolean).length;
      if (done >= 2) s++; else break;
    }
    return s;
  }, [checkins]);

  return (
    <section>
      <div className="section-head">
        <div className="kicker">§ 01 · Daily Check-in</div>
        <h2>今天的<span className="underline-hand">添柴火</span></h2>
        <div className="zh">Day {day} · 已經累積 {Object.keys(checkins).filter(k => Object.values(checkins[k]||{}).some(Boolean)).length} 天有動</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 28 }}>
        {/* LEFT — 今日任務 */}
        <div className="card" style={{ padding: '26px 28px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                        marginBottom: 20 }}>
            <div className="hand" style={{ fontSize: 28, fontWeight: 700 }}>To-do · 今天</div>
            <div className="mono" style={{ fontSize: 12, color: 'var(--ink-faint)' }}>
              {doneToday}/{tasks.length}
            </div>
          </div>
          {tasks.map(t => {
            const checked = !!todayChecks[t.id];
            return (
              <div key={t.id}
                onClick={() => toggle(t.id)}
                style={{ display: 'flex', alignItems: 'center', gap: 16,
                          padding: '14px 2px', borderBottom: '1px dashed var(--rule)',
                          cursor: 'pointer' }}>
                <div style={{ width: 24, height: 24, border: '1.5px solid var(--ink)',
                              display: 'flex', alignItems: 'center', justifyContent: 'center',
                              background: checked ? 'var(--ink)' : 'transparent',
                              flexShrink: 0 }}>
                  {checked && (
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
                      <path d="M3 10 L 8 15 L 17 4" stroke="var(--paper)" strokeWidth="2.5"
                            strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  )}
                </div>
                <div style={{ flex: 1 }}>
                  <div className="serif" style={{ fontSize: 17, fontWeight: 500,
                                                    textDecoration: checked ? 'line-through' : 'none',
                                                    color: checked ? 'var(--ink-faint)' : 'var(--ink)' }}>
                    {t.label}
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--ink-faint)',
                                                   letterSpacing: '0.08em', marginTop: 2 }}>
                    {t.zh}
                  </div>
                </div>
                {checked && (
                  <span className="hand" style={{ fontSize: 22, color: 'var(--red-mark)',
                                                    transform: 'rotate(-8deg)' }}>✓ done</span>
                )}
              </div>
            );
          })}
          {doneToday === tasks.length && (
            <div className="hand" style={{ fontSize: 22, color: 'var(--field-green)',
                                             marginTop: 16, transform: 'rotate(-2deg)' }}>
              ✦ 全部完成！火又大了一點。
            </div>
          )}
        </div>

        {/* RIGHT — 數據 + 熱力圖 */}
        <div className="col" style={{ gap: 20 }}>
          <div className="grid grid-3" style={{ gap: 12 }}>
            <StatBox n={streak} label="streak" zh="連續天數" accent="var(--red-mark)" />
            <StatBox n={vocabLearned} label="words" zh="已會詞彙" accent="var(--star)" />
            <StatBox n={videosDone} label="videos" zh="看完影片" accent="var(--field-green)" />
          </div>

          <div className="card" style={{ padding: 22 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.15em',
                                             color: 'var(--ink-faint)', textTransform: 'uppercase',
                                             marginBottom: 14 }}>
              Last 14 days
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(14, 1fr)', gap: 5 }}>
              {grid.map(c => (
                <div key={c.key} title={`${c.key}: ${c.done}/${c.total}`}
                  style={{
                    aspectRatio: '1',
                    background: c.done === 0 ? 'var(--paper-shade)' :
                                c.done === 1 ? 'rgba(90, 124, 255, 0.25)' :
                                c.done === 2 ? 'rgba(90, 124, 255, 0.5)' :
                                c.done === 3 ? 'rgba(90, 124, 255, 0.75)' :
                                               'var(--star)',
                    border: c.key === today ? '1.5px solid var(--red-mark)' : '1px solid var(--rule)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--f-mono)', fontSize: 9,
                    color: c.done >= 3 ? 'var(--paper)' : 'var(--ink-faint)'
                  }}>
                  {c.label}
                </div>
              ))}
            </div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)',
                                             marginTop: 12, display: 'flex', gap: 10 }}>
              <span>□ 無</span>
              <span style={{ color: 'var(--star)' }}>■ 4/4 = 今日燃燒殆盡</span>
            </div>
          </div>

          <div className="terminal" style={{ padding: '24px 22px 20px' }}>
            <div className="terminal-body">
              <div className="term-line">
                <span className="term-prompt">$</span>
                <span>./status --today</span>
              </div>
              <div style={{ paddingLeft: 18, marginTop: 6 }}>
                <span className="term-key">day</span>: <span className="term-val">{day}</span><br/>
                <span className="term-key">streak</span>: <span className="term-val">{streak} days</span><br/>
                <span className="term-key">fuel</span>: <span className="term-val">
                  {'█'.repeat(doneToday)}{'░'.repeat(tasks.length - doneToday)}
                </span> {Math.round(doneToday/tasks.length*100)}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatBox({ n, label, zh, accent }) {
  return (
    <div style={{ background: 'rgba(255,251,240,0.5)', border: '1px solid var(--rule)',
                   padding: '14px 12px', textAlign: 'center', position: 'relative' }}>
      <div className="hand" style={{ fontSize: 44, fontWeight: 700, lineHeight: 1,
                                        color: accent }}>{n}</div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em',
                                        textTransform: 'uppercase', color: 'var(--ink-faint)',
                                        marginTop: 4 }}>{label}</div>
      <div className="serif" style={{ fontSize: 12, color: 'var(--ink-2)' }}>{zh}</div>
    </div>
  );
}

window.Dashboard = Dashboard;