import { Form, Head } from '@inertiajs/react';
import OnboardingController from '@/actions/App/Http/Controllers/OnboardingController';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';

type CompanyDraft = {
    name: string;
    base_currency: string;
    fiscal_year_start_month: number;
};

const currencies = ['USD', 'CAD', 'GBP', 'EUR', 'AUD', 'NZD'];

export default function OnboardingCompany({
    company,
}: {
    company: CompanyDraft | null;
}) {
    return (
        <>
            <Head title="Company profile" />
            <Form
                {...OnboardingController.storeCompany.form()}
                disableWhileProcessing
                className="flex flex-col gap-6"
            >
                {({ processing, errors }) => (
                    <div className="grid gap-6">
                        <div className="grid gap-2">
                            <Label htmlFor="name">Company name</Label>
                            <Input
                                id="name"
                                name="name"
                                required
                                autoFocus
                                defaultValue={company?.name ?? ''}
                                placeholder="Acme Holdings"
                            />
                            <InputError message={errors.name} />
                        </div>

                        <div className="grid gap-2">
                            <Label htmlFor="base_currency">Base currency</Label>
                            <select
                                id="base_currency"
                                name="base_currency"
                                defaultValue={company?.base_currency ?? 'USD'}
                                className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
                            >
                                {currencies.map((currency) => (
                                    <option key={currency} value={currency}>
                                        {currency}
                                    </option>
                                ))}
                            </select>
                            <InputError message={errors.base_currency} />
                        </div>

                        <div className="grid gap-2">
                            <Label htmlFor="fiscal_year_start_month">
                                Fiscal year starts
                            </Label>
                            <select
                                id="fiscal_year_start_month"
                                name="fiscal_year_start_month"
                                defaultValue={
                                    company?.fiscal_year_start_month ?? 1
                                }
                                className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
                            >
                                {[
                                    'January',
                                    'February',
                                    'March',
                                    'April',
                                    'May',
                                    'June',
                                    'July',
                                    'August',
                                    'September',
                                    'October',
                                    'November',
                                    'December',
                                ].map((month, index) => (
                                    <option key={month} value={index + 1}>
                                        {month}
                                    </option>
                                ))}
                            </select>
                            <InputError
                                message={errors.fiscal_year_start_month}
                            />
                        </div>

                        <Button type="submit" className="w-full">
                            {processing && <Spinner />}
                            Continue
                        </Button>
                    </div>
                )}
            </Form>
        </>
    );
}

OnboardingCompany.layout = {
    title: 'Tell us about your company',
    description: 'This is the company whose books you will connect.',
};
