import StatusSelector from '@admin/components/status-selector';
import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';
import { Link } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import { Edit, Eye, Mail, MoreHorizontal, Trash2 } from 'lucide-react';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
declare const can: (permission: string) => any;

interface Contact {
    id: number;
    uid: string;
    name: string;
    email: string;
    phone: string | null;
    status: number;
    user_id: number | null;
    avatar?: string | null;
    created_at: string | null;
}

interface ContactTableColumnsProps {
    handleDeleteContact: (contactId: number | string) => void;
    handleSendEmail: (contact: Contact) => void;
    handleEditContact: (contact: Contact) => void;
    handleViewContact?: (contact: Contact) => void;
    handleStatusUpdate?: (contactId: string, status: number) => void;
    statusOptions?: Array<{
        label: string;
        value: number;
    }>;
}

export const contactTableColumns = ({
    handleDeleteContact,
    handleSendEmail,
    handleEditContact,
    handleViewContact,
    handleStatusUpdate,
    statusOptions,
}: ContactTableColumnsProps): (ColumnDef<Contact> & { enableSorting?: boolean })[] => [
    {
        accessorKey: 'name',
        header: 'Contact',
        enableSorting: true,
        cell: ({ row }) => {
            const contact = row.original;
            return (
                <div className="flex items-center gap-3">
                    <Avatar className="h-10 w-10">
                        <AvatarImage src={contact.avatar || undefined} />
                        <AvatarFallback>{contact.name?.charAt(0)?.toUpperCase() || '?'}</AvatarFallback>
                    </Avatar>

                    <Link href={route('contacts.show', contact.uid)} className="leading-tight hover:underline" onClick={(e) => e.stopPropagation()}>
                        <div className="text-sm font-semibold sm:text-[15px]">{contact.name}</div>
                        <div className="max-w-[180px] text-xs break-all text-muted-foreground sm:max-w-[240px]">{contact.primary_email}</div>
                    </Link>
                </div>
            );
        },
    },
    {
        accessorKey: 'primary_phone',
        header: 'Phone',
        enableSorting: false,
        cell: ({ row }) => {
            const phone = row.getValue('primary_phone') as string | null;
            return <div className="text-sm">{phone || '-'}</div>;
        },
    },

    {
        accessorKey: 'status',
        header: 'Status',
        enableSorting: true,
        cell: ({ row }) => {
            const contact = row.original;
            const status = (contact.status || 0) as number;

            // If status update handler and options are provided, show status selector
            if (handleStatusUpdate && statusOptions) {
                return <StatusSelector id={contact.uid} handleStatusUpdate={handleStatusUpdate} status={status} statusOptions={statusOptions} />;
            }

            // Otherwise, show a simple status badge
            const statusOption = statusOptions?.find((opt) => opt.value === status);
            const statusLabel = statusOption?.label || 'Unknown';

            return <Badge variant={status === 1 ? 'default' : 'secondary'}>{statusLabel}</Badge>;
        },
    },
    {
        accessorKey: 'created_at',
        header: 'Created',
        enableSorting: true,
        cell: ({ row }) => {
            const createdAt = row.getValue('created_at') as string | null;
            if (!createdAt) return <div className="text-sm text-gray-400">-</div>;

            const date = new Date(createdAt);
            return <div className="text-sm text-gray-600">{date.toLocaleDateString()}</div>;
        },
    },
    {
        id: 'actions',
        header: 'Actions',
        enableSorting: false,
        cell: ({ row }) => {
            const contact = row.original;

            return (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="h-8 w-8 p-0">
                            <span className="sr-only">Open menu</span>
                            <MoreHorizontal className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        {handleViewContact && (
                            <>
                                <DropdownMenuItem onClick={() => handleViewContact(contact)}>
                                    <Eye className="mr-2 h-4 w-4" />
                                    View Details
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                            </>
                        )}
                        {can('platform_edit_contact') > 0 && (
                            <DropdownMenuItem onClick={() => handleEditContact(contact)}>
                                <Edit className="mr-2 h-4 w-4" />
                                Edit Contact
                            </DropdownMenuItem>
                        )}
                        {can('platform_send_email_to_contact') > 0 && (
                            <DropdownMenuItem onClick={() => handleSendEmail(contact)}>
                                <Mail className="mr-2 h-4 w-4" />
                                Send Email
                            </DropdownMenuItem>
                        )}
                        {can('platform_delete_contact') > 0 && (
                            <>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem onClick={() => handleDeleteContact(contact.uid)} className="text-red-600 focus:text-red-600">
                                    <Trash2 className="mr-2 h-4 w-4" />
                                    Delete Contact
                                </DropdownMenuItem>
                            </>
                        )}
                    </DropdownMenuContent>
                </DropdownMenu>
            );
        },
    },
];