import { TenantCard } from '@/types';
import { Link } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { Building2, ExternalLink, Globe } from 'lucide-react';
import PlanBadge from './PlanBadge';
import StatusBadge from './StatusBadge';

const ORG_TYPE_LABELS: Record<string, string> = {
    sacco: 'SACCO',
    microfinance: 'Microfinance',
    bank: 'Bank',
    insurance: 'Insurance',
    other: 'Organisation',
};

export const columns: ColumnDef<TenantCard, unknown>[] = [
    {
        id: 'name',
        accessorKey: 'name',
        meta: { label: 'Organisation', sortable: true, sortKey: 'name' },
        header: 'Organisation',
        cell: ({ row }) => {
            const t = row.original;
            const orgLabel = t.orgType
                ? (ORG_TYPE_LABELS[t.orgType] ?? t.orgType)
                : null;
            return (
                <div className="flex items-center gap-3">
                    <div className="bg-primary/10 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg">
                        <Building2 className="text-primary h-4 w-4" />
                    </div>
                    <div>
                        <p className="text-foreground font-semibold">
                            {t.name}
                        </p>
                        <p className="text-muted-foreground dark:text-muted-foreground/60 text-xs">
                            {[orgLabel, t.country].filter(Boolean).join(' · ')}
                        </p>
                    </div>
                </div>
            );
        },
    },
    {
        id: 'domain',
        accessorKey: 'domain',
        meta: { label: 'Domain' },
        header: 'Domain',
        cell: ({ row }) => {
            const t = row.original;
            if (!t.domain)
                return (
                    <span className="text-muted-foreground dark:text-muted-foreground/50 text-xs">
                        Not set
                    </span>
                );
            return (
                <div className="flex items-center gap-1.5">
                    <Globe className="text-muted-foreground dark:text-muted-foreground/40 h-3.5 w-3.5 shrink-0" />
                    <span className="text-foreground font-mono text-xs">
                        {t.domain}
                    </span>
                </div>
            );
        },
    },
    {
        id: 'plan',
        accessorKey: 'plan',
        meta: { label: 'Plan' },
        header: 'Plan',
        cell: ({ row }) => (
            <PlanBadge
                plan={row.original.plan}
                planStatus={row.original.planStatus}
                trialEndsAt={row.original.trialEndsAt}
            />
        ),
    },
    {
        id: 'status',
        accessorKey: 'setupComplete',
        meta: { label: 'Status' },
        header: 'Status',
        cell: ({ row }) => (
            <div className="flex items-center gap-1.5">
                <StatusBadge setupComplete={row.original.setupComplete} />
                {!row.original.isOwner && (
                    <span className="rounded-full border border-indigo-200 bg-indigo-50 px-2 py-0.5 text-[10px] font-semibold text-indigo-700 dark:border-indigo-700/30 dark:bg-indigo-900/20 dark:text-indigo-400">
                        Member
                    </span>
                )}
            </div>
        ),
    },
    {
        id: '_actions',
        header: '',
        cell: ({ row }) => {
            const t = row.original;
            return (
                <div className="flex items-center justify-end gap-2">
                    {!t.setupComplete && t.nextStep && (
                        <Link
                            href={t.nextStep}
                            className="text-primary text-xs font-medium whitespace-nowrap hover:underline"
                        >
                            Continue setup →
                        </Link>
                    )}
                    {!t.setupComplete && !t.nextStep && (
                        <span className="text-muted-foreground text-xs whitespace-nowrap">
                            Owner setup pending
                        </span>
                    )}
                    {t.setupComplete && t.portalUrl && (
                        <a
                            href={t.portalUrl}
                            target="_blank"
                            rel="noreferrer"
                            className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-xs whitespace-nowrap transition-colors"
                        >
                            <ExternalLink className="h-3.5 w-3.5" />
                            Portal
                        </a>
                    )}
                    <Link
                        href={route('app.show', { tenant: t.id })}
                        className="border-border bg-secondary/40 text-foreground hover:bg-secondary rounded-lg border px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors"
                    >
                        Manage
                    </Link>
                </div>
            );
        },
    },
];