import AdminLayout from '@/Layouts/AdminLayout';
import { DataTable, type TableMeta } from '@/components/admin/DataTable';
import PageHeader from '@/components/admin/PageHeader';
import PlanBadge from '@/components/admin/PlanBadge';
import TenantStatusBadge from '@/components/admin/TenantStatusBadge';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useDataTable, type TableParams } from '@/hooks/useDataTable';
import { api } from '@/lib/api';
import { parseServerDate } from '@/lib/date';
import { Head, Link } from '@inertiajs/react';
import { keepPreviousData, useQuery } from '@tanstack/react-query';
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { Download, Eye, MoreHorizontal, ShieldOff } from 'lucide-react';

// ── Types ─────────────────────────────────────────────────────────────────────

interface Tenant {
    id: string;
    name: string;
    slug: string;
    owner_id: string | null;
    owner_name: string | null;
    owner_email: string | null;
    plan: string;
    status: string;
    member_count: number;
    mrr_raw: number;
    mrr: string;
    joined_at: string;
}

interface TenantsResponse {
    data: Tenant[];
    meta: TableMeta;
    filter_counts: Record<string, number>;
}

// ── API fetch ─────────────────────────────────────────────────────────────────

function fetchTenants(params: TableParams): Promise<TenantsResponse> {
    const sp = new URLSearchParams({ page: String(params.page) });
    if (params.sort) sp.set('sort', params.sort);
    if (params.dir !== 'asc') sp.set('dir', params.dir);
    if (params.filter && params.filter !== 'all')
        sp.set('filter', params.filter);
    if (params.search) sp.set('search', params.search);
    return api.get(`/admin/api/tenants?${sp}`);
}

// ── Plan display map ──────────────────────────────────────────────────────────

const PLAN_DISPLAY: Record<string, string> = {
    starter: 'Starter',
    professional: 'Professional',
    enterprise: 'Enterprise',
};

// ── Row actions ───────────────────────────────────────────────────────────────

function RowActions({ tenant }: { tenant: Tenant }) {
    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <button className="text-muted-foreground hover:bg-muted/60 hover:text-foreground flex h-7 w-7 items-center justify-center rounded-md transition-colors focus:outline-none">
                    <MoreHorizontal className="h-4 w-4" />
                    <span className="sr-only">Actions for {tenant.name}</span>
                </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-44">
                <DropdownMenuItem asChild className="gap-2 text-xs">
                    <Link href={`/admin/tenants/${tenant.id}`}>
                        <Eye className="h-3.5 w-3.5" />
                        View tenant
                    </Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="gap-2 text-xs text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400">
                    <ShieldOff className="h-3.5 w-3.5" />
                    Suspend
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

// ── Column definitions ────────────────────────────────────────────────────────

const columns: ColumnDef<Tenant, unknown>[] = [
    {
        accessorKey: 'name',
        header: 'Tenant',
        meta: { sortable: true, label: 'Tenant' },
        cell: ({ row }) => (
            <Link
                href={`/admin/tenants/${row.original.id}`}
                className="block min-w-0 hover:opacity-80"
            >
                <p className="text-foreground truncate font-medium">
                    {row.original.name}
                </p>
                <p className="text-muted-foreground truncate text-[11px]">
                    {row.original.slug}
                </p>
            </Link>
        ),
    },
    {
        accessorKey: 'owner_name',
        header: 'Owner',
        meta: { sortable: true, sortKey: 'owner', label: 'Owner' },
        cell: ({ row }) =>
            row.original.owner_name ? (
                <Link
                    href={`/admin/clients/${row.original.owner_id}`}
                    className="block min-w-0 hover:opacity-80"
                >
                    <p className="text-foreground truncate text-xs font-medium">
                        {row.original.owner_name}
                    </p>
                    <p className="text-muted-foreground truncate text-[11px]">
                        {row.original.owner_email}
                    </p>
                </Link>
            ) : (
                <span className="text-muted-foreground text-xs">—</span>
            ),
    },
    {
        accessorKey: 'plan',
        header: 'Plan',
        meta: { sortable: true, label: 'Plan' },
        cell: ({ row }) => (
            <PlanBadge
                plan={PLAN_DISPLAY[row.original.plan] ?? row.original.plan}
            />
        ),
    },
    {
        accessorKey: 'status',
        header: 'Status',
        meta: { sortable: true, label: 'Status' },
        cell: ({ row }) => <TenantStatusBadge status={row.original.status} />,
    },
    {
        accessorKey: 'member_count',
        header: 'Members',
        meta: { sortable: true, label: 'Members' },
        cell: ({ row }) => (
            <span className="text-foreground/80 tabular-nums">
                {row.original.member_count.toLocaleString()}
            </span>
        ),
    },
    {
        accessorKey: 'mrr',
        header: 'MRR',
        meta: { sortable: true, sortKey: 'mrr_raw', label: 'MRR' },
        cell: ({ row }) => (
            <span className="text-foreground/90 font-medium tabular-nums">
                {row.original.mrr}
            </span>
        ),
    },
    {
        accessorKey: 'joined_at',
        header: 'Joined',
        meta: { sortable: true, label: 'Joined' },
        cell: ({ row }) => (
            <span className="text-muted-foreground text-xs tabular-nums">
                {format(parseServerDate(row.original.joined_at), 'dd MMM yyyy')}
            </span>
        ),
    },
    {
        id: '_actions',
        header: '',
        cell: ({ row }) => <RowActions tenant={row.original} />,
        enableHiding: false,
    },
];

// ── Empty meta placeholder ────────────────────────────────────────────────────

const EMPTY_META: TableMeta = {
    current_page: 1,
    last_page: 1,
    total: 0,
    per_page: 25,
    from: 0,
    to: 0,
};

// ── Page ──────────────────────────────────────────────────────────────────────

export default function TenantsIndex() {
    const { params, setParams } = useDataTable({
        sort: 'joined_at',
        dir: 'desc',
    });

    const { data, isLoading, isFetching } = useQuery({
        queryKey: ['admin.tenants', params],
        queryFn: () => fetchTenants(params),
        placeholderData: keepPreviousData,
    });

    const counts = data?.filter_counts ?? {};

    const quickFilters = [
        { label: 'All', value: 'all', count: counts.all },
        { label: 'Active', value: 'active', count: counts.active },
        { label: 'Trial', value: 'trial', count: counts.trial },
        { label: 'Suspended', value: 'suspended', count: counts.suspended },
        { label: 'Enterprise', value: 'enterprise', count: counts.enterprise },
    ];

    return (
        <AdminLayout title="All Tenants">
            <Head title="All Tenants" />

            <div className="space-y-6 p-6 lg:p-8">
                <PageHeader
                    title="All Tenants"
                    description="Browse, filter, and manage every organization on the platform"
                />

                <DataTable
                    columns={columns}
                    data={data?.data ?? []}
                    meta={data?.meta ?? EMPTY_META}
                    params={params}
                    isLoading={isLoading}
                    isFetching={isFetching}
                    onParamsChange={setParams}
                    quickFilters={quickFilters}
                    bulkActions={[
                        {
                            label: 'Export CSV',
                            icon: Download,
                            onClick: (rows) => {
                                const csv = [
                                    'Name,Plan,Status,Members,MRR,Joined',
                                ]
                                    .concat(
                                        rows.map(
                                            (r) =>
                                                `${r.name},${r.plan},${r.status},${r.member_count},${r.mrr},${r.joined_at}`,
                                        ),
                                    )
                                    .join('\n');
                                const a = document.createElement('a');
                                a.href =
                                    'data:text/csv,' + encodeURIComponent(csv);
                                a.download = 'tenants.csv';
                                a.click();
                            },
                        },
                        {
                            label: 'Suspend',
                            icon: ShieldOff,
                            onClick: (rows) =>
                                alert(
                                    `Would suspend: ${rows.map((r) => r.name).join(', ')}`,
                                ),
                            variant: 'destructive',
                        },
                    ]}
                    searchPlaceholder="Search tenants…"
                    noun="tenants"
                    getRowId={(row) => String(row.id)}
                />
            </div>
        </AdminLayout>
    );
}