Habit Streak

'use client'

import { useState } from 'react'
import './habit-streak.css'

export interface HabitStreakProps {
  name: string
  defaultDone?: boolean[]
  todayIndex: number
  carried?: number
  best?: number
  fill?: 'dark' | 'light'
  className?: string
}

const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

/** Weekly habit checks with a running streak. */
export function HabitStreak({ name, defaultDone = [true, true, false, true, false, false, false], todayIndex, carried = 6, best = 14, fill = 'dark', className }: HabitStreakProps) {
  const [done, setDone] = useState(defaultDone)
  let streak = 0
  for (let i = done[todayIndex] ? todayIndex : todayIndex - 1; i >= 0 && done[i]; i--) streak++
  const allWeek = done.slice(0, done[todayIndex] ? todayIndex + 1 : todayIndex).every(Boolean)
  if (allWeek) streak += carried
  const count = done.slice(0, todayIndex + 1).filter(Boolean).length
  return (
    <div className={['sd-hbt', className].filter(Boolean).join(' ')} data-fill={fill}>
      <div className="sd-hbt__top">
        <div><div className="sd-hbt__n">{name}</div><div className="sd-hbt__sub">{count} of {todayIndex + 1} days this week</div></div>
        <div className="sd-hbt__streak" aria-live="polite"><b key={streak}>{streak}</b><span>day streak · best {Math.max(best, streak)}</span></div>
      </div>
      <div className="sd-hbt__days">
        {DAYS.map((d, i) => (
          <label key={d} className="sd-hbt__d" data-today={i === todayIndex || undefined}>
            <span className="sd-hbt__box">
              <input type="checkbox" checked={done[i]} disabled={i > todayIndex} aria-label={`${d}${i === todayIndex ? ' (today)' : ''}`} onChange={() => setDone(done.map((x, j) => (j === i ? !x : x)))} />
              {done[i] && <svg viewBox="0 0 16 16" aria-hidden><path d="m3.5 8.5 3 3 6-7" /></svg>}
            </span>
            {d[0]}
          </label>
        ))}
      </div>
      <div className="sd-hbt__foot">{done[todayIndex] ? 'Done for today.' : 'Not done yet today.'}</div>
    </div>
  )
}

.sd-hbt { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-hbt[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-hbt button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-hbt :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-hbt .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-hbt { width: min(100%, 320px); padding: 16px; border-radius: 22px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }
.sd-hbt__top { display: flex; justify-content: space-between; align-items: flex-start; }
.sd-hbt__n { font-size: 15px; font-weight: 650; }
.sd-hbt__sub { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.sd-hbt__streak { text-align: right; }
.sd-hbt__streak b { display: inline-block; font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1; animation: sd-hbt-roll 320ms cubic-bezier(0.2, 1.3, 0.3, 1); }
@keyframes sd-hbt-roll { from { transform: translateY(40%); opacity: 0; } }
.sd-hbt__streak span { display: block; font-size: 11.5px; color: var(--mute); }
.sd-hbt__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.sd-hbt__d { display: grid; justify-items: center; gap: 6px; font-size: 11px; color: var(--mute); }
.sd-hbt__d[data-today] { color: var(--fg); font-weight: 650; }
.sd-hbt__box { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 38px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color 200ms, box-shadow 200ms, transform 120ms; cursor: pointer; }
.sd-hbt__box:active { transform: scale(0.9); }
.sd-hbt__box input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sd-hbt__box input:disabled { cursor: not-allowed; }
.sd-hbt__box:has(input:checked) { background: var(--strong); box-shadow: none; color: var(--on); }
.sd-hbt__box:has(input:disabled) { opacity: 0.35; }
.sd-hbt__box:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-hbt__d[data-today] .sd-hbt__box:not(:has(input:checked)) { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sd-hbt__box svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.sd-hbt__box svg path { stroke-dasharray: 16; animation: sd-hbt-draw 300ms ease forwards; }
@keyframes sd-hbt-draw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
.sd-hbt__foot { margin-top: 14px; font-size: 12.5px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .sd-hbt *, .sd-hbt *::before, .sd-hbt *::after { animation: none !important; transition: none !important; } }