import { LockKeyhole, Sparkles } from "lucide-react";
import type { ReactNode } from "react";
import { Link } from "@inertiajs/react";
import { pricing } from "@/routes/subscription";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { hasSubscriptionFeature } from "@/lib/subscription-access";
import { useI18n } from "@/lib/i18n";

export type TradingSubscription = {
    slug: string;
    name: string;
    features: string[];
    active: boolean;
    ends_at?: string | null;
    trial_expired?: boolean;
};

interface SubscriptionGateProps {
    subscription: TradingSubscription | null | undefined;
    feature: string;
    children: ReactNode;
    lockedLabel?: string;
    compact?: boolean;
}

export default function SubscriptionGate({
    subscription,
    feature,
    children,
    lockedLabel = "Upgrade required",
    compact = false,
}: SubscriptionGateProps) {
    const { t } = useI18n();
    const entitled = hasSubscriptionFeature(subscription, feature);

    if (entitled) return <>{children}</>;

    return (
        <div
            className={`rounded-xl border border-dashed border-border bg-muted/20 ${compact ? "p-3" : "p-4"}`}
            role="status"
        >
            <div className="flex items-start gap-3">
                <div className="mt-0.5 rounded-lg border border-border bg-background p-2 text-muted-foreground">
                    <LockKeyhole className="h-4 w-4" aria-hidden="true" />
                </div>
                <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                        <p className="text-xs font-semibold text-foreground">
                            {lockedLabel}
                        </p>
                        <Badge
                            variant="outline"
                            className="text-[9px] uppercase"
                        >
                            {subscription?.name ?? t("No active plan")}
                        </Badge>
                    </div>
                    <p className="mt-1 text-[11px] leading-relaxed text-muted-foreground">
                        {subscription?.trial_expired || !subscription?.active
                            ? t("Your access is inactive. Upgrade to continue using this analysis feature.")
                            : t("This feature is not included in your current :plan plan.", "This feature is not included in your current :plan plan.", { plan: subscription.name })}
                    </p>
                    <div className="mt-3">
                        <Button
                            asChild
                            size="sm"
                            className="h-8 gap-1.5 text-xs"
                        >
                            <Link href={pricing.url()}>
                                <Sparkles
                                    className="h-3.5 w-3.5"
                                    aria-hidden="true"
                                />
                                {t("View plans")}
                            </Link>
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}