import { Badge } from '@/components/ui/badge';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { parseServerDate } from '@/lib/date';
import { Link } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { format, formatDistanceToNow } from 'date-fns';
import { ExternalLink, Eye, MoreHorizontal } from 'lucide-react';
import { SeverityBadge } from './SeverityBadge';
import { ReviewBadge, StatusBadge } from './StatusBadge';
import type { AuditRow } from './audit-table';

function RowActions({
    row,
    onQuickView,
}: {
    row: AuditRow;
    onQuickView: (id: string) => void;
}) {
    return (
        <div className="flex items-center gap-1">
            <Tooltip>
                <TooltipTrigger asChild>
                    <button
                        onClick={() => onQuickView(row.id)}
                        className="text-muted-foreground hover:bg-muted/60 hover:text-foreground flex h-7 w-7 items-center justify-center rounded-md transition-colors"
                    >
                        <Eye className="h-3.5 w-3.5" />
                    </button>
                </TooltipTrigger>
                <TooltipContent>Quick view</TooltipContent>
            </Tooltip>
            <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">
                        <MoreHorizontal className="h-3.5 w-3.5" />
                    </button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48">
                    <DropdownMenuItem asChild className="gap-2 text-xs">
                        <Link href={`/admin/audit/${row.id}`}>
                            <ExternalLink className="h-3.5 w-3.5" />
                            View full details
                        </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem
                        className="gap-2 text-xs"
                        onClick={() => onQuickView(row.id)}
                    >
                        <Eye className="h-3.5 w-3.5" />
                        Quick view + respond
                    </DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
        </div>
    );
}

export function buildAuditColumns(
    onQuickView: (id: string) => void,
): ColumnDef<AuditRow, unknown>[] {
    return [
        {
            accessorKey: 'severity',
            header: 'Severity',
            meta: { sortable: true, label: 'Severity' },
            cell: ({ row }) => (
                <SeverityBadge severity={row.original.severity} />
            ),
        },
        {
            accessorKey: 'event',
            header: 'Event',
            meta: { sortable: true, label: 'Event' },
            cell: ({ row }) => (
                <div className="min-w-0">
                    <button
                        onClick={() => onQuickView(row.original.id)}
                        className="text-foreground hover:text-primary text-left font-mono text-sm font-medium transition-colors"
                    >
                        {row.original.event}
                    </button>
                    <div className="mt-0.5">
                        <Badge
                            variant="outline"
                            className="h-4 px-1.5 font-mono text-[10px]"
                        >
                            {row.original.category}
                        </Badge>
                    </div>
                </div>
            ),
        },
        {
            accessorKey: 'status',
            header: 'Status',
            meta: { sortable: true, label: 'Status' },
            cell: ({ row }) => <StatusBadge status={row.original.status} />,
        },
        {
            accessorKey: 'actor',
            header: 'Actor',
            meta: { sortable: true, label: 'Actor', sortKey: 'actor' },
            cell: ({ row }) => (
                <div className="min-w-0">
                    <p className="text-foreground truncate text-sm">
                        {row.original.actor_name ?? '—'}
                    </p>
                    <p className="text-muted-foreground truncate text-[11px]">
                        {row.original.actor_role ?? row.original.actor_type}
                        {row.original.ip_address && (
                            <>
                                {' '}
                                ·{' '}
                                <span className="font-mono">
                                    {row.original.ip_address}
                                </span>
                            </>
                        )}
                    </p>
                </div>
            ),
        },
        {
            id: '_review',
            header: 'Review',
            cell: ({ row }) => (
                <ReviewBadge status={row.original.review_status} />
            ),
        },
        {
            accessorKey: 'created_at',
            header: 'Time',
            meta: { sortable: true, label: 'Time' },
            cell: ({ row }) => (
                <Tooltip>
                    <TooltipTrigger asChild>
                        <span className="text-muted-foreground cursor-default text-xs tabular-nums">
                            {formatDistanceToNow(
                                parseServerDate(row.original.created_at),
                                { addSuffix: true },
                            )}
                        </span>
                    </TooltipTrigger>
                    <TooltipContent>
                        {format(
                            parseServerDate(row.original.created_at),
                            "d MMM yyyy 'at' HH:mm:ss",
                        )}
                    </TooltipContent>
                </Tooltip>
            ),
        },
        {
            id: '_actions',
            header: '',
            enableHiding: false,
            cell: ({ row }) => (
                <RowActions row={row.original} onQuickView={onQuickView} />
            ),
        },
    ];
}