'use client';

import { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useTransactions } from '@/lib/hooks/useTransactions';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import { Loader2 } from 'lucide-react';

const transactionSchema = z.object({
  date: z.string().min(1, 'Date is required'),
  type: z.string().min(1, 'Type is required'),
  category: z.string().min(1, 'Category is required'),
  partyName: z.string().min(1, 'Party name is required'),
  fromAccount: z.string().optional(),
  toAccount: z.string().optional(),
  debit: z.string().optional(),
  credit: z.string().optional(),
  remarks: z.string().optional(),
  isCollection: z.boolean().default(false),
});

type TransactionFormValues = z.infer<typeof transactionSchema>;

interface TransactionFormProps {
  onSuccess?: () => void;
}

export function TransactionForm({ onSuccess }: TransactionFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { saveTransaction } = useTransactions();
  const { user } = useAuth();

  const form = useForm<TransactionFormValues>({
    resolver: zodResolver(transactionSchema),
    defaultValues: {
      date: new Date().toISOString().split('T')[0],
      type: '',
      category: '',
      partyName: '',
      fromAccount: '',
      toAccount: '',
      debit: '',
      credit: '',
      remarks: '',
      isCollection: false,
    },
  });

  const watchType = form.watch('type');
  const watchCategory = form.watch('category');
  const isCollection = watchType === 'Collection' && watchCategory === 'Mac_Collection';

  useEffect(() => {
    if (isCollection) {
      form.setValue('toAccount', 'Receivable');
    }
  }, [isCollection, form]);

  const onSubmit = async (data: TransactionFormValues) => {
    setIsSubmitting(true);
    try {
      await saveTransaction({
        data: [
          user?.employeeId || 'System',
          data.date,
          '', // voucherNo will be generated
          data.type,
          data.category,
          data.partyName,
          data.fromAccount || '',
          data.toAccount || '',
          data.debit || '0',
          data.credit || '0',
          data.remarks || '',
        ].join(','),
        autoSale: isCollection ? [
          data.date,
          '', // auto-generated voucher
          'Internet Sale',
          'Mac_Sale',
          data.partyName,
          data.fromAccount || '',
          'Receivable',
          data.credit || '0',
          '0',
          `Auto Internet Sale - ${data.remarks || ''}`,
          user?.employeeId || 'System'
        ].join('|') : '',
        isCollection: isCollection,
        employeeId: user?.employeeId,
      });
      
      form.reset();
      onSuccess?.();
    } catch (error) {
      console.error('Error saving transaction:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <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="type"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Type</FormLabel>
                <Select onValueChange={field.onChange} defaultValue={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Select type" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="Collection">Collection</SelectItem>
                    <SelectItem value="Payment">Payment</SelectItem>
                    <SelectItem value="Contra">Contra</SelectItem>
                    <SelectItem value="Journal">Journal</SelectItem>
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="category"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Category</FormLabel>
                <Select onValueChange={field.onChange} defaultValue={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Select category" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="Mac_Sale">Mac Sale</SelectItem>
                    <SelectItem value="Mac_Collection">Mac Collection</SelectItem>
                    <SelectItem value="Expense">Expense</SelectItem>
                    <SelectItem value="Income">Income</SelectItem>
                    <SelectItem value="Transfer">Transfer</SelectItem>
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="partyName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Party Name</FormLabel>
                <FormControl>
                  <Input placeholder="Enter party name" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="fromAccount"
            render={({ field }) => (
              <FormItem>
                <FormLabel>From Account</FormLabel>
                <FormControl>
                  <Input placeholder="From account" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="toAccount"
            render={({ field }) => (
              <FormItem>
                <FormLabel>To Account</FormLabel>
                <FormControl>
                  <Input 
                    placeholder="To account" 
                    {...field} 
                    disabled={isCollection}
                  />
                </FormControl>
                {isCollection && (
                  <p className="text-sm text-muted-foreground">Auto-set to Receivable</p>
                )}
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="debit"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Debit</FormLabel>
                <FormControl>
                  <Input type="number" step="0.01" placeholder="0.00" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="credit"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Credit</FormLabel>
                <FormControl>
                  <Input type="number" step="0.01" placeholder="0.00" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <FormField
          control={form.control}
          name="remarks"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Remarks</FormLabel>
              <FormControl>
                <Textarea placeholder="Additional notes" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        {isCollection && (
          <div className="bg-muted p-4 rounded-lg">
            <p className="text-sm text-muted-foreground">
              🔄 Auto Internet Sale will be created with Receivable account
            </p>
          </div>
        )}

        <Button type="submit" disabled={isSubmitting} className="w-full">
          {isSubmitting ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Saving...
            </>
          ) : (
            'Save Transaction'
          )}
        </Button>
      </form>
    </Form>
  );
}