"use client";

import Link from "next/link";
import { CheckCircle2, Circle, Flame, Pin, PinOff, Target, ArrowRight } from "lucide-react";
import { cn, isTaskDeadlineDueToday, isTaskDeadlineOverdue } from "@/lib/utils";
import type { Task } from "@/types";

interface FocusModeCardProps {
  tasks: Task[];
  autoGenerated: boolean;
  focusActive: boolean;
  reviewQueueCount: number;
  approvalQueueCount: number;
  overdueCount: number;
  onFocusAction: () => void;
  onToggleTask: (id: string, status: string) => void;
  onToggleFocus: (task: Task) => void;
}

const PRIORITY_COLOR: Record<string, string> = {
  urgent: "#ef4444",
  high:   "#f97316",
  medium: "#eab308",
  low:    "#3b82f6",
};

function getDueLabel(deadline: string | null) {
  if (!deadline) return null;
  const date = new Date(deadline);
  if (isTaskDeadlineOverdue(deadline)) return "Überfällig";
  if (isTaskDeadlineDueToday(deadline)) return "Heute";
  return new Intl.DateTimeFormat("de-DE", { day: "numeric", month: "short" }).format(date);
}

export function FocusModeCard(props: FocusModeCardProps) {
  const {
    tasks,
    autoGenerated,
    focusActive,
    reviewQueueCount,
    approvalQueueCount,
    overdueCount,
    onFocusAction,
    onToggleTask,
    onToggleFocus,
  } = props;

  return (
    <div className="overflow-hidden rounded-2xl border border-white/[0.06] bg-[#0e0e12]">

      {/* ── Header ──────────────────────────────────────────────────── */}
      <div className="flex items-center justify-between px-5 py-4">
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-emerald-500/10 ring-1 ring-emerald-500/10">
            <Target className="h-3.5 w-3.5 text-emerald-400" />
          </div>
          <div>
            <h2 className="text-[13px] font-semibold tracking-tight text-white">Fokus</h2>
            <p className="text-[11px] text-white/30">
              {autoGenerated ? "Automatisch priorisiert" : "Manuell gepinnt"}
            </p>
          </div>
        </div>
        <Link
          href="/tasks"
          className="flex items-center gap-1 text-[11px] font-medium text-white/25 transition-colors hover:text-emerald-400"
        >
          Tasks öffnen <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      <div className="px-5 pb-4">
        <div className="rounded-2xl border border-violet-400/15 bg-gradient-to-r from-violet-500/[0.12] via-[#d9c8ff]/[0.10] to-indigo-500/[0.08] p-4">
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div className="max-w-[420px]">
              <p className="text-[14px] font-semibold tracking-tight text-white">
                Fokus ohne Ablenkung
              </p>
              <p className="mt-1 text-[12px] leading-relaxed text-white/45">
                Oeffne dein Focus Center als eigene Seite mit Arbeitszeit-Timer, Kerninfos, Terminen und den wichtigsten Tasks in einer ruhigen Ansicht.
              </p>
            </div>

            <button
              onClick={onFocusAction}
              className={`inline-flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-[13px] font-semibold transition-all ${
                focusActive
                  ? "bg-[#eadcff] text-violet-950 shadow-[0_10px_30px_rgba(228,209,255,0.22)] hover:bg-[#f0e5ff]"
                  : "bg-violet-500 text-white shadow-[0_12px_34px_rgba(139,92,246,0.28)] hover:bg-violet-400"
              }`}
            >
              <Target className="h-4 w-4" />
              {focusActive ? "Focus Center öffnen" : "Focus Mode starten"}
            </button>
          </div>
        </div>
      </div>

      {/* ── Tasks ────────────────────────────────────────────────────── */}
      <div className="border-t border-white/[0.04]">
        {tasks.length === 0 ? (
          <div className="px-6 py-8 text-center">
            <p className="text-[13px] text-white/25">Keine Fokus-Tasks. Wähle Tasks aus dem Board aus.</p>
          </div>
        ) : (
          <div className="divide-y divide-white/[0.04]">
            {tasks.slice(0, 3).map((task, index) => {
              const isDone    = task.status === "done";
              const dueLabel  = getDueLabel(task.deadline);
              const isOverdue = task.deadline && isTaskDeadlineOverdue(task.deadline) && !isDone;
              const prioColor = PRIORITY_COLOR[task.priority];

              return (
                <div
                  key={task.id}
                  className="group flex items-center gap-4 px-5 py-3.5 transition-colors hover:bg-white/[0.025]"
                >
                  {/* Rank */}
                  <span className="w-4 text-center text-[11px] font-bold tabular-nums text-white/15">
                    {index + 1}
                  </span>

                  {/* Checkbox */}
                  <button
                    onClick={() => onToggleTask(task.id, task.status)}
                    className="shrink-0 cursor-pointer text-white/25 transition-colors hover:text-white/60"
                  >
                    {isDone
                      ? <CheckCircle2 className="h-[18px] w-[18px] text-emerald-400" />
                      : <Circle       className="h-[18px] w-[18px]" />
                    }
                  </button>

                  {/* Content */}
                  <div className="min-w-0 flex-1">
                    <p className={cn(
                      "truncate text-[13px] font-medium",
                      isDone ? "text-white/25 line-through" : "text-white/80"
                    )}>
                      {task.title}
                    </p>
                    <div className="mt-0.5 flex items-center gap-2">
                      {prioColor && task.priority !== "none" && (
                        <span className="h-1.5 w-1.5 shrink-0 rounded-full" style={{ backgroundColor: prioColor }} />
                      )}
                      {dueLabel && (
                        <span className={cn(
                          "text-[10px]",
                          isOverdue ? "font-medium text-red-400" : "text-white/25"
                        )}>
                          {dueLabel}
                        </span>
                      )}
                    </div>
                  </div>

                  {/* Pin toggle */}
                  <button
                    onClick={() => onToggleFocus(task)}
                    className="shrink-0 rounded-md p-1 text-white/20 opacity-0 transition-all hover:bg-white/[0.06] hover:text-white/50 group-hover:opacity-100"
                  >
                    {task.is_focus
                      ? <PinOff className="h-3.5 w-3.5" />
                      : <Pin    className="h-3.5 w-3.5" />
                    }
                  </button>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* ── Queue Stats ──────────────────────────────────────────────── */}
      {(reviewQueueCount > 0 || approvalQueueCount > 0 || overdueCount > 0) && (
        <div className="flex items-center gap-4 border-t border-white/[0.04] px-5 py-3">
          {reviewQueueCount > 0 && (
            <span className="text-[11px] text-white/30">
              <span className="font-semibold text-white/70">{reviewQueueCount}</span> Reviews
            </span>
          )}
          {approvalQueueCount > 0 && (
            <span className="text-[11px] text-white/30">
              <span className="font-semibold text-white/70">{approvalQueueCount}</span> Approvals
            </span>
          )}
          {overdueCount > 0 && (
            <span className="flex items-center gap-1 text-[11px] font-medium text-red-400/80">
              <Flame className="h-3 w-3" />
              <span>{overdueCount}</span> überfällig
            </span>
          )}
        </div>
      )}
    </div>
  );
}