import { useForm, usePage } from '@inertiajs/react';
import { Database, ArrowRight } 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';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

interface Props {
    sqliteAvailable: boolean;
}

export default function InstallDatabase({ sqliteAvailable }: Props) {
    const page = usePage<{ errors: Record<string, string> }>();
    const form = useForm({
        db_type: sqliteAvailable ? 'sqlite' : 'mysql',
        host: '127.0.0.1',
        port: 3306,
        database: '',
        username: '',
        password: '',
    });

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

    return (
        <InstallLayout
            title="Database"
            description="Choose SQLite for zero-config local installs, or MySQL for production."
            currentStep={4}
        >
            <form onSubmit={submit} className="space-y-4">
                {page.props.errors?.db && (
                    <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
                        {page.props.errors.db}
                    </div>
                )}

                <div className="space-y-2">
                    <Label htmlFor="db_type" className="flex items-center gap-2">
                        <Database className="size-4" />
                        Connection type
                    </Label>
                    <Select
                        value={form.data.db_type}
                        onValueChange={(value) => form.setData('db_type', value)}
                    >
                        <SelectTrigger id="db_type">
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            {sqliteAvailable && <SelectItem value="sqlite">SQLite</SelectItem>}
                            <SelectItem value="mysql">MySQL</SelectItem>
                        </SelectContent>
                    </Select>
                    {form.errors.db_type && (
                        <p className="text-xs text-destructive">{form.errors.db_type}</p>
                    )}
                </div>

                {form.data.db_type === 'mysql' && (
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div className="space-y-2">
                            <Label htmlFor="host">Host</Label>
                            <Input
                                id="host"
                                placeholder="127.0.0.1"
                                autoComplete="off"
                                value={form.data.host}
                                onChange={(e) => form.setData('host', e.target.value)}
                            />
                            {form.errors.host && (
                                <p className="text-xs text-destructive">{form.errors.host}</p>
                            )}
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="port">Port</Label>
                            <Input
                                id="port"
                                type="number"
                                placeholder="3306"
                                value={form.data.port}
                                onChange={(e) => form.setData('port', parseInt(e.target.value) || 3306)}
                            />
                            {form.errors.port && (
                                <p className="text-xs text-destructive">{form.errors.port}</p>
                            )}
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="database">Database</Label>
                            <Input
                                id="database"
                                placeholder="arcade_db"
                                autoComplete="off"
                                value={form.data.database}
                                onChange={(e) => form.setData('database', e.target.value)}
                            />
                            {form.errors.database && (
                                <p className="text-xs text-destructive">{form.errors.database}</p>
                            )}
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="username">Username</Label>
                            <Input
                                id="username"
                                placeholder="arcade_user"
                                autoComplete="off"
                                value={form.data.username}
                                onChange={(e) => form.setData('username', e.target.value)}
                            />
                            {form.errors.username && (
                                <p className="text-xs text-destructive">{form.errors.username}</p>
                            )}
                        </div>
                        <div className="space-y-2 sm:col-span-2">
                            <Label htmlFor="password">Password</Label>
                            <Input
                                id="password"
                                type="password"
                                placeholder="••••••••"
                                autoComplete="new-password"
                                value={form.data.password}
                                onChange={(e) => form.setData('password', e.target.value)}
                            />
                            {form.errors.password && (
                                <p className="text-xs text-destructive">{form.errors.password}</p>
                            )}
                        </div>
                    </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>
    );
}