// today.jsx — Hari Ini screen

function ProgressRing({ pct, total, max, grade, size = 156 }) {
  const stroke = 12;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const dash = Math.max(0, Math.min(1, pct)) * c;
  const color = gradeColor(grade);
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--border)" strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none"
          stroke={color} strokeWidth={stroke} strokeLinecap="round"
          strokeDasharray={`${dash} ${c}`}
          style={{ transition: 'stroke-dasharray 0.5s ease, stroke 0.3s' }}
        />
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, lineHeight: 1, color: 'var(--ink)', letterSpacing: '-0.02em' }}>
          {total}
        </div>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4, letterSpacing: '0.04em' }}>
          dari {max} poin
        </div>
      </div>
    </div>
  );
}

function HeroCard({ habits, dayChecks, streak, today }) {
  const { total, max } = pointsForDay(habits, dayChecks);
  const pct = max > 0 ? total / max : 0;
  const grade = gradeFor(pct);
  const pctText = Math.round(pct * 100);
  return (
    <div className="hero-card">
      <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
        <ProgressRing pct={pct} total={total} max={max} grade={grade} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>Grade</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 500, lineHeight: 1,
                color: gradeColor(grade), letterSpacing: '-0.02em',
              }}>{grade}</span>
              <span style={{ fontSize: 14, color: 'var(--muted)' }}>{pctText}%</span>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>Streak</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, color: 'var(--ink)' }}>
                {streak}
              </span>
              <span style={{ fontSize: 13, color: 'var(--muted)' }}>hari</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DateNav({ date, onChange }) {
  const today = new Date();
  const isToday = isSameDay(date, today);
  const isFuture = date > today;
  const go = (delta) => {
    const d = new Date(date); d.setDate(d.getDate() + delta);
    onChange(d);
  };
  return (
    <div className="date-nav">
      <button className="icon-btn" onClick={() => go(-1)} aria-label="hari sebelumnya">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
      </button>
      <button className="date-label" onClick={() => onChange(new Date())}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', color: 'var(--ink)' }}>
          {isToday ? 'Hari Ini' : formatDateLong(date)}
        </div>
        {isToday && (
          <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{formatDateLong(date)}</div>
        )}
      </button>
      <button className="icon-btn" onClick={() => go(1)} disabled={isFuture} aria-label="hari berikutnya"
        style={{ opacity: isFuture ? 0.3 : 1 }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
    </div>
  );
}

function Checkbox({ checked, onClick, size = 32, accent }) {
  return (
    <button
      onClick={onClick}
      className="check-btn"
      style={{
        width: size, height: size, minWidth: size,
        borderRadius: size * 0.32,
        background: checked ? (accent || 'var(--accent)') : 'transparent',
        borderColor: checked ? (accent || 'var(--accent)') : 'var(--border-strong)',
      }}
      aria-pressed={checked}
    >
      {checked && (
        <svg width={Math.round(size * 0.6)} height={Math.round(size * 0.6)} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      )}
    </button>
  );
}

function HabitCard({ habit, dayChecks, onToggle, streak }) {
  const mainDone = !!dayChecks?.[habit.id];
  const doneAddons = (habit.addons || []).filter(a => dayChecks?.[a.id]).length;
  const totalAddons = (habit.addons || []).length;
  // earned points for this habit (main + addons)
  let earned = mainDone ? habit.points : 0;
  for (const a of habit.addons || []) if (dayChecks?.[a.id]) earned += a.points;
  const totalPts = habit.points + (habit.addons || []).reduce((s, a) => s + a.points, 0);

  return (
    <div className={`habit-card ${mainDone ? 'is-done' : ''}`}>
      <div className="habit-main">
        <Checkbox checked={mainDone} onClick={() => onToggle(habit.id)} size={36} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="habit-group">
            <span className="habit-icon">{habit.icon || '•'}</span>
            <span>{habit.group}</span>
            {streak > 1 && (
              <span className="streak-pill" title={`${streak} hari berturut-turut`}>
                🔥 {streak}
              </span>
            )}
          </div>
          <div className="habit-name">{habit.name}</div>
        </div>
        <div className="habit-pts">
          <div className="habit-pts-num">{earned > 0 ? earned : habit.points}</div>
          <div className="habit-pts-label">{earned > 0 ? `/ ${totalPts}` : 'poin'}</div>
        </div>
      </div>
      {totalAddons > 0 && (
        <div className="addon-row">
          <div className="addon-label">
            Penyempurna
            {doneAddons > 0 && <span style={{ color: 'var(--accent)' }}> · {doneAddons}/{totalAddons}</span>}
          </div>
          <div className="addon-chips">
            {(habit.addons || []).map(a => {
              const done = !!dayChecks?.[a.id];
              return (
                <button key={a.id}
                  className={`addon-chip ${done ? 'is-done' : ''}`}
                  onClick={() => onToggle(a.id)}
                >
                  <span className="addon-check">
                    {done && (
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    )}
                  </span>
                  <span>{a.name}</span>
                  <span className="addon-pts">+{a.points}</span>
                </button>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

function TodayScreen({ state, setState, date, setDate }) {
  const today = new Date();
  const dateKey = toDateKey(date);
  const dayChecks = state.checks[dateKey] || {};
  const streak = computeStreak(state.habits, state.checks, today, 0.5);

  const toggle = (id) => {
    setState(s => {
      const nextChecks = { ...s.checks };
      const day = { ...(nextChecks[dateKey] || {}) };
      day[id] = !day[id];
      // clean up false keys to keep storage compact
      if (!day[id]) delete day[id];
      if (Object.keys(day).length === 0) delete nextChecks[dateKey];
      else nextChecks[dateKey] = day;
      return { ...s, checks: nextChecks };
    });
  };

  return (
    <div className="screen-body">
      <DateNav date={date} onChange={setDate} />
      <HeroCard habits={state.habits} dayChecks={dayChecks} streak={streak} today={today} />

      <div style={{ marginTop: 18, marginBottom: 10, paddingLeft: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <h2 className="section-title">Habit Hari Ini</h2>
        <span style={{ fontSize: 12, color: 'var(--muted)' }}>{state.habits.length} habit</span>
      </div>

      <div className="habit-list">
        {state.habits.map(h => (
          <HabitCard
            key={h.id}
            habit={h}
            dayChecks={dayChecks}
            onToggle={toggle}
            streak={habitStreak(h, state.checks, today)}
          />
        ))}
      </div>

      <div className="footer-note">
        Tekan habit utama untuk centang.<br/>
        Penyempurna nilai kecil — selesaikan habit utama dulu hingga terbiasa.
      </div>
    </div>
  );
}

Object.assign(window, { TodayScreen, HabitCard, HeroCard, DateNav, ProgressRing, Checkbox });