import { Form, Head, usePage, router } from '@inertiajs/react';
import { Link } from '@inertiajs/react';
import { useRef, useState } from 'react';
import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
import DeleteUser from '@/components/delete-user';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import PasswordInput from '@/components/password-input';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { edit } from '@/routes/profile';
import { send } from '@/routes/verification';
import type { Auth, BreadcrumbItem } from '@/types';
import AppLayout from '@/layouts/app-layout';
import { cn } from '@/lib/utils';
import {
    User,
    Mail,
    Phone,
    Info,
    Award,
    Settings,
    Lock,
    Camera,
    Link2,
    ArrowRight,
    Clock,
    CheckCircle,
    XCircle,
    Copy,
    Check,
    MessageSquare,
    ExternalLink,
} from 'lucide-react';

type PageProps = {
    auth: Auth;
};

const UI_THEMES = [
    { value: 'umum', label: 'Umum', desc: 'Pelajar umum' },
    { value: 'siswa', label: 'Siswa', desc: 'Pelajar SMP/SMA' },
    { value: 'mahasiswa', label: 'Mahasiswa', desc: 'Perguruan tinggi' },
    { value: 'profesional', label: 'Profesional', desc: 'Pekerja profesional' },
    { value: 'pengusaha', label: 'Pengusaha', desc: 'Pemilik bisnis' },
    { value: 'pensiunan', label: 'Pensiunan', desc: 'Masa purnabakti' },
] as const;

type AffiliateCodeData = {
    id: number;
    code: string;
    status: 'pending' | 'approved' | 'rejected';
    commission_rate: number;
} | null;

function AffiliateCard({
    affiliateCode,
}: {
    affiliateCode: AffiliateCodeData;
}) {
    const [loading, setLoading] = useState(false);

    function daftar() {
        setLoading(true);
        router.post(
            '/affiliate/register',
            {},
            {
                onFinish: () => setLoading(false),
            },
        );
    }

    return (
        <div className="space-y-4 rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
            <div>
                <h2 className="flex items-center gap-2 text-lg font-bold text-gray-900">
                    <Link2 className="h-5 w-5 text-teal-600" />
                    Program Affiliate
                </h2>
                <p className="mt-0.5 text-xs text-gray-400">
                    Bagikan kelas dan dapatkan komisi setiap ada pembelian
                    melalui link kamu
                </p>
            </div>

            {affiliateCode === null && (
                <div className="flex flex-col items-start gap-4 rounded-2xl border border-teal-100 bg-teal-50 p-5 sm:flex-row sm:items-center">
                    <div className="flex-1 space-y-1">
                        <p className="text-sm font-semibold text-teal-900">
                            Belum terdaftar sebagai affiliator
                        </p>
                        <p className="text-xs leading-relaxed text-teal-700/80">
                            Daftar sekarang dan dapatkan kode referral unik.
                            Setiap pembelian melalui link kamu menghasilkan
                            komisi.
                        </p>
                    </div>
                    <Button
                        onClick={daftar}
                        disabled={loading}
                        className="shrink-0 gap-1.5 rounded-xl border border-teal-200 bg-teal-100 text-teal-700 shadow-xs hover:bg-teal-200"
                    >
                        {loading ? (
                            'Mendaftar...'
                        ) : (
                            <>
                                <ArrowRight className="h-4 w-4" />
                                Daftar Affiliate
                            </>
                        )}
                    </Button>
                </div>
            )}

            {affiliateCode?.status === 'pending' && (
                <div className="flex items-start gap-3 rounded-2xl border border-amber-100 bg-amber-50 p-5">
                    <Clock className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div className="flex-1">
                        <p className="text-sm font-semibold text-amber-900">
                            Menunggu persetujuan admin
                        </p>
                        <p className="mt-0.5 text-xs text-amber-700/80">
                            Pendaftaran kamu sedang ditinjau. Kamu akan
                            diberitahu setelah disetujui.
                        </p>
                    </div>
                    <Link
                        href="/affiliate"
                        className="shrink-0 text-xs font-semibold whitespace-nowrap text-amber-700 hover:underline"
                    >
                        Lihat status →
                    </Link>
                </div>
            )}

            {affiliateCode?.status === 'approved' && (
                <div className="flex items-start gap-3 rounded-2xl border border-emerald-100 bg-emerald-50 p-5">
                    <CheckCircle className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
                    <div className="flex-1">
                        <p className="text-sm font-semibold text-emerald-900">
                            Aktif sebagai affiliator
                        </p>
                        <p className="mt-0.5 text-xs text-emerald-700/80">
                            Kode kamu:{' '}
                            <span className="font-mono font-bold">
                                {affiliateCode.code}
                            </span>
                            {' · '}Komisi {affiliateCode.commission_rate}%
                        </p>
                    </div>
                    <Link
                        href="/affiliate"
                        className="shrink-0 text-xs font-semibold whitespace-nowrap text-emerald-700 hover:underline"
                    >
                        Buka panel →
                    </Link>
                </div>
            )}

            {affiliateCode?.status === 'rejected' && (
                <div className="flex items-start gap-3 rounded-2xl border border-red-100 bg-red-50 p-5">
                    <XCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-400" />
                    <div className="flex-1">
                        <p className="text-sm font-semibold text-red-900">
                            Pendaftaran ditolak
                        </p>
                        <p className="mt-0.5 text-xs text-red-700/80">
                            Hubungi admin untuk informasi lebih lanjut.
                        </p>
                    </div>
                </div>
            )}
        </div>
    );
}

type WaLinkData = {
    linked: boolean;
    jid: string | null;
    code: string | null;
    code_expires_at: string | null;
} | null;

function WaLinkCard({
    waLink,
    waBotNumber = '6285337092290',
}: {
    waLink: WaLinkData;
    waBotNumber?: string;
}) {
    const [loading, setLoading] = useState(false);
    const [copied, setCopied] = useState(false);

    function generate() {
        setLoading(true);
        router.post(
            '/settings/profile/wa-link/generate',
            {},
            { onFinish: () => setLoading(false) },
        );
    }

    function unlink() {
        setLoading(true);
        router.delete('/settings/profile/wa-link', {
            onFinish: () => setLoading(false),
        });
    }

    const copyCode = () => {
        if (!waLink?.code) return;
        navigator.clipboard.writeText(waLink.code);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    const cleanNumber = waBotNumber.replace(/\D/g, '');
    const waUrl = waLink?.code
        ? `https://wa.me/${cleanNumber}?text=${encodeURIComponent(`VERIFIKASI ${waLink.code}`)}`
        : `https://wa.me/${cleanNumber}`;

    return (
        <div className="space-y-4 rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
            <div>
                <h2 className="flex items-center gap-2 text-lg font-bold text-gray-900">
                    <Phone className="h-5 w-5 text-teal-600" />
                    Bot WhatsApp LMS
                </h2>
                <p className="mt-0.5 text-xs text-gray-400">
                    Hubungkan nomor WhatsApp kamu untuk akses materi, tugas, dan kuis langsung lewat chat.
                </p>
            </div>

            {waLink?.linked ? (
                <div className="flex items-start gap-3 rounded-2xl border border-teal-100 bg-teal-50 p-5">
                    <CheckCircle className="mt-0.5 h-5 w-5 shrink-0 text-teal-500" />
                    <div className="flex-1">
                        <p className="text-sm font-semibold text-teal-900">
                            WhatsApp Terhubung
                        </p>
                        <p className="mt-0.5 font-mono text-xs text-teal-700/80">
                            {waLink.jid?.split('@')[0]}
                        </p>
                        <p className="mt-2 text-xs text-teal-600">
                            Nomor Bot: <span className="font-semibold">+62 853-3709-2290</span>. Kirim pesan apa saja ke bot untuk mulai interaksi.
                        </p>
                    </div>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={unlink}
                        disabled={loading}
                    >
                        Putuskan
                    </Button>
                </div>
            ) : (
                <div className="space-y-4">
                    {waLink?.code ? (
                        <div className="space-y-3 rounded-2xl border border-teal-100 bg-teal-50/50 p-5">
                            <div className="text-center">
                                <p className="text-xs font-medium text-gray-600">
                                    Kirim kode ini ke WhatsApp Bot{' '}
                                    <span className="font-bold text-teal-700">+62 853-3709-2290</span>:
                                </p>
                                <div className="mt-2 flex items-center justify-center gap-3">
                                    <span className="font-mono text-3xl font-extrabold tracking-widest text-teal-950">
                                        {waLink.code}
                                    </span>
                                    <Button
                                        type="button"
                                        variant="outline"
                                        size="sm"
                                        onClick={copyCode}
                                        className="h-8 gap-1 rounded-lg border-teal-200 bg-white px-2.5 text-xs text-teal-700 hover:bg-teal-50"
                                    >
                                        {copied ? (
                                            <>
                                                <Check className="h-3.5 w-3.5 text-teal-600" />
                                                Tersalin
                                            </>
                                        ) : (
                                            <>
                                                <Copy className="h-3.5 w-3.5" />
                                                Salin
                                            </>
                                        )}
                                    </Button>
                                </div>
                                <p className="mt-1 flex items-center justify-center gap-1 text-[11px] text-gray-400">
                                    <Clock className="h-3 w-3" /> Berlaku 10 menit
                                </p>
                            </div>

                            <div className="flex flex-col gap-2 sm:flex-row sm:justify-center">
                                <a
                                    href={waUrl}
                                    target="_blank"
                                    rel="noreferrer"
                                    className="inline-flex items-center justify-center gap-2 rounded-xl bg-teal-600 px-4 py-2.5 text-xs font-semibold text-white shadow-xs hover:bg-teal-700 transition"
                                >
                                    <MessageSquare className="h-4 w-4" />
                                    Kirim via WhatsApp (+62 853-3709-2290)
                                    <ExternalLink className="h-3.5 w-3.5 opacity-80" />
                                </a>
                            </div>

                            <div className="rounded-xl bg-white p-3 text-[11px] leading-relaxed text-gray-500 border border-teal-100/60">
                                <p className="font-semibold text-gray-700 mb-1">Cara Verifikasi:</p>
                                <ol className="list-decimal pl-4 space-y-0.5">
                                    <li>Klik tombol hijau di atas atau simpan nomor <b>+62 853-3709-2290</b>.</li>
                                    <li>Kirim pesan berisi kode <code className="font-mono font-bold text-teal-800">{waLink.code}</code>.</li>
                                    <li>Nomor WhatsApp kamu otomatis terhubung ke akun LMS ini!</li>
                                </ol>
                            </div>
                        </div>
                    ) : null}

                    <div className="flex items-center gap-2">
                        <Button
                            variant="outline"
                            onClick={generate}
                            disabled={loading}
                            className="gap-2 text-xs"
                        >
                            {waLink?.code
                                ? 'Buat kode baru'
                                : 'Generate kode verifikasi'}
                            <ArrowRight className="h-4 w-4" />
                        </Button>
                    </div>
                </div>
            )}
        </div>
    );
}

export default function Profile({
    mustVerifyEmail,
    status,
    passwordRules,
    affiliateCode,
    waBotNumber,
    waLink,
}: {
    mustVerifyEmail: boolean;
    status?: string;
    passwordRules: string;
    affiliateCode: AffiliateCodeData;
    waBotNumber?: string;
    waLink: WaLinkData;
}) {
    const { auth } = usePage<PageProps>().props;
    const passwordInput = useRef<HTMLInputElement>(null);
    const currentPasswordInput = useRef<HTMLInputElement>(null);
    const fileInputRef = useRef<HTMLInputElement>(null);

    const handleAvatarUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        const formData = new FormData();
        formData.append('avatar', file);

        router.post('/settings/profile/avatar', formData, {
            preserveScroll: true,
        });
    };

    return (
        <>
            <Head title="Pengaturan Profil" />

            <div className="space-y-8 px-4 py-6">
                <Heading
                    title="Pengaturan Profil"
                    description="Kelola informasi profil dan keamanan akun Anda"
                />
                <div className="space-y-6 rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
                    <div>
                        <h2 className="flex items-center gap-2 text-lg font-bold text-gray-900">
                            <Settings className="h-5 w-5 text-emerald-600" />
                            Informasi Profil
                        </h2>
                        <p className="mt-0.5 text-xs text-gray-400">
                            Perbarui nama, email, nomor telepon, dan data
                            pribadi Anda
                        </p>
                    </div>

                    <div className="flex flex-col items-center gap-4 rounded-2xl border border-sky-100 bg-sky-50/60 p-4 py-4 sm:flex-row sm:gap-6">
                        <div
                            className="group relative cursor-pointer"
                            onClick={() => fileInputRef.current?.click()}
                        >
                            <div className="flex size-24 items-center justify-center overflow-hidden rounded-full border-4 border-white bg-sky-100/70 shadow-md transition-transform duration-300 hover:scale-105">
                                {auth.user.avatar ? (
                                    <img
                                        src={auth.user.avatar}
                                        alt={auth.user.name}
                                        className="size-full object-cover"
                                    />
                                ) : (
                                    <span className="text-2xl font-bold text-sky-600/90">
                                        {auth.user.name.charAt(0).toUpperCase()}
                                    </span>
                                )}
                            </div>
                            <div className="absolute right-0 bottom-0 rounded-full border border-sky-100 bg-white p-1.5 text-sky-600 shadow-md transition-colors group-hover:bg-sky-50">
                                <Camera className="size-4" />
                            </div>
                        </div>

                        <div className="space-y-1.5 text-center sm:text-left">
                            <h3 className="text-sm font-bold text-sky-900">
                                Foto Profil
                            </h3>
                            <p className="max-w-xs text-xs leading-relaxed text-sky-600/70">
                                Gunakan foto berformat JPG, PNG, atau GIF dengan
                                ukuran maksimal 2MB untuk hasil terbaik.
                            </p>
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                className="mt-1 rounded-xl border-sky-200 bg-white text-xs font-medium text-sky-700 shadow-sm hover:bg-sky-50"
                                onClick={() => fileInputRef.current?.click()}
                            >
                                Pilih Foto Baru
                            </Button>
                            <input
                                type="file"
                                ref={fileInputRef}
                                className="hidden"
                                accept="image/*"
                                onChange={handleAvatarUpload}
                            />
                        </div>
                    </div>

                    <Form
                        {...ProfileController.update.form()}
                        options={{
                            preserveScroll: true,
                        }}
                        className="space-y-5"
                    >
                        {({ processing, errors }) => (
                            <>
                                <div className="grid gap-2">
                                    <Label
                                        htmlFor="name"
                                        className="text-xs font-semibold text-gray-700"
                                    >
                                        Nama Lengkap
                                    </Label>
                                    <div className="relative">
                                        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <User className="h-4 w-4 text-gray-400" />
                                        </div>
                                        <Input
                                            id="name"
                                            className="block w-full rounded-xl border-gray-200 pl-9 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
                                            defaultValue={auth.user.name}
                                            name="name"
                                            required
                                            autoComplete="name"
                                            placeholder="Nama lengkap"
                                        />
                                    </div>
                                    <InputError
                                        className="mt-1"
                                        message={errors.name}
                                    />
                                </div>

                                <div className="grid gap-2">
                                    <Label
                                        htmlFor="email"
                                        className="text-xs font-semibold text-gray-700"
                                    >
                                        Alamat Email
                                    </Label>
                                    <div className="relative">
                                        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <Mail className="h-4 w-4 text-gray-400" />
                                        </div>
                                        <Input
                                            id="email"
                                            type="email"
                                            className="block w-full rounded-xl border-gray-200 pl-9 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
                                            defaultValue={auth.user.email}
                                            name="email"
                                            required
                                            autoComplete="username"
                                            placeholder="Alamat email"
                                        />
                                    </div>
                                    <InputError
                                        className="mt-1"
                                        message={errors.email}
                                    />
                                </div>

                                {mustVerifyEmail &&
                                    auth.user.email_verified_at === null && (
                                        <div className="rounded-xl border border-amber-100 bg-amber-50 p-3.5">
                                            <p className="text-xs text-amber-800">
                                                Email Anda belum diverifikasi.{' '}
                                                <Link
                                                    href={send()}
                                                    as="button"
                                                    className="font-bold underline transition-colors hover:text-amber-950"
                                                >
                                                    Kirim ulang email
                                                    verifikasi.
                                                </Link>
                                            </p>
                                            {status ===
                                                'verification-link-sent' && (
                                                <div className="mt-1.5 text-xs font-semibold text-emerald-700">
                                                    Tautan verifikasi baru telah
                                                    dikirim ke email Anda.
                                                </div>
                                            )}
                                        </div>
                                    )}

                                <div className="grid gap-2">
                                    <Label
                                        htmlFor="phone"
                                        className="text-xs font-semibold text-gray-700"
                                    >
                                        Nomor Telepon
                                    </Label>
                                    <div className="relative">
                                        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <Phone className="h-4 w-4 text-gray-400" />
                                        </div>
                                        <Input
                                            id="phone"
                                            type="tel"
                                            inputMode="numeric"
                                            className="block w-full rounded-xl border-gray-200 pl-9 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
                                            defaultValue={auth.user.phone ?? ''}
                                            name="phone"
                                            autoComplete="tel"
                                            placeholder="Contoh: 08123456789"
                                            onInput={(e) => {
                                                const el = e.currentTarget;
                                                el.value = el.value.replace(
                                                    /[^0-9+\-\s()]/g,
                                                    '',
                                                );
                                            }}
                                        />
                                    </div>
                                    <InputError
                                        className="mt-1"
                                        message={errors.phone}
                                    />
                                </div>

                                <div className="grid gap-2">
                                    <Label
                                        htmlFor="bio"
                                        className="text-xs font-semibold text-gray-700"
                                    >
                                        Bio
                                    </Label>
                                    <textarea
                                        id="bio"
                                        name="bio"
                                        rows={3}
                                        defaultValue={auth.user.bio ?? ''}
                                        placeholder="Ceritakan sedikit tentang diri Anda..."
                                        className="w-full rounded-xl border border-gray-200 bg-transparent px-3 py-2 text-sm shadow-xs transition-colors placeholder:text-gray-400 focus-visible:border-emerald-500 focus-visible:ring-2 focus-visible:ring-emerald-500/20 focus-visible:outline-none"
                                    />
                                    <InputError
                                        className="mt-1"
                                        message={errors.bio}
                                    />
                                </div>

                                <div className="grid gap-3 pt-2">
                                    <div>
                                        <Label className="text-xs font-semibold text-gray-700">
                                            Kategori Pengguna
                                        </Label>
                                        <p className="text-[11px] text-gray-400">
                                            Pilih kategori untuk personalisasi
                                            pengalaman belajar Anda
                                        </p>
                                    </div>

                                    <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3">
                                        {UI_THEMES.map((theme) => (
                                            <label
                                                key={theme.value}
                                                className="relative flex cursor-pointer flex-col justify-center rounded-xl border border-gray-200 p-3.5 transition-all hover:bg-gray-50/50 has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50/40"
                                            >
                                                <input
                                                    type="radio"
                                                    name="ui_theme"
                                                    value={theme.value}
                                                    defaultChecked={
                                                        auth.user.ui_theme ===
                                                        theme.value
                                                    }
                                                    className="sr-only"
                                                />
                                                <span className="text-xs font-semibold text-gray-800 checked:text-emerald-900">
                                                    {theme.label}
                                                </span>
                                                <span className="mt-0.5 text-[10px] leading-tight text-gray-400">
                                                    {theme.desc}
                                                </span>
                                            </label>
                                        ))}
                                    </div>
                                    <InputError
                                        className="mt-1"
                                        message={errors.ui_theme}
                                    />
                                </div>

                                <div className="flex justify-end pt-2">
                                    <Button
                                        disabled={processing}
                                        className="rounded-xl bg-emerald-600 px-6 font-semibold hover:bg-emerald-700"
                                        data-test="update-profile-button"
                                    >
                                        Simpan Perubahan
                                    </Button>
                                </div>
                            </>
                        )}
                    </Form>
                </div>

                <div className="space-y-6 rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
                    <div>
                        <h2 className="flex items-center gap-2 text-lg font-bold text-gray-900">
                            <Lock className="h-5 w-5 text-emerald-600" />
                            Keamanan Akun
                        </h2>
                        <p className="mt-0.5 text-xs text-gray-400">
                            Perbarui kata sandi Anda untuk memastikan akun tetap
                            aman
                        </p>
                    </div>

                    <Form
                        {...SecurityController.update.form()}
                        options={{
                            preserveScroll: true,
                        }}
                        resetOnError={[
                            'password',
                            'password_confirmation',
                            'current_password',
                        ]}
                        resetOnSuccess
                        onError={(errors) => {
                            if (errors.password) {
                                passwordInput.current?.focus();
                            }

                            if (errors.current_password) {
                                currentPasswordInput.current?.focus();
                            }
                        }}
                        className="space-y-5"
                    >
                        {({ errors, processing }) => (
                            <>
                                <div className="grid gap-2">
                                    <Label
                                        htmlFor="current_password"
                                        className="text-xs font-semibold text-gray-700"
                                    >
                                        Kata Sandi Saat Ini
                                    </Label>
                                    <PasswordInput
                                        id="current_password"
                                        ref={currentPasswordInput}
                                        name="current_password"
                                        className="rounded-xl border-gray-200 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
                                        autoComplete="current-password"
                                        placeholder="Kata sandi saat ini"
                                    />
                                    <InputError
                                        message={errors.current_password}
                                    />
                                </div>

                                <div className="grid gap-2">
                                    <Label
                                        htmlFor="password"
                                        className="text-xs font-semibold text-gray-700"
                                    >
                                        Kata Sandi Baru
                                    </Label>
                                    <PasswordInput
                                        id="password"
                                        ref={passwordInput}
                                        name="password"
                                        className="rounded-xl border-gray-200 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
                                        autoComplete="new-password"
                                        placeholder="Kata sandi baru"
                                        passwordrules={passwordRules}
                                    />
                                    <InputError message={errors.password} />
                                </div>

                                <div className="grid gap-2">
                                    <Label
                                        htmlFor="password_confirmation"
                                        className="text-xs font-semibold text-gray-700"
                                    >
                                        Konfirmasi Kata Sandi Baru
                                    </Label>
                                    <PasswordInput
                                        id="password_confirmation"
                                        name="password_confirmation"
                                        className="rounded-xl border-gray-200 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20"
                                        autoComplete="new-password"
                                        placeholder="Konfirmasi kata sandi baru"
                                        passwordrules={passwordRules}
                                    />
                                    <InputError
                                        message={errors.password_confirmation}
                                    />
                                </div>

                                <div className="flex justify-end pt-2">
                                    <Button
                                        disabled={processing}
                                        className="rounded-xl bg-emerald-600 px-6 font-semibold hover:bg-emerald-700"
                                        data-test="update-password-button"
                                    >
                                        Perbarui Kata Sandi
                                    </Button>
                                </div>
                            </>
                        )}
                    </Form>
                </div>

                <AffiliateCard affiliateCode={affiliateCode} />
                <WaLinkCard waLink={waLink} waBotNumber={waBotNumber} />

                <div className="rounded-3xl border border-red-100 bg-white p-6 shadow-sm">
                    <DeleteUser />
                </div>
            </div>
        </>
    );
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Pengaturan Profil',
        href: edit(),
    },
];

Profile.layout = (page: React.ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>
);