import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@ui/components/ui/button';
import {
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from '@ui/components/ui/form';
import { Input } from '@ui/components/ui/input';
import { Switch } from '@ui/components/ui/switch';
import { Loader2 } from 'lucide-react';
import { useForm } from 'react-hook-form';
import * as z from 'zod';
import type { SourceAccount, SourceAccountFormData } from '@/types/finance';

const sourceAccountFormSchema = z.object({
    name: z
        .string()
        .min(1, 'Nama akun sumber wajib diisi.')
        .max(255, 'Nama akun sumber maksimal 255 karakter.'),
    is_active: z.boolean().default(true),
});

interface SourceAccountFormProps {
    sourceAccount?: SourceAccount;
    onSubmit: (data: SourceAccountFormData) => void | Promise<void>;
    isSubmitting?: boolean;
    onCancel?: () => void;
}

export function SourceAccountForm({
    sourceAccount,
    onSubmit,
    isSubmitting = false,
    onCancel,
}: SourceAccountFormProps) {
    const form = useForm<SourceAccountFormData>({
        resolver: zodResolver(sourceAccountFormSchema),
        defaultValues: sourceAccount
            ? {
                name: sourceAccount.name,
                is_active: sourceAccount.is_active,
            }
            : {
                name: '',
                is_active: true,
            },
    });

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
                {/* Name */}
                <FormField
                    control={form.control}
                    name="name"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Nama Akun Sumber</FormLabel>
                            <FormControl>
                                <Input placeholder="Masukkan nama akun sumber" {...field} />
                            </FormControl>
                            <FormDescription>
                                Gunakan nama akun yang jelas dan mudah dikenali.
                            </FormDescription>
                            <FormMessage />
                        </FormItem>
                    )}
                />

                {/* Is Active */}
                <FormField
                    control={form.control}
                    name="is_active"
                    render={({ field }) => (
                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                            <div className="space-y-0.5">
                                <FormLabel className="text-base">Status Aktif</FormLabel>
                                <FormDescription>
                                    Aktifkan jika akun sumber masih digunakan.
                                </FormDescription>
                            </div>
                            <FormControl>
                                <Switch
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                />
                            </FormControl>
                        </FormItem>
                    )}
                />

                {/* Submit Button */}
                <div className="flex justify-end gap-2">
                    {onCancel && (
                        <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
                            Batal
                        </Button>
                    )}
                    <Button type="submit" disabled={isSubmitting}>
                        {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                        {isSubmitting
                            ? 'Menyimpan...'
                            : sourceAccount
                                ? 'Perbarui Akun Sumber'
                                : 'Simpan Akun Sumber'}
                    </Button>
                </div>
            </form>
        </Form>
    );
}