import { Head, Link, router } from '@inertiajs/react';
import {
    ArrowLeft,
    CheckCircle,
    AlertCircle,
    Pause,
    Play,
    RefreshCw,
    Send,
    MessageSquare,
} 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 { Progress } from '@/components/ui/progress';
import { StatCard } from '@/components/ui/stat-card';
import { StatusBadge } from '@/components/ui/status-badge';

interface CampaignDetail {
    id: number;
    name: string;
    status: string;
    message_type: string;
    message_label: string;
    direct_message_body: string | null;
    phone_number: string;
    total_recipients: number;
    sent_count: number;
    delivered_count: number;
    failed_count: number;
    read_count: number;
    total_cost: string;
    progress: number;
    scheduled_at: string | null;
    scheduled_timezone: string | null;
    started_at: string | null;
    completed_at: string | null;
    created_at: string;
}

interface RecipientRow {
    id: number;
    phone_number: string;
    status: string;
    error_message: string | null;
    sent_at: string | null;
    delivered_at: string | null;
    read_at: string | null;
}

interface PaginatedRecipients {
    data: RecipientRow[];
    current_page: number;
    last_page: number;
    total: number;
}

interface CampaignShowProps {
    campaign: CampaignDetail;
    recipients: PaginatedRecipients;
}

export default function CampaignShow({
    campaign,
    recipients,
}: CampaignShowProps) {
    const [actioning, setActioning] = React.useState(false);
    const [refreshing, setRefreshing] = React.useState(false);

    const handleRefresh = () => {
        setRefreshing(true);
        router.reload({
            onSuccess: () => {
                setRefreshing(false);
                toast.success('Statistik kampanye diperbarui.');
            },
            onFinish: () => setRefreshing(false),
        });
    };

    const handleStart = () => {
        setActioning(true);
        router.post(
            `/dashboard/campaigns/${campaign.id}/start`,
            {},
            {
                onSuccess: () => {
                    setActioning(false);
                    toast.success('Pemrosesan kampanye dimulai!');
                },
                onFinish: () => setActioning(false),
            },
        );
    };

    const handlePause = () => {
        setActioning(true);
        router.post(
            `/dashboard/campaigns/${campaign.id}/pause`,
            {},
            {
                onSuccess: () => {
                    setActioning(false);
                    toast.success('Kampanye dijeda.');
                },
                onFinish: () => setActioning(false),
            },
        );
    };

    const columns: Column<RecipientRow>[] = [
        {
            header: 'Nomor Telepon',
            accessorKey: 'phone_number',
            className: 'font-mono text-sm font-semibold',
        },
        {
            header: 'Status',
            accessorKey: 'status',
            cell: (row) => <StatusBadge status={row.status} />,
        },
        {
            header: 'Rincian / Kendala',
            accessorKey: 'error_message',
            cell: (row) => (
                <span className="text-xs font-medium text-rose-500">
                    {row.error_message || '--'}
                </span>
            ),
        },
        {
            header: 'Terkirim',
            accessorKey: 'sent_at',
            className: 'font-mono text-xs text-muted-foreground',
            cell: (row) => row.sent_at || '--',
        },
        {
            header: 'Tersampaikan',
            accessorKey: 'delivered_at',
            className: 'font-mono text-xs text-muted-foreground',
            cell: (row) => row.delivered_at || '--',
        },
        {
            header: 'Dibaca',
            accessorKey: 'read_at',
            className: 'font-mono text-xs text-muted-foreground',
            cell: (row) => row.read_at || '--',
        },
    ];

    return (
        <>
            <Head title={`Kampanye - ${campaign.name}`} />
            <div className="flex flex-col gap-6 text-left">
                {/* Back Link */}
                <div className="flex items-center">
                    <Button variant="ghost" size="sm" asChild className="-ml-2">
                        <Link
                            href="/dashboard/campaigns"
                            className="inline-flex items-center gap-1"
                        >
                            <ArrowLeft className="h-4 w-4" />
                            <span>Kembali ke Kampanye</span>
                        </Link>
                    </Button>
                </div>

                {/* Profile Title with Actions */}
                <div className="flex flex-col gap-4 border-b pb-6 sm:flex-row sm:items-center sm:justify-between">
                    <div className="text-left">
                        <div className="flex items-center gap-2">
                            <h1 className="text-2xl font-bold tracking-tight">
                                {campaign.name}
                            </h1>
                            <StatusBadge status={campaign.status} />
                        </div>
                        <p className="mt-0.5 text-sm text-muted-foreground">
                            Pengirim:{' '}
                            <span className="font-semibold text-foreground">
                                {campaign.phone_number}
                            </span>{' '}
                            | Pesan:{' '}
                            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
                                {campaign.message_label}
                            </code>
                        </p>
                        {campaign.scheduled_at && (
                            <p className="mt-1 text-xs text-muted-foreground">
                                Dijadwalkan pada{' '}
                                <span className="font-semibold text-foreground">
                                    {campaign.scheduled_at}
                                </span>
                                {campaign.scheduled_timezone && (
                                    <span>
                                        {' '}
                                        ({campaign.scheduled_timezone})
                                    </span>
                                )}
                            </p>
                        )}
                    </div>

                    <div className="flex items-center gap-2 self-start sm:self-auto">
                        <Button
                            onClick={handleRefresh}
                            disabled={refreshing}
                            variant="outline"
                            size="sm"
                            className="gap-1.5"
                        >
                            <RefreshCw
                                className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`}
                            />
                            <span>Segarkan</span>
                        </Button>

                        {/* Start action */}
                        {['draft', 'scheduled', 'paused'].includes(
                            campaign.status,
                        ) && (
                            <Button
                                onClick={handleStart}
                                disabled={actioning}
                                size="sm"
                                className="gap-1.5 bg-emerald-600 text-white hover:bg-emerald-700"
                            >
                                <Play className="h-4 w-4 fill-white" />
                                <span>Mulai Kampanye</span>
                            </Button>
                        )}

                        {/* Pause action */}
                        {campaign.status === 'processing' && (
                            <Button
                                onClick={handlePause}
                                disabled={actioning}
                                variant="outline"
                                size="sm"
                                className="gap-1.5 border-amber-500/50 text-amber-600 hover:bg-amber-500/10"
                            >
                                <Pause className="h-4 w-4" />
                                <span>Jeda Kampanye</span>
                            </Button>
                        )}
                    </div>
                </div>

                {campaign.message_type === 'direct' &&
                    campaign.direct_message_body && (
                        <div className="rounded-xl border bg-card p-5">
                            <h3 className="mb-3 text-sm font-semibold">
                                Isi Pesan Langsung
                            </h3>
                            <p className="rounded-lg bg-muted p-3 text-sm break-words whitespace-pre-wrap text-foreground">
                                {campaign.direct_message_body}
                            </p>
                        </div>
                    )}

                {/* Main Progress Bar */}
                {['processing', 'completed', 'paused'].includes(
                    campaign.status,
                ) && (
                    <div className="space-y-3 rounded-xl border bg-card p-6">
                        <div className="flex justify-between text-sm font-medium">
                            <span className="text-foreground">
                                Progres Pengiriman
                            </span>
                            <span className="text-emerald-600 dark:text-emerald-500">
                                {campaign.progress}% Selesai
                            </span>
                        </div>
                        <Progress
                            value={campaign.sent_count}
                            max={campaign.total_recipients}
                        />
                        <div className="flex justify-between text-xs text-muted-foreground">
                            <span>
                                Terkirim {campaign.sent_count} dari{' '}
                                {campaign.total_recipients} penerima
                            </span>
                            {campaign.completed_at && (
                                <span>
                                    Selesai pada: {campaign.completed_at}
                                </span>
                            )}
                        </div>
                    </div>
                )}

                {/* Stats cards Grid */}
                <div className="grid gap-4 md:grid-cols-4">
                    <StatCard
                        title="Terkirim"
                        value={campaign.sent_count}
                        description="Diteruskan ke Meta WABA"
                        icon={Send}
                    />
                    <StatCard
                        title="Tersampaikan"
                        value={campaign.delivered_count}
                        description="Diterima di HP pelanggan"
                        icon={CheckCircle}
                    />
                    <StatCard
                        title="Dibaca"
                        value={campaign.read_count}
                        description="Pesan dibuka pelanggan"
                        icon={MessageSquare}
                        className="border-blue-500/20 bg-blue-500/5 text-blue-600"
                    />
                    <StatCard
                        title="Gagal"
                        value={campaign.failed_count}
                        description="Pengiriman gagal"
                        icon={AlertCircle}
                        className={
                            campaign.failed_count > 0
                                ? 'border-rose-500/20 bg-rose-500/5 text-rose-600'
                                : ''
                        }
                    />
                </div>

                {/* Detailed logs */}
                <div className="mt-4 flex flex-col gap-4">
                    <h3 className="border-b pb-2 text-lg font-semibold">
                        Lacak Pengiriman Penerima
                    </h3>
                    <DataTable
                        columns={columns}
                        data={recipients.data}
                        pagination={{
                            currentPage: recipients.current_page,
                            lastPage: recipients.last_page,
                            total: recipients.total,
                            onPageChange: (page) => {
                                router.get(
                                    `/dashboard/campaigns/${campaign.id}`,
                                    { page },
                                    { preserveState: true },
                                );
                            },
                        }}
                        emptyMessage="Belum ada penerima dalam daftar kampanye ini."
                    />
                </div>
            </div>
        </>
    );
}

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