"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormFieldGroup,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

const formSchema = z.object({
  title: z.string().trim().min(1),
  content: z.string().trim().min(1),
});

interface AddNoteDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSubmit: (data: { title: string; content: string }) => void;
  labels: {
    title: string;
    noteTitleLabel: string;
    noteTitlePlaceholder: string;
    noteContentLabel: string;
    noteContentPlaceholder: string;
    saveButton: string;
    cancelButton: string;
  };
}

export function AddNoteDialog({
  open,
  onOpenChange,
  onSubmit,
  labels,
}: AddNoteDialogProps) {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      content: "",
    },
  });

  const handleOpenChange = (nextOpen: boolean) => {
    if (!nextOpen) {
      form.reset();
    }

    onOpenChange(nextOpen);
  };

  const handleSubmit = (values: z.infer<typeof formSchema>) => {
    onSubmit(values);
    form.reset();
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="sm:max-w-[656px]">
        <DialogHeader className="border-border">
          <DialogTitle className="text-lg font-semibold">
            {labels.title}
          </DialogTitle>
        </DialogHeader>

        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(handleSubmit)}
            className="flex min-h-0 flex-1 flex-col"
          >
            <DialogBody className="space-y-6">
              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormFieldGroup
                    label={labels.noteTitleLabel}
                    required
                  >
                    <FormControl>
                      <Input
                        id="note-title"
                        placeholder={labels.noteTitlePlaceholder}
                        className="h-10"
                        {...field}
                      />
                    </FormControl>
                  </FormFieldGroup>
                )}
              />

              <FormField
                control={form.control}
                name="content"
                render={({ field }) => (
                  <FormFieldGroup
                    label={labels.noteContentLabel}
                    required
                  >
                    <FormControl>
                      <Textarea
                        id="note-content"
                        placeholder={labels.noteContentPlaceholder}
                        className="min-h-[96px] resize-y"
                        {...field}
                      />
                    </FormControl>
                  </FormFieldGroup>
                )}
              />
            </DialogBody>

            <DialogFooter className="justify-start">
              <div className="flex gap-4 w-full justify-start">
                <Button
                  type="submit"
                  className="bg-primary hover:bg-primary/90 h-10"
                >
                  {labels.saveButton}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => handleOpenChange(false)}
                  className="h-10"
                >
                  {labels.cancelButton}
                </Button>
              </div>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}