/* eslint-disable react-hooks/set-state-in-effect */
import { zodResolver } from '@hookform/resolvers/zod';
import { router } from '@inertiajs/react';

import { ComboboxDropdown } from '@ui/components/combobox-dropdown';
import { DatePicker } from '@ui/components/date-picker';
import { Badge } from '@ui/components/ui/badge';
import { Button } from '@ui/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@ui/components/ui/card';
import {
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from '@ui/components/ui/form';
import { Input } from '@ui/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@ui/components/ui/select';
import { Separator } from '@ui/components/ui/separator';
import { Textarea } from '@ui/components/ui/textarea';
import { cn } from '@ui/lib/utils';
import { format } from 'date-fns';
import { Loader2, ChevronLeft, ChevronRight, Check, Upload } from 'lucide-react';
import { useState, useEffect, useRef, useMemo } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { toast } from 'sonner';
import * as z from 'zod';
import { FileUpload } from '@/components/common/FileUpload';
import { useAppText } from '@/lib/app-text';

import type { FundRequest, Budget } from '@/types/fund-request';

// Schema for the form
const getAdminFundRequestFormSchema = (text: any) => z.object({
    // Basic Info (read-only in UI but needed for submission)
    company_id: z.number().min(1, text('validation.required', { field: text('budget.field_company') })),
    branch_id: z.number().min(1, text('validation.required', { field: text('budget.field_branch') })),
    department_id: z.number().min(1, text('validation.required', { field: text('budget.field_department') })),
    applicant_id: z.number().min(1, text('validation.required', { field: text('fund_request.field_requester') })),
    description: z.string().min(1, text('validation.required', { field: text('fund_request.field_description') })),
    invoice_number: z.string().optional(),
    amount: z.number().min(1, text('validation.required', { field: text('fund_request.field_amount') })),
    account_name: z.string().min(1, text('validation.required', { field: text('fund_request.field_account_name') })),
    account_number: z.string().min(1, text('validation.required', { field: text('fund_request.field_account_number') })),
    bank_id: z.number().min(1, text('validation.required', { field: text('fund_request.field_bank') })),

    // Step 1: Budget & Tax
    budget_id: z.number().optional(),
    notes: z.string().optional(),
    scheduled_payment_date: z.string().optional(),
    tax_object: z.string().optional(),
    tax_amount: z.number().optional(),
    paid_amount: z.number().optional(),
    submission_status: z.enum(['OPEX', 'CAPEX', 'lainnya']).optional(),
    transaction_type: z.enum(['realisasi', 'dropping']).optional(),

    // Step 2: Approval Workflow
    cost_control_status: z.enum(['approved', 'rejected']).optional(),
    tax_officer_status: z.enum(['approved', 'rejected']).optional(),
    spv_finance_status: z.enum(['approved', 'rejected']).optional(),
    manager_finance_status: z.enum(['approved', 'rejected']).optional(),

    // Step 3: Payment & Report
    transfer_date: z.string().optional(),
    paid_date: z.string().optional(),
    paid_status: z.number().optional(),
    report_status: z.enum(['terlapor_sesuai', 'terlapor_bon_sementara']).optional(),
    status: z.enum(['waiting', 'approved', 'rejected', 'on_progress', 'done']).optional(),
});

export type AdminFundRequestFormData = z.infer<ReturnType<typeof getAdminFundRequestFormSchema>>;

interface AdminFundRequestFormProps {
    fundRequest: FundRequest;
    budgets?: Budget[];
    onSubmit: (data: AdminFundRequestFormData) => void | Promise<void>;
    isSubmitting?: boolean;
    onCancel?: () => void;
}


export function AdminFundRequestForm({
    fundRequest,
    budgets = [],
    onSubmit,
    isSubmitting = false,
    onCancel,
}: AdminFundRequestFormProps) {
    const { t: text, i18n } = useAppText();
    const [currentStep, setCurrentStep] = useState(1);

    const steps = useMemo(() => [
        { id: 1, name: text('fund_request.step_budget_tax') },
        { id: 2, name: text('fund_request.step_approvals') },
        { id: 3, name: text('fund_request.step_payment_report') },
    ], [text]);

    const schema = useMemo(() => getAdminFundRequestFormSchema(text), [text]);
    const [paymentProofFiles, setPaymentProofFiles] = useState<File[]>([]);
    const [reportProofFiles, setReportProofFiles] = useState<File[]>([]);
    const [isUploadingPayment, setIsUploadingPayment] = useState(false);
    const [isUploadingReport, setIsUploadingReport] = useState(false);
    const [lastSaved, setLastSaved] = useState<Date | null>(null);
    const isInitialMount = useRef(true);

    const formatDateToLocalString = (date: Date | undefined): string => {
        if (!date) {
return '';
}

        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');

        return `${year}-${month}-${day}`;
    };

    const parseLocalDate = (dateStr: any): Date | undefined => {
        if (!dateStr) {
return undefined;
}

        if (dateStr instanceof Date) {
return dateStr;
}

        const parts = String(dateStr).split('-');

        if (parts.length === 3) {
            const [year, month, day] = parts.map(Number);

            return new Date(year, month - 1, day);
        }

        const d = new Date(dateStr);

        return isNaN(d.getTime()) ? undefined : d;
    };

    // Format number with thousands separator
    const formatCurrency = (value: string | number): string => {
        if (value === undefined || value === null || value === '') {
return '';
}

        const numericValue = value.toString().replace(/\D/g, '');

        return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    };
    const form = useForm<any>({
        resolver: zodResolver(schema) as any,
        defaultValues: {
            // Basic fields (hidden but needed)
            company_id: fundRequest.company_id,
            branch_id: fundRequest.branch_id ?? 0,
            department_id: fundRequest.department_id ?? 0,
            applicant_id: fundRequest.applicant_id,
            description: fundRequest.description,
            invoice_number: fundRequest.invoice_number ?? '',
            amount: fundRequest.amount,
            account_name: fundRequest.account_name,
            account_number: fundRequest.account_number,
            bank_id: fundRequest.bank_id,

            // Step 1: Budget & Tax
            budget_id: fundRequest.budget_id ?? undefined,
            notes: fundRequest.notes ?? '',
            scheduled_payment_date: fundRequest.scheduled_payment_date ?? undefined,
            tax_object: fundRequest.tax_object ?? '',
            tax_amount: fundRequest.tax_amount ?? undefined,
            paid_amount: fundRequest.paid_amount ?? undefined,
            submission_status: (fundRequest.submission_status as any) || undefined,
            transaction_type: (fundRequest.transaction_type as any) || undefined,

            // Step 2: Approvals
            cost_control_status: (fundRequest.cost_control_status as any) || undefined,
            tax_officer_status: (fundRequest.tax_officer_status as any) || undefined,
            spv_finance_status: (fundRequest.spv_finance_status as any) || undefined,
            manager_finance_status: (fundRequest.manager_finance_status as any) || undefined,



            // Step 3: Payment & Report
            transfer_date: fundRequest.transfer_date ?? undefined,
            paid_date: fundRequest.paid_date ?? undefined,
            paid_status: fundRequest.paid_status ?? undefined,
            report_status: (fundRequest.report_status as any) || undefined,
            status: (fundRequest.status as any) ?? undefined,
        },
    });

    // Watch tax_amount to auto-calculate paid_amount
    const taxAmount = useWatch({
        control: form.control,
        name: 'tax_amount',
    });
    const amount = useWatch({
        control: form.control,
        name: 'amount',
    });

    // Local state for tax_amount input to handle onBlur updates
    const [taxAmountDisplay, setTaxAmountDisplay] = useState('');

    useEffect(() => {
        setTaxAmountDisplay(taxAmount !== undefined && taxAmount !== null ? formatCurrency(taxAmount) : '');
    }, [taxAmount]);

    useEffect(() => {
        if (amount && taxAmount !== undefined) {
            const calculatedPaidAmount = amount - (taxAmount || 0);

            form.setValue('paid_amount', calculatedPaidAmount);
        }
    }, [taxAmount, amount, form]);

    // Auto-save: Watch all form values and auto-submit on change (with debounce)
    const formValues = useWatch({
        control: form.control,
    });
    useEffect(() => {
        // Skip auto-save on initial mount
        if (isInitialMount.current) {
            isInitialMount.current = false;

            return;
        }

        // Only auto-save if form is dirty (user made changes)
        // Note: We don't check isValid because this is an edit form, partial data should be saveable
        if (!form.formState.isDirty || isSubmitting) {
            return;
        }

        console.log('Auto-save triggered - form is dirty');

        const timeoutId = setTimeout(() => {
            const data = form.getValues();
            console.log('Auto-saving data:', data);
            onSubmit(data);
            // Reset dirty state after save
            form.reset(data, { keepValues: true });
            // Update last saved time and show toast
            setLastSaved(new Date());
            setLastSaved(new Date());
            toast.success(text('fund_request.msg_auto_saved'), {
                duration: 2000,
            });
        }, 1000); // 1 second debounce

        return () => clearTimeout(timeoutId);
    }, [formValues, form, onSubmit, isSubmitting, text]);

    // Handle file upload for payment proof
    const handleUploadPaymentProof = async () => {
        if (paymentProofFiles.length === 0) {
return;
}

        setIsUploadingPayment(true);

        // Create FormData for Inertia
        const formData = new FormData();
        paymentProofFiles.forEach((file) => {
            formData.append('payment_proof_files[]', file);
        });

        // Optional fields
        const transferDate = form.getValues('transfer_date');

        if (transferDate) {
            formData.append('transfer_date', transferDate);
        }

        // Use Inertia router to upload
        router.post(
            `/department/finance/fund-request/${fundRequest.id}/upload-payment-proof`,
            formData,
            {
                preserveScroll: true,
                forceFormData: true,
                onSuccess: () => {
                    setPaymentProofFiles([]);
                    setIsUploadingPayment(false);
                    toast.success(text('fund_request.msg_upload_success', { count: paymentProofFiles.length }));
                },
                onError: (errors: any) => {
                    console.error('Error uploading payment proof:', errors);
                    setIsUploadingPayment(false);
                    toast.error(text('fund_request.msg_upload_error'));
                },
            }
        );
    };

    // Handle file upload for report proof
    const handleUploadReportProof = async () => {
        if (reportProofFiles.length === 0) {
return;
}

        setIsUploadingReport(true);

        // Create FormData for Inertia
        const formData = new FormData();
        reportProofFiles.forEach((file) => {
            formData.append('report_proof_files[]', file);
        });

        // Optional fields
        const reportStatus = form.getValues('report_status');

        if (reportStatus) {
            formData.append('report_status', reportStatus);
        }

        // Use Inertia router to upload
        router.post(
            `/department/finance/fund-request/${fundRequest.id}/upload-report-proof`,
            formData,
            {
                preserveScroll: true,
                forceFormData: true,
                onSuccess: () => {
                    setReportProofFiles([]);
                    setIsUploadingReport(false);
                    toast.success(text('fund_request.msg_upload_success', { count: reportProofFiles.length }));
                },
                onError: (errors: any) => {
                    console.error('Error uploading report proof:', errors);
                    setIsUploadingReport(false);
                    toast.error(text('fund_request.msg_upload_error'));
                },
            }
        );
    };

    const handleNext = () => {
        if (currentStep < steps.length) {
            setCurrentStep(currentStep + 1);
        }
    };

    const handlePrevious = () => {
        if (currentStep > 1) {
            setCurrentStep(currentStep - 1);
        }
    };

    const handleSubmit = form.handleSubmit((data) => onSubmit(data as unknown as AdminFundRequestFormData));

    return (
        <Form {...form}>
            <form onSubmit={handleSubmit} className="space-y-6">
                {/* Stepper Header */}
                <div className="space-y-4">
                    <div className="flex items-center justify-between">
                        {steps.map((step, index) => (
                            <div key={step.id} className="flex items-center flex-1">
                                <div className="flex flex-col items-center flex-1">
                                    <button
                                        type="button"
                                        onClick={() => setCurrentStep(step.id)}
                                        className={cn(
                                            'w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all',
                                            'hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
                                            'cursor-pointer',
                                            currentStep === step.id
                                                ? 'border-primary bg-primary text-primary-foreground shadow-lg'
                                                : currentStep > step.id
                                                    ? 'border-primary bg-primary text-primary-foreground'
                                                    : 'border-muted-foreground bg-background hover:border-primary/50'
                                        )}
                                    >
                                        {currentStep > step.id ? (
                                            <Check className="w-5 h-5" />
                                        ) : (
                                            <span>{step.id}</span>
                                        )}
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => setCurrentStep(step.id)}
                                        className="mt-2 text-center cursor-pointer hover:opacity-80 transition-opacity focus:outline-none"
                                    >
                                        <p className={cn(
                                            'text-sm font-medium',
                                            currentStep === step.id ? 'text-primary' : 'text-muted-foreground'
                                        )}>
                                            {step.name}
                                        </p>
                                    </button>
                                </div>
                                {index < steps.length - 1 && (
                                    <div
                                        className={cn(
                                            'h-0.5 flex-1 mx-2 transition-colors',
                                            currentStep > step.id ? 'bg-primary' : 'bg-muted'
                                        )}
                                    />
                                )}
                            </div>
                        ))}
                    </div>
                </div>

                <Separator />

                {/* Request Information (Always Visible) */}
                <Card>
                    <CardHeader>
                        <CardTitle>{text('fund_request.section_request_info')}</CardTitle>
                    </CardHeader>
                        <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4 [&>*]:min-w-0">
                        <div>
                            <p className="text-sm font-medium text-muted-foreground">{text('budget.field_company')}</p>
                            <p className="text-sm">{fundRequest.company?.name || '-'}</p>
                        </div>
                        <div>
                            <p className="text-sm font-medium text-muted-foreground">{text('budget.field_branch')}</p>
                            <p className="text-sm">{fundRequest.branch?.name || '-'}</p>
                        </div>
                        <div>
                            <p className="text-sm font-medium text-muted-foreground">{text('budget.field_department')}</p>
                            <p className="text-sm">{fundRequest.department?.name || '-'}</p>
                        </div>
                        <div>
                            <p className="text-sm font-medium text-muted-foreground">{text('fund_request.field_requester')}</p>
                            <p className="text-sm">{fundRequest.applicant?.name || '-'}</p>
                        </div>
                        <div className="md:col-span-2">
                            <p className="text-sm font-medium text-muted-foreground">{text('fund_request.field_description')}</p>
                            <p className="text-sm">{fundRequest.description}</p>
                        </div>
                        <div>
                            <p className="text-sm font-medium text-muted-foreground">{text('fund_request.field_amount')}</p>
                            <p className="text-sm font-semibold">Rp {fundRequest.amount.toLocaleString('id-ID')}</p>
                        </div>
                        <div>
                            <p className="text-sm font-medium text-muted-foreground">{text('fund_request.section_bank_account')}</p>
                            <p className="text-sm">{fundRequest.account_name} - {fundRequest.account_number}</p>
                        </div>
                    </CardContent>
                </Card>

                {/* Step 1: Budget & Tax */}
                {currentStep === 1 && (
                    <Card>
                        <CardHeader>
                            <CardTitle>{text('fund_request.section_budget_tax_info')}</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 [&>*]:min-w-0">
                                {/* Budget */}
                                <FormField
                                    control={form.control}
                                    name="budget_id"
                                    render={({ field }) => (
                                        <FormItem className="md:col-span-2">
                                            <FormLabel>{text('budget.title')}</FormLabel>
                                            <FormControl>
                                                <ComboboxDropdown
                                                    options={budgets.map((budget) => ({
                                                        label: budget.name + " - " + (budget.company_name || '-') + " - " + (budget.branch_name || '-') + " - " + (budget.department_name || '-') + " - " + (budget.coa_name || '-'),
                                                        value: budget.id.toString()
                                                    }))}
                                                    value={field.value ? field.value.toString() : ''}
                                                    onValueChange={(value) => field.onChange(value ? parseInt(value) : undefined)}
                                                    placeholder={text('fund_request.placeholder_select')}
                                                    searchPlaceholder={text('common.label_search')}
                                                    disabled={budgets.length === 0}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* Scheduled Payment Date */}
                                <FormField
                                    control={form.control}
                                    name="scheduled_payment_date"
                                    render={({ field }) => (
                                        <FormItem className="flex flex-col">
                                            <FormLabel>{text('fund_request.field_scheduled_payment_date')}</FormLabel>
                                            <FormControl>
                                                <DatePicker
                                                    selected={parseLocalDate(field.value)}
                                                    onSelect={(date) => field.onChange(formatDateToLocalString(date))}
                                                    placeholder={text('fund_request.field_scheduled_payment_date')}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* Tax Object */}
                                <FormField
                                    control={form.control}
                                    name="tax_object"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_tax_object')}</FormLabel>
                                            <FormControl>
                                                <Input placeholder={text('fund_request.placeholder_tax_object')} {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* Tax Amount */}
                                <FormField
                                    control={form.control}
                                    name="tax_amount"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_tax_amount')}</FormLabel>
                                            <FormControl>
                                                <Input
                                                    type="text"
                                                    placeholder="0"
                                                    value={taxAmountDisplay}
                                                    onChange={(e) => {
                                                        const val = e.target.value.replace(/\D/g, '');
                                                        setTaxAmountDisplay(formatCurrency(val));
                                                    }}
                                                    onBlur={() => {
                                                        const val = taxAmountDisplay.replace(/\D/g, '');
                                                        field.onChange(val ? parseInt(val) : undefined);
                                                    }}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* Paid Amount (Auto-calculated) */}
                                <FormField
                                    control={form.control}
                                    name="paid_amount"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_paid_amount')}</FormLabel>
                                            <FormControl>
                                                <Input
                                                    type="text"
                                                    value={formatCurrency(field.value ?? '')}
                                                    disabled
                                                    className="bg-muted"
                                                />
                                            </FormControl>
                                            <FormDescription>
                                                {text('fund_request.helper_auto_calculated')}
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* Submission Status */}
                                <FormField
                                    control={form.control}
                                    name="submission_status"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_submission_type')}</FormLabel>
                                            <Select onValueChange={field.onChange} value={field.value}>
                                                <FormControl>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder={text('fund_request.placeholder_select')} />
                                                    </SelectTrigger>
                                                </FormControl>
                                                <SelectContent>
                                                    <SelectItem value="OPEX">{text('fund_request.option_opex')}</SelectItem>
                                                    <SelectItem value="CAPEX">{text('fund_request.option_capex')}</SelectItem>
                                                    <SelectItem value="lainnya">{text('fund_request.option_other')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* Transaction Type */}
                                <FormField
                                    control={form.control}
                                    name="transaction_type"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_transaction_type')}</FormLabel>
                                            <Select onValueChange={field.onChange} value={field.value}>
                                                <FormControl>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder={text('fund_request.placeholder_select')} />
                                                    </SelectTrigger>
                                                </FormControl>
                                                <SelectContent>
                                                    <SelectItem value="realisasi">{text('fund_request.option_realization')}</SelectItem>
                                                    <SelectItem value="dropping">{text('fund_request.option_dropping')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <Separator />

                            {/* Notes */}
                            <FormField
                                control={form.control}
                                name="notes"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>{text('fund_request.field_notes')}</FormLabel>
                                        <FormControl>
                                            <Textarea
                                                placeholder={text('fund_request.placeholder_notes')}
                                                className="resize-none"
                                                rows={3}
                                                {...field}
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </CardContent>
                    </Card>
                )}

                {/* Step 2: Approval Workflow */}
                {currentStep === 2 && (
                    <Card>
                        <CardHeader>
                            <CardTitle>{text('fund_request.section_approval_workflow')}</CardTitle>
                            <CardDescription>{text('fund_request.desc_approval_workflow')}</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                            {/* Cost Control Approval */}
                            <div className="space-y-3">
                                <div className="flex items-center justify-between">
                                    <h4 className="text-sm font-semibold">{text('fund_request.approval_cost_control')}</h4>
                                    {fundRequest.cost_control_approved_at && (
                                        <Badge variant="outline" className="text-xs">
                                            {format(new Date(fundRequest.cost_control_approved_at), 'PPp')}
                                        </Badge>
                                    )}
                                </div>
                                <FormField
                                    control={form.control}
                                    name="cost_control_status"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_status')}</FormLabel>
                                            <Select onValueChange={field.onChange} value={field.value}>
                                                <FormControl>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder={text('fund_request.placeholder_select')} />
                                                    </SelectTrigger>
                                                </FormControl>
                                                <SelectContent>
                                                    <SelectItem value="approved">{text('common.status_approved')}</SelectItem>
                                                    <SelectItem value="rejected">{text('common.status_rejected')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            {fundRequest.cost_control_approver && (
                                                <FormDescription>
                                                    {text('fund_request.helper_approved_by', { name: fundRequest.cost_control_approver.name })}
                                                </FormDescription>
                                            )}
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <Separator />

                            {/* Tax Officer Approval */}
                            <div className="space-y-3">
                                <div className="flex items-center justify-between">
                                    <h4 className="text-sm font-semibold">{text('fund_request.approval_tax_officer')}</h4>
                                    {fundRequest.tax_officer_approved_at && (
                                        <Badge variant="outline" className="text-xs">
                                            {format(new Date(fundRequest.tax_officer_approved_at), 'PPp')}
                                        </Badge>
                                    )}
                                </div>
                                <FormField
                                    control={form.control}
                                    name="tax_officer_status"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_status')}</FormLabel>
                                            <Select onValueChange={field.onChange} value={field.value}>
                                                <FormControl>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder={text('fund_request.placeholder_select')} />
                                                    </SelectTrigger>
                                                </FormControl>
                                                <SelectContent>
                                                    <SelectItem value="approved">{text('common.status_approved')}</SelectItem>
                                                    <SelectItem value="rejected">{text('common.status_rejected')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            {fundRequest.tax_officer_approver && (
                                                <FormDescription>
                                                    {text('fund_request.helper_approved_by', { name: fundRequest.tax_officer_approver.name })}
                                                </FormDescription>
                                            )}
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <Separator />

                            {/* SPV Finance Approval */}
                            <div className="space-y-3">
                                <div className="flex items-center justify-between">
                                    <h4 className="text-sm font-semibold">{text('fund_request.approval_spv_finance')}</h4>
                                    {fundRequest.spv_finance_approved_at && (
                                        <Badge variant="outline" className="text-xs">
                                            {format(new Date(fundRequest.spv_finance_approved_at), 'PPp')}
                                        </Badge>
                                    )}
                                </div>
                                <FormField
                                    control={form.control}
                                    name="spv_finance_status"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_status')}</FormLabel>
                                            <Select onValueChange={field.onChange} value={field.value}>
                                                <FormControl>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder={text('fund_request.placeholder_select')} />
                                                    </SelectTrigger>
                                                </FormControl>
                                                <SelectContent>
                                                    <SelectItem value="approved">{text('common.status_approved')}</SelectItem>
                                                    <SelectItem value="rejected">{text('common.status_rejected')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            {fundRequest.spv_finance_approver && (
                                                <FormDescription>
                                                    {text('fund_request.helper_approved_by', { name: fundRequest.spv_finance_approver.name })}
                                                </FormDescription>
                                            )}
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <Separator />

                            {/* Manager Finance Approval */}
                            <div className="space-y-3">
                                <div className="flex items-center justify-between">
                                    <h4 className="text-sm font-semibold">{text('fund_request.approval_manager_finance')}</h4>
                                    {fundRequest.manager_finance_approved_at && (
                                        <Badge variant="outline" className="text-xs">
                                            {format(new Date(fundRequest.manager_finance_approved_at), 'PPp')}
                                        </Badge>
                                    )}
                                </div>
                                <FormField
                                    control={form.control}
                                    name="manager_finance_status"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_status')}</FormLabel>
                                            <Select onValueChange={field.onChange} value={field.value}>
                                                <FormControl>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder={text('fund_request.placeholder_select')} />
                                                    </SelectTrigger>
                                                </FormControl>
                                                <SelectContent>
                                                    <SelectItem value="approved">{text('common.status_approved')}</SelectItem>
                                                    <SelectItem value="rejected">{text('common.status_rejected')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            {fundRequest.manager_finance_approver && (
                                                <FormDescription>
                                                    {text('fund_request.helper_approved_by', { name: fundRequest.manager_finance_approver.name })}
                                                </FormDescription>
                                            )}
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>
                        </CardContent>
                    </Card>
                )}



                {/* Step 3: Payment & Report */}
                {currentStep === 3 && (
                    <Card>
                        <CardHeader>
                            <CardTitle>{text('fund_request.section_payment_report')}</CardTitle>
                            <CardDescription>{text('fund_request.desc_payment_report')}</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 [&>*]:min-w-0">
                                {/* Transfer Date */}
                                <FormField
                                    control={form.control}
                                    name="transfer_date"
                                    render={({ field }) => (
                                        <FormItem className="flex flex-col">
                                            <FormLabel>{text('fund_request.field_transfer_date')}</FormLabel>
                                            <FormControl>
                                                <DatePicker
                                                    selected={parseLocalDate(field.value)}
                                                    onSelect={(date) => field.onChange(formatDateToLocalString(date))}
                                                    placeholder={text('fund_request.field_transfer_date')}
                                                />
                                            </FormControl>
                                            <FormDescription>{text('fund_request.helper_transfer_date')}</FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* Paid Date */}
                                <FormField
                                    control={form.control}
                                    name="paid_date"
                                    render={({ field }) => (
                                        <FormItem className="flex flex-col">
                                            <FormLabel>{text('fund_request.field_paid_date')}</FormLabel>
                                            <FormControl>
                                                <DatePicker
                                                    selected={parseLocalDate(field.value)}
                                                    onSelect={(date) => field.onChange(formatDateToLocalString(date))}
                                                    placeholder={text('fund_request.field_paid_date')}
                                                />
                                            </FormControl>
                                            <FormDescription>{text('fund_request.helper_paid_date')}</FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* Paid Status */}
                                {/* <FormField
                                    control={form.control}
                                    name="paid_status"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Paid Status Code</FormLabel>
                                            <FormControl>
                                                <Input
                                                    type="number"
                                                    placeholder="0"
                                                    value={field.value ?? ''}
                                                    onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                /> */}
                            </div>

                            <Separator />

                            {/* Payment Proof File Upload */}
                            <div className="space-y-3">
                                <FileUpload
                                    label={text('fund_request.field_payment_proof')}
                                    description={text('common.helper_upload_formats', { formats: 'Images, PDF' })}
                                    multiple
                                    maxSize={10 * 1024 * 1024} // 10MB
                                    allowedExtensions={['jpg', 'jpeg', 'png', 'pdf']}
                                    value={paymentProofFiles}
                                    onChange={setPaymentProofFiles}
                                />
                                <Button
                                    type="button"
                                    onClick={handleUploadPaymentProof}
                                    disabled={paymentProofFiles.length === 0 || isUploadingPayment}
                                    className="w-full md:w-auto"
                                >
                                    {isUploadingPayment && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                    <Upload className="mr-2 h-4 w-4" />
                                    {text('fund_request.btn_upload_payment_proof')}
                                </Button>
                            </div>

                            <Separator />

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                {/* Report Status */}
                                <FormField
                                    control={form.control}
                                    name="report_status"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>{text('fund_request.field_report_status')}</FormLabel>
                                            <Select onValueChange={field.onChange} value={field.value}>
                                                <FormControl>
                                                    <SelectTrigger className="w-full">
                                                        <SelectValue placeholder={text('fund_request.placeholder_select')} />
                                                    </SelectTrigger>
                                                </FormControl>
                                                <SelectContent>
                                                    <SelectItem value="terlapor_sesuai">{text('fund_request.status_reported_match')}</SelectItem>
                                                    <SelectItem value="terlapor_bon_sementara">{text('fund_request.status_reported_temp')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <Separator />

                            {/* Report Proof File Upload */}
                            <div className="space-y-3">
                                <FileUpload
                                    label={text('fund_request.field_report_proof')}
                                    description={text('common.helper_upload_formats', { formats: 'Images, PDF' })}
                                    multiple
                                    maxSize={10 * 1024 * 1024} // 10MB
                                    allowedExtensions={['jpg', 'jpeg', 'png', 'pdf']}
                                    value={reportProofFiles}
                                    onChange={setReportProofFiles}
                                />
                                <Button
                                    type="button"
                                    onClick={handleUploadReportProof}
                                    disabled={reportProofFiles.length === 0 || isUploadingReport}
                                    className="w-full md:w-auto"
                                >
                                    {isUploadingReport && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                    <Upload className="mr-2 h-4 w-4" />
                                    {text('fund_request.btn_upload_report_proof')}
                                </Button>
                            </div>

                            <Separator />

                            {/* Overall Status */}
                            <FormField
                                control={form.control}
                                name="status"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>{text('fund_request.field_status')}</FormLabel>
                                        <Select onValueChange={field.onChange} value={field.value}>
                                            <FormControl>
                                                <SelectTrigger className="w-full">
                                                    <SelectValue placeholder={text('fund_request.placeholder_select')} />
                                                </SelectTrigger>
                                            </FormControl>
                                            <SelectContent>
                                                <SelectItem value="waiting">{text('common.status_waiting')}</SelectItem>
                                                <SelectItem value="approved">{text('common.status_approved')}</SelectItem>
                                                <SelectItem value="rejected">{text('common.status_rejected')}</SelectItem>
                                                <SelectItem value="on_progress">{text('common.status_on_progress')}</SelectItem>
                                                <SelectItem value="done">{text('common.status_done')}</SelectItem>
                                            </SelectContent>
                                        </Select>
                                        <FormDescription>{text('fund_request.helper_overall_status')}</FormDescription>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </CardContent>
                    </Card>
                )}

                {/* Navigation Buttons */}
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                        {onCancel && (
                            <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
                                {text('common.btn_cancel')}
                            </Button>
                        )}
                        <Button
                            type="button"
                            variant="outline"
                            onClick={handlePrevious}
                            disabled={currentStep === 1}
                        >
                            <ChevronLeft className="mr-2 h-4 w-4" />
                            {text('common.btn_previous')}
                        </Button>
                    </div>

                    <div className="flex items-center gap-4">
                        {/* Auto-save indicator */}
                        {isSubmitting && (
                            <div className="flex items-center text-sm text-muted-foreground">
                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                {text('common.status_saving')}
                            </div>
                        )}

                        {/* Last saved indicator */}
                        {!isSubmitting && lastSaved && (
                            <div className="flex items-center text-sm text-muted-foreground">
                                <Check className="mr-2 h-4 w-4 text-green-600" />
                                {text('fund_request.msg_saved_at', { time: new Date().getTime() - lastSaved.getTime() < 5000 ? text('common.just_now') : lastSaved.toLocaleTimeString(i18n.language, { hour: '2-digit', minute: '2-digit' }) })}
                            </div>
                        )}

                        {currentStep < steps.length && (
                            <Button type="button" onClick={handleNext}>
                                {text('common.btn_next')}
                                <ChevronRight className="ml-2 h-4 w-4" />
                            </Button>
                        )}
                    </div>
                </div>
            </form>
        </Form>
    );
}