import { Link, useForm } from '@inertiajs/react';
import type { FormEvent } from 'react';
import { LogIn } from 'lucide-react';
import AuthLayout from '../../layouts/AuthLayout';
import PinInput from '../../components/PinInput';
import { Button, Field, Input } from '../../components/ui';

export default function Login() {
    const form = useForm({ phone: '', pin: '' });
    const submit = (e: FormEvent) => { e.preventDefault(); form.post(route('login'), { onFinish: () => form.reset('pin') }); };

    return (
        <AuthLayout title="Sign in" heading="Sign in" intro="Owners and staff sign in with their phone number and PIN.">
            <form onSubmit={submit} className="space-y-4" noValidate>
                <Field label="Phone number" htmlFor="phone" error={form.errors.phone}>
                    <Input id="phone" type="tel" inputMode="tel" autoComplete="tel" placeholder="0991 234 567" value={form.data.phone} onChange={(e) => form.setData('phone', e.target.value)} invalid={!!form.errors.phone} autoFocus />
                </Field>
                <Field label="PIN or password" htmlFor="pin" error={form.errors.pin}>
                    <PinInput id="pin" value={form.data.pin} onChange={(v) => form.setData('pin', v)} invalid={!!form.errors.pin} />
                </Field>
                <Button type="submit" size="lg" className="w-full" icon={LogIn} disabled={form.processing}>{form.processing ? 'Signing in…' : 'Sign in'}</Button>
            </form>
            <p className="mt-6 text-center text-sm text-muted">
                New business? <Link href={route('register')} className="font-bold text-brand hover:underline">Create a free account</Link>
            </p>
        </AuthLayout>
    );
}