import { Head, router } from '@inertiajs/react';
import { useState } from 'react';
import { toast } from 'sonner';
import { FinanceAppLayout } from '@/layouts/finance-app-layout';
import { useAppText } from '@/lib/app-text';
import type { BankFormData } from '@/types/finance';
import { BankForm } from './components/BankForm';

interface BankCreateProps {
    title: string;
}

export default function BankCreate({ title }: BankCreateProps) {
    const { t: text } = useAppText();
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleSubmit = (data: BankFormData) => {
        router.post('/department/finance/bank', data as any, {
            onStart: () => setIsSubmitting(true),
            onSuccess: () => {
                toast.success(text('common.msg_success_create', { module: text('bank.title') }));
                router.visit('/department/finance/bank');
            },
            onError: () => {
                toast.error(text('common.msg_error'));
            },
            onFinish: () => setIsSubmitting(false),
        });
    };

    return (
        <FinanceAppLayout>
            <Head title={title || text('bank.create_title')} />
            <div className="mx-auto w-full max-w-2xl p-4">
                <h1 className="mb-4 text-2xl font-bold tracking-tight">{text('bank.create_title')}</h1>
                <BankForm onSubmit={handleSubmit} isSubmitting={isSubmitting} />
            </div>
        </FinanceAppLayout>
    );
}
