import Link from "next/link";
import { AlertTriangle, Crown } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  RESOURCE_LABELS,
  type PlanResource,
  type PlanUsage,
} from "@/lib/appwrite/plan-limits";

const SOFT_THRESHOLD = 0.8;

export function UsageBanner({
  usage,
  resource,
}: {
  usage: PlanUsage;
  resource: PlanResource;
}) {
  if (usage.plan === "pro") return null;

  const u = usage.usage[resource];
  if (u.limit === Number.POSITIVE_INFINITY) return null;

  const ratio = u.used / u.limit;
  if (ratio < SOFT_THRESHOLD) return null;

  const label = RESOURCE_LABELS[resource];
  const reached = u.reached;

  return (
    <Card
      className={
        reached
          ? "border-destructive/40 bg-destructive/5"
          : "border-amber-500/40 bg-amber-500/5"
      }
    >
      <CardContent className="flex flex-col gap-3 py-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-start gap-2 text-sm">
          <AlertTriangle
            className={`size-4 mt-0.5 shrink-0 ${
              reached ? "text-destructive" : "text-amber-600"
            }`}
          />
          <div>
            <span className="font-medium">
              {reached ? "Sınıra ulaşıldı" : "Sınıra yaklaşıyorsun"}:
            </span>{" "}
            <span className="text-muted-foreground">
              {u.used} / {u.limit} {label}.
            </span>
            {reached && (
              <span className="text-muted-foreground"> Yeni {label} eklemek için Pro'ya geç.</span>
            )}
          </div>
        </div>
        <Button asChild size="sm" variant={reached ? "default" : "outline"}>
          <Link href="/settings/billing">
            <Crown className="size-3.5" />
            Pro'ya geç
          </Link>
        </Button>
      </CardContent>
    </Card>
  );
}
