import { Form, Head } from '@inertiajs/react';
import CompanySettingController from '@/actions/App/Http/Controllers/Admin/CompanySettingController';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useCan } from '@/hooks/use-can';
import { edit as editFiscal } from '@/routes/admin/settings/company/fiscal';
import type { CompanySettingData } from '@/types/company-setting';

export default function CompanyFiscalSettings({
    company,
}: {
    company: CompanySettingData;
}) {
    const canUpdate = useCan('settings.update');

    return (
        <>
            <Head title="Informations fiscales" />

            <h1 className="sr-only">Informations fiscales</h1>

            <div className="space-y-6">
                <Heading
                    variant="small"
                    title="Fiscalité"
                    description="Mentions légales et taux de TVA par défaut"
                />

                <Form
                    action={CompanySettingController.updateFiscal.url()}
                    method="put"
                    options={{
                        preserveScroll: true,
                    }}
                    className="space-y-6"
                >
                    {({ processing, errors }) => (
                        <>
                            <div className="grid gap-2">
                                <Label htmlFor="default_tax_rate">
                                    Taux de TVA par défaut (%)
                                </Label>
                                <Input
                                    id="default_tax_rate"
                                    name="default_tax_rate"
                                    type="number"
                                    min={0}
                                    max={100}
                                    step={0.01}
                                    className="mt-1 block w-full max-w-xs"
                                    defaultValue={company.default_tax_rate}
                                    disabled={!canUpdate}
                                />
                                <p className="text-sm text-muted-foreground">
                                    Appliqué automatiquement aux nouvelles
                                    lignes de facture.
                                </p>
                                <InputError
                                    className="mt-2"
                                    message={errors.default_tax_rate}
                                />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="tax_id">N° contribuable</Label>
                                <Input
                                    id="tax_id"
                                    name="tax_id"
                                    className="mt-1 block w-full"
                                    defaultValue={company.tax_id ?? ''}
                                    disabled={!canUpdate}
                                    placeholder="N° contribuable"
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors.tax_id}
                                />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="registration">RCCM</Label>
                                <Input
                                    id="registration"
                                    name="registration"
                                    className="mt-1 block w-full"
                                    defaultValue={company.registration ?? ''}
                                    disabled={!canUpdate}
                                    placeholder="RCCM"
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors.registration}
                                />
                            </div>

                            {canUpdate && (
                                <div className="flex items-center gap-4">
                                    <Button disabled={processing}>
                                        Enregistrer
                                    </Button>
                                </div>
                            )}
                        </>
                    )}
                </Form>
            </div>
        </>
    );
}

CompanyFiscalSettings.layout = {
    breadcrumbs: [
        {
            title: 'Paramètres de l\'entreprise',
            href: editFiscal(),
        },
    ],
};
