'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '../ui/textarea';
import type { Transaction } from '@/lib/data';
import { format } from 'date-fns';
import { DialogFooter } from '../ui/dialog';

const formSchema = z.object({
  category: z.string().min(2, { message: 'Category must be at least 2 characters.' }),
  description: z.string().optional(),
  amount: z.coerce.number().min(0.01, { message: 'Amount must be greater than 0.' }),
  date: z.string().refine((val) => !isNaN(Date.parse(val)), { message: "Invalid date" }),
});

export type TransactionFormValues = z.infer<typeof formSchema>;

type AddIncomeFormProps = {
  income: Transaction | null;
  onSubmit: (data: TransactionFormValues) => void;
};

export function AddIncomeForm({ income, onSubmit }: AddIncomeFormProps) {
  const isEditMode = !!income;
  const form = useForm<TransactionFormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: isEditMode && income ? {
        ...income,
        date: format(new Date(income.date), 'yyyy-MM-dd'),
    } : {
      category: '',
      description: '',
      amount: 0,
      date: format(new Date(), 'yyyy-MM-dd'),
    },
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 py-4">
        <FormField
          control={form.control}
          name="category"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Category</FormLabel>
              <FormControl>
                <Input placeholder="e.g., Fabric Sale, Repair" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
         <FormField
          control={form.control}
          name="amount"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Amount</FormLabel>
              <FormControl>
                <Input type="number" placeholder="e.g., 500.00" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="date"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Date</FormLabel>
              <FormControl>
                <Input type="date" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="description"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Description</FormLabel>
              <FormControl>
                <Textarea placeholder="e.g., Sold leftover silk fabric" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <DialogFooter>
          <Button type="submit" className="w-full sm:w-auto">{isEditMode ? 'Save Changes' : 'Add Income'}</Button>
        </DialogFooter>
      </form>
    </Form>
  );
}