src/components/appraisal/AssessmentAreaDialog.tsx

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

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { 
  AssessmentArea,
  AssessmentAreaCreateRequest,
  AssessmentAreaUpdateRequest 
} from "@/types";
import CustomDialog from "@/components/CustomDialog";

// Define form schema
const formSchema = z.object({
  title: z.string().min(2, { message: "Title must be at least 2 characters." }),
});

interface AssessmentAreaDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSubmit: (data: AssessmentAreaCreateRequest | AssessmentAreaUpdateRequest) => void;
  areaToEdit?: AssessmentArea;
  isLoading?: boolean;
}

export function AssessmentAreaDialog({
  open,
  onOpenChange,
  onSubmit,
  areaToEdit,
  isLoading = false,
}: AssessmentAreaDialogProps) {
  const [error, setError] = useState<string | null>(null);

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: areaToEdit?.title || "",
    },
  });

  function handleSubmit(values: z.infer<typeof formSchema>) {
    setError(null);
    
    if (areaToEdit) {
      onSubmit({
        areaId: areaToEdit.areaId,
        title: values.title,
      });
    } else {
      onSubmit({
        title: values.title,
      });
    }
  }

  // Handle dialog closing
  const handleClose = () => {
    onOpenChange(false);
  };

  return (
    <CustomDialog
      isOpen={open}
      onClose={handleClose}
      title={areaToEdit ? "Edit Assessment Area" : "Create Assessment Area"}
      description={areaToEdit 
        ? "Edit the details of this assessment area." 
        : "Add a new assessment area to the system."
      }
      allowClose={!isLoading}
      isPending={isLoading}
    >
      <Form {...form}>
        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="title"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Title</FormLabel>
                <FormControl>
                  <Input placeholder="Goals & Objectives" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          {error && <p className="text-sm font-medium text-destructive">{error}</p>}
          
          <div className="flex justify-end space-x-2 pt-2">
            <Button 
              type="button" 
              variant="outline" 
              onClick={handleClose}
              disabled={isLoading}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={isLoading}>
              {isLoading ? "Saving..." : areaToEdit ? "Update" : "Create"}
            </Button>
          </div>
        </form>
      </Form>
    </CustomDialog>
  );
}