import type { WorkspacesProp } from '@/Components/WorkspaceSwitcher';
import type { SharedProps } from '@/types/inertia';
import { useUpgradeModal } from '@/upgrade/useUpgradeModal';
import { Link, usePage } from '@inertiajs/react';
import { AlertTriangle } from 'lucide-react';

/**
 * Owner-downgrade banner (Team Workspaces P5). When the active workspace's
 * plan can no longer cover its edit-capable members — an owner downgraded
 * below the team's owner+admins+editors count — the seat usage exceeds the
 * plan cap. We NEVER auto-kick anyone (locked decision); instead the owner
 * (or admin) gets a banner prompting upgrade-or-remove.
 *
 * Reads `workspaces.active.seat_over_limit` + `seat` off the shared prop
 * directly each render (Δ10 — no local state). Renders nothing when:
 *   - the prop is absent (self-hosted — no seats),
 *   - the workspace isn't over limit,
 *   - the viewer isn't the owner or an admin (the people who can act on it).
 *
 * Mounted on /projects and /workspace/members.
 */
export default function SeatOverLimitBanner() {
    const { workspaces } = usePage<
        SharedProps & { workspaces: WorkspacesProp }
    >().props;
    const openUpgrade = useUpgradeModal((s) => s.openModal);

    const active = workspaces?.active;
    if (!active || !active.seat_over_limit) return null;

    // Owner-or-admin only — they're the ones who can upgrade or remove members.
    if (active.role !== 'owner' && active.role !== 'admin') return null;

    const used = active.seat?.used;
    const limit = active.seat?.limit;

    return (
        <div
            role="alert"
            data-testid="workspace-seat-over-limit-banner"
            className="mt-6 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-warning/30 bg-warning/10 px-4 py-3 text-sm text-foreground"
        >
            <span className="flex items-start gap-2">
                <AlertTriangle
                    className="mt-0.5 h-4 w-4 shrink-0 text-warning"
                    strokeWidth={2}
                    aria-hidden
                />
                <span>
                    {typeof limit === 'number' && typeof used === 'number'
                        ? `Your plan covers ${limit} seat${limit === 1 ? '' : 's'} but “${active.name}” has ${used} — upgrade or remove members. No one is removed automatically.`
                        : `Your plan no longer covers the editors in “${active.name}” — upgrade or remove members. No one is removed automatically.`}
                </span>
            </span>
            <div className="flex shrink-0 items-center gap-3">
                <Link
                    href="/workspace/members"
                    className="text-sm font-medium underline-offset-4 hover:underline"
                    data-testid="workspace-seat-over-limit-members"
                >
                    Manage members
                </Link>
                <button
                    type="button"
                    onClick={() => openUpgrade('seats')}
                    className="text-sm font-medium text-accent underline-offset-4 hover:underline"
                    data-testid="workspace-seat-over-limit-upgrade"
                >
                    Upgrade plan →
                </button>
            </div>
        </div>
    );
}
