"use client";

import { useSession } from "next-auth/react";
import { useEffect } from "react";
import { useCreditsStore } from "@/lib/stores/credits-store";

interface LoyaltyTier {
  name: string;
  minCredits: number;
  color: string;
  bgColor: string;
  icon: string;
}

const TIERS: LoyaltyTier[] = [
  { name: "Platinum", minCredits: 5000, color: "text-purple-300", bgColor: "bg-purple-500/15 border-purple-500/40", icon: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" },
  { name: "Gold", minCredits: 1000, color: "text-gold", bgColor: "bg-gold/15 border-gold/40", icon: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" },
  { name: "Silver", minCredits: 500, color: "text-gray-300", bgColor: "bg-gray-500/15 border-gray-500/40", icon: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" },
  { name: "Bronze", minCredits: 100, color: "text-orange-400", bgColor: "bg-orange-500/15 border-orange-500/40", icon: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" },
];

function getTier(totalSpent: number): LoyaltyTier | null {
  for (const tier of TIERS) {
    if (totalSpent >= tier.minCredits) return tier;
  }
  return null;
}

export function LoyaltyBadge() {
  const { data: session } = useSession();
  const totalSpent = useCreditsStore((s) => s.totalSpent);
  const startPolling = useCreditsStore((s) => s.startPolling);

  useEffect(() => {
    if (!session?.user) return;
    startPolling();
  }, [session, startPolling]);

  if (!session?.user || totalSpent === null) return null;

  const tier = getTier(totalSpent);
  if (!tier) return null;

  return (
    <div
      className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold border ${tier.bgColor} ${tier.color}`}
      title={`${tier.name} Member - ${totalSpent.toLocaleString()} credits spent`}
    >
      <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
        <path d={tier.icon} />
      </svg>
      {tier.name}
    </div>
  );
}

export function LoyaltyBadgeLarge() {
  const { data: session } = useSession();
  const totalSpent = useCreditsStore((s) => s.totalSpent);
  const startPolling = useCreditsStore((s) => s.startPolling);

  useEffect(() => {
    if (!session?.user) return;
    startPolling();
  }, [session, startPolling]);

  if (!session?.user || totalSpent === null) return null;

  const tier = getTier(totalSpent);
  if (!tier) {
    const nextTier = TIERS[TIERS.length - 1];
    return (
      <div className="bg-surface rounded-lg border border-white/10 p-4">
        <p className="text-sm text-text-muted">
          Spend {nextTier.minCredits} credits to unlock <span className="text-gold font-semibold">{nextTier.name}</span> status
        </p>
        <div className="mt-2 h-2 bg-surface-light rounded-full overflow-hidden">
          <div
            className="h-full bg-gold/50 rounded-full transition-all duration-500"
            style={{ width: `${Math.min(100, (totalSpent / nextTier.minCredits) * 100)}%` }}
          />
        </div>
      </div>
    );
  }

  // Find next tier
  const currentTierIdx = TIERS.indexOf(tier);
  const nextTier = currentTierIdx > 0 ? TIERS[currentTierIdx - 1] : null;

  return (
    <div className={`rounded-lg border p-4 ${tier.bgColor}`}>
      <div className="flex items-center gap-3">
        <svg className={`w-8 h-8 ${tier.color}`} fill="currentColor" viewBox="0 0 24 24">
          <path d={tier.icon} />
        </svg>
        <div>
          <p className={`font-bold ${tier.color}`}>{tier.name} Member</p>
          <p className="text-text-muted text-sm">{totalSpent.toLocaleString()} credits spent</p>
        </div>
      </div>
      {nextTier && (
        <div className="mt-3">
          <p className="text-xs text-text-muted mb-1">
            {nextTier.minCredits - totalSpent} more credits to {nextTier.name}
          </p>
          <div className="h-1.5 bg-black/20 rounded-full overflow-hidden">
            <div
              className={`h-full rounded-full transition-all duration-500 ${tier.color.replace("text-", "bg-")}`}
              style={{
                width: `${Math.min(100, ((totalSpent - tier.minCredits) / (nextTier.minCredits - tier.minCredits)) * 100)}%`,
              }}
            />
          </div>
        </div>
      )}
    </div>
  );
}