/* Signing up, step 1 of 2: the owner's account. Step 2 is the business (Shop/Setup). */
import { Link, useForm } from '@inertiajs/react';
import type { FormEvent } from 'react';
import { ArrowRight } from 'lucide-react';
import AuthLayout from '../../layouts/AuthLayout';
import PinInput from '../../components/PinInput';
import { Button, Field, Input } from '../../components/ui';

export default function Register() {
    const form = useForm({ name: '', phone: '', email: '', pin: '', pin_confirmation: '' });
    const err = form.errors as Record<string, string | undefined>;
    const submit = (e: FormEvent) => { e.preventDefault(); form.post(route('register')); };

    return (
        <AuthLayout title="Create an account" heading="Create your account" intro={<>Step 1 of 2. Free to try; no card needed.</>}>
            <form onSubmit={submit} className="space-y-4" noValidate>
                <Field label="Your name" htmlFor="name" error={err.name} required>
                    <Input id="name" autoComplete="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} invalid={!!err.name} autoFocus />
                </Field>
                <Field label="Phone number" htmlFor="phone" error={err.phone_e164 || err.phone} required hint="You'll sign in with this number.">
                    <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={!!(err.phone_e164 || err.phone)} />
                </Field>
                <Field label={<>Email <span className="font-normal text-muted">(optional)</span></>} htmlFor="email" error={err.email}>
                    <Input id="email" type="email" autoComplete="email" value={form.data.email} onChange={(e) => form.setData('email', e.target.value)} invalid={!!err.email} />
                </Field>
                <div className="grid gap-4 sm:grid-cols-2">
                    <Field label="Choose a PIN" htmlFor="pin" error={err.pin} required hint="At least 4 digits.">
                        <PinInput id="pin" autoComplete="new-password" value={form.data.pin} onChange={(v) => form.setData('pin', v)} invalid={!!err.pin} />
                    </Field>
                    <Field label="PIN again" htmlFor="pin_confirmation" required>
                        <PinInput id="pin_confirmation" autoComplete="new-password" value={form.data.pin_confirmation} onChange={(v) => form.setData('pin_confirmation', v)} allowLetters={false} />
                    </Field>
                </div>
                <Button type="submit" size="lg" className="w-full" icon={ArrowRight} disabled={form.processing}>{form.processing ? 'Creating…' : 'Next: your business'}</Button>
            </form>
            <p className="mt-6 text-center text-sm text-muted">
                Already have an account? <Link href={route('login')} className="font-bold text-brand hover:underline">Sign in</Link>
            </p>
        </AuthLayout>
    );
}