import Link from "next/link";
import { cn } from "@/lib/utils";
import type { Profile } from "@/types/user";

interface UsageBarProps {
  profile: Profile;
}

export function UsageBar({ profile }: UsageBarProps) {
  const usageCount   = profile.usage_count ?? 0;
  const usageLimit   = profile.usage_limit ?? 50;
  const usagePercent = Math.round((usageCount / usageLimit) * 100);
  const isNearLimit  = usagePercent >= 80;

  const planLabel =
    profile.plan === "pro"        ? "Pro Plan"    :
    profile.plan === "enterprise" ? "Enterprise"  : "Free Plan";

  return (
    <div className="gold-card rounded-2xl p-5">
      <div className="flex items-center justify-between mb-4">
        <div>
          <p className="font-semibold text-sm">Penggunaan Bulan Ini</p>
          <p className="text-xs text-muted-foreground mt-0.5">
            {usageCount} dari {usageLimit} generasi terpakai
          </p>
        </div>
        <div className="flex items-center gap-2">
          <span
            className={cn(
              "text-xs px-2.5 py-1 rounded-full font-medium",
              profile.plan === "pro"        ? "bg-purple-500/20 text-purple-300"  :
              profile.plan === "enterprise" ? "bg-amber-500/20 text-amber-300"   :
                                              "bg-white/[0.08] text-muted-foreground"
            )}
          >
            {planLabel}
          </span>
          <span
            className="text-xs font-bold"
            style={{ color: isNearLimit ? "#f59e0b" : "#10b981" }}
          >
            {usagePercent}%
          </span>
        </div>
      </div>

      {/* Progress bar */}
      <div
        className="h-2.5 rounded-full overflow-hidden"
        style={{ background: "rgba(212,175,55,0.08)", border: "1px solid rgba(212,175,55,0.12)" }}
      >
        <div
          className="h-full rounded-full transition-all duration-700"
          style={{
            width: `${Math.min(usagePercent, 100)}%`,
            background:  isNearLimit
              ? "linear-gradient(90deg, #f59e0b, #ef4444)"
              : "linear-gradient(90deg, #7c3aed, #06b6d4)",
            boxShadow: isNearLimit
              ? "0 0 8px rgba(245,158,11,0.5)"
              : "0 0 8px rgba(124,58,237,0.4)",
          }}
        />
      </div>

      {isNearLimit && (
        <p className="text-xs text-amber-400 mt-2 flex items-center gap-1">
          ⚠️ Kuota hampir habis.{" "}
          <Link href="/settings" className="underline underline-offset-2">
            Upgrade plan
          </Link>
        </p>
      )}
    </div>
  );
}
