"use client";

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

interface TasksTodayProps {
  tasks: Task[];
  onToggle: (id: string, status: string) => void;
  onToggleFocus?: (task: Task) => void;
}

const PRIORITY_CONFIG: Record<string, { color: string; label: string }> = {
  urgent: { color: "#ef4444", label: "Dringend" },
  high: { color: "#f97316", label: "Hoch" },
  medium: { color: "#eab308", label: "Mittel" },
  low: { color: "#3b82f6", label: "Niedrig" },
};

export function TasksToday({ tasks, onToggle, onToggleFocus }: TasksTodayProps) {
  return (
    <div className="group/widget rounded-2xl border border-border/50 bg-card overflow-hidden transition-all duration-200 hover:border-indigo-500/20 hover:shadow-[0_0_30px_-10px_rgba(99,102,241,0.1)]">
      {/* Header */}
      <div className="flex items-center justify-between px-5 py-4">
        <div className="flex items-center gap-3">
          <div className="flex items-center justify-center w-8 h-8 rounded-xl bg-gradient-to-br from-indigo-500/20 to-indigo-600/10 ring-1 ring-indigo-500/10">
            <CheckSquare className="h-4 w-4 text-indigo-500" />
          </div>
          <div>
            <h2 className="text-sm font-semibold tracking-tight">Aufgaben</h2>
            <p className="text-[10px] text-muted-foreground">
              {tasks.length > 0 ? `${tasks.length} offen` : "Alles erledigt"}
            </p>
          </div>
        </div>
        <Link
          href="/tasks"
          className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-indigo-500 transition-colors"
        >
          Alle <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      {/* Content */}
      <div className="border-t border-border/50">
        {tasks.length === 0 ? (
          <div className="px-5 py-10 text-center">
            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500/10 to-purple-500/10 flex items-center justify-center mx-auto mb-3 ring-1 ring-indigo-500/5">
              <CheckCircle2 className="h-5 w-5 text-indigo-400" />
            </div>
            <p className="text-sm font-medium text-muted-foreground mb-1">Keine offenen Aufgaben</p>
            <Link
              href="/tasks"
              className="inline-flex items-center gap-1 text-xs text-indigo-500 hover:text-indigo-400 transition-colors"
            >
              <Plus className="h-3 w-3" />
              Task erstellen
            </Link>
          </div>
        ) : (
          <div className="py-1">
            {tasks.slice(0, 5).map((task) => {
              const isDone = task.status === "done";
              const prio = PRIORITY_CONFIG[task.priority];
              return (
                <div
                  key={task.id}
                  className="flex items-center gap-3 px-5 py-2.5 hover:bg-accent/30 transition-all duration-150 group/task"
                >
                  <button
                    onClick={() => onToggle(task.id, task.status)}
                    className="shrink-0 cursor-pointer transition-all duration-200 hover:scale-110"
                  >
                    {isDone ? (
                      <CheckCircle2 className="h-[18px] w-[18px] text-indigo-500" />
                    ) : (
                      <Circle className="h-[18px] w-[18px] text-muted-foreground/50 group-hover/task:text-muted-foreground transition-colors" />
                    )}
                  </button>
                  <span
                    className={cn(
                      "text-[13px] truncate flex-1 transition-all duration-200",
                      isDone && "line-through text-muted-foreground/60"
                    )}
                  >
                    {task.title}
                  </span>
                  {prio && task.priority !== "none" && (
                    <div className="flex items-center gap-1.5 shrink-0">
                      <span
                        className="w-1.5 h-1.5 rounded-full"
                        style={{ backgroundColor: prio.color }}
                      />
                    </div>
                  )}
                  {onToggleFocus && (
                    <button
                      onClick={() => onToggleFocus(task)}
                      className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {task.is_focus ? (
                        <PinOff className="h-4 w-4" />
                      ) : (
                        <Pin className="h-4 w-4" />
                      )}
                    </button>
                  )}
                </div>
              );
            })}
            {tasks.length > 5 && (
              <Link
                href="/tasks"
                className="flex items-center justify-center gap-1 py-2.5 text-[11px] text-muted-foreground hover:text-indigo-500 transition-colors border-t border-border/30"
              >
                +{tasks.length - 5} weitere
              </Link>
            )}
          </div>
        )}
      </div>
    </div>
  );
}