import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { cn } from '@admin/lib/utils';
import { ColumnDef } from '@tanstack/react-table';
import { Check, Copy } from 'lucide-react';
import { useState } from 'react';

export interface Transaction {
    id: number;
    subscription_id: number;
    subscription_uid?: string;
    tenant_name: string;
    package_name: string;
    amount: number;
    total_amount: number;
    currency: string;
    payment_method: string;
    payment_method_label: string;
    payment_type: number;
    payment_type_label: string;
    provider: string;
    status: number;
    status_label: string;
    transaction_reference: string | null;
    payment_date: string | null;
    processed_at: string | null;
    created_at: string;
    notes?: string | null;
}

const CopyableText: React.FC<{ text: string; className?: string; maxLength?: number }> = ({ text, className, maxLength = 10 }) => {
    const [copied, setCopied] = useState(false);

    const handleCopy = async () => {
        try {
            await navigator.clipboard.writeText(text);
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
        } catch (err) {
            console.error('Failed to copy text: ', err);
        }
    };

    const displayText = text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;

    return (
        <div className={cn("flex items-center gap-1 group cursor-pointer", className)} onClick={handleCopy}>
            <span className="truncate font-mono text-xs">{displayText}</span>
            <Button
                variant="ghost"
                size="sm"
                className="h-4 w-4 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
                title="Copy to clipboard"
            >
                {copied ? (
                    <Check className="h-3 w-3 text-green-600" />
                ) : (
                    <Copy className="h-3 w-3 text-gray-400" />
                )}
            </Button>
        </div>
    );
};

const getStatusColor = (status: number): string => {
    switch (status) {
        case 1: // ACTIVE/Successful
            return 'bg-green-100 text-green-800 border-green-300';
        case 0: // INACTIVE/Failed
            return 'bg-red-100 text-red-800 border-red-300';
        case 2: // PENDING
            return 'bg-yellow-100 text-yellow-800 border-yellow-300';
        case 5: // COMPLETED
            return 'bg-green-100 text-green-800 border-green-300';
        case 7: // FAILED
            return 'bg-red-100 text-red-800 border-red-300';
        case 6: // CANCELLED
            return 'bg-gray-100 text-gray-800 border-gray-300';
        case 10: // PROCESSING
            return 'bg-blue-100 text-blue-800 border-blue-300';
        default:
            return 'bg-gray-100 text-gray-800 border-gray-300';
    }
};

const getPaymentMethodColor = (method: string): string => {
    switch (method?.toLowerCase()) {
        case 'card':
        case 'credit_card':
        case 'stripe':
            return 'bg-blue-100 text-blue-800 border-blue-300';
        case 'paypal':
            return 'bg-indigo-100 text-indigo-800 border-indigo-300';
        case 'bank_transfer':
        case 'bank':
            return 'bg-purple-100 text-purple-800 border-purple-300';
        case 'cash':
            return 'bg-green-100 text-green-800 border-green-300';
        case 'check':
            return 'bg-orange-100 text-orange-800 border-orange-300';
        default:
            return 'bg-gray-100 text-gray-800 border-gray-300';
    }
};

export const transactionTableColumns = (): ColumnDef<Transaction>[] => [
    {
        accessorKey: 'transaction_reference',
        header: 'ID & Status',
        size: 200,
        cell: ({ row }) => (
            <div className="min-w-[200px] px-2 py-1">
                <div className="flex flex-col gap-1">
                    <CopyableText
                        text={row.original.transaction_reference || 'N/A'}
                        className="bg-gray-50 px-2 py-1 rounded"
                        maxLength={10}
                    />
                    <Badge className={cn('border text-xs w-fit', getStatusColor(row.original.status))}>
                        {row.original.status_label}
                    </Badge>
                </div>
            </div>
        ),
    },
    {
        accessorKey: 'subscription_id',
        header: 'Subscription',
        size: 200,
        cell: ({ row }) => (
            <div className="min-w-[200px] px-2 py-1">
                <div className="flex flex-col gap-1">
                    <CopyableText
                        text={row.original.subscription_uid || 'N/A'}
                        className="bg-gray-50 px-2 py-1 rounded"
                        maxLength={10}
                    />
                    <span className="text-xs text-gray-500">{row.original.subscription_name || 'Subscription'}</span>
                </div>
            </div>
        ),
    },
    {
        accessorKey: 'tenant_name',
        header: 'Tenant & Package',
        size: 220,
        cell: ({ row }) => (
            <div className="min-w-[220px] px-2 py-1">
                <div className="flex flex-col gap-1">
                    <div className="flex flex-col">
                        <span className="text-xs text-gray-500">Tenant</span>
                        <span className="text-sm font-medium text-gray-900">{row.original.tenant_name}</span>
                    </div>
                    <div className="flex flex-col">
                        <span className="text-xs text-gray-500">Package</span>
                        <span className="text-sm text-gray-700">{row.original.package_name || 'N/A'}</span>
                    </div>
                </div>
            </div>
        ),
    },
    {
        accessorKey: 'payment_method',
        header: 'Payment & Provider',
        size: 180,
        cell: ({ row }) => (
            <div className="min-w-[180px] px-2 py-1">
                <div className="flex flex-col gap-1">
                    <Badge className={cn('border text-xs w-fit', getPaymentMethodColor(row.original.payment_method_label))}>
                        {row.original.payment_method_label || row.original.payment_method || 'Unknown'}
                    </Badge>
                    <span className="text-xs text-gray-500 capitalize">{row.original.provider || 'Manual'}</span>
                </div>
            </div>
        ),
    },
    {
        accessorKey: 'total_amount',
        header: 'Amount',
        size: 120,
        cell: ({ row }) => (
            <div className="min-w-[120px] px-2 py-1">
                <span className="text-sm font-semibold text-gray-900">
                    {row.original.currency?.toUpperCase() || '$'}{(row.original.total_amount ?? row.original.amount ?? 0).toFixed(2)}
                </span>
            </div>
        ),
    },
    {
        accessorKey: 'processed_at',
        header: 'Dates',
        size: 160,
        cell: ({ row }) => (
            <div className="min-w-[160px] px-2 py-1">
                <div className="flex flex-col gap-1">
                    <div className="flex flex-col">
                        <span className="text-xs text-gray-500">Processed</span>
                        <span className="text-sm text-gray-700">
                            {row.original.processed_at || row.original.payment_date || 'Not processed'}
                        </span>
                    </div>
                    <div className="flex flex-col">
                        <span className="text-xs text-gray-500">Created</span>
                        <span className="text-sm text-gray-600">{row.original.created_at}</span>
                    </div>
                </div>
            </div>
        ),
    },
];