/* Signing up, step 2 of 2: the business. */
import { router, useForm } from '@inertiajs/react';
import type { FormEvent } from 'react';
import { Check } from 'lucide-react';
import AuthLayout from '../../layouts/AuthLayout';
import BusinessFields from '../../components/BusinessFields';
import { Button } from '../../components/ui';

type Props = { types: Record<string, string>; currencies: Record<string, string>; trialDays: number; ownerName: string };

export default function Setup({ types, currencies, trialDays, ownerName }: Props) {
    const form = useForm({ name: '', type: 'shop', currency: 'MWK', opens_at: '', closes_at: '', loans_enabled: false });
    const submit = (e: FormEvent) => { e.preventDefault(); form.post(route('setup.store')); };

    return (
        <AuthLayout title="Your business" heading={`Welcome, ${ownerName.split(' ')[0]}`} intro={<>Step 2 of 2: tell us about your business. Your first {trialDays} days are free.</>}>
            <form onSubmit={submit} noValidate>
                <BusinessFields form={form} types={types} currencies={currencies} />
                {/* customer loans are optional: ask now, change any time in Settings */}
                <div className="mt-5">
                    <p className="mb-2 text-sm font-semibold text-ink">Do customers sometimes take goods and pay later?</p>
                    <div className="grid grid-cols-2 gap-2">
                        {([[true, 'Yes, I give credit'], [false, 'No, never']] as const).map(([v, label]) => (
                            <button key={label} type="button" onClick={() => form.setData('loans_enabled', v)}
                                className={`rounded-xl border-2 px-3 py-3 text-sm font-bold ${form.data.loans_enabled === v ? 'border-brand bg-brand/[0.06] text-brand' : 'border-line text-ink-2'}`}>{label}</button>
                        ))}
                    </div>
                    <p className="mt-1.5 text-xs text-muted">Yes adds Customers, loans and SMS reminders. You can change it later in Settings.</p>
                </div>
                <Button type="submit" size="lg" className="mt-6 w-full" icon={Check} disabled={form.processing}>{form.processing ? 'Setting up…' : 'Start selling'}</Button>
            </form>
            <button onClick={() => router.post(route('logout'))} className="mt-4 w-full text-center text-sm text-muted hover:text-ink">Sign out</button>
        </AuthLayout>
    );
}