"use client";

import { X, Sparkles, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FREE_TIER_LIMITS, type FeatureKey } from "@/lib/usage";

interface UpgradeModalProps {
  isOpen: boolean;
  onClose: () => void;
  feature: FeatureKey;
  currentUsage: number;
}

const FEATURE_LABELS: Record<FeatureKey, string> = {
  users: "Team Members",
  employees: "Active Employees",
  invoices: "Monthly Invoices",
  payroll_runs: "Monthly Payroll Runs",
  expenses: "Monthly Expenses",
  storage_mb: "Document Storage (MB)",
  ai_queries: "Monthly AI Queries",
};

export function UpgradeModal({ isOpen, onClose, feature, currentUsage }: UpgradeModalProps) {
  if (!isOpen) return null;

  const limit = FREE_TIER_LIMITS[feature];
  const label = FEATURE_LABELS[feature] || feature;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onClick={onClose} />
      
      {/* Modal */}
      <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200">
        <div className="absolute top-4 right-4">
          <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-full transition-colors">
            <X className="w-5 h-5 text-gray-400" />
          </button>
        </div>

        <div className="p-8">
          <div className="w-14 h-14 bg-teal-100 rounded-2xl flex items-center justify-center mb-6">
            <Sparkles className="w-7 h-7 text-teal-600" />
          </div>

          <h2 className="text-2xl font-serif font-bold text-gray-900 mb-2">
            You&apos;ve reached your free tier limit
          </h2>
          
          <p className="text-gray-500 mb-6 leading-relaxed">
            You&apos;ve used all <span className="font-semibold text-gray-900">{limit} {label}</span> included in the free tier this month. Upgrade to Pro for unlimited access.
          </p>

          <div className="bg-gray-50 rounded-xl p-4 mb-8">
            <div className="flex items-center justify-between text-sm mb-2">
              <span className="text-gray-500">Current Usage</span>
              <span className="font-semibold text-gray-900">{currentUsage} / {limit}</span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className="bg-teal-500 h-2 rounded-full transition-all duration-500" 
                style={{ width: '100%' }}
              />
            </div>
          </div>

          <div className="flex flex-col gap-3">
            <Button 
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white py-6 text-lg gap-2 cursor-pointer group"
              onClick={() => window.location.href = '/pricing'}
            >
              Upgrade to Pro
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </Button>
            <Button 
              variant="outline" 
              className="py-6 text-gray-500 cursor-pointer"
              onClick={onClose}
            >
              Maybe later
            </Button>
          </div>
          
          <p className="text-center text-[10px] text-gray-400 mt-6 uppercase tracking-widest">
            Pay only for what you use above the free tier
          </p>
        </div>
      </div>
    </div>
  );
}