"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Target, ChevronRight, Timer } from "lucide-react";
import { useFocusStore, fmtMs, fmtDelta, getWorkElapsed } from "@/stores/focus-store";
import { cn } from "@/lib/utils";

export function FocusBar() {
  const router = useRouter();
  const {
    focusActive,
    focusStartTime,
    workTimerRunning,
    workTimerStart,
    workTimerElapsed,
  } = useFocusStore();

  const [now, setNow] = useState(() => Date.now());

  /* Tick every second while focus mode is active */
  useEffect(() => {
    if (!focusActive) return;
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, [focusActive]);

  if (!focusActive) return null;

  const focusDuration  = focusStartTime ? now - focusStartTime : 0;
  const workElapsed    = getWorkElapsed({ workTimerRunning, workTimerStart, workTimerElapsed }, now);

  return (
    <div className="relative flex h-9 w-full shrink-0 items-center justify-between overflow-hidden border-b border-[#3b1e6e]/60 bg-[#1d0d3a] px-4">
      {/* Subtle glow line at top */}
      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#f3ebff]/65 to-transparent" />

      {/* Left: focus indicator + duration */}
      <div className="flex items-center gap-2.5">
        <div className="flex items-center gap-1.5">
          {/* Pulsing dot */}
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#efdfff] opacity-60" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-[#e6d4ff]" />
          </span>
          <span className="text-[11px] font-bold uppercase tracking-[0.12em] text-[#f1e6ff]">
            Focus Mode
          </span>
        </div>
        <span className="text-white/20">·</span>
        <span className="text-[11px] text-white/40">
          Im Fokus seit <span className="font-medium text-[#f0e2ff]/90">{fmtDelta(focusDuration)}</span>
        </span>
      </div>

      {/* Center: work timer (when running) */}
      {workElapsed > 0 && (
        <div className="absolute left-1/2 flex -translate-x-1/2 items-center gap-1.5">
          <Timer className={cn("h-3 w-3", workTimerRunning ? "text-emerald-400" : "text-white/30")} />
          <span className={cn(
            "font-mono text-[12px] font-semibold tabular-nums",
            workTimerRunning ? "text-emerald-300" : "text-white/40"
          )}>
            {fmtMs(workElapsed)}
          </span>
          {!workTimerRunning && (
            <span className="text-[9px] font-bold uppercase tracking-wider text-white/20">pausiert</span>
          )}
        </div>
      )}

      {/* Right: open center */}
      <div className="flex items-center gap-1">
        <button
          onClick={() => router.push("/focus")}
          className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium text-[#f0e2ff]/85 transition-all hover:bg-white/[0.08] hover:text-white"
        >
          <Target className="h-3 w-3" />
          Focus Center
          <ChevronRight className="h-3 w-3" />
        </button>
      </div>
    </div>
  );
}