import StatCard from '@/components/admin/StatCard';
import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import {
    Activity,
    AlertTriangle,
    CreditCard,
    HeartPulse,
    Hourglass,
} from 'lucide-react';
import { ChartCard, Section } from './shared';
import type { AtRiskTenant, HealthMetrics } from './types';

const STATUS_PILL: Record<string, string> = {
    active: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400',
    past_due: 'bg-red-500/15 text-red-700 dark:text-red-400',
    trialing: 'bg-amber-500/15 text-amber-700 dark:text-amber-400',
};

function AtRiskTable({ tenants }: { tenants: AtRiskTenant[] }) {
    if (tenants.length === 0) {
        return (
            <p className="text-muted-foreground py-8 text-center text-xs">
                No at-risk tenants — everyone looks healthy
            </p>
        );
    }

    return (
        <div className="overflow-x-auto">
            <table className="w-full text-xs">
                <thead>
                    <tr className="text-muted-foreground border-border border-b text-left">
                        <th className="px-2 py-2 font-medium">Tenant</th>
                        <th className="px-2 py-2 font-medium">Plan</th>
                        <th className="px-2 py-2 font-medium">Status</th>
                        <th className="px-2 py-2 text-right font-medium">
                            MRR
                        </th>
                        <th className="px-2 py-2 font-medium">Risk signals</th>
                    </tr>
                </thead>
                <tbody>
                    {tenants.map((t) => (
                        <tr
                            key={t.tenant_id}
                            className="border-border/50 border-b last:border-0"
                        >
                            <td className="px-2 py-2">
                                <Link
                                    href={route(
                                        'admin.tenants.show',
                                        t.tenant_id,
                                    )}
                                    className="text-foreground hover:text-primary font-medium"
                                >
                                    {t.name}
                                </Link>
                            </td>
                            <td className="text-muted-foreground px-2 py-2">
                                {t.plan}
                            </td>
                            <td className="px-2 py-2">
                                <span
                                    className={cn(
                                        'rounded-full px-2 py-0.5 text-[11px] font-medium capitalize',
                                        STATUS_PILL[t.status] ??
                                            'bg-muted text-muted-foreground',
                                    )}
                                >
                                    {t.status.replace('_', ' ')}
                                </span>
                            </td>
                            <td className="text-foreground px-2 py-2 text-right tabular-nums">
                                {t.mrr_display}
                            </td>
                            <td className="px-2 py-2">
                                <div className="flex flex-wrap gap-1">
                                    {t.signals.map((s) => (
                                        <span
                                            key={s}
                                            className="rounded-full bg-red-500/10 px-1.5 py-0.5 text-[11px] text-red-700 dark:text-red-400"
                                        >
                                            {s}
                                        </span>
                                    ))}
                                </div>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

export default function HealthSection({ health }: { health: HealthMetrics }) {
    return (
        <Section title="Tenant Health" icon={HeartPulse}>
            <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
                <StatCard
                    label="At-Risk Tenants"
                    value={health.summary.at_risk_count.toLocaleString()}
                    sub="Score ≥ 2 on risk signals"
                    icon={AlertTriangle}
                    iconColor="bg-red-400/25 text-red-600 dark:bg-red-400/15 dark:text-red-400"
                />
                <StatCard
                    label="MRR at Risk"
                    value={health.summary.mrr_at_risk}
                    sub="From at-risk paying tenants"
                    icon={CreditCard}
                    iconColor="bg-amber-400/25 text-amber-600 dark:bg-amber-400/15 dark:text-amber-400"
                />
                <StatCard
                    label="Trials Ending (7d)"
                    value={health.summary.trials_ending.toLocaleString()}
                    sub="Reach out before they lapse"
                    icon={Hourglass}
                    iconColor="bg-sky-400/25 text-sky-600 dark:bg-sky-400/15 dark:text-sky-400"
                />
                <StatCard
                    label="Past Due"
                    value={health.summary.past_due_count.toLocaleString()}
                    sub="Payment trouble"
                    icon={Activity}
                    iconColor="bg-violet-400/25 text-violet-600 dark:bg-violet-400/15 dark:text-violet-400"
                />
            </div>

            <ChartCard
                title="At-Risk Tenants"
                sub="Highest risk first — payment trouble, support strain, usage decline, lapsing trials"
            >
                <AtRiskTable tenants={health.at_risk} />
            </ChartCard>
        </Section>
    );
}