import AdminLayout from '@/Layouts/AdminLayout';
import { DataTable, type TableMeta } from '@/components/admin/DataTable';
import PageHeader from '@/components/admin/PageHeader';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useDataTable, type TableParams } from '@/hooks/useDataTable';
import { api } from '@/lib/api';
import { parseServerDate } from '@/lib/date';
import { cn } from '@/lib/utils';
import { Head, Link } from '@inertiajs/react';
import { keepPreviousData, useQuery } from '@tanstack/react-query';
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { Eye, MessageSquare, MoreHorizontal } from 'lucide-react';

// ── Types ─────────────────────────────────────────────────────────────────────

interface Ticket {
    id: string;
    title: string;
    tenant_id: string;
    tenant_name: string;
    category: string;
    priority: string;
    status: string;
    author_name: string | null;
    reply_count: number;
    created_at: string;
    updated_at: string;
}

interface TicketsResponse {
    data: Ticket[];
    meta: TableMeta;
    filter_counts: Record<string, number>;
}

// ── Badge helpers ─────────────────────────────────────────────────────────────

const STATUS_STYLES: Record<string, string> = {
    open: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
    pending:
        'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
    resolved:
        'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
    closed: 'bg-muted text-muted-foreground',
};

const PRIORITY_STYLES: Record<string, string> = {
    urgent: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
    high: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
    medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
    low: 'bg-muted text-muted-foreground',
};

const CATEGORY_LABELS: Record<string, string> = {
    billing: 'Billing',
    technical: 'Technical',
    onboarding: 'Onboarding',
    feature_request: 'Feature Request',
    general: 'General',
};

function StatusBadge({ status }: { status: string }) {
    return (
        <span
            className={cn(
                'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium capitalize',
                STATUS_STYLES[status] ?? 'bg-muted text-muted-foreground',
            )}
        >
            {status}
        </span>
    );
}

function PriorityBadge({ priority }: { priority: string }) {
    return (
        <span
            className={cn(
                'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium capitalize',
                PRIORITY_STYLES[priority] ?? 'bg-muted text-muted-foreground',
            )}
        >
            {priority}
        </span>
    );
}

// ── Quick filters ─────────────────────────────────────────────────────────────

const FILTER_DEFS = [
    { value: 'all', label: 'All' },
    { value: 'open', label: 'Open' },
    { value: 'pending', label: 'Pending' },
    { value: 'resolved', label: 'Resolved' },
    { value: 'closed', label: 'Closed' },
];

// ── API fetch ─────────────────────────────────────────────────────────────────

function fetchTickets(params: TableParams): Promise<TicketsResponse> {
    const sp = new URLSearchParams({ page: String(params.page) });
    if (params.filter && params.filter !== 'all')
        sp.set('filter', params.filter);
    if (params.sort) sp.set('sort', params.sort);
    if (params.dir !== 'asc') sp.set('dir', params.dir);
    if (params.search) sp.set('search', params.search);
    return api.get(`/admin/api/support?${sp}`);
}

// ── Row actions ───────────────────────────────────────────────────────────────

function RowActions({ ticket }: { ticket: Ticket }) {
    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <button className="text-muted-foreground hover:bg-muted/60 hover:text-foreground flex h-7 w-7 items-center justify-center rounded-md transition-colors focus:outline-none">
                    <MoreHorizontal className="h-4 w-4" />
                    <span className="sr-only">
                        Actions for ticket #{ticket.id}
                    </span>
                </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-40">
                <DropdownMenuItem asChild className="gap-2 text-xs">
                    <Link href={`/admin/support/${ticket.id}`}>
                        <Eye className="h-3.5 w-3.5" />
                        View ticket
                    </Link>
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

// ── Column definitions ────────────────────────────────────────────────────────

const columns: ColumnDef<Ticket, unknown>[] = [
    {
        accessorKey: 'id',
        header: '#',
        meta: { sortable: false, label: '#' },
        cell: ({ row }) => (
            <span className="text-muted-foreground font-mono text-xs">
                #{row.original.id}
            </span>
        ),
    },
    {
        accessorKey: 'title',
        header: 'Subject',
        meta: { sortable: true, label: 'Subject' },
        cell: ({ row }) => (
            <Link
                href={`/admin/support/${row.original.id}`}
                className="block min-w-0 hover:opacity-80"
            >
                <p className="text-foreground truncate font-medium">
                    {row.original.title}
                </p>
                {row.original.author_name && (
                    <p className="text-muted-foreground truncate text-[11px]">
                        {row.original.author_name}
                    </p>
                )}
            </Link>
        ),
    },
    {
        accessorKey: 'tenant_name',
        header: 'Tenant',
        meta: { sortable: true, label: 'Tenant' },
        cell: ({ row }) => (
            <Link
                href={`/admin/tenants/${row.original.tenant_id}`}
                className="text-foreground/80 hover:text-foreground truncate text-sm transition-colors"
            >
                {row.original.tenant_name}
            </Link>
        ),
    },
    {
        accessorKey: 'category',
        header: 'Category',
        meta: { sortable: true, label: 'Category' },
        cell: ({ row }) => (
            <span className="text-muted-foreground text-xs">
                {CATEGORY_LABELS[row.original.category] ??
                    row.original.category}
            </span>
        ),
    },
    {
        accessorKey: 'priority',
        header: 'Priority',
        meta: { sortable: true, label: 'Priority' },
        cell: ({ row }) => <PriorityBadge priority={row.original.priority} />,
    },
    {
        accessorKey: 'status',
        header: 'Status',
        meta: { sortable: true, label: 'Status' },
        cell: ({ row }) => <StatusBadge status={row.original.status} />,
    },
    {
        accessorKey: 'reply_count',
        header: 'Replies',
        meta: { sortable: true, label: 'Replies' },
        cell: ({ row }) => (
            <span className="text-muted-foreground flex items-center gap-1 text-xs tabular-nums">
                <MessageSquare className="h-3 w-3" />
                {row.original.reply_count}
            </span>
        ),
    },
    {
        accessorKey: 'created_at',
        header: 'Created',
        meta: { sortable: true, label: 'Created' },
        cell: ({ row }) => (
            <span className="text-muted-foreground text-xs tabular-nums">
                {format(
                    parseServerDate(row.original.created_at),
                    'dd MMM yyyy',
                )}
            </span>
        ),
    },
    {
        id: '_actions',
        header: '',
        cell: ({ row }) => <RowActions ticket={row.original} />,
        enableHiding: false,
    },
];

// ── Empty meta ────────────────────────────────────────────────────────────────

const EMPTY_META: TableMeta = {
    current_page: 1,
    last_page: 1,
    total: 0,
    per_page: 25,
    from: 0,
    to: 0,
};

// ── Page ──────────────────────────────────────────────────────────────────────

export default function SupportIndex() {
    const { params, setParams } = useDataTable({
        sort: 'created_at',
        dir: 'desc',
    });

    const { data, isLoading, isFetching } = useQuery({
        queryKey: ['admin.support', params],
        queryFn: () => fetchTickets(params),
        placeholderData: keepPreviousData,
    });

    const filterCounts = data?.filter_counts ?? {};

    const quickFilters = FILTER_DEFS.map((f) => ({
        ...f,
        count: filterCounts[f.value] ?? 0,
    }));

    return (
        <AdminLayout title="Support Tickets">
            <Head title="Support Tickets" />

            <div className="space-y-6 p-6 lg:p-8">
                <PageHeader
                    title="Support Tickets"
                    description="Customer support requests across all tenants"
                />

                <DataTable
                    columns={columns}
                    data={data?.data ?? []}
                    meta={data?.meta ?? EMPTY_META}
                    params={params}
                    isLoading={isLoading}
                    isFetching={isFetching}
                    onParamsChange={setParams}
                    quickFilters={quickFilters}
                    searchPlaceholder="Search by subject, tenant, or author…"
                    noun="tickets"
                    getRowId={(row) => String(row.id)}
                />
            </div>
        </AdminLayout>
    );
}