import { Head, Link, router } from '@inertiajs/react';
import { Plus, RefreshCw, Trash2, Eye } from 'lucide-react';
import * as React from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import type { Column } from '@/components/ui/data-table';
import { DataTable } from '@/components/ui/data-table';
import { StatusBadge } from '@/components/ui/status-badge';

interface MessageTemplate {
    id: number;
    name: string;
    language: string;
    category: string;
    status: string;
    phone_number: string;
    rejection_reason: string | null;
    created_at: string;
}

interface PaginatedTemplates {
    data: MessageTemplate[];
    current_page: number;
    last_page: number;
    total: number;
}

interface TemplatesIndexProps {
    templates: PaginatedTemplates;
}

export default function TemplatesIndex({ templates }: TemplatesIndexProps) {
    const [syncing, setSyncing] = React.useState(false);

    const handleSync = () => {
        setSyncing(true);
        router.post(
            '/dashboard/templates/sync',
            {},
            {
                onSuccess: () => {
                    setSyncing(false);
                    toast.success(
                        'Proses sinkronisasi dikirim. Periksa kembali dalam beberapa saat!',
                    );
                },
                onFinish: () => setSyncing(false),
            },
        );
    };

    const handleDelete = (templateId: number, name: string) => {
        if (
            confirm(
                `Apakah Anda yakin ingin menghapus template "${name}" dari Meta dan Natagara?`,
            )
        ) {
            router.delete(`/dashboard/templates/${templateId}`, {
                onSuccess: () => {
                    toast.success('Template berhasil dihapus');
                },
            });
        }
    };

    const columns: Column<MessageTemplate>[] = [
        {
            header: 'Nama Template',
            accessorKey: 'name',
            className: 'font-semibold',
            cell: (row) => (
                <div className="flex flex-col text-left">
                    <span className="font-semibold text-foreground">
                        {row.name}
                    </span>
                    <span className="font-mono text-[10px] text-muted-foreground">
                        Saluran: {row.phone_number}
                    </span>
                </div>
            ),
        },
        {
            header: 'Status',
            accessorKey: 'status',
            cell: (row) => (
                <div className="flex flex-col items-start gap-1">
                    <StatusBadge status={row.status} />
                    {row.rejection_reason && (
                        <span
                            className="max-w-[150px] truncate text-[10px] font-medium text-rose-500"
                            title={row.rejection_reason}
                        >
                            Alasan: {row.rejection_reason}
                        </span>
                    )}
                </div>
            ),
        },
        {
            header: 'Bahasa',
            accessorKey: 'language',
            className: 'uppercase text-center font-semibold text-xs',
            cell: (row) => (
                <span className="block text-center">{row.language}</span>
            ),
        },
        {
            header: 'Kategori',
            accessorKey: 'category',
            cell: (row) => (
                <span className="inline-flex items-center rounded bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-300">
                    {row.category}
                </span>
            ),
        },
        {
            header: 'Dibuat Pada',
            accessorKey: 'created_at',
            className: 'font-mono text-xs text-muted-foreground',
        },
        {
            header: 'Aksi',
            className: 'text-right',
            cell: (row) => (
                <div className="flex justify-end gap-2">
                    <Button size="sm" variant="ghost" asChild>
                        <Link
                            href={`/dashboard/templates/${row.id}`}
                            className="inline-flex items-center gap-1.5"
                        >
                            <Eye className="h-4 w-4" />
                            <span>Pratinjau</span>
                        </Link>
                    </Button>
                    <Button
                        size="sm"
                        variant="ghost"
                        className="gap-1.5 text-rose-600 hover:bg-rose-500/5 hover:text-rose-700"
                        onClick={() => handleDelete(row.id, row.name)}
                    >
                        <Trash2 className="h-4 w-4" />
                        <span>Hapus</span>
                    </Button>
                </div>
            ),
        },
    ];

    return (
        <>
            <Head title="Template Pesan" />
            <div className="flex 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="text-2xl font-bold tracking-tight">
                            Template Pesan WhatsApp
                        </h1>
                        <p className="text-sm text-muted-foreground">
                            Buat dan kelola template pesan terstruktur (teks, header, footer, tombol) yang disetujui Meta.
                        </p>
                    </div>

                    <div className="flex gap-2 self-start sm:self-auto">
                        <Button
                            onClick={handleSync}
                            disabled={syncing}
                            variant="outline"
                            className="gap-1.5"
                        >
                            <RefreshCw
                                className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`}
                            />
                            <span>Sinkronkan Status</span>
                        </Button>
                        <Button
                            className="gap-2 bg-emerald-600 text-white hover:bg-emerald-700"
                            asChild
                        >
                            <Link href="/dashboard/templates/create">
                                <Plus className="h-4 w-4" />
                                <span>Buat Template</span>
                            </Link>
                        </Button>
                    </div>
                </div>

                {/* Templates DataTable */}
                <DataTable
                    columns={columns}
                    data={templates.data}
                    searchKey="name"
                    searchPlaceholder="Cari nama template..."
                    pagination={{
                        currentPage: templates.current_page,
                        lastPage: templates.last_page,
                        total: templates.total,
                        onPageChange: (page) => {
                            router.get(
                                '/dashboard/templates',
                                { page },
                                { preserveState: true },
                            );
                        },
                    }}
                    emptyMessage="Belum ada template pesan. Klik 'Buat Template' untuk mulai merancang template pesan."
                />
            </div>
        </>
    );
}

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