import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Info, DollarSign, PlayCircle, Eye } from "lucide-react";

interface AdExplanationProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function AdExplanation({ isOpen, onClose }: AdExplanationProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-800 border-gray-700 text-white max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold flex items-center gap-2">
            <DollarSign className="w-6 h-6 text-yellow-500" />
            What do "💰 AD" badges mean?
          </DialogTitle>
        </DialogHeader>
        
        <div className="space-y-6 py-4">
          <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-2">
              <div className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white text-xs px-2 py-1 rounded-full font-bold">
                💰 OGLAS
              </div>
              <span className="text-yellow-300 font-medium">Monetized Videos</span>
            </div>
            <p className="text-sm text-gray-300">
              These badges indicate that videos are equipped with advanced VAST advertising system
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-gray-700/50 rounded-lg p-4">
              <div className="flex items-center gap-2 mb-2">
                <PlayCircle className="w-5 h-5 text-blue-400" />
                <h3 className="font-medium">How does it work?</h3>
              </div>
              <p className="text-sm text-gray-300">
                Ads are shown before or during video playback, enabling free viewing of content
              </p>
            </div>
            
            <div className="bg-gray-700/50 rounded-lg p-4">
              <div className="flex items-center gap-2 mb-2">
                <Eye className="w-5 h-5 text-green-400" />
                <h3 className="font-medium">Free Viewing</h3>
              </div>
              <p className="text-sm text-gray-300">
                Ads enable you to watch all videos completely free without subscription
              </p>
            </div>
          </div>
          
          <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
            <h3 className="font-medium text-blue-300 mb-2">VAST Advertising System</h3>
            <p className="text-sm text-gray-300 mb-2">
              Platforma uporablja profesionalni VAST (Video Ad Serving Template) sistem z 5 oglasnimi mrežami:
            </p>
            <ul className="text-sm text-gray-300 space-y-1">
              <li>• Publift - Agregator več oglaševalskih omrežij</li>
              <li>• Vdo.ai - AI ciljanje z visokim eCPM</li>
              <li>• Primis - Video discovery platforma</li>
              <li>• AdPlayer.Pro - Outstream rešitve</li>
              <li>• Aniview - Programmatic oglasne tehnologije</li>
            </ul>
          </div>
          
          <div className="flex justify-end">
            <Button onClick={onClose} className="bg-bunny-blue hover:bg-blue-600">
              Razumem
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}