import { CalendarDays, CheckCircle2, Circle, GripVertical, Pencil, Plus, Save, Trash2, X } from "lucide-react";
import { type FormEvent, type ReactNode, useState } from "react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
import { createTicketTodo, deleteTodo, updateTodo } from "../api";
import { currentDay } from "../format";
import { formatTodoPeriod, isTodoOverdue } from "../todos";
import type { TicketTodo, TodoPriority, TodoStatus } from "../types";

const priorityLabels: Record<TodoPriority, string> = {
  low: "Niedrig",
  medium: "Normal",
  high: "Hoch",
  urgent: "Dringend"
};

const priorityClasses: Record<TodoPriority, string> = {
  low: "border-sky-500/30 bg-sky-500/10 text-sky-300",
  medium: "border-muted-foreground/25 bg-muted/50 text-muted-foreground",
  high: "border-amber-500/30 bg-amber-500/10 text-amber-300",
  urgent: "border-red-500/30 bg-red-500/10 text-red-300"
};

function notifyTodosChanged() {
  window.dispatchEvent(new Event("tickettracker:todos-changed"));
}

type TodoPanelProps = {
  ticketId?: string;
  todos: TicketTodo[];
  onChanged: () => Promise<void> | void;
  showCreate?: boolean;
  showTicketMeta?: boolean;
  onNavigate?: (to: string) => void;
  reorderEnabled?: boolean;
  onReorder?: (draggedTodoId: string, targetTodoId: string) => void;
  toolbar?: ReactNode;
  compact?: boolean;
};

export function TodoPanel({ ticketId, todos, onChanged, showCreate = true, showTicketMeta = false, onNavigate, reorderEnabled = false, onReorder, toolbar, compact = false }: TodoPanelProps) {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [priority, setPriority] = useState<TodoPriority>("medium");
  const [startsOn, setStartsOn] = useState("");
  const [endsOn, setEndsOn] = useState("");
  const [saving, setSaving] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editTitle, setEditTitle] = useState("");
  const [editDescription, setEditDescription] = useState("");
  const [editPriority, setEditPriority] = useState<TodoPriority>("medium");
  const [editStartsOn, setEditStartsOn] = useState("");
  const [editEndsOn, setEditEndsOn] = useState("");
  const [busyId, setBusyId] = useState<string | null>(null);
  const [draggingId, setDraggingId] = useState<string | null>(null);

  async function submitTodo(event: FormEvent) {
    event.preventDefault();

    if (!ticketId) {
      return;
    }

    if (startsOn && endsOn && endsOn < startsOn) {
      toast.error("Zeitraum prüfen", {
        description: "Das Bis-Datum darf nicht vor dem Von-Datum liegen."
      });
      return;
    }

    setSaving(true);
    try {
      await createTicketTodo(ticketId, { title, description, priority, startsOn: startsOn || null, endsOn: endsOn || null });
      setTitle("");
      setDescription("");
      setPriority("medium");
      setStartsOn("");
      setEndsOn("");
      setCreateOpen(false);
      toast.success("ToDo angelegt");
      await onChanged();
      notifyTodosChanged();
    } catch (error) {
      toast.error("ToDo konnte nicht angelegt werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    } finally {
      setSaving(false);
    }
  }

  function startEdit(todo: TicketTodo) {
    setEditingId(todo.id);
    setEditTitle(todo.title);
    setEditDescription(todo.description);
    setEditPriority(todo.priority);
    setEditStartsOn(todo.starts_on ?? "");
    setEditEndsOn(todo.ends_on ?? "");
  }

  async function saveTodo(todo: TicketTodo, status: TodoStatus = todo.status) {
    if (editingId === todo.id && editStartsOn && editEndsOn && editEndsOn < editStartsOn) {
      toast.error("Zeitraum prüfen", {
        description: "Das Bis-Datum darf nicht vor dem Von-Datum liegen."
      });
      return;
    }

    setBusyId(todo.id);
    try {
      await updateTodo(todo.id, {
        title: editingId === todo.id ? editTitle : todo.title,
        description: editingId === todo.id ? editDescription : todo.description,
        priority: editingId === todo.id ? editPriority : todo.priority,
        status,
        startsOn: editingId === todo.id ? editStartsOn || null : todo.starts_on,
        endsOn: editingId === todo.id ? editEndsOn || null : todo.ends_on
      });
      setEditingId(null);
      await onChanged();
      notifyTodosChanged();
    } catch (error) {
      toast.error("ToDo konnte nicht gespeichert werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    } finally {
      setBusyId(null);
    }
  }

  async function removeTodo(todo: TicketTodo) {
    const confirmed = window.confirm(`ToDo "${todo.title}" wirklich löschen?`);

    if (!confirmed) {
      return;
    }

    setBusyId(todo.id);
    try {
      await deleteTodo(todo.id);
      toast.success("ToDo gelöscht");
      await onChanged();
      notifyTodosChanged();
    } catch (error) {
      toast.error("ToDo konnte nicht gelöscht werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    } finally {
      setBusyId(null);
    }
  }

  return (
    <div className={compact ? "space-y-2" : "space-y-3"}>
      {toolbar || (showCreate && ticketId) ? (
        <div className={cn("flex flex-wrap items-center gap-2", toolbar ? "justify-start" : "justify-end")}>
          <div className="min-w-0">{toolbar}</div>
          {showCreate && ticketId ? (
            <Dialog open={createOpen} onOpenChange={setCreateOpen}>
              <DialogTrigger asChild>
                <Button type="button" size="sm">
                  <Plus className="size-4" />
                  ToDo anlegen
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>ToDo anlegen</DialogTitle>
                  <DialogDescription>Neue Aufgabe zu diesem Ticket oder Projekt erfassen.</DialogDescription>
                </DialogHeader>
                <form className="space-y-4" onSubmit={submitTodo}>
                  <div className="space-y-2">
                    <label className="text-sm font-medium" htmlFor={`todo-title-${ticketId}`}>
                      Aufgabe
                    </label>
                    <Input id={`todo-title-${ticketId}`} value={title} onChange={(event) => setTitle(event.currentTarget.value)} autoFocus required />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium" htmlFor={`todo-priority-${ticketId}`}>
                      Priorität
                    </label>
                    <select
                      id={`todo-priority-${ticketId}`}
                      className="h-9 w-full rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
                      value={priority}
                      onChange={(event) => setPriority(event.currentTarget.value as TodoPriority)}
                    >
                      {Object.entries(priorityLabels).map(([value, label]) => (
                        <option key={value} value={value}>
                          {label}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="space-y-2">
                      <label className="text-sm font-medium" htmlFor={`todo-starts-on-${ticketId}`}>
                        Umsetzung von
                      </label>
                      <div className="flex gap-2">
                        <Input id={`todo-starts-on-${ticketId}`} type="date" value={startsOn} onChange={(event) => setStartsOn(event.currentTarget.value)} />
                        {startsOn ? (
                          <Button type="button" size="icon" variant="ghost" className="shrink-0" onClick={() => setStartsOn("")} aria-label="Von-Datum entfernen">
                            <X className="size-4" />
                          </Button>
                        ) : null}
                      </div>
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-medium" htmlFor={`todo-ends-on-${ticketId}`}>
                        Umsetzung bis
                      </label>
                      <div className="flex gap-2">
                        <Input id={`todo-ends-on-${ticketId}`} type="date" value={endsOn} onChange={(event) => setEndsOn(event.currentTarget.value)} />
                        {endsOn ? (
                          <Button type="button" size="icon" variant="ghost" className="shrink-0" onClick={() => setEndsOn("")} aria-label="Bis-Datum entfernen">
                            <X className="size-4" />
                          </Button>
                        ) : null}
                      </div>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium" htmlFor={`todo-description-${ticketId}`}>
                      Details
                    </label>
                    <Textarea
                      id={`todo-description-${ticketId}`}
                      className="min-h-24"
                      value={description}
                      onChange={(event) => setDescription(event.currentTarget.value)}
                    />
                  </div>
                  <div className="flex justify-end">
                    <Button type="submit" disabled={saving}>
                      <Plus className="size-4" />
                      {saving ? "Speichert..." : "Anlegen"}
                    </Button>
                  </div>
                </form>
              </DialogContent>
            </Dialog>
          ) : null}
        </div>
      ) : null}

      <div className={compact ? "space-y-1.5" : "space-y-2"}>
        {todos.map((todo) => {
          const isEditing = editingId === todo.id;
          const periodLabel = formatTodoPeriod(todo);
          const overdue = isTodoOverdue(todo, currentDay());

          return (
            <div
              key={todo.id}
              className={cn(
                "rounded-md border bg-card/50 transition-colors",
                compact ? "p-2" : "p-3",
                overdue && "border-red-500/50 bg-red-500/10",
                todo.status === "done" && "opacity-70",
                reorderEnabled && draggingId === todo.id && "border-primary/50 bg-primary/5"
              )}
              onDragOver={
                reorderEnabled
                  ? (event) => {
                      event.preventDefault();
                    }
                  : undefined
              }
              onDrop={
                reorderEnabled
                  ? (event) => {
                      event.preventDefault();
                      const draggedTodoId = event.dataTransfer.getData("text/todo-id") || draggingId;

                      if (draggedTodoId && draggedTodoId !== todo.id) {
                        onReorder?.(draggedTodoId, todo.id);
                      }

                      setDraggingId(null);
                    }
                  : undefined
              }
            >
              {showTicketMeta ? (
                <div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                  <button type="button" className="font-medium text-foreground hover:underline" onClick={() => onNavigate?.(`/tickets/${todo.ticket_id}`)}>
                    {todo.ticket_number}
                  </button>
                  {todo.project_id ? <Badge variant="outline">Projekt</Badge> : null}
                  {todo.organization_name ? <span>{todo.organization_name}</span> : null}
                </div>
              ) : null}

              {isEditing ? (
                <div className="space-y-2">
                  <Input value={editTitle} onChange={(event) => setEditTitle(event.currentTarget.value)} />
                  <Textarea className="min-h-16" value={editDescription} onChange={(event) => setEditDescription(event.currentTarget.value)} />
                  <div className="grid gap-2 sm:grid-cols-2">
                    <div className="flex gap-2">
                      <Input type="date" value={editStartsOn} onChange={(event) => setEditStartsOn(event.currentTarget.value)} />
                      {editStartsOn ? (
                        <Button type="button" size="icon" variant="ghost" className="shrink-0" onClick={() => setEditStartsOn("")} aria-label="Von-Datum entfernen">
                          <X className="size-4" />
                        </Button>
                      ) : null}
                    </div>
                    <div className="flex gap-2">
                      <Input type="date" value={editEndsOn} onChange={(event) => setEditEndsOn(event.currentTarget.value)} />
                      {editEndsOn ? (
                        <Button type="button" size="icon" variant="ghost" className="shrink-0" onClick={() => setEditEndsOn("")} aria-label="Bis-Datum entfernen">
                          <X className="size-4" />
                        </Button>
                      ) : null}
                    </div>
                  </div>
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <select
                      className="h-8 rounded-lg border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
                      value={editPriority}
                      onChange={(event) => setEditPriority(event.currentTarget.value as TodoPriority)}
                    >
                      {Object.entries(priorityLabels).map(([value, label]) => (
                        <option key={value} value={value}>
                          {label}
                        </option>
                      ))}
                    </select>
                    <div className="flex gap-1">
                      <Button type="button" size="sm" variant="ghost" onClick={() => setEditingId(null)}>
                        Abbrechen
                      </Button>
                      <Button type="button" size="sm" disabled={busyId === todo.id} onClick={() => void saveTodo(todo)}>
                        <Save className="size-4" />
                        Speichern
                      </Button>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                  <div className="flex min-w-0 flex-1 items-start gap-2">
                    {reorderEnabled ? (
                      <button
                        type="button"
                        className="mt-0.5 flex size-6 shrink-0 cursor-grab items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground active:cursor-grabbing"
                        aria-label="ToDo verschieben"
                        draggable
                        onDragStart={(event) => {
                          event.dataTransfer.effectAllowed = "move";
                          event.dataTransfer.setData("text/todo-id", todo.id);
                          setDraggingId(todo.id);
                        }}
                        onDragEnd={() => setDraggingId(null)}
                      >
                        <GripVertical className="size-4" />
                      </button>
                    ) : null}
                    <button
                      type="button"
                      className="flex min-w-0 flex-1 items-start gap-2 text-left"
                      disabled={busyId === todo.id}
                      onClick={() => void saveTodo(todo, todo.status === "done" ? "open" : "done")}
                    >
                      {todo.status === "done" ? <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-emerald-400" /> : <Circle className="mt-0.5 size-4 shrink-0 text-muted-foreground" />}
                      <span className="min-w-0">
                        <span className={cn("block break-words text-sm font-medium", todo.status === "done" && "line-through")}>{todo.title}</span>
                        {periodLabel ? (
                          <span className={cn("mt-1 flex items-center gap-1 text-xs", overdue ? "text-red-300" : "text-muted-foreground")}>
                            <CalendarDays className="size-3.5" />
                            {periodLabel}
                          </span>
                        ) : null}
                        {todo.description ? <span className="mt-1 block whitespace-pre-wrap break-words text-xs text-muted-foreground">{todo.description}</span> : null}
                      </span>
                    </button>
                  </div>
                  <div className="flex shrink-0 items-center gap-1">
                    {overdue ? <Badge variant="destructive">überfällig</Badge> : null}
                    <span className={cn("rounded-full border px-2 py-0.5 text-xs font-medium", priorityClasses[todo.priority])}>{priorityLabels[todo.priority]}</span>
                    <Button type="button" size="icon" variant="ghost" className="size-8" onClick={() => startEdit(todo)}>
                      <Pencil className="size-4" />
                    </Button>
                    <Button type="button" size="icon" variant="ghost" className="size-8 text-destructive hover:text-destructive" onClick={() => void removeTodo(todo)}>
                      <Trash2 className="size-4" />
                    </Button>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {todos.length === 0 ? <p className={cn("rounded-md border bg-muted/20 text-center text-sm text-muted-foreground", compact ? "p-3" : "p-4")}>Keine ToDos vorhanden.</p> : null}
    </div>
  );
}