import { Head, router, useForm } from '@inertiajs/react';
import { useMemo, useState } from 'react';
import ClientLayout from '@/Layouts/ClientLayout';
import DigitalVCardProductionActions from './DigitalVCardProductionActions';
import BusinessContentEditor from './BusinessContentEditor';
import CountryPhoneInput from '@/Components/CountryPhoneInput';
import {
    Plus,
    CreditCard,
    Gem,
    Shirt,
    Utensils,
    Building2,
    Sparkles,
    Stethoscope,
    GraduationCap,
    Plane,
    Megaphone,
    Briefcase,
    X,
    Eye,
    Pencil,
    Trash2,
    Globe2,
    Check,
    BarChart3,
    ExternalLink,
    QrCode,
    Copy,
    Upload,
    Image} from 'lucide-react';

const categoryIcons = {
    gem: Gem,
    shirt: Shirt,
    utensils: Utensils,
    building: Building2,
    sparkles: Sparkles,
    stethoscope: Stethoscope,
    'graduation-cap': GraduationCap,
    plane: Plane,
    megaphone: Megaphone,
    briefcase: Briefcase,
};

function CategoryIcon({ icon, className = 'h-5 w-5' }) {
    const Icon = categoryIcons[icon] ?? Briefcase;
    return <Icon className={className} />;
}

function ThemePreview({ theme, selected = false, onClick }) {
    return (
        <button
            type="button"
            onClick={onClick}
            className={[
                'relative overflow-hidden rounded-2xl border text-left transition-all',
                selected
                    ? 'border-brand-500 ring-2 ring-brand-500/20 shadow-md'
                    : 'border-gray-200 dark:border-neutral-700 hover:border-brand-400 hover:shadow-md',
            ].join(' ')}
        >
            <div className="relative h-40 overflow-hidden bg-neutral-100 dark:bg-neutral-800">
                {theme.preview_url ? (
                    <img
                        src={theme.preview_url}
                        alt={`${theme.name} preview`}
                        className="h-full w-full object-cover"
                        loading="lazy"
                    />
                ) : (
                    <div className="flex h-full items-center justify-center">
                        <CreditCard className="h-9 w-9 text-neutral-400" />
                    </div>
                )}

                {theme.is_premium && (
                    <span className="absolute right-3 top-3 rounded-full bg-black/75 px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-white backdrop-blur">
                        Premium
                    </span>
                )}
            </div>

            <div className="bg-white p-4 dark:bg-neutral-900">
                <div className="flex items-start justify-between gap-3">
                    <div>
                        <div className="font-semibold text-neutral-900 dark:text-white">
                            {theme.name}
                        </div>
                        <div className="mt-1 line-clamp-2 text-xs text-neutral-500">
                            {theme.description}
                        </div>
                    </div>
                    {selected && (
                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-600 text-white">
                            <Check className="h-4 w-4" />
                        </span>
                    )}
                </div>
            </div>
        </button>
    );
}

function VCardImagesModal({ card, onClose }) {
    const {
        data,
        setData,
        post,
        processing,
        errors,
    } = useForm({
        profile_photo: null,
        logo: null,
    });

    const [profilePreview, setProfilePreview] = useState(card.profile_photo_url ?? null);
    const [logoPreview, setLogoPreview] = useState(card.logo_url ?? null);

    const selectProfile = (file) => {
        setData('profile_photo', file ?? null);

        if (file) {
            setProfilePreview(URL.createObjectURL(file));
        }
    };

    const selectLogo = (file) => {
        setData('logo', file ?? null);

        if (file) {
            setLogoPreview(URL.createObjectURL(file));
        }
    };

    const submit = (e) => {
        e.preventDefault();

        post(route('client.digital-vcards.assets', card.id), {
            forceFormData: true,
            preserveScroll: true,
            onSuccess: onClose,
        });
    };

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div
                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
                onClick={onClose}
            />

            <div className="relative z-10 w-full max-w-xl overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-neutral-900">
                <div className="flex items-center justify-between border-b border-gray-200 px-6 py-5 dark:border-neutral-800">
                    <div>
                        <h2 className="text-xl font-bold text-neutral-900 dark:text-white">
                            VCard Images
                        </h2>
                        <p className="mt-1 text-sm text-neutral-500">
                            {card.name}
                        </p>
                    </div>

                    <button
                        type="button"
                        onClick={onClose}
                        className="rounded-full p-2 text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                    >
                        <X className="h-5 w-5" />
                    </button>
                </div>

                <form onSubmit={submit}>
                    <div className="grid gap-6 p-6 sm:grid-cols-2">

                        <div>
                            <label className="mb-3 block text-sm font-semibold text-neutral-800 dark:text-neutral-200">
                                Profile Photo
                            </label>

                            <div className="mb-4 flex h-36 items-center justify-center overflow-hidden rounded-2xl border border-dashed border-gray-300 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800">
                                {profilePreview ? (
                                    <img
                                        src={profilePreview}
                                        alt="Profile preview"
                                        className="h-full w-full object-cover"
                                    />
                                ) : (
                                    <div className="text-center text-neutral-400">
                                        <CreditCard className="mx-auto h-8 w-8" />
                                        <div className="mt-2 text-xs">No photo</div>
                                    </div>
                                )}
                            </div>

                            <label className="flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-gray-300 px-3 py-2.5 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800">
                                <Upload className="h-4 w-4" />
                                Choose Photo

                                <input
                                    type="file"
                                    accept="image/jpeg,image/png,image/webp"
                                    className="hidden"
                                    onChange={(e) => selectProfile(e.target.files?.[0])}
                                />
                            </label>

                            {errors.profile_photo && (
                                <p className="mt-2 text-xs text-red-600">
                                    {errors.profile_photo}
                                </p>
                            )}
                        </div>


                        <div>
                            <label className="mb-3 block text-sm font-semibold text-neutral-800 dark:text-neutral-200">
                                Business Logo
                            </label>

                            <div className="mb-4 flex h-36 items-center justify-center overflow-hidden rounded-2xl border border-dashed border-gray-300 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800">
                                {logoPreview ? (
                                    <img
                                        src={logoPreview}
                                        alt="Logo preview"
                                        className="max-h-full max-w-full object-contain"
                                    />
                                ) : (
                                    <div className="text-center text-neutral-400">
                                        <Image className="mx-auto h-8 w-8" />
                                        <div className="mt-2 text-xs">No logo</div>
                                    </div>
                                )}
                            </div>

                            <label className="flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-gray-300 px-3 py-2.5 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800">
                                <Upload className="h-4 w-4" />
                                Choose Logo

                                <input
                                    type="file"
                                    accept="image/jpeg,image/png,image/webp"
                                    className="hidden"
                                    onChange={(e) => selectLogo(e.target.files?.[0])}
                                />
                            </label>

                            {errors.logo && (
                                <p className="mt-2 text-xs text-red-600">
                                    {errors.logo}
                                </p>
                            )}
                        </div>

                        <div className="sm:col-span-2 text-xs text-neutral-500">
                            JPG, PNG or WEBP. Maximum 5 MB per image.
                        </div>

                    </div>

                    <div className="flex justify-end gap-3 border-t border-gray-200 bg-neutral-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-950">
                        <button
                            type="button"
                            onClick={onClose}
                            className="rounded-xl border border-gray-300 px-4 py-2 text-sm font-semibold text-neutral-700 dark:border-neutral-700 dark:text-neutral-200"
                        >
                            Cancel
                        </button>

                        <button
                            type="submit"
                            disabled={
                                processing ||
                                (!data.profile_photo && !data.logo)
                            }
                            className="rounded-xl bg-brand-600 px-5 py-2 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-50"
                        >
                            {processing ? 'Uploading...' : 'Save Images'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}


function EditVCardModal({ card, categories, onClose }) {
    const initialCategoryId = card.theme?.category?.id ?? null;

    const [selectedCategoryId, setSelectedCategoryId] = useState(initialCategoryId);

    const {
        data,
        setData,
        put,
        processing,
        errors,
    } = useForm({
        theme_id: card.theme?.id ?? '',
        name: card.name ?? '',
        slug: card.slug ?? '',
        company_name: card.company_name ?? '',
        designation: card.designation ?? '',
        phone: card.phone ?? '',
        whatsapp: card.whatsapp ?? '',
        email: card.email ?? '',
        website: card.website ?? '',
        address: card.address ?? '',
        map_url: card.map_url ?? '',
        about: card.about ?? '',
        social_links: Array.isArray(card.social_links) ? card.social_links : [],
        services: Array.isArray(card.services) ? card.services : [],
        products: Array.isArray(card.products) ? card.products : [],
        gallery: Array.isArray(card.gallery) ? card.gallery : [],
        custom_buttons: Array.isArray(card.custom_buttons) ? card.custom_buttons : [],
        settings: card.settings ?? {},
        is_default: Boolean(card.is_default),
        seo_title: card.seo_title ?? '',
        seo_description: card.seo_description ?? '',
    });

    const selectedCategory = categories.find(
        (category) => category.id === selectedCategoryId
    );

    const addSocial = () => {
        setData('social_links', [
            ...data.social_links,
            { type: 'instagram', label: '', url: '' },
        ]);
    };

    const updateSocial = (index, key, value) => {
        const items = [...data.social_links];
        items[index] = { ...items[index], [key]: value };
        setData('social_links', items);
    };

    const removeSocial = (index) => {
        setData(
            'social_links',
            data.social_links.filter((_, i) => i !== index)
        );
    };

    const addService = () => {
        setData('services', [
            ...data.services,
            { title: '', description: '' },
        ]);
    };

    const updateService = (index, key, value) => {
        const items = [...data.services];
        items[index] = { ...items[index], [key]: value };
        setData('services', items);
    };

    const removeService = (index) => {
        setData(
            'services',
            data.services.filter((_, i) => i !== index)
        );
    };

    const submit = (e) => {
        e.preventDefault();

        put(route('client.digital-vcards.update', card.id), {
            preserveScroll: true,
            onSuccess: onClose,
        });
    };

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div
                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
                onClick={onClose}
            />

            <div className="relative z-10 flex max-h-[94vh] w-full max-w-5xl flex-col overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-neutral-900">

                <div className="flex items-center justify-between border-b border-gray-200 px-6 py-5 dark:border-neutral-800">
                    <div>
                        <h2 className="text-xl font-bold text-neutral-900 dark:text-white">
                            Edit Digital VCard
                        </h2>
                        <p className="mt-1 text-sm text-neutral-500">
                            {card.name}
                        </p>
                    </div>

                    <button
                        type="button"
                        onClick={onClose}
                        className="rounded-full p-2 text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                    >
                        <X className="h-5 w-5" />
                    </button>
                </div>

                <form
                    id="edit-vcard-form"
                    onSubmit={submit}
                    className="overflow-y-auto"
                >
                    <div className="space-y-8 p-6">

                        <section>
                            <h3 className="mb-4 text-base font-bold text-neutral-900 dark:text-white">
                                Business Category & Theme
                            </h3>

                            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
                                {categories.map((category) => (
                                    <button
                                        key={category.id}
                                        type="button"
                                        onClick={() => {
                                            setSelectedCategoryId(category.id);
                                            setData('theme_id', '');
                                        }}
                                        className={[
                                            'rounded-xl border p-3 text-left text-sm transition',
                                            selectedCategoryId === category.id
                                                ? 'border-brand-500 bg-brand-50 dark:bg-brand-950/20'
                                                : 'border-gray-200 dark:border-neutral-700',
                                        ].join(' ')}
                                    >
                                        <div className="flex items-center gap-2">
                                            <CategoryIcon
                                                icon={category.icon}
                                                className="h-4 w-4"
                                            />
                                            <span className="font-semibold">
                                                {category.name}
                                            </span>
                                        </div>
                                    </button>
                                ))}
                            </div>

                            {selectedCategory && (
                                <div className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                    {selectedCategory.themes.map((theme) => (
                                        <button
                                            key={theme.id}
                                            type="button"
                                            onClick={() => setData('theme_id', theme.id)}
                                            className={[
                                                'rounded-xl border p-4 text-left transition',
                                                Number(data.theme_id) === theme.id
                                                    ? 'border-brand-500 ring-2 ring-brand-500/10'
                                                    : 'border-gray-200 dark:border-neutral-700',
                                            ].join(' ')}
                                        >
                                            <div className="font-semibold text-neutral-900 dark:text-white">
                                                {theme.name}
                                            </div>

                                            <div className="mt-1 text-xs text-neutral-500">
                                                {theme.description}
                                            </div>

                                            {theme.is_premium && (
                                                <span className="mt-2 inline-block rounded-full bg-amber-50 px-2 py-1 text-[10px] font-bold uppercase text-amber-700">
                                                    Premium
                                                </span>
                                            )}
                                        </button>
                                    ))}
                                </div>
                            )}

                            {errors.theme_id && (
                                <p className="mt-2 text-xs text-red-600">
                                    {errors.theme_id}
                                </p>
                            )}
                        </section>


                        <section>
                            <h3 className="mb-4 text-base font-bold text-neutral-900 dark:text-white">
                                Basic Information
                            </h3>

                            <div className="grid gap-4 md:grid-cols-2">

                                <Field
                                    label="Person / Card Name"
                                    value={data.name}
                                    onChange={(v) => setData('name', v)}
                                    error={errors.name}
                                    required
                                />

                                <Field
                                    label="Public Slug"
                                    value={data.slug}
                                    onChange={(v) =>
                                        setData(
                                            'slug',
                                            v.toLowerCase()
                                                .replace(/\s+/g, '-')
                                                .replace(/[^a-z0-9-]/g, '')
                                        )
                                    }
                                    error={errors.slug}
                                />

                                <Field
                                    label="Business / Company Name"
                                    value={data.company_name}
                                    onChange={(v) => setData('company_name', v)}
                                    error={errors.company_name}
                                />

                                <Field
                                    label="Designation"
                                    value={data.designation}
                                    onChange={(v) => setData('designation', v)}
                                />

                                <CountryPhoneInput
                                    label="Mobile"
                                    value={data.phone}
                                    onChange={(v) => setData('phone', v)}
                                    defaultCountry="IN"
                                    placeholder="Enter mobile number"
                                />

                                <CountryPhoneInput
                                    label="WhatsApp"
                                    value={data.whatsapp}
                                    onChange={(v) => setData('whatsapp', v)}
                                    defaultCountry="IN"
                                    placeholder="Enter WhatsApp number"
                                />

                                <Field
                                    label="Email"
                                    type="email"
                                    value={data.email}
                                    onChange={(v) => setData('email', v)}
                                    error={errors.email}
                                />

                                <Field
                                    label="Website"
                                    value={data.website}
                                    onChange={(v) => setData('website', v)}
                                    error={errors.website}
                                    placeholder="https://..."
                                />

                                <Field
                                    label="Google Map URL"
                                    value={data.map_url}
                                    onChange={(v) => setData('map_url', v)}
                                    error={errors.map_url}
                                    placeholder="https://..."
                                />

                                <div className="md:col-span-2">
                                    <label className="mb-1.5 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                                        Address
                                    </label>

                                    <textarea
                                        rows={2}
                                        value={data.address}
                                        onChange={(e) => setData('address', e.target.value)}
                                        className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm dark:border-neutral-700 dark:bg-neutral-800 dark:text-white"
                                    />
                                </div>

                                <div className="md:col-span-2">
                                    <label className="mb-1.5 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                                        About
                                    </label>

                                    <textarea
                                        rows={4}
                                        value={data.about}
                                        onChange={(e) => setData('about', e.target.value)}
                                        className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm dark:border-neutral-700 dark:bg-neutral-800 dark:text-white"
                                    />
                                </div>

                            </div>
                        </section>


                        <section>
                            <div className="mb-4 flex items-center justify-between">
                                <div>
                                    <h3 className="text-base font-bold text-neutral-900 dark:text-white">
                                        Social Media Links
                                    </h3>
                                    <p className="mt-1 text-xs text-neutral-500">
                                        Instagram, Facebook, YouTube, LinkedIn and more.
                                    </p>
                                </div>

                                <button
                                    type="button"
                                    onClick={addSocial}
                                    className="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-2 text-xs font-semibold dark:border-neutral-700"
                                >
                                    <Plus className="h-3.5 w-3.5" />
                                    Add Social
                                </button>
                            </div>

                            <div className="space-y-3">
                                {data.social_links.map((social, index) => (
                                    <div
                                        key={index}
                                        className="grid gap-3 rounded-xl border border-gray-200 p-4 md:grid-cols-[160px_1fr_1fr_auto] dark:border-neutral-700"
                                    >
                                        <select
                                            value={social.type ?? 'instagram'}
                                            onChange={(e) =>
                                                updateSocial(index, 'type', e.target.value)
                                            }
                                            className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-800"
                                        >
                                            <option value="instagram">Instagram</option>
                                            <option value="facebook">Facebook</option>
                                            <option value="youtube">YouTube</option>
                                            <option value="linkedin">LinkedIn</option>
                                            <option value="twitter">X / Twitter</option>
                                            <option value="pinterest">Pinterest</option>
                                            <option value="telegram">Telegram</option>
                                            <option value="other">Other</option>
                                        </select>

                                        <input
                                            value={social.label ?? ''}
                                            placeholder="Label"
                                            onChange={(e) =>
                                                updateSocial(index, 'label', e.target.value)
                                            }
                                            className="rounded-xl border border-gray-300 px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-800"
                                        />

                                        <input
                                            value={social.url ?? ''}
                                            placeholder="https://..."
                                            onChange={(e) =>
                                                updateSocial(index, 'url', e.target.value)
                                            }
                                            className="rounded-xl border border-gray-300 px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-800"
                                        />

                                        <button
                                            type="button"
                                            onClick={() => removeSocial(index)}
                                            className="rounded-lg p-2 text-red-600 hover:bg-red-50"
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </button>
                                    </div>
                                ))}
                            </div>
                        </section>


                        <section>
                            <div className="mb-4 flex items-center justify-between">
                                <div>
                                    <h3 className="text-base font-bold text-neutral-900 dark:text-white">
                                        Services
                                    </h3>
                                    <p className="mt-1 text-xs text-neutral-500">
                                        Add services offered by this business.
                                    </p>
                                </div>

                                <button
                                    type="button"
                                    onClick={addService}
                                    className="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-2 text-xs font-semibold dark:border-neutral-700"
                                >
                                    <Plus className="h-3.5 w-3.5" />
                                    Add Service
                                </button>
                            </div>

                            <div className="space-y-3">
                                {data.services.map((service, index) => (
                                    <div
                                        key={index}
                                        className="rounded-xl border border-gray-200 p-4 dark:border-neutral-700"
                                    >
                                        <div className="flex gap-3">
                                            <div className="flex-1 space-y-3">
                                                <input
                                                    value={service.title ?? ''}
                                                    placeholder="Service title"
                                                    onChange={(e) =>
                                                        updateService(index, 'title', e.target.value)
                                                    }
                                                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-800"
                                                />

                                                <textarea
                                                    rows={2}
                                                    value={service.description ?? ''}
                                                    placeholder="Service description"
                                                    onChange={(e) =>
                                                        updateService(index, 'description', e.target.value)
                                                    }
                                                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-800"
                                                />
                                            </div>

                                            <button
                                                type="button"
                                                onClick={() => removeService(index)}
                                                className="self-start rounded-lg p-2 text-red-600 hover:bg-red-50"
                                            >
                                                <Trash2 className="h-4 w-4" />
                                            </button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </section>


                        <BusinessContentEditor
                            card={card}
                            data={data}
                            setData={setData}
                        />

                        <section>
                            <label className="flex items-center gap-3 rounded-xl border border-gray-200 p-4 dark:border-neutral-700">
                                <input
                                    type="checkbox"
                                    checked={data.is_default}
                                    onChange={(e) => setData('is_default', e.target.checked)}
                                    className="rounded border-gray-300 text-brand-600"
                                />

                                <div>
                                    <div className="text-sm font-semibold text-neutral-900 dark:text-white">
                                        Default VCard
                                    </div>
                                    <div className="text-xs text-neutral-500">
                                        Make this the default card for the current workspace.
                                    </div>
                                </div>
                            </label>
                        </section>

                    </div>
                </form>

                <div className="flex justify-end gap-3 border-t border-gray-200 bg-neutral-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-950">
                    <button
                        type="button"
                        onClick={onClose}
                        className="rounded-xl border border-gray-300 px-4 py-2 text-sm font-semibold dark:border-neutral-700"
                    >
                        Cancel
                    </button>

                    <button
                        type="submit"
                        form="edit-vcard-form"
                        disabled={processing || !data.name || !data.theme_id}
                        className="rounded-xl bg-brand-600 px-5 py-2 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-50"
                    >
                        {processing ? 'Saving...' : 'Save Changes'}
                    </button>
                </div>

            </div>
        </div>
    );
}

function CreateVCardModal({ categories, onClose }) {
    const [step, setStep] = useState(1);
    const [selectedCategoryId, setSelectedCategoryId] = useState(null);

    const {
        data,
        setData,
        post,
        processing,
        errors,
        reset,
    } = useForm({
        theme_id: '',
        name: '',
        slug: '',
        company_name: '',
        designation: '',
        phone: '',
        whatsapp: '',
        email: '',
        website: '',
        address: '',
        map_url: '',
        about: '',
        is_default: false,
    });

    const selectedCategory = useMemo(
        () => categories.find((c) => c.id === selectedCategoryId) ?? null,
        [categories, selectedCategoryId]
    );

    const submit = (e) => {
        e.preventDefault();

        post(route('client.digital-vcards.store'), {
            preserveScroll: true,
            onSuccess: () => {
                reset();
                onClose();
            },
        });
    };

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div
                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
                onClick={onClose}
            />

            <div className="relative z-10 flex max-h-[92vh] w-full max-w-5xl flex-col overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-neutral-900">
                <div className="flex items-center justify-between border-b border-gray-200 px-6 py-5 dark:border-neutral-800">
                    <div>
                        <h2 className="text-xl font-bold text-neutral-900 dark:text-white">
                            Create Digital VCard
                        </h2>
                        <p className="mt-1 text-sm text-neutral-500">
                            Step {step} of 3
                        </p>
                    </div>

                    <button
                        type="button"
                        onClick={onClose}
                        className="rounded-full p-2 text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                    >
                        <X className="h-5 w-5" />
                    </button>
                </div>

                <div className="overflow-y-auto p-6">
                    {step === 1 && (
                        <>
                            <div className="mb-5">
                                <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
                                    Select Your Business Type
                                </h3>
                                <p className="mt-1 text-sm text-neutral-500">
                                    Themes will be shown according to your business category.
                                </p>
                            </div>

                            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                {categories.map((category) => (
                                    <button
                                        type="button"
                                        key={category.id}
                                        onClick={() => {
                                            setSelectedCategoryId(category.id);
                                            setData('theme_id', '');
                                        }}
                                        className={[
                                            'rounded-2xl border p-4 text-left transition',
                                            selectedCategoryId === category.id
                                                ? 'border-brand-500 bg-brand-50 ring-2 ring-brand-500/10 dark:bg-brand-950/20'
                                                : 'border-gray-200 hover:border-brand-300 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800',
                                        ].join(' ')}
                                    >
                                        <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200">
                                            <CategoryIcon icon={category.icon} />
                                        </div>

                                        <div className="font-semibold text-neutral-900 dark:text-white">
                                            {category.name}
                                        </div>

                                        <div className="mt-1 text-xs leading-5 text-neutral-500">
                                            {category.description}
                                        </div>

                                        <div className="mt-3 text-xs font-medium text-brand-600">
                                            {category.themes?.length ?? 0} theme(s)
                                        </div>
                                    </button>
                                ))}
                            </div>
                        </>
                    )}

                    {step === 2 && selectedCategory && (
                        <>
                            <div className="mb-5">
                                <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
                                    Choose {selectedCategory.name} Theme
                                </h3>
                                <p className="mt-1 text-sm text-neutral-500">
                                    Select a design for your Digital VCard.
                                </p>
                            </div>

                            <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                                {selectedCategory.themes.map((theme) => (
                                    <ThemePreview
                                        key={theme.id}
                                        theme={theme}
                                        selected={Number(data.theme_id) === theme.id}
                                        onClick={() => setData('theme_id', theme.id)}
                                    />
                                ))}
                            </div>

                            {errors.theme_id && (
                                <p className="mt-4 text-sm text-red-600">
                                    {errors.theme_id}
                                </p>
                            )}
                        </>
                    )}

                    {step === 3 && (
                        <form id="digital-vcard-form" onSubmit={submit}>
                            <div className="grid gap-5 md:grid-cols-2">
                                <div className="md:col-span-2">
                                    <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
                                        VCard Information
                                    </h3>
                                    <p className="mt-1 text-sm text-neutral-500">
                                        Enter the information you want to display publicly.
                                    </p>
                                </div>

                                <Field
                                    label="Person / Card Name"
                                    value={data.name}
                                    onChange={(v) => setData('name', v)}
                                    error={errors.name}
                                    required
                                />

                                <Field
                                    label="Public Slug"
                                    value={data.slug}
                                    onChange={(v) =>
                                        setData(
                                            'slug',
                                            v.toLowerCase()
                                                .replace(/\s+/g, '-')
                                                .replace(/[^a-z0-9-]/g, '')
                                        )
                                    }
                                    error={errors.slug}
                                    placeholder="leave blank for automatic"
                                />

                                <Field
                                    label="Business / Company Name"
                                    value={data.company_name}
                                    onChange={(v) => setData('company_name', v)}
                                    error={errors.company_name}
                                />

                                <Field
                                    label="Designation"
                                    value={data.designation}
                                    onChange={(v) => setData('designation', v)}
                                    error={errors.designation}
                                />

                                <CountryPhoneInput
                                    label="Mobile Number"
                                    value={data.phone}
                                    onChange={(v) => setData('phone', v)}
                                    defaultCountry="IN"
                                    placeholder="Enter mobile number"
                                />

                                <CountryPhoneInput
                                    label="WhatsApp Number"
                                    value={data.whatsapp}
                                    onChange={(v) => setData('whatsapp', v)}
                                    defaultCountry="IN"
                                    placeholder="Enter WhatsApp number"
                                />

                                <Field
                                    label="Email"
                                    type="email"
                                    value={data.email}
                                    onChange={(v) => setData('email', v)}
                                    error={errors.email}
                                />

                                <Field
                                    label="Website"
                                    value={data.website}
                                    onChange={(v) => setData('website', v)}
                                    error={errors.website}
                                    placeholder="https://..."
                                />

                                <div className="md:col-span-2">
                                    <label className="mb-1.5 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                                        Address
                                    </label>
                                    <textarea
                                        rows={2}
                                        value={data.address}
                                        onChange={(e) => setData('address', e.target.value)}
                                        className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/10 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white"
                                    />
                                </div>

                                <div className="md:col-span-2">
                                    <label className="mb-1.5 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                                        About
                                    </label>
                                    <textarea
                                        rows={4}
                                        value={data.about}
                                        onChange={(e) => setData('about', e.target.value)}
                                        className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/10 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white"
                                    />
                                </div>

                                <label className="md:col-span-2 flex items-center gap-3 rounded-xl border border-gray-200 p-4 dark:border-neutral-700">
                                    <input
                                        type="checkbox"
                                        checked={data.is_default}
                                        onChange={(e) => setData('is_default', e.target.checked)}
                                        className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
                                    />
                                    <div>
                                        <div className="text-sm font-medium text-neutral-900 dark:text-white">
                                            Set as default VCard
                                        </div>
                                        <div className="text-xs text-neutral-500">
                                            Only one default VCard is allowed per workspace.
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </form>
                    )}
                </div>

                <div className="flex items-center justify-between border-t border-gray-200 bg-neutral-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-950">
                    <button
                        type="button"
                        onClick={() => {
                            if (step === 1) onClose();
                            else setStep(step - 1);
                        }}
                        className="rounded-xl border border-gray-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-white dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
                    >
                        {step === 1 ? 'Cancel' : 'Back'}
                    </button>

                    {step < 3 ? (
                        <button
                            type="button"
                            disabled={
                                (step === 1 && !selectedCategoryId) ||
                                (step === 2 && !data.theme_id)
                            }
                            onClick={() => setStep(step + 1)}
                            className="rounded-xl bg-brand-600 px-5 py-2 text-sm font-semibold text-white hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-40"
                        >
                            Continue
                        </button>
                    ) : (
                        <button
                            type="submit"
                            form="digital-vcard-form"
                            disabled={processing || !data.name || !data.theme_id}
                            className="rounded-xl bg-brand-600 px-5 py-2 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-50"
                        >
                            {processing ? 'Creating...' : 'Create VCard'}
                        </button>
                    )}
                </div>
            </div>
        </div>
    );
}

function Field({
    label,
    value,
    onChange,
    error,
    type = 'text',
    placeholder = '',
    required = false,
}) {
    return (
        <div>
            <label className="mb-1.5 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                {label}
                {required && <span className="ml-1 text-red-500">*</span>}
            </label>

            <input
                type={type}
                value={value}
                placeholder={placeholder}
                onChange={(e) => onChange(e.target.value)}
                className={[
                    'w-full rounded-xl border bg-white px-3 py-2.5 text-sm outline-none transition focus:ring-2 dark:bg-neutral-800 dark:text-white',
                    error
                        ? 'border-red-400 focus:border-red-500 focus:ring-red-500/10'
                        : 'border-gray-300 focus:border-brand-500 focus:ring-brand-500/10 dark:border-neutral-700',
                ].join(' ')}
            />

            {error && (
                <p className="mt-1 text-xs text-red-600">
                    {error}
                </p>
            )}
        </div>
    );
}

export default function Index({ cards = [], categories = [] }) {
    const [creating, setCreating] = useState(false);
    const [editCard, setEditCard] = useState(null);
    const [imageCard, setImageCard] = useState(null);

    const changeStatus = (card, status) => {
        router.patch(
            route('client.digital-vcards.status', card.id),
            { status },
            { preserveScroll: true }
        );
    };

    const duplicateCard = (card) => {
        if (!window.confirm(`Duplicate "${card.name}" as a new draft VCard?`)) return;

        router.post(
            route('client.digital-vcards.duplicate', card.id),
            {},
            { preserveScroll: true }
        );
    };

    const deleteCard = (card) => {
        if (!window.confirm(`Delete "${card.name}"?`)) return;

        router.delete(
            route('client.digital-vcards.destroy', card.id),
            { preserveScroll: true }
        );
    };

    return (
        <ClientLayout title="Digital VCards">
            <Head title="Digital VCards" />

            <div className="mx-auto max-w-7xl">
                <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
                            Digital VCards
                        </h1>
                        <p className="mt-1 text-sm text-neutral-500">
                            Create multiple digital visiting cards for different people, businesses and teams.
                        </p>
                    </div>

                    <button
                        type="button"
                        onClick={() => setCreating(true)}
                        className="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-700"
                    >
                        <Plus className="h-4 w-4" />
                        Create VCard
                    </button>
                </div>

                {cards.length === 0 ? (
                    <div className="rounded-3xl border border-dashed border-gray-300 bg-white px-6 py-16 text-center dark:border-neutral-700 dark:bg-neutral-900">
                        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-950/30">
                            <CreditCard className="h-8 w-8" />
                        </div>

                        <h2 className="mt-5 text-lg font-semibold text-neutral-900 dark:text-white">
                            No Digital VCards Yet
                        </h2>

                        <p className="mx-auto mt-2 max-w-md text-sm text-neutral-500">
                            Select your business category, choose a matching theme and create your first digital card.
                        </p>

                        <button
                            type="button"
                            onClick={() => setCreating(true)}
                            className="mt-6 inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700"
                        >
                            <Plus className="h-4 w-4" />
                            Create First VCard
                        </button>
                    </div>
                ) : (
                    <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                        {cards.map((card) => (
                            <div
                                key={card.id}
                                className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-900"
                            >
                                <div className="p-5">
                                    <div className="flex items-start justify-between gap-3">
                                        <div>
                                            <div className="flex flex-wrap items-center gap-2">
                                                <h3 className="font-bold text-neutral-900 dark:text-white">
                                                    {card.name}
                                                </h3>

                                                {card.is_default && (
                                                    <span className="rounded-full bg-brand-50 px-2 py-0.5 text-[10px] font-bold uppercase text-brand-700 dark:bg-brand-950/30 dark:text-brand-300">
                                                        Default
                                                    </span>
                                                )}
                                            </div>

                                            <p className="mt-1 text-sm text-neutral-500">
                                                {card.company_name || card.designation || 'Digital VCard'}
                                            </p>
                                        </div>

                                        <span
                                            className={[
                                                'rounded-full px-2.5 py-1 text-xs font-semibold',
                                                card.status === 'published'
                                                    ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300'
                                                    : card.status === 'disabled'
                                                        ? 'bg-red-50 text-red-700 dark:bg-red-950/30 dark:text-red-300'
                                                        : 'bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-300',
                                            ].join(' ')}
                                        >
                                            {card.status}
                                        </span>
                                    </div>

                                    <div className="mt-4 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-800">
                                        <div className="text-xs text-neutral-500">
                                            {card.theme?.category?.name}
                                        </div>
                                        <div className="mt-1 text-sm font-semibold text-neutral-800 dark:text-neutral-200">
                                            {card.theme?.name}
                                        </div>
                                    </div>

                                    <div className="mt-4 flex items-center justify-between text-xs text-neutral-500">
                                        <div className="flex flex-wrap items-center gap-3">
                                            <span className="flex items-center gap-1">
                                                <Eye className="h-3.5 w-3.5" />
                                                {card.views_count ?? 0} total
                                            </span>
                                            <span className="flex items-center gap-1">
                                                <BarChart3 className="h-3.5 w-3.5" />
                                                {card.views_7d ?? 0} / 7d
                                            </span>
                                            <span>{card.views_30d ?? 0} / 30d</span>
                                        </div>

                                        <span className="truncate">
                                            /v/{card.slug}
                                        </span>
                                    </div>
                                </div>

                                <div className="flex flex-wrap gap-2 border-t border-gray-200 bg-neutral-50 p-3 dark:border-neutral-800 dark:bg-neutral-950">
                                    {card.status !== 'published' && (
                                        <button
                                            type="button"
                                            onClick={() => changeStatus(card, 'published')}
                                            className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-700"
                                        >
                                            Publish
                                        </button>
                                    )}

                                    {card.status === 'published' && (
                                        <button
                                            type="button"
                                            onClick={() => changeStatus(card, 'draft')}
                                            className="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-neutral-700 dark:border-neutral-700 dark:text-neutral-200"
                                        >
                                            Draft
                                        </button>
                                    )}

                                    <button
                                        type="button"
                                        onClick={() => setEditCard(card)}
                                        className="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-neutral-700 hover:bg-white dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
                                    >
                                        <Pencil className="h-3.5 w-3.5" />
                                        Edit
                                    </button>

                                    <button
                                        type="button"
                                        onClick={() => setImageCard(card)}
                                        className="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-neutral-700 hover:bg-white dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
                                    >
                                        <Image className="h-3.5 w-3.5" />
                                        Images
                                    </button>

                                    <a
                                        href={route('client.digital-vcards.preview', card.id)}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-neutral-700 hover:bg-white dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
                                    >
                                        <ExternalLink className="h-3.5 w-3.5" />
                                        Preview
                                    </a>

                                    <button
                                        type="button"
                                        onClick={() => duplicateCard(card)}
                                        className="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-neutral-700 hover:bg-white dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
                                    >
                                        <Copy className="h-3.5 w-3.5" />
                                        Duplicate
                                    </button>

                                    {card.status === 'published' && (
                                        <a
                                            href={`/v/${card.slug}/qr.svg`}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-neutral-700 hover:bg-white dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
                                        >
                                            <QrCode className="h-3.5 w-3.5" />
                                            QR
                                        </a>
                                    )}

                                    <DigitalVCardProductionActions card={card} />

                                    <button
                                        type="button"
                                        onClick={() => deleteCard(card)}
                                        className="ml-auto inline-flex items-center gap-1 rounded-lg border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-600 hover:bg-red-50 dark:border-red-900/50 dark:hover:bg-red-950/20"
                                    >
                                        <Trash2 className="h-3.5 w-3.5" />
                                        Delete
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>

            {creating && (
                <CreateVCardModal
                    categories={categories}
                    onClose={() => setCreating(false)}
                />
            )}

            {editCard && (
                <EditVCardModal
                    card={editCard}
                    categories={categories}
                    onClose={() => setEditCard(null)}
                />
            )}

            {imageCard && (
                <VCardImagesModal
                    card={imageCard}
                    onClose={() => setImageCard(null)}
                />
            )}
        </ClientLayout>
    );
}