import { useForm } from '@inertiajs/react';
import { ArrowRight, KeyRound } from 'lucide-react';
import { FormEvent } from 'react';

import { InstallLayout } from '@/layouts/InstallLayout';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

interface Props {
    currentCode: string;
}

export default function InstallPurchase({ currentCode }: Props) {
    const form = useForm({
        purchase_code: currentCode ?? '',
    });

    function submit(e: FormEvent) {
        e.preventDefault();
        form.post('/install/purchase', { preserveScroll: true });
    }

    return (
        <InstallLayout
            title="Purchase code"
            description="Enter the purchase code you received with your Arcade license."
            currentStep={1}
        >
            <form onSubmit={submit} className="space-y-4">
                <div className="flex items-start gap-3 rounded-md border bg-muted/30 px-3 py-2 text-sm text-muted-foreground">
                    <KeyRound className="mt-0.5 size-4" />
                    <p>
                        Required. Your purchase code unlocks the upstream game importer at the dashboard. Keep it private — it acts as an API key for your license.
                    </p>
                </div>

                <div className="space-y-2">
                    <Label htmlFor="purchase_code">Purchase code</Label>
                    <Input
                        id="purchase_code"
                        type="text"
                        autoComplete="off"
                        autoCorrect="off"
                        autoCapitalize="off"
                        spellCheck={false}
                        placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                        value={form.data.purchase_code}
                        onChange={(e) => form.setData('purchase_code', e.target.value)}
                    />
                    {form.errors.purchase_code && (
                        <p className="text-xs text-destructive">{form.errors.purchase_code}</p>
                    )}
                    <p className="text-xs text-muted-foreground">
                        You can find this in the email or download page that came with your purchase. The code is stored encrypted in your database.
                    </p>
                </div>

                <div className="flex justify-end">
                    <Button type="submit" disabled={form.processing}>
                        {form.processing ? 'Saving…' : 'Save & continue'}
                        <ArrowRight className="ml-2 size-4" />
                    </Button>
                </div>
            </form>
        </InstallLayout>
    );
}