import { useState } from "react";
import { TimerReset } from "lucide-react";
import type { TimerState } from "../lib/types";
import { formatCountdown } from "../lib/format";

interface TimerPanelProps {
  timer: TimerState;
  onStart: (durationMs: number) => void;
  onStop: () => void;
}

export function TimerPanel({ timer, onStart, onStop }: TimerPanelProps) {
  const [hours, setHours] = useState("0");
  const [minutes, setMinutes] = useState("30");
  const [seconds, setSeconds] = useState("0");

  return (
    <div className="glass rounded-[32px] p-6">
      <div className="flex items-center gap-3">
        <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-accentSoft text-accent">
          <TimerReset className="h-6 w-6" />
        </div>
        <div>
          <div className="text-xs uppercase tracking-[0.2em] text-textMuted">Focus timer</div>
          <div className="mt-1 text-2xl font-semibold text-white">{formatCountdown(timer.remaining_ms)}</div>
        </div>
      </div>

      <div className="mt-6 grid grid-cols-3 gap-3">
        <input value={hours} onChange={(event) => setHours(event.target.value)} className="rounded-2xl border border-line/40 bg-panel/70 px-4 py-3 text-text outline-none" placeholder="Hours" />
        <input value={minutes} onChange={(event) => setMinutes(event.target.value)} className="rounded-2xl border border-line/40 bg-panel/70 px-4 py-3 text-text outline-none" placeholder="Minutes" />
        <input value={seconds} onChange={(event) => setSeconds(event.target.value)} className="rounded-2xl border border-line/40 bg-panel/70 px-4 py-3 text-text outline-none" placeholder="Seconds" />
      </div>

      <div className="mt-5 flex gap-3">
        <button
          type="button"
          onClick={() =>
            onStart(
              (Number(hours || 0) * 3600 + Number(minutes || 0) * 60 + Number(seconds || 0)) * 1000,
            )
          }
          className="rounded-2xl bg-accent px-5 py-3 font-semibold text-black"
        >
          Start
        </button>
        <button type="button" onClick={onStop} className="rounded-2xl border border-line/45 px-5 py-3 text-text">
          Stop
        </button>
      </div>
    </div>
  );
}