import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Check } from 'lucide-react';
import { useAuth } from '@/context/AuthContext';

const plans = [
  { name: 'Starter', credits: 50, price: '$9.99', popular: false },
  { name: 'Pro', credits: 200, price: '$29.99', popular: true },
  { name: 'Studio', credits: 1000, price: '$99.99', popular: false },
];

export default function PricingModal({ open, onOpenChange }) {
  const { purchaseCredits } = useAuth();

  const handlePurchase = (amount) => {
    purchaseCredits(amount);
    onOpenChange(false);
    // In a real app, this would trigger Stripe/Payment gateway
    alert(`Successfully purchased ${amount} credits!`);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>Upgrade your credits</DialogTitle>
          <DialogDescription>
            Get more generations with our flexible credit packs.
          </DialogDescription>
        </DialogHeader>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-4">
          {plans.map((plan) => (
            <div 
              key={plan.name} 
              className={`border rounded-lg p-4 flex flex-col gap-4 relative ${plan.popular ? 'border-primary bg-primary/5' : 'border-border'}`}
            >
              {plan.popular && (
                <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full">
                  Most Popular
                </span>
              )}
              <div>
                <h3 className="font-bold text-lg">{plan.name}</h3>
                <div className="text-2xl font-bold mt-1">{plan.price}</div>
              </div>
              <div className="flex-1">
                <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
                  <Check className="h-4 w-4 text-primary" />
                  <span>{plan.credits} Generation Credits</span>
                </div>
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Check className="h-4 w-4 text-primary" />
                  <span>High Priority Queue</span>
                </div>
              </div>
              <Button onClick={() => handlePurchase(plan.credits)} className="w-full">
                Buy Now
              </Button>
            </div>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  );
}