import PlanBadge from '@/components/admin/PlanBadge';
import TenantStatusBadge from '@/components/admin/TenantStatusBadge';
import type { TenantRow } from '@/types/admin';
import { Link } from '@inertiajs/react';

export default function RecentTenantsTable({
    recentTenants,
}: {
    recentTenants: TenantRow[];
}) {
    return (
        <div className="pf-glass overflow-hidden lg:col-span-2">
            <div className="border-border flex items-center justify-between border-b px-5 py-4">
                <p className="text-foreground text-sm font-semibold">
                    Recent Tenants
                </p>
                <a
                    href="/admin/tenants"
                    className="text-primary text-xs font-medium underline underline-offset-2 hover:opacity-80"
                >
                    View all
                </a>
            </div>
            <div className="overflow-x-auto">
                <table className="w-full text-sm">
                    <thead>
                        <tr className="border-border border-b">
                            {(
                                [
                                    'Tenant',
                                    'Owner',
                                    'Plan',
                                    'Status',
                                    'MRR',
                                    'Joined',
                                ] as const
                            ).map((h, i) => (
                                <th
                                    key={h}
                                    className={`text-muted-foreground dark:text-muted-foreground/65 py-3 text-[10px] font-semibold tracking-wider uppercase ${i === 0 || i === 5 ? 'px-5' : 'px-4'} ${i >= 4 ? 'text-right' : 'text-left'}`}
                                >
                                    {h}
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody className="divide-border divide-y">
                        {recentTenants.map((t) => (
                            <tr
                                key={t.id}
                                className="hover:bg-muted/30 transition-colors"
                            >
                                <td className="px-5 py-3">
                                    <Link
                                        href={`/admin/tenants/${t.id}`}
                                        className="flex items-center gap-3 hover:opacity-80"
                                    >
                                        <div className="bg-primary/10 text-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-xs font-bold">
                                            {t.name[0]}
                                        </div>
                                        <div>
                                            <p className="text-foreground font-medium">
                                                {t.name}
                                            </p>
                                            <p className="text-muted-foreground dark:text-muted-foreground/60 text-[11px]">
                                                {t.domain ?? 'No domain yet'}
                                            </p>
                                        </div>
                                    </Link>
                                </td>
                                <td className="px-4 py-3">
                                    {t.owner_name ? (
                                        <Link
                                            href={`/admin/clients/${t.owner_id}`}
                                            className="block hover:opacity-80"
                                        >
                                            <p className="text-foreground text-xs font-medium">
                                                {t.owner_name}
                                            </p>
                                            <p className="text-muted-foreground dark:text-muted-foreground/60 text-[11px]">
                                                {t.owner_email}
                                            </p>
                                        </Link>
                                    ) : (
                                        <span className="text-muted-foreground text-xs">
                                            —
                                        </span>
                                    )}
                                </td>
                                <td className="px-4 py-3">
                                    {t.plan ? (
                                        <PlanBadge plan={t.plan} />
                                    ) : (
                                        <span className="text-muted-foreground text-xs">
                                            —
                                        </span>
                                    )}
                                </td>
                                <td className="px-4 py-3">
                                    <TenantStatusBadge status={t.status} />
                                </td>
                                <td className="text-foreground/70 px-4 py-3 text-right font-mono text-xs">
                                    {t.mrr}
                                </td>
                                <td className="text-muted-foreground dark:text-muted-foreground/65 px-5 py-3 text-right text-xs">
                                    {t.joined}
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}