"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Download,
  Monitor,
  Smartphone,
  Apple,
  Copy,
  CheckCircle,
  Key,
  Check,
  ExternalLink,
  Menu,
  X,
  Palette,
  MessageCircle,
} from "lucide-react"
import { cn } from "@/lib/utils"

const platforms = [
  { id: "windows", name: "Windows", icon: Monitor },
  { id: "ios", name: "iOS", icon: Smartphone },
  { id: "android", name: "Android", icon: Smartphone },
  { id: "macos", name: "macOS", icon: Apple },
]

const scripts = [
  {
    id: "bloxfruits",
    name: "Blox Fruits",
    code: 'loadstring(game:HttpGet("https://raw.githubusercontent.com/Overgustx2/Main/refs/heads/main/BloxFruits_25.html"))()',
    image: "/images/blox-fruits.png",
    available: true,
  },
  {
    id: "garden",
    name: "Grow a Garden",
    code: "",
    image: "/images/grow-garden.png",
    available: false,
  },
  {
    id: "brainrot",
    name: "Steal a Brainrot",
    code: "",
    image: "/images/brainrot.png",
    available: false,
  },
]

const navigationItems = [
  { id: "download", label: "Download" },
  { id: "script", label: "Script" },
  { id: "getkey", label: "GetKey" },
  { id: "premiums", label: "Premiums" },
]

const themes = [
  { id: "red", name: "Red", primary: "#ff0000", secondary: "#dc2626", accent: "#ff6666" },
  { id: "blue", name: "Blue", primary: "#0066ff", secondary: "#0052cc", accent: "#3399ff" },
  { id: "purple", name: "Purple", primary: "#8b5cf6", secondary: "#7c3aed", accent: "#a78bfa" },
  { id: "green", name: "Green", primary: "#10b981", secondary: "#059669", accent: "#34d399" },
  { id: "orange", name: "Orange", primary: "#f97316", secondary: "#ea580c", accent: "#fb923c" },
  { id: "pink", name: "Pink", primary: "#ec4899", secondary: "#db2777", accent: "#f472b6" },
  { id: "cyan", name: "Cyan", primary: "#06b6d4", secondary: "#0891b2", accent: "#22d3ee" },
  { id: "yellow", name: "Yellow", primary: "#eab308", secondary: "#ca8a04", accent: "#facc15" },
]

export default function VortexExecutor() {
  const [currentPage, setCurrentPage] = useState("download")
  const [selectedPlatform, setSelectedPlatform] = useState<string | null>(null)
  const [copiedScript, setCopiedScript] = useState<string | null>(null)
  const [menuOpen, setMenuOpen] = useState(false)
  const [themeMenuOpen, setThemeMenuOpen] = useState(false)
  const [currentTheme, setCurrentTheme] = useState(themes[0])

  const copyToClipboard = async (code: string, scriptId: string) => {
    try {
      await navigator.clipboard.writeText(code)
      setCopiedScript(scriptId)
      setTimeout(() => setCopiedScript(null), 2000)
    } catch (err) {
      console.error("Failed to copy:", err)
    }
  }

  const handleNavigation = (pageId: string) => {
    setCurrentPage(pageId)
    setMenuOpen(false)
    setSelectedPlatform(null)
  }

  const handleThemeChange = (theme: (typeof themes)[0]) => {
    setCurrentTheme(theme)
    setThemeMenuOpen(false)

    // Update CSS custom properties
    document.documentElement.style.setProperty("--theme-primary", theme.primary)
    document.documentElement.style.setProperty("--theme-secondary", theme.secondary)
    document.documentElement.style.setProperty("--theme-accent", theme.accent)
  }

  const openDiscord = () => {
    window.open("https://discord.gg/3gGZCs7tPt", "_blank", "noopener,noreferrer")
  }

  const renderPage = () => {
    switch (currentPage) {
      case "download":
        return (
          <div className="page-container">
            <div className="page-header">
              <h1 className="page-title">Download Vortex</h1>
            </div>

            <div className="download-center">
              <div className="platform-dropdown">
                <button
                  className="dropdown-toggle"
                  onClick={() => setSelectedPlatform(selectedPlatform ? null : "dropdown")}
                >
                  <div className="dropdown-content">
                    <span className="dropdown-text">
                      {selectedPlatform && selectedPlatform !== "dropdown"
                        ? platforms.find((p) => p.id === selectedPlatform)?.name
                        : "Select Platform"}
                    </span>
                    <div className={`dropdown-arrow ${selectedPlatform === "dropdown" ? "dropdown-arrow-up" : ""}`}>
                      ▼
                    </div>
                  </div>
                </button>

                {selectedPlatform === "dropdown" && (
                  <div className="dropdown-menu">
                    {platforms.map((platform) => {
                      const IconComponent = platform.icon
                      return (
                        <button
                          key={platform.id}
                          className="dropdown-item"
                          onClick={() => setSelectedPlatform(platform.id)}
                        >
                          <IconComponent className="dropdown-icon" />
                          <span>{platform.name}</span>
                        </button>
                      )
                    })}
                  </div>
                )}
              </div>

              <Button className="main-download-button" disabled={!selectedPlatform || selectedPlatform === "dropdown"}>
                <Download className="w-5 h-5 mr-2" />
                Download
              </Button>
            </div>
          </div>
        )

      case "script":
        return (
          <div className="page-container">
            <div className="page-header">
              <h1 className="page-title">Script Library</h1>
            </div>

            <div className="scripts-container">
              {scripts.map((script) => (
                <div key={script.id} className={cn("script-item", !script.available && "script-disabled")}>
                  <div className="script-image-small">
                    <img src={script.image || "/placeholder.svg"} alt={script.name} />
                    {!script.available && (
                      <div className="coming-soon-badge">
                        <span>In Development</span>
                      </div>
                    )}
                  </div>

                  <div className="script-info">
                    <h3 className="script-title">{script.name}</h3>

                    {script.available ? (
                      <div className="script-status-available">
                        <div className="keyless-indicator">
                          <Key className="w-4 h-4" />
                          <span>Keyless</span>
                        </div>
                      </div>
                    ) : (
                      <div className="script-status-unavailable">
                        <span>In Development</span>
                      </div>
                    )}
                  </div>

                  <div className="script-actions-inline">
                    {script.available ? (
                      <Button
                        onClick={() => copyToClipboard(script.code, script.id)}
                        className="copy-btn-small"
                        size="sm"
                      >
                        {copiedScript === script.id ? (
                          <>
                            <CheckCircle className="w-4 h-4 mr-1" />
                            Copied!
                          </>
                        ) : (
                          <>
                            <Copy className="w-4 h-4 mr-1" />
                            Copy
                          </>
                        )}
                      </Button>
                    ) : (
                      <Button className="development-btn-small" size="sm" disabled>
                        In Development
                      </Button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )

      case "getkey":
        return (
          <div className="page-container">
            <div className="page-header">
              <h1 className="page-title">How to Get a Key</h1>
            </div>

            <div className="steps-container">
              <div className="step-card">
                <div className="step-number">1</div>
                <div className="step-content">
                  <h3 className="step-title">Join Our Discord</h3>
                  <p className="step-description">Connect with our community and get the latest updates.</p>
                </div>
              </div>

              <div className="step-card">
                <div className="step-number">2</div>
                <div className="step-content">
                  <h3 className="step-title">Complete Verification</h3>
                  <p className="step-description">Follow the verification process in our Discord server.</p>
                </div>
              </div>

              <div className="step-card">
                <div className="step-number">3</div>
                <div className="step-content">
                  <h3 className="step-title">Get Your Key</h3>
                  <p className="step-description">Receive your unique access key and start using Vortex.</p>
                </div>
              </div>
            </div>

            <div className="key-info">
              <div className="info-card">
                <Key className="w-8 h-8 text-yellow-400" />
                <h3>Key System Status</h3>
                <p>Our key system is currently being developed. Most scripts are keyless for now!</p>
              </div>
            </div>
          </div>
        )

      case "premiums":
        return (
          <div className="page-container">
            <div className="page-header">
              <h1 className="page-title">Vortex Premium Features</h1>
            </div>

            <div className="premium-grid">
              <div className="premium-card">
                <div className="premium-header">
                  <h3 className="premium-tier">Free</h3>
                  <div className="premium-price">$0</div>
                </div>

                <div className="premium-features">
                  <div className="feature-item">
                    <Check className="w-5 h-5 theme-primary-text" />
                    <span>Basic Scripts</span>
                  </div>
                  <div className="feature-item">
                    <Check className="w-5 h-5 theme-primary-text" />
                    <span>Community Support</span>
                  </div>
                  <div className="feature-item">
                    <Check className="w-5 h-5 theme-primary-text" />
                    <span>Regular Updates</span>
                  </div>
                </div>

                <Button variant="outline" className="premium-button bg-transparent">
                  Current Plan
                </Button>
              </div>

              <div className="premium-card premium-featured">
                <div className="premium-header">
                  <h3 className="premium-tier">Premium</h3>
                  <div className="premium-price">$9.99</div>
                </div>

                <div className="premium-features">
                  <div className="feature-item">
                    <Check className="w-5 h-5 theme-primary-text" />
                    <span>Early Access Scripts</span>
                  </div>
                  <div className="feature-item">
                    <Check className="w-5 h-5 theme-primary-text" />
                    <span>No Key System</span>
                  </div>
                  <div className="feature-item">
                    <Check className="w-5 h-5 theme-primary-text" />
                    <span>Priority Support</span>
                  </div>
                  <div className="feature-item">
                    <Check className="w-5 h-5 theme-primary-text" />
                    <span>Exclusive Features</span>
                  </div>
                  <div className="feature-item">
                    <Check className="w-5 h-5 theme-primary-text" />
                    <span>Beta Access</span>
                  </div>
                </div>

                <Button className="premium-button premium-upgrade">Upgrade Now</Button>
              </div>
            </div>
          </div>
        )

      default:
        return null
    }
  }

  return (
    <div className="app">
      {/* Background Effects */}
      <div className="background-effects">
        <div className="red-particles"></div>
        <div className="gradient-orb orb-1"></div>
        <div className="gradient-orb orb-2"></div>
      </div>

      {/* Top Navigation */}
      <nav className="navbar">
        <div className="nav-container">
          <div className="nav-logo">
            <span className="logo-text">VORTEX</span>
          </div>

          <div className="nav-buttons">
            {/* Discord Button */}
            <button className="discord-button" onClick={openDiscord} title="Join Discord">
              <MessageCircle className="w-5 h-5" />
            </button>

            {/* Theme Button */}
            <button className="theme-button" onClick={() => setThemeMenuOpen(!themeMenuOpen)} title="Change Theme">
              <Palette className="w-5 h-5" />
            </button>

            {/* Menu Button */}
            <button className="menu-button" onClick={() => setMenuOpen(!menuOpen)} title="Open Menu">
              {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </nav>

      {/* Theme Menu */}
      {themeMenuOpen && (
        <div className="theme-overlay">
          <div className="theme-content">
            <div className="theme-header">
              <h2 className="theme-title">Choose Theme</h2>
              <button className="theme-close" onClick={() => setThemeMenuOpen(false)}>
                <X className="w-6 h-6" />
              </button>
            </div>

            <div className="theme-grid">
              {themes.map((theme) => (
                <button
                  key={theme.id}
                  className={cn("theme-option", currentTheme.id === theme.id && "theme-option-active")}
                  onClick={() => handleThemeChange(theme)}
                  style={
                    {
                      "--preview-primary": theme.primary,
                      "--preview-secondary": theme.secondary,
                      "--preview-accent": theme.accent,
                    } as React.CSSProperties
                  }
                >
                  <div className="theme-preview">
                    <div className="theme-preview-primary"></div>
                    <div className="theme-preview-secondary"></div>
                    <div className="theme-preview-accent"></div>
                  </div>
                  <span className="theme-name">{theme.name}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Navigation Menu */}
      {menuOpen && (
        <div className="menu-overlay">
          <div className="menu-content">
            <div className="menu-header">
              <h2 className="menu-title">Navigation</h2>
              <button className="menu-close" onClick={() => setMenuOpen(false)}>
                <X className="w-8 h-8" />
              </button>
            </div>

            <div className="menu-items">
              {navigationItems.map((item) => (
                <button
                  key={item.id}
                  onClick={() => handleNavigation(item.id)}
                  className={cn("menu-item", currentPage === item.id && "menu-item-active")}
                >
                  {item.label}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Main Content */}
      <main className="main-content">{renderPage()}</main>

      {/* Footer */}
      <footer className="footer">
        <div className="footer-content">
          <div className="footer-left">
            <p>Copyright © Vortex 2025</p>
          </div>
          <div className="footer-right">
            <p>Join our Discord:</p>
            <a href="https://discord.gg/3gGZCs7tPt" className="discord-link" target="_blank" rel="noopener noreferrer">
              <ExternalLink className="w-4 h-4 mr-1" />
              https://discord.gg/3gGZCs7tPt
            </a>
          </div>
        </div>
      </footer>
    </div>
  )
}