"use client";

import { useEffect, useRef, useState } from "react";
import {
  CheckCircle2,
  Circle,
  ChevronRight,
  Pause,
  Play,
  RotateCcw,
  SkipForward,
  Target,
  X,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";
import type { Task } from "@/types";

/* ── Types ────────────────────────────────────────────────────────────────── */

interface FocusOverlayProps {
  tasks: Task[];
  onToggleTask: (id: string, status: string) => void;
  onClose: () => void;
}

type TimerMode = "work" | "break";

const WORK_SECS  = 25 * 60;
const BREAK_SECS =  5 * 60;

/* ── Helper ───────────────────────────────────────────────────────────────── */

function fmt(secs: number) {
  const m = Math.floor(secs / 60).toString().padStart(2, "0");
  const s = (secs % 60).toString().padStart(2, "0");
  return `${m}:${s}`;
}

/* ── Component ────────────────────────────────────────────────────────────── */

export function FocusOverlay({ tasks, onToggleTask, onClose }: FocusOverlayProps) {
  const [mode, setMode]           = useState<TimerMode>("work");
  const [secs, setSecs]           = useState(WORK_SECS);
  const [running, setRunning]     = useState(false);
  const [sessions, setSessions]   = useState(0);
  const [taskIdx, setTaskIdx]     = useState(0);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const activeTasks = tasks.filter((t) => t.status !== "done");
  const focusTask   = activeTasks[taskIdx] ?? null;

  /* Timer tick */
  useEffect(() => {
    if (!running) return;
    intervalRef.current = setInterval(() => {
      setSecs((s) => {
        if (s <= 1) {
          clearInterval(intervalRef.current!);
          setRunning(false);
          if (mode === "work") {
            setSessions((n) => n + 1);
            setMode("break");
            return BREAK_SECS;
          } else {
            setMode("work");
            return WORK_SECS;
          }
        }
        return s - 1;
      });
    }, 1000);
    return () => clearInterval(intervalRef.current!);
  }, [running, mode]);

  /* Update browser tab title */
  useEffect(() => {
    const title = `${fmt(secs)} · ${mode === "work" ? "Focus" : "Break"} — Mindavio`;
    document.title = title;
    return () => { document.title = "Mindavio"; };
  }, [secs, mode]);

  /* Escape key closes */
  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
      if (e.key === " " && e.target === document.body) { e.preventDefault(); setRunning((r) => !r); }
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  function resetTimer() {
    setRunning(false);
    setSecs(mode === "work" ? WORK_SECS : BREAK_SECS);
  }

  function skipSession() {
    setRunning(false);
    if (mode === "work") { setSessions((n) => n + 1); setMode("break"); setSecs(BREAK_SECS); }
    else { setMode("work"); setSecs(WORK_SECS); }
  }

  function nextTask() {
    if (activeTasks.length === 0) return;
    setTaskIdx((i) => (i + 1) % activeTasks.length);
  }

  /* Radial progress */
  const total    = mode === "work" ? WORK_SECS : BREAK_SECS;
  const progress = 1 - secs / total;
  const radius   = 90;
  const circ     = 2 * Math.PI * radius;
  const dash     = circ * progress;

  return (
    <div className="fixed inset-0 z-[9997] flex flex-col bg-[#070709]">

      {/* ── Top Bar ────────────────────────────────────────────────────── */}
      <div className="flex items-center justify-between border-b border-white/[0.04] px-6 py-4">
        <div className="flex items-center gap-2.5">
          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-500/10">
            <Target className="h-3.5 w-3.5 text-emerald-400" />
          </div>
          <span className="text-[13px] font-semibold text-white">Focus Mode</span>
        </div>
        <div className="flex items-center gap-3">
          {sessions > 0 && (
            <div className="flex items-center gap-1.5 rounded-full bg-white/[0.04] px-3 py-1">
              <Zap className="h-3 w-3 text-amber-400" />
              <span className="text-[11px] font-semibold text-white/60">{sessions} {sessions === 1 ? "Session" : "Sessions"}</span>
            </div>
          )}
          <button
            onClick={onClose}
            className="rounded-lg p-2 text-white/25 transition-colors hover:bg-white/[0.04] hover:text-white/50"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
      </div>

      {/* ── Main Content ───────────────────────────────────────────────── */}
      <div className="flex flex-1 flex-col items-center justify-center gap-10 px-6">

        {/* Mode badge */}
        <div className={cn(
          "rounded-full px-4 py-1.5 text-[11px] font-bold uppercase tracking-[0.15em] transition-all",
          mode === "work"
            ? "bg-emerald-500/10 text-emerald-400"
            : "bg-sky-500/10 text-sky-400"
        )}>
          {mode === "work" ? "Deep Work" : "Short Break"}
        </div>

        {/* Timer ring */}
        <div className="relative flex items-center justify-center">
          <svg
            width="220"
            height="220"
            className="-rotate-90"
            viewBox="0 0 220 220"
          >
            {/* Track */}
            <circle
              cx="110" cy="110" r={radius}
              fill="none"
              stroke="rgba(255,255,255,0.04)"
              strokeWidth="6"
            />
            {/* Progress */}
            <circle
              cx="110" cy="110" r={radius}
              fill="none"
              stroke={mode === "work" ? "#34d399" : "#38bdf8"}
              strokeWidth="6"
              strokeLinecap="round"
              strokeDasharray={`${dash} ${circ}`}
              className="transition-all duration-1000"
            />
          </svg>
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className="font-mono text-[52px] font-bold leading-none tracking-tight text-white">
              {fmt(secs)}
            </span>
            <span className="mt-1 text-[12px] text-white/30">
              {running ? "läuft…" : "pausiert"}
            </span>
          </div>
        </div>

        {/* Controls */}
        <div className="flex items-center gap-3">
          <button
            onClick={resetTimer}
            className="rounded-xl p-3 text-white/25 transition-all hover:bg-white/[0.05] hover:text-white/50"
            title="Reset"
          >
            <RotateCcw className="h-5 w-5" />
          </button>
          <button
            onClick={() => setRunning((r) => !r)}
            className={cn(
              "flex h-14 w-14 items-center justify-center rounded-2xl transition-all shadow-lg",
              running
                ? "bg-white/[0.08] text-white hover:bg-white/[0.12]"
                : mode === "work"
                  ? "bg-emerald-500 text-white shadow-emerald-500/30 hover:bg-emerald-400"
                  : "bg-sky-500 text-white shadow-sky-500/30 hover:bg-sky-400"
            )}
          >
            {running ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6 translate-x-0.5" />}
          </button>
          <button
            onClick={skipSession}
            className="rounded-xl p-3 text-white/25 transition-all hover:bg-white/[0.05] hover:text-white/50"
            title="Skip"
          >
            <SkipForward className="h-5 w-5" />
          </button>
        </div>

        {/* Current task */}
        <div className="w-full max-w-md">
          <p className="mb-2.5 text-center text-[10px] font-bold uppercase tracking-[0.16em] text-white/20">
            Aktueller Fokus-Task
          </p>
          {focusTask ? (
            <div className="overflow-hidden rounded-2xl border border-white/[0.06] bg-white/[0.02]">
              <div className="flex items-start gap-4 p-5">
                <button
                  onClick={() => onToggleTask(focusTask.id, focusTask.status)}
                  className="mt-0.5 shrink-0 text-white/25 transition-colors hover:text-white/60"
                >
                  {focusTask.status === "done"
                    ? <CheckCircle2 className="h-5 w-5 text-emerald-400" />
                    : <Circle       className="h-5 w-5" />
                  }
                </button>
                <div className="min-w-0 flex-1">
                  <p className={cn(
                    "text-[15px] font-semibold leading-snug text-white",
                    focusTask.status === "done" && "text-white/30 line-through"
                  )}>
                    {focusTask.title}
                  </p>
                  {focusTask.deadline && (
                    <p className="mt-1 text-[12px] text-white/30">
                      Fällig: {new Intl.DateTimeFormat("de-DE", { day: "numeric", month: "short" }).format(new Date(focusTask.deadline))}
                    </p>
                  )}
                </div>
              </div>
              {activeTasks.length > 1 && (
                <div className="border-t border-white/[0.04] px-5 py-2.5">
                  <button
                    onClick={nextTask}
                    className="flex w-full items-center justify-between text-[11px] text-white/25 transition-colors hover:text-white/50"
                  >
                    <span>Nächster Task</span>
                    <span className="flex items-center gap-1">
                      {activeTasks[(taskIdx + 1) % activeTasks.length]?.title?.slice(0, 28)}…
                      <ChevronRight className="h-3 w-3 shrink-0" />
                    </span>
                  </button>
                </div>
              )}
            </div>
          ) : (
            <div className="rounded-2xl border border-white/[0.04] bg-white/[0.01] px-6 py-8 text-center">
              <p className="text-[13px] text-white/25">Alle Tasks erledigt 🎉</p>
            </div>
          )}
        </div>

      </div>

      {/* ── Keyboard Hint ──────────────────────────────────────────────── */}
      <div className="flex items-center justify-center gap-6 border-t border-white/[0.03] px-6 py-3 text-[11px] text-white/15">
        <span><kbd className="font-mono">Space</kbd> pause / resume</span>
        <span><kbd className="font-mono">Esc</kbd> beenden</span>
      </div>

    </div>
  );
}