"use client";

import { useState } from "react";
import { Trash2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useBoard } from "@/components/board/board-context";
import type { TodoDTO } from "@/types/board";

const TITLE_MAX = 20;

export function TodoEditDialog({
  todo,
  groupId,
  categoryId,
  open,
  onOpenChange,
}: {
  todo: TodoDTO;
  groupId: string;
  categoryId: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const { editTodo, removeTodo } = useBoard();
  const [title, setTitle] = useState(todo.title);
  const [details, setDetails] = useState(todo.details ?? "");
  const [pending, setPending] = useState(false);

  function handleOpenChange(next: boolean) {
    if (next) {
      setTitle(todo.title);
      setDetails(todo.details ?? "");
    }
    onOpenChange(next);
  }

  async function handleSave() {
    const trimmed = title.trim();
    if (!trimmed) return;
    setPending(true);
    const ok = await editTodo(todo.id, groupId, categoryId, {
      title: trimmed,
      details: details.trim() || null,
    });
    setPending(false);
    if (ok) onOpenChange(false);
  }

  async function handleDelete() {
    setPending(true);
    await removeTodo(todo.id, groupId, categoryId);
    setPending(false);
    onOpenChange(false);
  }

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit to-do</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor={`edit-title-${todo.id}`}>Title</Label>
            <Input
              id={`edit-title-${todo.id}`}
              value={title}
              maxLength={TITLE_MAX}
              onChange={(e) => setTitle(e.target.value)}
            />
            <p className="text-right text-xs text-muted-foreground">
              {title.length}/{TITLE_MAX}
            </p>
          </div>
          <div className="space-y-2">
            <Label htmlFor={`edit-details-${todo.id}`}>Details</Label>
            <Textarea
              id={`edit-details-${todo.id}`}
              value={details}
              onChange={(e) => setDetails(e.target.value)}
              rows={4}
            />
          </div>
        </div>
        <DialogFooter className="sm:justify-between">
          <Button
            variant="ghost"
            className="text-destructive hover:text-destructive gap-2"
            onClick={handleDelete}
            disabled={pending}
          >
            <Trash2 className="size-4" />
            Delete
          </Button>
          <Button onClick={handleSave} disabled={pending || !title.trim()}>
            {pending ? "Saving…" : "Save"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}