import type { User } from '@/types';
import { Link, useForm } from '@inertiajs/react';
import {
    AlertTriangle,
    AtSign,
    Loader2,
    Pencil,
    Save,
    ShieldCheck,
    X,
} from 'lucide-react';
import { useState } from 'react';
import { FieldLabel, FormInput } from './fields';
import SectionCard from './SectionCard';

function UnverifiedEmailNotice() {
    return (
        <div className="flex items-start gap-3 rounded-xl border border-orange-200 bg-orange-50 px-4 py-3 dark:border-orange-700/30 dark:bg-orange-900/10">
            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-orange-500" />
            <div className="flex-1 text-sm text-orange-800 dark:text-orange-300">
                Email address not verified.{' '}
                <Link
                    href={route('verification.send')}
                    method="post"
                    as="button"
                    className="font-medium underline"
                >
                    Resend verification
                </Link>
            </div>
        </div>
    );
}

export default function PersonalInfoSection({
    user,
    emailWarning,
}: {
    user: User;
    emailWarning: boolean;
}) {
    const [editing, setEditing] = useState(false);
    const profileForm = useForm({ name: user.name, email: user.email });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        profileForm.patch(route('profile.update'), {
            onSuccess: () => setEditing(false),
        });
    }

    function cancelEdit() {
        profileForm.setData({ name: user.name, email: user.email });
        profileForm.clearErrors();
        setEditing(false);
    }

    return (
        <SectionCard
            id="personal"
            title="Personal information"
            warning={emailWarning}
            action={
                !editing ? (
                    <button
                        type="button"
                        onClick={() => setEditing(true)}
                        className="border-border text-muted-foreground hover:text-foreground mr-2 flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
                    >
                        <Pencil className="h-3 w-3" />
                        Edit
                    </button>
                ) : (
                    <button
                        type="button"
                        onClick={cancelEdit}
                        className="border-border text-muted-foreground hover:text-foreground mr-2 flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
                    >
                        <X className="h-3 w-3" />
                        Cancel
                    </button>
                )
            }
        >
            {editing ? (
                /* Edit mode */
                <form onSubmit={submit} className="space-y-5">
                    <div className="grid gap-4 sm:grid-cols-2">
                        <FormInput
                            label="Full name"
                            value={profileForm.data.name}
                            onChange={(v) => profileForm.setData('name', v)}
                            error={profileForm.errors.name}
                            autoComplete="name"
                        />
                        <FormInput
                            label="Email address"
                            type="email"
                            value={profileForm.data.email}
                            onChange={(v) => profileForm.setData('email', v)}
                            error={profileForm.errors.email}
                            autoComplete="email"
                            prefix={<AtSign className="h-4 w-4" />}
                        />
                    </div>

                    {emailWarning && <UnverifiedEmailNotice />}

                    <div className="border-border flex items-center justify-end border-t pt-4">
                        <button
                            type="submit"
                            disabled={profileForm.processing}
                            className="pf-btn flex items-center gap-2 px-5 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
                        >
                            {profileForm.processing ? (
                                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                            ) : (
                                <Save className="h-3.5 w-3.5" />
                            )}
                            Save changes
                        </button>
                    </div>
                </form>
            ) : (
                /* View mode */
                <div className="space-y-4">
                    <div className="grid gap-x-8 gap-y-4 sm:grid-cols-2">
                        <div>
                            <FieldLabel label="Full name" />
                            <p className="text-foreground mt-1 text-sm font-semibold">
                                {user.name}
                            </p>
                        </div>
                        <div>
                            <FieldLabel label="Email address" />
                            <div className="mt-1 flex items-center gap-2">
                                <p
                                    className={`text-sm font-semibold ${emailWarning ? 'text-orange-500' : 'text-foreground'}`}
                                >
                                    {user.email}
                                </p>
                                {user.email_verified_at ? (
                                    <span className="flex items-center gap-1 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
                                        <ShieldCheck className="h-3 w-3" />
                                        Verified
                                    </span>
                                ) : (
                                    <span className="text-[10px] font-semibold text-orange-500">
                                        Not verified
                                    </span>
                                )}
                            </div>
                        </div>
                    </div>

                    {emailWarning && <UnverifiedEmailNotice />}
                </div>
            )}
        </SectionCard>
    );
}