import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { useForm } from '@inertiajs/react';
import { KeyRound } from 'lucide-react';
import { Field, FormCard, Section } from './shared';

export default function SecurityTab() {
    const { data, setData, put, processing, errors, reset } = useForm({
        current_password: '',
        password: '',
        password_confirmation: '',
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        put('/admin/settings/security', {
            onSuccess: () => reset(),
        });
    };

    return (
        <form onSubmit={handleSubmit}>
            <FormCard>
                <Section title="Change password">
                    <Field
                        label="Current password"
                        error={errors.current_password}
                        required
                    >
                        <Input
                            type="password"
                            value={data.current_password}
                            onChange={(e) =>
                                setData('current_password', e.target.value)
                            }
                            autoComplete="current-password"
                            className={cn(
                                errors.current_password && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field
                        label="New password"
                        hint="Minimum 8 characters, mixed case and numbers"
                        error={errors.password}
                        required
                    >
                        <Input
                            type="password"
                            value={data.password}
                            onChange={(e) =>
                                setData('password', e.target.value)
                            }
                            autoComplete="new-password"
                            className={cn(
                                errors.password && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field
                        label="Confirm password"
                        error={errors.password_confirmation}
                        required
                    >
                        <Input
                            type="password"
                            value={data.password_confirmation}
                            onChange={(e) =>
                                setData('password_confirmation', e.target.value)
                            }
                            autoComplete="new-password"
                            className={cn(
                                errors.password_confirmation &&
                                    'border-destructive',
                            )}
                        />
                    </Field>
                </Section>

                <div className="flex justify-end">
                    <Button
                        type="submit"
                        disabled={processing}
                        size="sm"
                        className="gap-2"
                    >
                        <KeyRound className="h-3.5 w-3.5" />
                        Update password
                    </Button>
                </div>
            </FormCard>
        </form>
    );
}