import { type BreadcrumbItem, type SharedData } from '@/types';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { Alert, Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { IconCheck, IconDeviceFloppy, IconMail } from '@tabler/icons-react';
import React from 'react';

import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
import { edit } from '@/routes/profile';
import { send } from '@/routes/verification';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Profile settings',
        href: edit().url,
    },
];

export default function Profile({
    mustVerifyEmail,
    status,
}: {
    mustVerifyEmail: boolean;
    status?: string;
}) {
    const { auth } = usePage<SharedData>().props;
    const form = useForm({
        name: auth.user.name,
        email: auth.user.email,
    });

    const submit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        form.patch(route('profile.update'), {
            preserveScroll: true,
        });
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Profile settings" />

            <SettingsLayout>
                <Card withBorder shadow="sm" radius="md">
                    <form onSubmit={submit}>
                        <Stack spacing="md">
                            <Stack spacing={2}>
                                <Text weight={700}>Profile information</Text>
                                <Text size="sm" color="dimmed">
                                    Update your name and email address.
                                </Text>
                            </Stack>

                            <TextInput
                                label="Name"
                                value={form.data.name}
                                onChange={(event) => form.setData('name', event.currentTarget.value)}
                                error={form.errors.name}
                                required
                                autoComplete="name"
                            />

                            <TextInput
                                label="Email address"
                                type="email"
                                value={form.data.email}
                                onChange={(event) => form.setData('email', event.currentTarget.value)}
                                error={form.errors.email}
                                required
                                autoComplete="username"
                            />

                            {mustVerifyEmail && auth.user.email_verified_at === null ? (
                                <Alert icon={<IconMail size={16} />} color="yellow" variant="light">
                                    <Stack spacing={4}>
                                        <Text size="sm">Your email address is unverified.</Text>
                                        <Text
                                            component={Link}
                                            href={send()}
                                            size="sm"
                                            underline
                                            weight={600}
                                        >
                                            Resend the verification email
                                        </Text>
                                    </Stack>
                                </Alert>
                            ) : null}

                            {status === 'verification-link-sent' ? (
                                <Alert icon={<IconCheck size={16} />} color="green" variant="light">
                                    A new verification link has been sent to your email address.
                                </Alert>
                            ) : null}

                            <Group spacing="sm">
                                <Button
                                    type="submit"
                                    loading={form.processing}
                                    leftIcon={<IconDeviceFloppy size={16} />}
                                >
                                    Save
                                </Button>

                                {form.recentlySuccessful ? (
                                    <Text size="sm" color="dimmed">
                                        Saved
                                    </Text>
                                ) : null}
                            </Group>
                        </Stack>
                    </form>
                </Card>
            </SettingsLayout>
        </AppLayout>
    );
}
