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 { Edit, Eye, ExternalLink, RotateCcw, Trash2 } from 'lucide-react';

export interface PackageSubscription {
    package: {
        name: string;
        slug: string;
    };
    subscription_type: string;
    status: string;
    user_count: number;
    subscription_info?: {
        name?: string;
        started_at?: string;
        expires_at?: string;
    };
    features?: Array<{
        id: number;
        name: string;
        app?: string;
        module?: string;
    }>;
}

export interface Domain {
    domain: string;
    admin_domain?: string;
    is_primary: boolean;
}

export interface Tenant {
    id: number;
    uid: string;
    name: string;
    slug: string;
    email: string;
    company_name: string;
    database_name?: string;
    tenant_admin_info?: {
        name?: string;
        email?: string;
        phone?: string;
    };
    status: number;
    status_info: {
        value: number;
        name: string;
    };
    subscription?: PackageSubscription;
    domains?: Domain[];
    primary_domain?: string;
    primary_admin_domain?: string;
    last_login?: string;
    modules_count?: number;
    features_count?: number;
    created_at: string;
    deleted_at?: string | null;
}

const getStatusColor = (statusValue: number): string => {
    switch (statusValue) {
        case 1:
            return 'bg-green-100 text-green-800 border-green-300';
        case 0:
            return 'bg-gray-100 text-gray-800 border-gray-300';
        case 2:
            return 'bg-yellow-100 text-yellow-800 border-yellow-300';
        case 3:
            return 'bg-red-100 text-red-800 border-red-300';
        default:
            return 'bg-gray-100 text-gray-800 border-gray-300';
    }
};

const getExpiryColor = (expiresAt: string | null): string => {
    if (!expiresAt) return 'text-gray-600';
    const daysUntilExpiry = Math.floor((new Date(expiresAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
    if (daysUntilExpiry < 0) return 'text-red-600 font-semibold';
    if (daysUntilExpiry < 30) return 'text-orange-600 font-medium';
    return 'text-green-600';
};

interface TenantTableColumnsProps {
    handleViewTenant?: (tenant: Tenant) => void;
    handleEditTenant?: (tenant: Tenant) => void;
    handleDeleteTenant?: (tenant: Tenant) => void;
    handleRestoreTenant?: (tenant: Tenant) => void;
}

export const tenantTableColumns = ({ handleViewTenant, handleEditTenant, handleDeleteTenant, handleRestoreTenant }: TenantTableColumnsProps = {}): ColumnDef<Tenant>[] => [
    {
        accessorKey: 'tenant',
        header: 'Tenant',
        cell: ({ row }) => {
            const tenant = row.original;
            const sub = tenant.subscription;

            return (
                <div className="flex min-w-[220px] flex-col gap-1">

                    {/* Tenant Name */}
                    <span className="text-sm font-semibold text-gray-900">
                    {tenant.name}
                </span>

                    {/* Email */}
                    <span className="text-sm text-gray-600 truncate">
                    {tenant.email}
                </span>

                    {/* Package + Company section */}
                    <div className="flex flex-col gap-1 mt-1">
                        {/* Company */}
                        {tenant.company_name && (
                            <div className="flex items-center gap-2">
                                <span className="text-xs uppercase text-gray-500">Company:</span>
                                <span className="rounded-md bg-emerald-100 border border-emerald-200 px-2 py-0.5 text-sm text-emerald-800">
                                {tenant.company_name}
                            </span>
                            </div>
                        )}

                        {/* Package */}
                        {sub?.package?.name && (
                            <div className="flex items-center gap-2">
                                <span className="text-xs uppercase text-gray-500">Package:</span>
                                <span className="rounded-md bg-blue-100 border border-blue-200 px-2 py-0.5 text-sm text-blue-800">
                                {sub.package.name}
                            </span>
                            </div>
                        )}

                    </div>
                </div>
            );
        },
    },
    // Domain & DB column
    {
        accessorKey: 'domain_db',
        header: 'Domain & DB',
        cell: ({ row }) => {
            const tenant = row.original;
            const primaryDomainObj = tenant.domains?.find((d) => d.is_primary);
            const websiteDomain = tenant.primary_domain || primaryDomainObj?.domain;
            const adminDomain = tenant.primary_admin_domain || primaryDomainObj?.admin_domain;
            const dbName = tenant.database_name || tenant.slug;
            return (
                <div className="flex min-w-[220px] flex-col gap-1.5">
                    {/* Admin domain */}
                    <div className="flex items-center gap-1.5">
                        <span className="w-14 shrink-0 text-xs uppercase text-gray-500">Admin:</span>
                        {adminDomain ? (
                            <a
                                href={`http://${adminDomain}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="flex items-center gap-1 font-mono text-xs text-indigo-600 hover:underline"
                            >
                                {adminDomain} <ExternalLink className="h-3 w-3" />
                            </a>
                        ) : (
                            <span className="text-xs text-gray-400">—</span>
                        )}
                    </div>
                    {/* Website domain */}
                    <div className="flex items-center gap-1.5">
                        <span className="w-14 shrink-0 text-xs uppercase text-gray-500">Website:</span>
                        {websiteDomain ? (
                            <a
                                href={`http://${websiteDomain}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="flex items-center gap-1 font-mono text-xs text-blue-600 hover:underline"
                            >
                                {websiteDomain} <ExternalLink className="h-3 w-3" />
                            </a>
                        ) : (
                            <span className="text-xs text-gray-400">—</span>
                        )}
                    </div>
                    {/* Database */}
                    <div className="flex items-center gap-1.5">
                        <span className="w-14 shrink-0 text-xs uppercase text-gray-500">DB:</span>
                        <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-700">{dbName}</code>
                    </div>
                </div>
            );
        },
    },
    // Admin Info column
    {
        accessorKey: 'admin_info',
        header: 'Admin Info',
        cell: ({ row }) => {
            const adminInfo = row.original.tenant_admin_info;
            if (!adminInfo) {
                return <span className="text-xs text-gray-400">N/A</span>;
            }
            return (
                <div className="flex min-w-[180px] flex-col gap-1 text-xs">
                    {adminInfo.name && (
                        <div className="flex items-center gap-1.5">
                            <span className="font-medium text-gray-900">{adminInfo.name}</span>
                        </div>
                    )}
                    {adminInfo.email && (
                        <div className="flex items-center gap-1.5 text-gray-600">
                            <span>{adminInfo.email}</span>
                        </div>
                    )}
                    {adminInfo.phone && (
                        <div className="flex items-center gap-1.5 text-gray-500">
                            <span>{adminInfo.phone}</span>
                        </div>
                    )}
                </div>
            );
        },
    },
    // Status
    {
        accessorKey: 'status',
        header: 'Status',
        cell: ({ row }) => {
            const status = row.original.status_info;
            const statusColors: Record<string, string> = {
                INACTIVE: 'bg-gray-100 text-gray-800 border-gray-300',
                PENDING: 'bg-yellow-100 text-yellow-800 border-yellow-300',
                CREATION_INITIALIZED: 'bg-yellow-100 text-yellow-800 border-yellow-300',
                CREATED: 'bg-blue-100 text-blue-800 border-blue-300',
                FAILED: 'bg-red-100 text-red-800 border-red-300',
                ACTIVE: 'bg-green-100 text-green-800 border-green-300',
                TERMINATED: 'bg-red-100 text-red-800 border-red-300',
                FREEZED: 'bg-orange-100 text-orange-800 border-orange-300',
            };
            const color = statusColors[status.name.toUpperCase()] || 'bg-gray-100 text-gray-800 border-gray-300';
            return <Badge className={cn('border px-2 py-1 text-sm', color)}>{status.name}</Badge>;
        },
    },
    {
        accessorKey: 'subscription_info',
        header: 'Subscription',
        cell: ({ row }) => {
            const sub = row.original.subscription?.subscription_info;

            if (!sub) {
                return (
                    <div className="flex min-w-[200px] flex-col gap-1 px-1 py-0.5 text-sm text-gray-400">
                        No subscription
                    </div>
                );
            }

            const startedAt = sub.started_at ? new Date(sub.started_at) : null;
            const expiresAt = sub.expires_at ? new Date(sub.expires_at) : null;

            let daysLeft = null;
            if (expiresAt) {
                daysLeft = Math.floor((expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
            }

            const expiryColor = !expiresAt
                ? 'text-gray-500'
                : daysLeft !== null && daysLeft < 0
                    ? 'text-red-600'
                    : daysLeft !== null && daysLeft < 7
                        ? 'text-orange-600'
                        : 'text-green-600';

            return (
                <div className="flex min-w-[200px] flex-col gap-1 px-1 py-0.5 text-sm leading-relaxed">

                    {/* Expiry */}
                    <div className="flex items-center gap-2">
                        <span className="font-medium text-gray-700 w-16">Expires:</span>
                        <span className={expiryColor}>
                        {expiresAt
                            ? expiresAt.toLocaleDateString('en-US', {
                                year: 'numeric',
                                month: 'short',
                                day: 'numeric',
                            })
                            : 'Never'}
                    </span>
                    </div>

                    {/* Started */}
                    <div className="flex items-center gap-2">
                        <span className="text-gray-500 w-16">Active:</span>
                        <span className="text-gray-700">
                        {startedAt
                            ? startedAt.toLocaleDateString('en-US', {
                                year: 'numeric',
                                month: 'short',
                                day: 'numeric',
                            })
                            : 'N/A'}
                    </span>
                    </div>

                    {/* Days Left */}
                    {expiresAt && daysLeft !== null && (
                        <div className="mt-0.5 text-[11px] text-gray-500">
                            {daysLeft < 0 ? (
                                <span className="text-red-600 font-medium">Expired</span>
                            ) : (
                                `${daysLeft} days left`
                            )}
                        </div>
                    )}
                </div>
            );
        },
    },


    // Access (Apps / Modules / Features)
    {
        accessorKey: 'access',
        header: 'Access',
        cell: ({ row }) => {
            const features = row.original.subscription?.features || [];
            const apps = Array.from(new Set(features.map((f) => f.app).filter(Boolean)));
            const modulesCount = row.original.modules_count || 0;
            const featuresCount = row.original.features_count || 0;

            return (
                <div className="flex min-w-[180px] flex-col gap-1.5 px-1 py-0.5">

                    {/* Apps section */}
                    <div className="flex flex-wrap gap-1">
                        {apps.slice(0, 3).map((app) => (
                            <span
                                key={app}
                                className="rounded-md bg-gray-100 border border-gray-300 px-2 py-0.5 text-[10px] text-gray-700"
                            >
                            {app}
                        </span>
                        ))}

                        {apps.length > 3 && (
                            <span className="text-[11px] text-gray-500">
                            +{apps.length - 3}
                        </span>
                        )}
                    </div>

                    {/* Modules + Features section */}
                    <div className="flex items-center gap-2 mt-1">

                    <span className="rounded-md bg-blue-100 border border-blue-200 px-2 py-0.5 text-[11px] text-blue-800">
                        {modulesCount} Modules
                    </span>

                        <span className="rounded-md bg-purple-100 border border-purple-200 px-2 py-0.5 text-[11px] text-purple-800">
                        {featuresCount} Features
                    </span>
                    </div>
                </div>
            );
        },
    },
    {
        id: 'actions',
        header: 'Actions',
        cell: ({ row }) => {
            const tenant = row.original;
            const isDeleted = !!tenant.deleted_at;

            return (
                <div className="flex items-center gap-2">
                    {!isDeleted && handleViewTenant && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="size-8 border border-blue-200 text-blue-500 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700"
                            onClick={() => handleViewTenant(tenant)}
                            title="View Details"
                        >
                            <Eye className="size-4" />
                        </Button>
                    )}
                    {!isDeleted && handleEditTenant && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="size-8 border border-amber-200 text-amber-500 hover:border-amber-400 hover:bg-amber-50 hover:text-amber-700"
                            onClick={() => handleEditTenant(tenant)}
                            title="Edit Tenant"
                        >
                            <Edit className="size-4" />
                        </Button>
                    )}
                    {!isDeleted && handleDeleteTenant && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="size-8 border border-red-200 text-red-400 hover:border-red-400 hover:bg-red-50 hover:text-red-600"
                            onClick={() => handleDeleteTenant(tenant)}
                            title="Delete Tenant"
                        >
                            <Trash2 className="size-4" />
                        </Button>
                    )}
                    {isDeleted && handleRestoreTenant && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="size-8 border border-green-200 text-green-500 hover:border-green-400 hover:bg-green-50 hover:text-green-700"
                            onClick={() => handleRestoreTenant(tenant)}
                            title="Restore Tenant"
                        >
                            <RotateCcw className="size-4" />
                        </Button>
                    )}
                </div>
            );
        },
    },
];