import { useForm } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Field } from '@/components/ui/label';
import AuthLayout from '@/layouts/AuthLayout';
import { SocialButtons } from './Login';

export default function AcceptInvitation({ token, email, name, roles, socialProviders }: {
    token: string; email: string; name: string | null; roles: { company: string; role: string }[]; socialProviders: { google: boolean; microsoft: boolean };
}) {
    const form = useForm({ name: name ?? '', password: '', password_confirmation: '' });
    return (
        <AuthLayout title="Join Spin Group Quotes" subtitle={`You've been invited as ${email}.`}>
            <ul className="mb-5 space-y-1 rounded-md bg-stone-50 p-3 text-sm">
                {roles.map((r) => (
                    <li key={r.company} className="flex justify-between"><span>{r.company}</span><span className="font-medium">{r.role}</span></li>
                ))}
            </ul>
            <form onSubmit={(e) => { e.preventDefault(); form.post(`/invitations/${token}`); }} className="space-y-4">
                <Field label="Your name" htmlFor="name" error={form.errors.name}>
                    <Input id="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} required autoFocus />
                </Field>
                <Field label="Password" htmlFor="password" error={form.errors.password}>
                    <Input id="password" type="password" autoComplete="new-password" value={form.data.password} onChange={(e) => form.setData('password', e.target.value)} required />
                </Field>
                <Field label="Confirm password" htmlFor="password_confirmation">
                    <Input id="password_confirmation" type="password" autoComplete="new-password" value={form.data.password_confirmation} onChange={(e) => form.setData('password_confirmation', e.target.value)} required />
                </Field>
                <Button type="submit" className="w-full" disabled={form.processing}>Create account</Button>
            </form>
            <SocialButtons providers={socialProviders} hrefFor={(p) => `/invitations/${token}/social/${p}`} />
        </AuthLayout>
    );
}