import { Head, router, useForm } from '@inertiajs/react';
import {
    Terminal,
    Key,
    Webhook,
    BookOpen,
    Plus,
    Trash2,
    Copy,
    Check,
    Code,
    Sparkles,
} from 'lucide-react';
import * as React from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

interface ApiKey {
    id: number;
    name: string;
    last_used_at: string | null;
    created_at: string;
}

interface WebhookConfig {
    id: number;
    url: string;
    secret_token: string;
    is_active: boolean;
    created_at: string;
}

interface DeveloperIndexProps {
    apiKeys: ApiKey[];
    webhooks: WebhookConfig[];
    plainApiKey: string | null;
}

export default function DeveloperIndex({
    apiKeys,
    webhooks,
    plainApiKey,
}: DeveloperIndexProps) {
    const [activeTab, setActiveTab] = React.useState<
        'keys' | 'webhook' | 'docs'
    >('keys');
    const [isCreateOpen, setIsCreateOpen] = React.useState(false);
    const [isAddWebhookOpen, setIsAddWebhookOpen] = React.useState(false);
    const [copiedToken, setCopiedToken] = React.useState(false);
    const [copiedWebhookSecretId, setCopiedWebhookSecretId] = React.useState<
        number | null
    >(null);
    const [copiedDocCode, setCopiedDocCode] = React.useState<string | null>(
        null,
    );

    // API Key form
    const keyForm = useForm({
        name: '',
    });

    // Webhook form
    const webhookForm = useForm({
        url: '',
    });

    const handleCreateKey = (e: React.FormEvent) => {
        e.preventDefault();
        keyForm.post('/dashboard/developer/keys', {
            onSuccess: () => {
                setIsCreateOpen(false);
                keyForm.reset();
                toast.success(
                    'API Key generated successfully! Please copy it now.',
                );
            },
        });
    };

    const handleRevokeKey = (keyId: number, name: string) => {
        if (
            confirm(
                `Are you sure you want to revoke API Key "${name}"? External integrations using this key will immediately fail.`,
            )
        ) {
            router.delete(`/dashboard/developer/keys/${keyId}`, {
                onSuccess: () => {
                    toast.success('API key revoked successfully.');
                },
            });
        }
    };

    const handleAddWebhook = (e: React.FormEvent) => {
        e.preventDefault();
        webhookForm.post('/dashboard/developer/webhooks', {
            onSuccess: () => {
                setIsAddWebhookOpen(false);
                webhookForm.reset();
                toast.success('Webhook registered successfully!');
            },
        });
    };

    const handleDeleteWebhook = (id: number, url: string) => {
        if (confirm(`Are you sure you want to delete webhook to "${url}"?`)) {
            router.delete(`/dashboard/developer/webhooks/${id}`, {
                onSuccess: () => {
                    toast.success('Webhook deleted successfully.');
                },
            });
        }
    };

    const handleToggleWebhook = (id: number) => {
        router.put(
            `/dashboard/developer/webhooks/${id}/toggle`,
            {},
            {
                onSuccess: () => {
                    toast.success('Webhook status updated!');
                },
            },
        );
    };

    const copyToClipboard = (text: string, type: 'token' | number | string) => {
        navigator.clipboard.writeText(text);

        if (type === 'token') {
            setCopiedToken(true);
            setTimeout(() => setCopiedToken(false), 2000);
        } else if (typeof type === 'number') {
            setCopiedWebhookSecretId(type);
            setTimeout(() => setCopiedWebhookSecretId(null), 2000);
        } else {
            setCopiedDocCode(type);
            setTimeout(() => setCopiedDocCode(null), 2000);
        }

        toast.success('Copied to clipboard!');
    };

    const hostUrl = window.location.origin;

    // Code examples
    const curlSendText = `curl -X POST "${hostUrl}/api/v1/messages/send-text" \\
  -H "Authorization: Bearer YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -H "Accept: application/json" \\
  -d '{
    "phone_number_id": "985357101336442",
    "to": "+12125550198",
    "body": "Hello, this is a test text message sent via Natagara API!"
  }'`;

    const curlSendTemplate = `curl -X POST "${hostUrl}/api/v1/messages/send-template" \\
  -H "Authorization: Bearer YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -H "Accept: application/json" \\
  -d '{
    "phone_number_id": "985357101336442",
    "to": "+12125550198",
    "template_name": "verify_otp_usecase",
    "language": "en",
    "variables": ["123456", "Natagara"]
  }'`;

    return (
        <>
            <Head title="Developer Panel & API" />

            <div className="mx-auto flex max-w-6xl flex-col gap-6 text-left">
                {/* Heading */}
                <div className="flex flex-col gap-4 border-b pb-4 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
                            <Terminal className="h-6 w-6 text-emerald-600" />
                            <span>Konsol Developer & Integrasi API</span>
                        </h1>
                        <p className="text-sm text-muted-foreground">
                            Kelola token API, integrasikan webhook keluar (outgoing), dan baca dokumentasi integrasi WhatsApp.
                        </p>
                    </div>

                    <div className="flex gap-2 self-start sm:self-auto">
                        <Button
                            onClick={() => setActiveTab('docs')}
                            variant="outline"
                            className="gap-1.5"
                        >
                            <BookOpen className="h-4 w-4" />
                            <span>Dokumentasi API</span>
                        </Button>
                    </div>
                </div>

                {/* Sub Tab Navigation */}
                <div className="flex border-b border-zinc-200 dark:border-zinc-800">
                    <button
                        onClick={() => setActiveTab('keys')}
                        className={`flex items-center gap-2 border-b-2 px-4 pb-3 text-sm font-semibold transition-all ${
                            activeTab === 'keys'
                                ? 'border-emerald-600 font-bold text-emerald-600 dark:text-emerald-400'
                                : 'border-transparent text-muted-foreground hover:text-foreground'
                        }`}
                    >
                        <Key className="h-4 w-4" />
                        <span>Kunci API (API Keys)</span>
                    </button>

                    <button
                        onClick={() => setActiveTab('webhook')}
                        className={`flex items-center gap-2 border-b-2 px-4 pb-3 text-sm font-semibold transition-all ${
                            activeTab === 'webhook'
                                ? 'border-emerald-600 font-bold text-emerald-600 dark:text-emerald-400'
                                : 'border-transparent text-muted-foreground hover:text-foreground'
                        }`}
                    >
                        <Webhook className="h-4 w-4" />
                        <span>Webhook Keluar</span>
                    </button>

                    <button
                        onClick={() => setActiveTab('docs')}
                        className={`flex items-center gap-2 border-b-2 px-4 pb-3 text-sm font-semibold transition-all ${
                            activeTab === 'docs'
                                ? 'border-emerald-600 font-bold text-emerald-600 dark:text-emerald-400'
                                : 'border-transparent text-muted-foreground hover:text-foreground'
                        }`}
                    >
                        <BookOpen className="h-4 w-4" />
                        <span>Panduan Dokumentasi</span>
                    </button>
                </div>

                {/* Plain API Key Banner (Shown only once after creation) */}
                {plainApiKey && (
                    <Card className="animate-pulse-once border-emerald-500/30 bg-emerald-500/5 shadow-sm dark:bg-emerald-950/20">
                        <CardHeader className="pb-3">
                            <div className="flex items-center gap-2">
                                <Sparkles className="animate-spin-slow h-5 w-5 text-emerald-600" />
                                <CardTitle className="text-base font-bold text-emerald-800 dark:text-emerald-300">
                                    Salin Kunci API Baru Anda
                                </CardTitle>
                            </div>
                            <CardDescription className="text-xs text-emerald-700/80 dark:text-emerald-400/80">
                                Demi keamanan, kunci ini hanya ditampilkan satu kali saja.
                                Jika Anda menutup atau menyegarkan halaman ini, kunci tidak dapat dipulihkan
                                dan Anda harus membuat kunci baru.
                            </CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="flex items-center gap-2 rounded-lg border border-emerald-500/20 bg-white p-3 dark:bg-zinc-900">
                                <span className="flex-1 truncate font-mono text-sm font-semibold break-all text-emerald-800 select-all dark:text-emerald-400">
                                    {plainApiKey}
                                </span>
                                <Button
                                    size="sm"
                                    className="gap-1.5 bg-emerald-600 text-white hover:bg-emerald-700"
                                    onClick={() =>
                                        copyToClipboard(plainApiKey, 'token')
                                    }
                                >
                                    {copiedToken ? (
                                        <>
                                            <Check className="h-4 w-4" />
                                            <span>Tersalin</span>
                                        </>
                                    ) : (
                                        <>
                                            <Copy className="h-4 w-4" />
                                            <span>Salin Kunci</span>
                                        </>
                                    )}
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                )}

                {/* API KEYS TAB */}
                {activeTab === 'keys' && (
                    <div className="space-y-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <h3 className="text-lg font-bold">
                                    Kredensial API Aktif
                                </h3>
                                <p className="text-xs text-muted-foreground">
                                    Gunakan kunci API aman ini untuk mengintegrasikan
                                    WhatsApp dengan aplikasi Anda, Zapier, sistem CRM, atau backend kustom.
                                </p>
                            </div>
                            <Button
                                className="gap-1.5 bg-emerald-600 text-white hover:bg-emerald-700"
                                onClick={() => setIsCreateOpen(true)}
                            >
                                <Plus className="h-4 w-4" />
                                <span>Buat Kunci API</span>
                            </Button>
                        </div>

                        <div className="rounded-lg border bg-card">
                            <div className="overflow-x-auto">
                                <table className="w-full border-collapse text-left text-sm">
                                    <thead>
                                        <tr className="border-b bg-zinc-50 font-semibold text-zinc-500 dark:bg-zinc-900">
                                            <th className="p-3">Nama Kunci</th>
                                            <th className="p-3">Masking Token</th>
                                            <th className="p-3">Terakhir Digunakan</th>
                                            <th className="p-3">Dibuat Pada</th>
                                            <th className="p-3 text-right">
                                                Aksi
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y">
                                        {apiKeys.map((key) => (
                                            <tr
                                                key={key.id}
                                                className="hover:bg-zinc-50/50 dark:hover:bg-zinc-900/10"
                                            >
                                                <td className="p-3 font-semibold text-foreground">
                                                    {key.name}
                                                </td>
                                                <td className="p-3 font-mono text-xs text-muted-foreground select-none">
                                                    zm_live_••••••••••••••••••••
                                                </td>
                                                <td className="p-3 font-mono text-xs text-muted-foreground">
                                                    {key.last_used_at ||
                                                        'Belum pernah digunakan'}
                                                </td>
                                                <td className="p-3 font-mono text-xs text-muted-foreground">
                                                    {key.created_at}
                                                </td>
                                                <td className="p-3 text-right">
                                                    <Button
                                                        variant="ghost"
                                                        size="sm"
                                                        className="text-rose-500 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/20"
                                                        onClick={() =>
                                                            handleRevokeKey(
                                                                key.id,
                                                                key.name,
                                                            )
                                                        }
                                                    >
                                                        <Trash2 className="h-4 w-4" />
                                                        <span className="ml-1 hidden sm:inline">
                                                            Cabut
                                                        </span>
                                                    </Button>
                                                </td>
                                            </tr>
                                        ))}
                                        {apiKeys.length === 0 && (
                                            <tr>
                                                <td
                                                    colSpan={5}
                                                    className="p-12 text-center text-sm text-muted-foreground italic"
                                                >
                                                    Belum ada Kunci API yang dibuat.
                                                    Klik "Buat Kunci API" untuk membuat kredensial baru.
                                                </td>
                                            </tr>
                                        )}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                )}

                {/* OUTGOING WEBHOOK TAB */}
                {activeTab === 'webhook' && (
                    <div className="space-y-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <h3 className="text-lg font-bold">
                                    Penerus Webhook Keluar (Forwarder)
                                </h3>
                                <p className="text-xs text-muted-foreground">
                                    Teruskan pesan WhatsApp masuk yang diterima nomor Anda secara otomatis ke server atau endpoint sistem Anda secara real-time.
                                </p>
                            </div>
                            <Button
                                className="gap-1.5 bg-emerald-600 text-white hover:bg-emerald-700"
                                onClick={() => setIsAddWebhookOpen(true)}
                            >
                                <Plus className="h-4 w-4" />
                                <span>Tambah Webhook</span>
                            </Button>
                        </div>

                        <div className="rounded-lg border bg-card">
                            <div className="overflow-x-auto">
                                <table className="w-full border-collapse text-left text-sm">
                                    <thead>
                                        <tr className="border-b bg-zinc-50 font-semibold text-zinc-500 dark:bg-zinc-900">
                                            <th className="p-3">URL Webhook</th>
                                            <th className="p-3">
                                                Token Rahasia (Secret Token)
                                            </th>
                                            <th className="p-3">Status</th>
                                            <th className="p-3">Dibuat Pada</th>
                                            <th className="p-3 text-right">
                                                Aksi
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y">
                                        {webhooks.map((wh) => (
                                            <tr
                                                key={wh.id}
                                                className="hover:bg-zinc-50/50 dark:hover:bg-zinc-900/10"
                                            >
                                                <td
                                                    className="max-w-[280px] truncate p-3 font-medium text-foreground"
                                                    title={wh.url}
                                                >
                                                    {wh.url}
                                                </td>
                                                <td className="p-3">
                                                    <div className="flex max-w-[280px] items-center gap-1.5">
                                                        <Input
                                                            value={
                                                                wh.secret_token
                                                            }
                                                            readOnly
                                                            type="password"
                                                            className="h-8 bg-zinc-50 font-mono text-xs select-all dark:bg-zinc-800"
                                                        />
                                                        <Button
                                                            type="button"
                                                            variant="ghost"
                                                            size="sm"
                                                            className="h-8 w-8 shrink-0 p-0 text-zinc-500 hover:text-foreground"
                                                            onClick={() =>
                                                                copyToClipboard(
                                                                    wh.secret_token,
                                                                    wh.id,
                                                                )
                                                            }
                                                        >
                                                            {copiedWebhookSecretId ===
                                                            wh.id ? (
                                                                <Check className="h-3.5 w-3.5 text-emerald-600" />
                                                            ) : (
                                                                <Copy className="h-3.5 w-3.5" />
                                                            )}
                                                        </Button>
                                                    </div>
                                                </td>
                                                <td className="p-3">
                                                    <div className="flex items-center space-x-2">
                                                        <Checkbox
                                                            id={`webhook-status-${wh.id}`}
                                                            checked={
                                                                wh.is_active
                                                            }
                                                            onCheckedChange={() =>
                                                                handleToggleWebhook(
                                                                    wh.id,
                                                                )
                                                            }
                                                        />
                                                        <label
                                                            htmlFor={`webhook-status-${wh.id}`}
                                                            className="cursor-pointer text-xs font-medium"
                                                        >
                                                            {wh.is_active
                                                                ? 'Aktif'
                                                                : 'Nonaktif'}
                                                        </label>
                                                    </div>
                                                </td>
                                                <td className="p-3 font-mono text-xs text-muted-foreground">
                                                    {wh.created_at}
                                                </td>
                                                <td className="p-3 text-right">
                                                    <Button
                                                        variant="ghost"
                                                        size="sm"
                                                        className="text-rose-500 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/20"
                                                        onClick={() =>
                                                            handleDeleteWebhook(
                                                                wh.id,
                                                                wh.url,
                                                            )
                                                        }
                                                    >
                                                        <Trash2 className="h-4 w-4" />
                                                        <span className="ml-1 hidden sm:inline">
                                                            Hapus
                                                        </span>
                                                    </Button>
                                                </td>
                                            </tr>
                                        ))}
                                        {webhooks.length === 0 && (
                                            <tr>
                                                <td
                                                    colSpan={5}
                                                    className="p-12 text-center text-sm text-muted-foreground italic"
                                                >
                                                    Belum ada endpoint webhook yang didaftarkan.
                                                    Klik "Tambah Webhook" untuk mendaftarkan endpoint baru.
                                                </td>
                                            </tr>
                                        )}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {webhooks.length > 0 && (
                            <div className="space-y-1 rounded-lg border bg-zinc-50 p-3.5 text-left text-xs text-muted-foreground dark:bg-zinc-900">
                                <span className="font-semibold text-zinc-900 dark:text-zinc-100">
                                    Verifikasi Tanda Tangan Webhook
                                </span>
                                <p className="leading-relaxed">
                                    Setiap payload webhook ditandatangani menggunakan token rahasia masing-masing.
                                    Tanda tangan dikirimkan pada header <code>X-Hub-Signature-256</code> dengan perhitungan <code>sha256=hmac_sha256(secret, payload)</code>. Verifikasi header ini di server Anda untuk menjamin integritas dan keaslian data.
                                </p>
                            </div>
                        )}
                    </div>
                )}

                {/* API DOCS TAB */}
                {activeTab === 'docs' && (
                    <div className="space-y-8">
                        <div>
                            <h3 className="text-lg font-bold">
                                Dokumentasi Interaktif API
                            </h3>
                            <p className="text-xs text-muted-foreground">
                                Kirim pesan template broadcast atau balasan obrolan langsung dari kode backend aplikasi Anda.
                            </p>
                        </div>

                        {/* Request Headers Card */}
                        <Card className="bg-zinc-50 dark:bg-zinc-900/50">
                            <CardHeader className="py-4">
                                <CardTitle className="text-sm font-bold">
                                    Header Otorisasi Global
                                </CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-1.5 text-left font-mono text-xs">
                                <div className="flex items-center justify-between rounded border bg-background p-2">
                                    <span>
                                        Authorization: Bearer
                                        &lt;KUNCI_API_ANDA&gt;
                                    </span>
                                </div>
                                <div className="flex items-center justify-between rounded border bg-background p-2">
                                    <span>Content-Type: application/json</span>
                                </div>
                                <div className="flex items-center justify-between rounded border bg-background p-2">
                                    <span>Accept: application/json</span>
                                </div>
                            </CardContent>
                        </Card>

                        {/* API Endpoint: Send Text */}
                        <div className="space-y-3">
                            <div className="flex items-center gap-2">
                                <span className="rounded bg-sky-500 px-2 py-0.5 font-mono text-xs font-bold text-white">
                                    POST
                                </span>
                                <h4 className="font-mono text-sm font-bold text-zinc-900 dark:text-zinc-100">
                                    /api/v1/messages/send-text
                                </h4>
                                <span className="text-xs text-muted-foreground">
                                    — Kirim pesan balasan teks bebas (dalam jendela 24 jam).
                                </span>
                            </div>

                            <div className="grid gap-4 lg:grid-cols-2">
                                {/* Parameters */}
                                <div className="space-y-3 rounded-lg border bg-card p-4">
                                    <span className="block text-xs font-bold tracking-wider text-zinc-400 uppercase">
                                        Kolom Payload JSON
                                    </span>
                                    <div className="space-y-2.5 text-xs">
                                        <div className="flex justify-between border-b pb-1.5">
                                            <span>
                                                <code>phone_number_id</code>{' '}
                                                <span className="font-bold text-rose-500">
                                                    *
                                                </span>
                                            </span>
                                            <span className="text-muted-foreground">
                                                string (ID Nomor Telepon Meta)
                                            </span>
                                        </div>
                                        <div className="flex justify-between border-b pb-1.5">
                                            <span>
                                                <code>to</code>{' '}
                                                <span className="font-bold text-rose-500">
                                                    *
                                                </span>
                                            </span>
                                            <span className="text-muted-foreground">
                                                string (Nomor tujuan dengan kode negara)
                                            </span>
                                        </div>
                                        <div className="flex justify-between pb-0.5">
                                            <span>
                                                <code>body</code>{' '}
                                                <span className="font-bold text-rose-500">
                                                    *
                                                </span>
                                            </span>
                                            <span className="text-muted-foreground">
                                                string (Isi teks pesan)
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                {/* Code Tab */}
                                <div className="flex flex-col rounded-lg border bg-zinc-950 text-zinc-300">
                                    <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-2">
                                        <span className="font-mono text-xs font-semibold text-zinc-500">
                                            Permintaan cURL
                                        </span>
                                        <Button
                                            variant="ghost"
                                            size="sm"
                                            className="h-6 w-6 p-0 text-zinc-400 hover:text-white"
                                            onClick={() =>
                                                copyToClipboard(
                                                    curlSendText,
                                                    'curl-text',
                                                )
                                            }
                                        >
                                            {copiedDocCode === 'curl-text' ? (
                                                <Check className="h-3 w-3" />
                                            ) : (
                                                <Copy className="h-3 w-3" />
                                            )}
                                        </Button>
                                    </div>
                                    <pre className="overflow-x-auto p-4 text-left font-mono text-xs leading-relaxed text-emerald-400">
                                        {curlSendText}
                                    </pre>
                                </div>
                            </div>
                        </div>

                        {/* API Endpoint: Send Template */}
                        <div className="space-y-3 border-t pt-6">
                            <div className="flex items-center gap-2">
                                <span className="rounded bg-sky-500 px-2 py-0.5 font-mono text-xs font-bold text-white">
                                    POST
                                </span>
                                <h4 className="font-mono text-sm font-bold text-zinc-900 dark:text-zinc-100">
                                    /api/v1/messages/send-template
                                </h4>
                                <span className="text-xs text-muted-foreground">
                                    — Kirim pesan template resmi Meta yang telah disetujui.
                                </span>
                            </div>

                            <div className="grid gap-4 lg:grid-cols-2">
                                {/* Parameters */}
                                <div className="space-y-3 rounded-lg border bg-card p-4">
                                    <span className="block text-xs font-bold tracking-wider text-zinc-400 uppercase">
                                        Kolom Payload JSON
                                    </span>
                                    <div className="space-y-2.5 text-xs">
                                        <div className="flex justify-between border-b pb-1.5">
                                            <span>
                                                <code>phone_number_id</code>{' '}
                                                <span className="font-bold text-rose-500">
                                                    *
                                                </span>
                                            </span>
                                            <span className="text-muted-foreground">
                                                string (ID Nomor Telepon Meta)
                                            </span>
                                        </div>
                                        <div className="flex justify-between border-b pb-1.5">
                                            <span>
                                                <code>to</code>{' '}
                                                <span className="font-bold text-rose-500">
                                                    *
                                                </span>
                                            </span>
                                            <span className="text-muted-foreground">
                                                string (Nomor tujuan dengan kode negara)
                                            </span>
                                        </div>
                                        <div className="flex justify-between border-b pb-1.5">
                                            <span>
                                                <code>template_name</code>{' '}
                                                <span className="font-bold text-rose-500">
                                                    *
                                                </span>
                                            </span>
                                            <span className="text-muted-foreground">
                                                string (Nama kunci template)
                                            </span>
                                        </div>
                                        <div className="flex justify-between border-b pb-1.5">
                                            <span>
                                                <code>language</code>
                                            </span>
                                            <span className="text-muted-foreground">
                                                string (contoh: <code>id</code> atau <code>en</code>)
                                            </span>
                                        </div>
                                        <div className="flex justify-between pb-0.5">
                                            <span>
                                                <code>variables</code>
                                            </span>
                                            <span className="text-muted-foreground">
                                                array of strings (Parameter variabel isi pesan)
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                {/* Code Tab */}
                                <div className="flex flex-col rounded-lg border bg-zinc-950 text-zinc-300">
                                    <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-2">
                                        <span className="font-mono text-xs font-semibold text-zinc-500">
                                            Permintaan cURL
                                        </span>
                                        <Button
                                            variant="ghost"
                                            size="sm"
                                            className="h-6 w-6 p-0 text-zinc-400 hover:text-white"
                                            onClick={() =>
                                                copyToClipboard(
                                                    curlSendTemplate,
                                                    'curl-template',
                                                )
                                            }
                                        >
                                            {copiedDocCode ===
                                            'curl-template' ? (
                                                <Check className="h-3 w-3" />
                                            ) : (
                                                <Copy className="h-3 w-3" />
                                            )}
                                        </Button>
                                    </div>
                                    <pre className="overflow-x-auto p-4 text-left font-mono text-xs leading-relaxed text-emerald-400">
                                        {curlSendTemplate}
                                    </pre>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {/* Generate API Key Dialog */}
            <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
                <DialogContent className="sm:max-w-[400px]">
                    <DialogHeader>
                        <DialogTitle>Buat Kunci API Developer</DialogTitle>
                        <DialogDescription>
                            Beri nama kunci ini untuk memudahkan identifikasi integrasi (contoh: Integrasi CRM, Sistem Kasir).
                        </DialogDescription>
                    </DialogHeader>

                    <form
                        onSubmit={handleCreateKey}
                        className="space-y-4 py-2 text-left"
                    >
                        <div className="grid gap-2">
                            <Label htmlFor="key-name">Nama Kunci API *</Label>
                            <Input
                                id="key-name"
                                required
                                value={keyForm.data.name}
                                onChange={(e) =>
                                    keyForm.setData('name', e.target.value)
                                }
                                placeholder="Contoh: Otomasi ERP, Integrasi Web"
                            />
                        </div>

                        <DialogFooter className="pt-2">
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => setIsCreateOpen(false)}
                            >
                                Batal
                            </Button>
                            <Button
                                type="submit"
                                disabled={keyForm.processing}
                                size="sm"
                                className="bg-emerald-600 text-white hover:bg-emerald-700"
                            >
                                {keyForm.processing
                                    ? 'Memproses...'
                                    : 'Buat Token'}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>

            {/* Add Outgoing Webhook Dialog */}
            <Dialog open={isAddWebhookOpen} onOpenChange={setIsAddWebhookOpen}>
                <DialogContent className="sm:max-w-[440px]">
                    <DialogHeader>
                        <DialogTitle>Tambah Webhook Keluar</DialogTitle>
                        <DialogDescription>
                            Daftarkan URL server endpoint baru untuk menerima data pesan masuk WhatsApp secara instan.
                        </DialogDescription>
                    </DialogHeader>

                    <form
                        onSubmit={handleAddWebhook}
                        className="space-y-4 py-2 text-left"
                    >
                        <div className="grid gap-2">
                            <Label htmlFor="webhook-url-input">
                                URL Endpoint Server *
                            </Label>
                            <Input
                                id="webhook-url-input"
                                type="url"
                                required
                                value={webhookForm.data.url}
                                onChange={(e) =>
                                    webhookForm.setData('url', e.target.value)
                                }
                                placeholder="https://domain-anda.com/webhook/whatsapp"
                            />
                            <span className="text-[10px] text-muted-foreground">
                                Harus berupa URL HTTP/HTTPS valid. Sistem akan mengirim permintaan POST real-time ke URL ini.
                            </span>
                        </div>

                        <DialogFooter className="pt-2">
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => setIsAddWebhookOpen(false)}
                            >
                                Batal
                            </Button>
                            <Button
                                type="submit"
                                disabled={webhookForm.processing}
                                size="sm"
                                className="bg-emerald-600 text-white hover:bg-emerald-700"
                            >
                                {webhookForm.processing
                                    ? 'Mendaftarkan...'
                                    : 'Daftarkan Webhook'}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
}

DeveloperIndex.layout = (page: any) => page;