import { Head, Link, router, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import AppLayout from '@/Layouts/AppLayout';

interface Props {
    user: {
        name: string;
        email: string;
        discord_avatar: string | null;
        fivem_license: string | null;
    };
    twoFactorEnabled: boolean;
}

export default function Profile({ user, twoFactorEnabled }: Props) {
    const { data, setData, patch, processing, errors } = useForm({
        name: user.name,
        email: user.email,
        password: '',
        password_confirmation: '',
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        patch(route('profile.update'));
    };

    return (
        <AppLayout>
            <Head title="Profile" />
            <h1 className="mb-6 text-2xl font-bold">Profile</h1>

            <div className="grid gap-6 lg:grid-cols-2">
                <form onSubmit={submit} className="space-y-4 rounded-lg bg-gray-900 p-6 ring-1 ring-white/10">
                    <div>
                        <label className="mb-1 block text-sm text-gray-300">Name</label>
                        <input
                            value={data.name}
                            onChange={(e) => setData('name', e.target.value)}
                            className="w-full rounded-md border-gray-700 bg-gray-800 text-white"
                        />
                        {errors.name && <p className="mt-1 text-sm text-red-400">{errors.name}</p>}
                    </div>
                    <div>
                        <label className="mb-1 block text-sm text-gray-300">Email</label>
                        <input
                            type="email"
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                            className="w-full rounded-md border-gray-700 bg-gray-800 text-white"
                        />
                        {errors.email && <p className="mt-1 text-sm text-red-400">{errors.email}</p>}
                    </div>
                    <div>
                        <label className="mb-1 block text-sm text-gray-300">New password (optional)</label>
                        <input
                            type="password"
                            value={data.password}
                            onChange={(e) => setData('password', e.target.value)}
                            className="w-full rounded-md border-gray-700 bg-gray-800 text-white"
                        />
                        {errors.password && <p className="mt-1 text-sm text-red-400">{errors.password}</p>}
                    </div>
                    <div>
                        <label className="mb-1 block text-sm text-gray-300">Confirm new password</label>
                        <input
                            type="password"
                            value={data.password_confirmation}
                            onChange={(e) => setData('password_confirmation', e.target.value)}
                            className="w-full rounded-md border-gray-700 bg-gray-800 text-white"
                        />
                    </div>
                    <button
                        type="submit"
                        disabled={processing}
                        className="rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50"
                    >
                        Save
                    </button>
                </form>

                <div className="space-y-4 rounded-lg bg-gray-900 p-6 ring-1 ring-white/10">
                    <h2 className="font-semibold">Two-factor authentication</h2>
                    <p className="text-sm text-gray-400">
                        {twoFactorEnabled
                            ? 'Two-factor authentication is enabled on your account.'
                            : 'Two-factor authentication is not enabled.'}
                    </p>
                    {twoFactorEnabled ? (
                        <Link
                            href={route('two-factor.disable')}
                            method="delete"
                            as="button"
                            className="rounded-md bg-red-900/60 px-4 py-2 text-sm text-red-200 ring-1 ring-red-700 hover:bg-red-900"
                        >
                            Disable 2FA
                        </Link>
                    ) : (
                        <Link
                            href={route('two-factor.setup')}
                            className="inline-block rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700"
                        >
                            Enable 2FA
                        </Link>
                    )}

                    <hr className="border-white/10" />

                    <h2 className="font-semibold">FiveM link</h2>
                    <p className="text-sm text-gray-400">
                        {user.fivem_license ? 'Your account is linked to a FiveM license.' : 'Not linked yet.'}
                    </p>
                    <p className="text-xs text-gray-500">Use /linkucp in-game to link or relink your character.</p>
                    <button
                        onClick={() => router.post(route('profile.link-code'))}
                        className="rounded-md bg-gray-800 px-4 py-2 text-sm text-gray-200 hover:bg-gray-700"
                    >
                        Generate link code
                    </button>
                </div>
            </div>
        </AppLayout>
    );
}
