import { useState, useEffect } from 'react';
import { 
  Cloud,
  Music,
  Lock,
  Share2,
  Database,
  Wifi,
  Settings,
  CheckCircle,
  X
} from 'lucide-react';
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogClose } from "@/components/ui/dialog";
import { toast } from "@/components/ui/use-toast";

export default function TuneBaseLanding() {
  const [isVisible, setIsVisible] = useState(false);
  const [showDemo, setShowDemo] = useState(false);
  const [showTrial, setShowTrial] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const handleStartTrial = () => {
    setShowTrial(true);
  };

  const handleTrialSubmit = (e) => {
    e.preventDefault();
    setShowTrial(false);
    toast({
      title: "Welcome to TuneBase!",
      description: "Check your email to get started with your free trial.",
    });
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 text-white">
      {/* Hero Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav className="py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Music className="h-8 w-8 text-purple-400" />
              <span className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
                TuneBase
              </span>
            </div>
            <div className="hidden md:flex space-x-8">
              <Button variant="ghost" className="hover:text-purple-400 transition-colors">
                Features
              </Button>
              <Button variant="ghost" className="hover:text-purple-400 transition-colors">
                Privacy
              </Button>
              <Button variant="ghost" className="hover:text-purple-400 transition-colors">
                Pricing
              </Button>
            </div>
            <Button 
              onClick={handleStartTrial}
              className="bg-purple-500 hover:bg-purple-600 transition-all transform hover:scale-105"
            >
              Get Started
            </Button>
          </div>
        </nav>

        <div className="py-20 text-center">
          <h1 className={`text-5xl md:text-6xl font-bold mb-6 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            Your Music.<br/>Your Cloud.<br/>
            <span className="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
              Your Rules.
            </span>
          </h1>
          <p className="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
            A privacy-first music player that puts you in control of your personal cloud library.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button 
              onClick={handleStartTrial}
              size="lg"
              className="bg-purple-500 hover:bg-purple-600 transition-all transform hover:scale-105"
            >
              Start Free Trial
            </Button>
            <Button 
              variant="outline" 
              size="lg"
              onClick={() => setShowDemo(true)}
              className="border-purple-400 hover:bg-purple-400/10"
            >
              Watch Demo
            </Button>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <FeatureCard 
            icon={<Cloud className="h-8 w-8 text-purple-400" />}
            title="Cross-Cloud Freedom"
            description="Seamlessly merge and stream music from Google Drive, Dropbox, and more into one unified library."
          />
          <FeatureCard 
            icon={<Lock className="h-8 w-8 text-purple-400" />}
            title="Privacy First"
            description="No tracking, no ads, no algorithms. Your music stays private and under your control."
          />
          <FeatureCard 
            icon={<Database className="h-8 w-8 text-purple-400" />}
            title="Offline Access"
            description="Cache your favorite tracks locally and enjoy your music without an internet connection."
          />
          <FeatureCard 
            icon={<Share2 className="h-8 w-8 text-purple-400" />}
            title="Secure Sharing"
            description="Share playlists via private links, hosted directly from your cloud storage."
          />
          <FeatureCard 
            icon={<Settings className="h-8 w-8 text-purple-400" />}
            title="Complete Control"
            description="Organize music your way with custom metadata editing and folder-based playlists."
          />
          <FeatureCard 
            icon={<Wifi className="h-8 w-8 text-purple-400" />}
            title="Streaming Freedom"
            description="Stream directly from your cloud storage with no corporate middleman."
          />
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="bg-gradient-to-r from-purple-900/50 to-pink-900/50 rounded-3xl p-8 md:p-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-8 text-center">
            Why Choose TuneBase?
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
              <PrivacyFeature 
                title="True Privacy"
                description="Your music library stays in your cloud storage. We never see or store your files."
              />
              <PrivacyFeature 
                title="No Tracking"
                description="Zero analytics, zero tracking, zero compromises on your privacy."
              />
              <PrivacyFeature 
                title="Own Your Music"
                description="Keep your files in your preferred format, organized your way."
              />
            </div>
            <div className="space-y-6">
              <PrivacyFeature 
                title="Cloud Freedom"
                description="Switch between cloud providers anytime - your library stays intact."
              />
              <PrivacyFeature 
                title="Secure Sharing"
                description="Share music through encrypted, temporary links only you control."
              />
              <PrivacyFeature 
                title="Local First"
                description="Cache your music locally for offline playback and faster access."
              />
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <h2 className="text-3xl md:text-4xl font-bold mb-6">
          Ready to Take Control of Your Music?
        </h2>
        <p className="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
          Start your 30-day free trial today. No credit card required.
        </p>
        <button className="bg-purple-500 hover:bg-purple-600 px-8 py-4 rounded-full font-medium text-lg transition-all transform hover:scale-105">
          Get Started Now
        </button>
      </div>

      {/* Demo Dialog */}
      <Dialog open={showDemo} onOpenChange={setShowDemo}>
        <DialogContent className="sm:max-w-[800px] bg-slate-900 text-white">
          <DialogHeader>
            <DialogTitle>TuneBase Demo</DialogTitle>
            <DialogDescription>
              See how TuneBase revolutionizes personal music streaming
            </DialogDescription>
          </DialogHeader>
          <div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center">
            <p className="text-gray-400">Demo video placeholder</p>
          </div>
        </DialogContent>
      </Dialog>

      {/* Trial Dialog */}
      <Dialog open={showTrial} onOpenChange={setShowTrial}>
        <DialogContent className="sm:max-w-[500px] bg-slate-900 text-white">
          <DialogHeader>
            <DialogTitle>Start Your Free Trial</DialogTitle>
            <DialogDescription>
              30 days free, no credit card required
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleTrialSubmit} className="space-y-4">
            <div>
              <label className="text-sm font-medium mb-2 block">Email</label>
              <input 
                type="email" 
                required
                className="w-full px-3 py-2 bg-slate-800 rounded-md border border-slate-700 focus:border-purple-400 focus:outline-none"
                placeholder="your@email.com"
              />
            </div>
            <div>
              <label className="text-sm font-medium mb-2 block">Password</label>
              <input 
                type="password" 
                required
                className="w-full px-3 py-2 bg-slate-800 rounded-md border border-slate-700 focus:border-purple-400 focus:outline-none"
                placeholder="••••••••"
              />
            </div>
            <Button 
              type="submit"
              className="w-full bg-purple-500 hover:bg-purple-600"
            >
              Start Free Trial
            </Button>
            <p className="text-xs text-center text-gray-400">
              By signing up, you agree to our Terms of Service and Privacy Policy
            </p>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function FeatureCard({ icon, title, description }) {
  return (
    <div className="bg-white/5 rounded-xl p-6 hover:bg-white/10 transition-all">
      <div className="mb-4">
        {icon}
      </div>
      <h3 className="text-xl font-semibold mb-2">{title}</h3>
      <p className="text-gray-400">{description}</p>
    </div>
  );
}

function PrivacyFeature({ title, description }) {
  return (
    <div className="flex items-start space-x-4">
      <div className="flex-shrink-0">
        <CheckCircle className="h-6 w-6 text-purple-400" />
      </div>
      <div>
        <h3 className="font-semibold mb-1">{title}</h3>
        <p className="text-gray-400">{description}</p>
      </div>
    </div>
  );
}