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,
    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, isPast } from 'date-fns';
import { Download, Eye, MoreHorizontal } from 'lucide-react';

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

interface Tenant {
    id: string;
    name: string;
    slug: string;
    plan: string;
    status: string;
    member_count: number;
    joined_at: string;
    trial_ends_at: string | null;
}

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),
        filter: 'trial',
    });
    if (params.sort) sp.set('sort', params.sort);
    if (params.dir !== 'asc') sp.set('dir', params.dir);
    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>
            </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: '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: 'trial_ends_at',
        header: 'Trial ends',
        meta: { sortable: true, label: 'Trial ends' },
        cell: ({ row }) => {
            const date = row.original.trial_ends_at;
            if (!date) {
                return <span className="text-muted-foreground text-xs">—</span>;
            }
            const expired = isPast(parseServerDate(date));
            return (
                <span
                    className={
                        expired
                            ? 'text-xs font-medium text-red-600 tabular-nums dark:text-red-400'
                            : 'text-muted-foreground text-xs tabular-nums'
                    }
                >
                    {format(parseServerDate(date), 'dd MMM yyyy')}
                    {expired && ' (expired)'}
                </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 TenantsPending() {
    const { params, setParams } = useDataTable({
        sort: 'trial_ends_at',
        dir: 'asc',
    });

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

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

            <div className="space-y-6 p-6 lg:p-8">
                <PageHeader
                    title="Pending Tenants"
                    description="Organizations on free trial — sorted by trial expiry"
                />

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