import { useEffect, useState } from "react";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { CopyButton } from "@/components/elements/CopyButton";
import { TagPicker } from "@/components/elements/TagPicker";
import { DatePicker } from "@/components/elements/DatePicker";
import { toast } from "sonner";
import { Flag, Loader2, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { useTodoData } from "@/context/TodoDataContext";
import { useTags, useTagMutations, useTodoTags } from "@/hooks/useTags";
import { PRIORITY_LABELS, dueLabel } from "@/lib/todos";
import type { TodoDto } from "@/lib/api";

interface Props {
  todo: TodoDto | null;
  onClose: () => void;
}

const NO_PRIORITY = "none";

export function TodoDetailSheet({ todo, onClose }: Props) {
  const { lists, updateTodo, deleteTodo, toggleTodo } = useTodoData();
  const { data: allTags = [] } = useTags();
  const { create: createTag } = useTagMutations();
  const { data: todoTags = [], setTags } = useTodoTags(todo?.id);
  const [title, setTitle] = useState("");
  const [notes, setNotes] = useState("");
  const [dueDate, setDueDate] = useState("");
  const [priority, setPriority] = useState<string>(NO_PRIORITY);
  const [flagged, setFlagged] = useState(false);
  const [listId, setListId] = useState("");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!todo) return;
    setTitle(todo.title);
    setNotes(todo.notes ?? "");
    setDueDate(todo.dueDate ?? "");
    setPriority(todo.priority ?? NO_PRIORITY);
    setFlagged(todo.flagged);
    setListId(todo.listId ?? "");
  }, [todo]);

  if (!todo) return null;

  const save = async (updates: Partial<TodoDto>) => {
    setSaving(true);
    try {
      await updateTodo(todo.id, updates as never);
    } catch {
      toast.error("Couldn't save that change");
    } finally {
      setSaving(false);
    }
  };

  const commitTitle = () => {
    const trimmed = title.trim();
    if (!trimmed) { setTitle(todo.title); return; }
    if (trimmed !== todo.title) void save({ title: trimmed });
  };

  const commitNotes = () => {
    const next = notes.trim() || null;
    if (next !== (todo.notes ?? null)) void save({ notes: next as never });
  };

  return (
    <Sheet open={!!todo} onOpenChange={(open) => !open && onClose()}>
      <SheetContent className="w-full sm:max-w-md overflow-y-auto">
        <SheetHeader>
          <SheetTitle className="flex items-center gap-2">
            Todo
            {todo.source !== "manual" && (
              <Badge variant="outline" className="text-[10px] font-normal">via Shortcuts</Badge>
            )}
            {saving && <Loader2 size={13} className="animate-spin text-muted-foreground" />}
          </SheetTitle>
        </SheetHeader>

        <div className="space-y-5 py-4">
          <div className="flex items-start gap-2">
            <button
              type="button"
              aria-label={todo.completed ? "Mark as not done" : "Mark as done"}
              onClick={() => void toggleTodo(todo).catch(() => toast.error("Couldn't update that"))}
              className={cn(
                "mt-1 h-5 w-5 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors",
                todo.completed ? "bg-primary border-primary" : "border-muted-foreground/40 hover:border-primary"
              )}
            >
              {todo.completed && <span className="h-2 w-2 rounded-full bg-primary-foreground" />}
            </button>
            <div className="flex-1 min-w-0">
              <Textarea
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                onBlur={commitTitle}
                rows={1}
                className={cn("min-h-0 resize-none text-base font-medium", todo.completed && "line-through text-muted-foreground")}
              />
              {todo.completed && todo.completedAt && (
                <p className="text-xs text-muted-foreground mt-1">Completed {dueLabel(todo.completedAt)}</p>
              )}
            </div>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Notes</Label>
            <Textarea
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              onBlur={commitNotes}
              placeholder="Add notes…"
              rows={3}
              className="text-sm"
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div className="space-y-1.5">
              <Label className="text-xs text-muted-foreground">Due date</Label>
              <DatePicker
                value={dueDate || null}
                onChange={(d) => { setDueDate(d ?? ""); void save({ dueDate: d as never }); }}
                clearable
              />
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs text-muted-foreground">Priority</Label>
              <Select
                value={priority}
                onValueChange={(v) => { setPriority(v); void save({ priority: (v === NO_PRIORITY ? null : v) as never }); }}
              >
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value={NO_PRIORITY}>None</SelectItem>
                  {Object.entries(PRIORITY_LABELS).map(([value, label]) => (
                    <SelectItem key={value} value={value}>{label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">List</Label>
            <Select
              value={listId}
              onValueChange={(v) => { setListId(v); void save({ listId: v as never }); }}
            >
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                {lists.map((l) => (
                  <SelectItem key={l.id} value={l.id}>{l.name}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Tags</Label>
            <TagPicker
              tags={allTags}
              selectedIds={todoTags.map((t) => t.id)}
              onChange={(ids) => setTags.mutate(ids)}
              onCreate={(name) => createTag.mutateAsync({ name }).then((t) => t.id)}
              disabled={setTags.isPending}
            />
          </div>

          <button
            type="button"
            onClick={() => { setFlagged(!flagged); void save({ flagged: !flagged as never }); }}
            className={cn(
              "flex items-center gap-2 text-sm rounded-md border px-3 py-2 transition-colors",
              flagged ? "border-chart-orange/40 bg-chart-orange/10 text-chart-orange" : "border-border text-muted-foreground hover:text-foreground"
            )}
          >
            <Flag size={14} strokeWidth={1.5} fill={flagged ? "currentColor" : "none"} />
            {flagged ? "Flagged" : "Flag this todo"}
          </button>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">API URL</Label>
            <div className="flex items-center gap-2">
              <code className="flex-1 text-xs bg-muted rounded-md px-3 py-2 overflow-x-auto whitespace-nowrap">
                {todo.url}
              </code>
              <CopyButton value={todo.url} label="Copy API URL" />
            </div>
          </div>

          <Button
            variant="outline"
            className="w-full gap-2 text-destructive hover:text-destructive"
            onClick={() => {
              void deleteTodo(todo.id).catch(() => toast.error("Couldn't delete that"));
              onClose();
            }}
          >
            <Trash2 size={14} strokeWidth={1.5} /> Delete todo
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  );
}