"use client";

import Link from "next/link";
import { Lock } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PLANS } from "@/config/plans";
import { useLanguage } from "@/lib/i18n/context";
import type { PlanCode } from "@prisma/client";

/**
 * Reusable "you need a higher plan" card. Client-side gating is UX only —
 * every feature this protects must also enforce the same check
 * server-side (see PlanGate / canUseFeature in src/lib/stripe/access.ts).
 */
export function UpgradePrompt({
  requiredPlan,
  currentPlan,
  featureLabel,
}: {
  requiredPlan: PlanCode;
  currentPlan: PlanCode;
  featureLabel: string;
}) {
  const { t } = useLanguage();
  const b = t.billing;
  const requiredPlanName = t.plans[PLANS[requiredPlan].translationKey].name;
  const currentPlanName = t.plans[PLANS[currentPlan].translationKey].name;

  return (
    <Card className="border-brand-cyan/30">
      <CardHeader>
        <div className="flex items-center gap-2">
          <span className="flex size-8 items-center justify-center rounded-lg bg-secondary text-primary">
            <Lock className="size-4" />
          </span>
          <CardTitle>
            {b.upgradeDialog.titleTemplate
              .replace("{plan}", requiredPlanName)
              .replace("{feature}", featureLabel)}
          </CardTitle>
        </div>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex gap-6 text-sm">
          <p>
            <span className="text-muted-foreground">{b.upgradeDialog.currentPlanLabel}: </span>
            <span className="text-foreground">{currentPlanName}</span>
          </p>
          <p>
            <span className="text-muted-foreground">{b.upgradeDialog.requiredPlanLabel}: </span>
            <span className="text-foreground">{requiredPlanName}</span>
          </p>
        </div>
        <Button asChild size="sm" className="w-fit">
          <Link href="/dashboard/billing">{b.upgradeDialog.upgradeCta}</Link>
        </Button>
      </CardContent>
    </Card>
  );
}