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 editSecurity } from '@/routes/admin/settings/company/security';
import type { CompanySettingData } from '@/types/company-setting';

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

    return (
        <>
            <Head title="Politique de sécurité" />

            <h1 className="sr-only">Politique de sécurité</h1>

            <div className="space-y-6">
                <Heading
                    variant="small"
                    title="Sécurité"
                    description="Politique d'expiration des mots de passe et verrouillage de compte"
                />

                <Form
                    action={CompanySettingController.updateSecurity.url()}
                    method="put"
                    options={{
                        preserveScroll: true,
                    }}
                    className="space-y-6"
                >
                    {({ processing, errors }) => (
                        <>
                            <div className="grid gap-2">
                                <Label htmlFor="password_expiry_days">
                                    Expiration du mot de passe (jours)
                                </Label>
                                <Input
                                    id="password_expiry_days"
                                    name="password_expiry_days"
                                    type="number"
                                    min={0}
                                    max={730}
                                    className="mt-1 block w-full max-w-xs"
                                    defaultValue={company.password_expiry_days}
                                    disabled={!canUpdate}
                                />
                                <p className="text-sm text-muted-foreground">
                                    Mettez 0 pour désactiver l’expiration
                                    périodique.
                                </p>
                                <InputError
                                    className="mt-2"
                                    message={errors.password_expiry_days}
                                />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="max_failed_login_attempts">
                                    Tentatives de connexion max.
                                </Label>
                                <Input
                                    id="max_failed_login_attempts"
                                    name="max_failed_login_attempts"
                                    type="number"
                                    min={1}
                                    max={20}
                                    className="mt-1 block w-full max-w-xs"
                                    defaultValue={
                                        company.max_failed_login_attempts
                                    }
                                    disabled={!canUpdate}
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors.max_failed_login_attempts}
                                />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="lockout_minutes">
                                    Durée de verrouillage (minutes)
                                </Label>
                                <Input
                                    id="lockout_minutes"
                                    name="lockout_minutes"
                                    type="number"
                                    min={1}
                                    max={1440}
                                    className="mt-1 block w-full max-w-xs"
                                    defaultValue={company.lockout_minutes}
                                    disabled={!canUpdate}
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors.lockout_minutes}
                                />
                            </div>

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

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