import { useEffect, useState } from 'react'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'

interface SessionTimerProps {
  sessionStartTime: string | null
  isActive: boolean
  onStart: () => void
  onEnd: () => void
  starting: boolean
  ending: boolean
}

function formatDuration(totalSeconds: number): string {
  const h = Math.floor(totalSeconds / 3600)
  const m = Math.floor((totalSeconds % 3600) / 60)
  const s = totalSeconds % 60
  return [h, m, s].map((n) => String(n).padStart(2, '0')).join(':')
}

export function SessionTimer({
  sessionStartTime,
  isActive,
  onStart,
  onEnd,
  starting,
  ending,
}: SessionTimerProps) {
  const [now, setNow] = useState(() => Date.now())

  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000)
    return () => clearInterval(id)
  }, [])

  const elapsed = sessionStartTime
    ? Math.max(0, Math.floor((now - new Date(sessionStartTime).getTime()) / 1000))
    : 0

  return (
    <Card>
      <CardHeader>
        <CardTitle>Session Timer</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="text-center">
          <p className="text-3xl font-mono font-bold tabular-nums text-ink">
            {isActive ? formatDuration(elapsed) : '—:—:—'}
          </p>
          <p className="mt-1 text-sm text-body">{isActive ? 'Session in progress' : 'No active session'}</p>
        </div>
        <div className="flex gap-2">
          {!isActive ? (
            <Button className="flex-1" onClick={onStart} loading={starting}>
              Start Session
            </Button>
          ) : (
            <Button className="flex-1" variant="destructive" onClick={onEnd} loading={ending}>
              End Session
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  )
}