108:"ExplicitChatIdProvider" 109:I[903690,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$80","$7c","$81","$82","$7e","$83","$84","$85","$86","$7d","$87","$88","$89","$8a","$8b"],"$108"] 10a:I[838238,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$80","$7c","$81","$82","$7e","$83","$84","$85","$86","$7d","$87","$88","$89","$8a","$8b"],"SWRDataProvider"] 10c:[] 10d:[["b_u1eELELLHnC",null],["b_00dZM15xTuh",null],["b_9EaaL4Oiaqx",null]] 10e:[["b_u1eELELLHnC",{"templateVersionId":null,"templateCanonId":null}],["b_00dZM15xTuh",{"templateVersionId":null,"templateCanonId":null}],["b_9EaaL4Oiaqx",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["PpwmJwrA9uf","$D2025-04-14T21:26:26.803Z"],["b_8sQyCuICq1P","$D2025-04-14T21:38:33.531Z"],["b_Sr1bZXt6R3H","$D2025-04-14T21:47:00.042Z"],["b_zsPO62HH5fK","$D2025-04-14T21:59:36.042Z"],["b_gtOLkbdmUeQ","$D2025-04-14T22:06:09.904Z"],["b_T1EvWWORpL3","$D2025-04-14T22:12:27.945Z"],["b_cfLQmOHbXss","$D2025-04-14T22:14:49.590Z"],["b_2EXcl6NzObz","$D2025-04-14T22:16:16.767Z"],["b_1KWteZJL0J3","$D2025-04-14T22:19:12.143Z"],["b_tP88xNOvZYW","$D2025-04-14T22:23:19.343Z"],["b_S5iSAE9VbSd","$D2025-04-14T22:35:20.081Z"],["b_RphRH8US0aI","$D2025-04-14T22:40:42.455Z"],["b_gEwa2A6drRl","$D2025-04-14T22:48:28.684Z"],["b_OeGKLC0YBxo","$D2025-04-14T22:56:43.636Z"],["b_sJznZ7K69b1","$D2025-04-17T13:54:52.127Z"],["b_oUfrVnP905N","$D2025-04-17T14:14:44.398Z"],["b_ZvIaJvweA2J","$D2025-04-17T14:45:05.800Z"],["b_sWaY1jhW6p5","$D2025-04-17T15:05:41.432Z"],["b_5dv2spDR1Pq","$D2025-04-17T15:09:37.157Z"],["b_E17IlbpQ2Xn","$D2025-04-17T16:01:24.222Z"],["b_Veo1vn9f16R","$D2025-04-17T16:06:46.384Z"],["b_KtUONYxeoGs","$D2025-04-17T16:15:02.416Z"],["b_v2Xhj6ub00e","$D2025-04-17T16:25:21.257Z"],["b_j2XdX0Q5ckj","$D2025-04-17T16:30:16.480Z"],["b_TxSAFAlh3Hu","$D2025-04-17T16:32:31.736Z"],["b_X0jhtxTmZgD","$D2025-04-17T16:40:06.009Z"],["b_GN3sg00p96Z","$D2025-04-17T16:41:24.512Z"],["b_Od1F4JFNHij","$D2025-04-17T16:43:40.598Z"],["b_nmG1A1Qjqox","$D2025-04-17T18:39:53.986Z"],["b_0dR7XkxvElI","$D2025-04-17T18:44:02.777Z"],["b_X3njTiO1T6Q","$D2025-04-17T18:49:05.651Z"],["b_FxusYS6rCzu","$D2025-04-17T18:49:47.609Z"],["b_uEBZLkJVolN","$D2025-04-17T18:50:24.127Z"],["b_1O3GN54VG7J","$D2025-04-17T19:00:33.444Z"],["b_h5jxxAdKtrB","$D2025-04-17T19:00:51.773Z"],["b_vOd1Afo438v","$D2025-04-17T19:08:50.010Z"],["b_gnY1iX8d9Iy","$D2025-04-17T19:10:39.376Z"],["b_JpfE50hvXL6","$D2025-04-17T19:13:53.693Z"],["b_Q63yUiTrsoi","$D2025-04-17T19:16:18.451Z"],["b_FJE7mPQVNKw","$D2025-04-17T19:33:49.979Z"],["b_4JA9ngjq9Y8","$D2025-04-21T01:48:17.192Z"],["b_BpoWbP1NpG7","$D2025-04-21T01:52:12.255Z"],["b_oTJc7XIr5dl","$D2025-04-21T02:13:59.408Z"],["b_u1eELELLHnC","$D2025-04-21T12:31:00.098Z"],["b_K06wImLGWMv","$D2025-04-21T15:02:33.542Z"],["b_00dZM15xTuh","$D2025-04-21T15:22:31.867Z"],["b_9EaaL4Oiaqx","$D2025-10-15T03:47:30.520Z"]] 110:[["b_u1eELELLHnC",false],["b_00dZM15xTuh",false],["b_9EaaL4Oiaqx",false]] 111:[["b_u1eELELLHnC","$undefined"],["b_00dZM15xTuh","$undefined"],["b_9EaaL4Oiaqx","$undefined"]] 112:[["b_u1eELELLHnC",null],["b_00dZM15xTuh",null],["b_9EaaL4Oiaqx",null]] 113:[["b_u1eELELLHnC",true],["b_00dZM15xTuh",true],["b_9EaaL4Oiaqx",true]] 114:[["b_u1eELELLHnC",true],["b_00dZM15xTuh",true],["b_9EaaL4Oiaqx",true]] 115:[] 116:T485,I need to create a comprehensive interface for creating and organizing courses within the Music Nodes platform. This will be a key component for the Learn section that we've been building. Let me plan out what I need to build: - Course Management Interface - Create/edit courses - Organize lessons within courses - Create modules to group lessons - Reorder modules and lessons - Set course metadata (title, description, image, etc.) - Publish/unpublish functionality - Key Components: - Course form with metadata inputs - Module organizer/manager - Lesson manager with connection to the video library (the Mux videos we've already integrated) - Drag and drop interface for reordering - Course preview - Data Structure: - Courses have metadata and contain modules - Modules contain lessons and have their own metadata - Lessons link to video content already uploaded via Mux - Pages: - Course listing/management page - Course editor page - Module editor modal/component - Lesson editor modal/component Let's create a robust course management system with an intuitive user interface that follows the existing design patterns of the Music Nodes platform.117:T8ee26,[V0_FILE]typescriptreact:file="components/kokonutui/hero-geometric.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Pacifico } from "next/font/google" import Image from "next/image" import { cn } from "@/lib/utils" const pacifico = Pacifico({ subsets: ["latin"], weight: ["400"], variable: "--font-pacifico", }) function ElegantShape({ className, delay = 0, width = 400, height = 100, rotate = 0, gradient = "from-white/[0.08]", }: { className?: string delay?: number width?: number height?: number rotate?: number gradient?: string }) { return (

) } export default function HeroGeometric({ badge = "Kokonut UI", title1 = "Elevate Your", title2 = "Digital Vision", }: { badge?: string title1?: string title2?: string }) { const fadeUpVariants = { hidden: { opacity: 0, y: 30 }, visible: (i: number) => ({ opacity: 1, y: 0, transition: { duration: 1, delay: 0.5 + i * 0.2, ease: [0.25, 0.4, 0.25, 1], }, }), } return (

{badge}

{title1}
{title2}

Crafting exceptional digital experiences through innovative design and cutting-edge technology.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import HeroSection from "@/components/hero-section" import FeatureCards from "@/components/feature-cards" import MarketplacePreview from "@/components/marketplace-preview" import AIAgentSection from "@/components/ai-agent-section" import BlockchainIntegration from "@/components/blockchain-integration" export default function HomePage() { return (

Ready to Transform Your Music Career?

Join the revolution in music asset management, promotion, and monetization.

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import Link from "next/link" export default function HeroSection() { return (

{/* Animated music nodes background */}

{[...Array(15)].map((_, i) => ( ))}

Music Nodes

Digital cards with utility assets for music creatives. Buy, sell, trade, and license your work through smart contracts and AI-powered promotion.

) } [V0_FILE]typescriptreact:file="components/feature-cards.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Music, Zap, BarChart3, Award, Share2, ShoppingBag } from "lucide-react" const features = [ { title: "Digital Asset Cards", description: "Create unique digital cards containing your music, artwork, and more with embedded utility.", icon: , }, { title: "Smart Contract Integration", description: "Secure your assets with blockchain technology across Tron, Solana, and Ethereum networks.", icon: , }, { title: "AI Promotion Tools", description: "Leverage AI agents trained on industry roles to automate promotion and marketing tasks.", icon: , }, { title: "Industry Connect Matrix", description: "Network with industry professionals and build valuable partnerships through our platform.", icon: , }, { title: "Asset Bartering Market", description: "Trade and barter your digital assets with other creators for mutual benefit.", icon: , }, { title: "Physical Goods Integration", description: "Sell physical merchandise and experiences tied to your digital assets.", icon: , }, ] export default function FeatureCards() { return (

Platform Features

Music Nodes combines blockchain technology, AI, and industry expertise to create a powerful ecosystem for music creatives.

{features.map((feature, index) => (

{feature.icon}

{feature.title} {feature.description} ))}

) } [V0_FILE]typescriptreact:file="components/marketplace-preview.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Heart, ShoppingCart, ArrowRight } from "lucide-react" import Image from "next/image" import Link from "next/link" // Sample data for marketplace items const marketplaceItems = [ { id: 1, title: "Cosmic Beats Vol. 1", creator: "Stellar Sound", price: "0.25 ETH", likes: 124, category: "music", image: "/placeholder.svg?height=400&width=300", blockchain: "Ethereum", type: "Audio Track + Stems", }, { id: 2, title: "Visual Album Artwork", creator: "DigitalCanvas", price: "150 TRX", likes: 89, category: "artwork", image: "/placeholder.svg?height=400&width=300", blockchain: "Tron", type: "Visual Art + Commercial Rights", }, { id: 3, title: "Limited Edition Merch Bundle", creator: "FashionBeats", price: "2 SOL", likes: 67, category: "physical", image: "/placeholder.svg?height=400&width=300", blockchain: "Solana", type: "Physical Goods + Digital Collectible", }, { id: 4, title: "Producer Pack: Lo-Fi Dreams", creator: "BeatArchitect", price: "0.15 ETH", likes: 215, category: "music", image: "/placeholder.svg?height=400&width=300", blockchain: "Ethereum", type: "Sample Pack + License", }, ] export default function MarketplacePreview() { const [activeTab, setActiveTab] = useState("all") const filteredItems = activeTab === "all" ? marketplaceItems : marketplaceItems.filter((item) => item.category === activeTab) return (

Marketplace

All Music Artwork Physical

{filteredItems.map((item, index) => (

{item.blockchain}

{item.title}

by {item.creator}

{item.type}

{item.price}

{item.likes}

))}

) } [V0_FILE]typescriptreact:file="components/ai-agent-section.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Bot, Sparkles, Users, TrendingUp, Calendar, Briefcase } from "lucide-react" const aiAgents = [ { name: "Promotion Agent", icon: , description: "Automates social media campaigns and promotional strategies tailored to your audience.", }, { name: "Booking Agent", icon: , description: "Helps secure performance opportunities and manages your event calendar.", }, { name: "A&R Agent", icon: , description: "Connects your music with the right industry professionals and potential collaborators.", }, { name: "Business Manager", icon: , description: "Optimizes your revenue streams and manages licensing opportunities.", }, ] export default function AIAgentSection() { return (

AI Industry Agents

Our AI agents are trained on industry-specific roles and tasks to help automate and optimize your music career.

{aiAgents.map((agent, index) => (

{agent.icon}

{agent.name}

{agent.description}

))}

AI Assistant

Your personal music industry guide

"How can I help you today? I can analyze your audience demographics, suggest promotion strategies, or help you find collaboration opportunities."

) } [V0_FILE]typescriptreact:file="components/blockchain-integration.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import Image from "next/image" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" const blockchains = [ { id: "ethereum", name: "Ethereum", logo: "/placeholder.svg?height=100&width=100", description: "The most established blockchain for NFTs with the largest user base and marketplace ecosystem.", features: [ "ERC-721 and ERC-1155 token standards", "Integration with major marketplaces like OpenSea", "Smart contract royalties for ongoing revenue", "Robust security and decentralization", ], }, { id: "solana", name: "Solana", logo: "/placeholder.svg?height=100&width=100", description: "High-performance blockchain with low transaction fees and fast confirmation times.", features: [ "Metaplex NFT standard", "Fraction-of-a-cent transaction fees", "High throughput for scalable applications", "Growing ecosystem of music-focused platforms", ], }, { id: "tron", name: "Tron", logo: "/placeholder.svg?height=100&width=100", description: "Entertainment-focused blockchain with strong Asian market presence and low fees.", features: [ "TRC-721 and TRC-1155 token standards", "High transaction throughput", "Strong entertainment industry partnerships", "Growing DeFi ecosystem for additional utility", ], }, ] export default function BlockchainIntegration() { return (

Multi-Chain Support

Music Nodes supports multiple blockchain networks, giving you flexibility in how you create, sell, and manage your digital assets.

Ethereum Solana Tron {blockchains.map((blockchain) => (

{blockchain.name}

{blockchain.description}

Key Features

{feature}

))}

) } [V0_FILE]typescriptreact:file="app/create/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Upload, Music, ImageIcon, Package, Zap } from "lucide-react" export default function CreateNodePage() { const [activeTab, setActiveTab] = useState("basic") const [selectedBlockchain, setSelectedBlockchain] = useState("") return (

Create Music Node

Design your digital asset card with embedded utility and smart contract functionality.

Basic Info Assets Utility Contract

Title

Description

</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="category">Category</Label>
                        <Select>
                          <SelectTrigger className="bg-gray-800/50 border-gray-700">
                            <SelectValue placeholder="Select category" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="music">Music</SelectItem>
                            <SelectItem value="artwork">Artwork</SelectItem>
                            <SelectItem value="merchandise">Merchandise</SelectItem>
                            <SelectItem value="experience">Experience</SelectItem>
                            <SelectItem value="bundle">Bundle</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="tags">Tags (comma separated)</Label>
                        <Input
                          id="tags"
                          placeholder="e.g., electronic, remix, limited"
                          className="bg-gray-800/50 border-gray-700"
                        />
                      </div>
                    </div>
                  </TabsContent>

<TabsContent value="assets" className="mt-0 space-y-6">
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold flex items-center">
                        <Music className="h-5 w-5 mr-2 text-purple-400" /> Audio Assets
                      </h3>

<div className="border border-dashed border-gray-700 rounded-lg p-8 text-center">
                        <Upload className="h-10 w-10 mx-auto mb-4 text-gray-500" />
                        <p className="text-gray-400 mb-2">Drag and drop audio files or</p>
                        <Button variant="outline" className="border-purple-500 text-purple-400 hover:bg-purple-950">
                          Browse Files
                        </Button>
                        <p className="text-xs text-gray-500 mt-2">Supports MP3, WAV, FLAC (max 500MB)</p>
                      </div>

<div className="space-y-2">
                        <Label>Audio Type</Label>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                          <Button
                            variant="outline"
                            className="border-gray-700 hover:border-purple-500 hover:bg-purple-900/20"
                          >
                            Full Track
                          </Button>
                          <Button
                            variant="outline"
                            className="border-gray-700 hover:border-purple-500 hover:bg-purple-900/20"
                          >
                            Stems
                          </Button>
                          <Button
                            variant="outline"
                            className="border-gray-700 hover:border-purple-500 hover:bg-purple-900/20"
                          >
                            Sample Pack
                          </Button>
                          <Button
                            variant="outline"
                            className="border-gray-700 hover:border-purple-500 hover:bg-purple-900/20"
                          >
                            Remix Rights
                          </Button>
                        </div>
                      </div>
                    </div>

<div className="space-y-4">
                      <h3 className="text-lg font-semibold flex items-center">
                        <ImageIcon className="h-5 w-5 mr-2 text-purple-400" /> Visual Assets
                      </h3>

<div className="border border-dashed border-gray-700 rounded-lg p-8 text-center">
                        <Upload className="h-10 w-10 mx-auto mb-4 text-gray-500" />
                        <p className="text-gray-400 mb-2">Drag and drop image files or</p>
                        <Button variant="outline" className="border-purple-500 text-purple-400 hover:bg-purple-950">
                          Browse Files
                        </Button>
                        <p className="text-xs text-gray-500 mt-2">Supports JPG, PNG, GIF (max 50MB)</p>
                      </div>
                    </div>

<div className="space-y-4">
                      <h3 className="text-lg font-semibold flex items-center">
                        <Package className="h-5 w-5 mr-2 text-purple-400" /> Physical Assets (Optional)
                      </h3>

<div className="space-y-2">
                        <Label>Include Physical Items?</Label>
                        <div className="flex items-center space-x-2">
                          <Switch id="physical-items" />
                          <Label htmlFor="physical-items">Yes, this Node includes physical merchandise</Label>
                        </div>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="physical-description">Physical Item Description</Label>
                        <Textarea
                          id="physical-description"
                          placeholder="Describe the physical items included with this Node"
                          className="bg-gray-800/50 border-gray-700"
                        />
                      </div>
                    </div>
                  </TabsContent>

<TabsContent value="utility" className="mt-0 space-y-6">
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold">Utility Features</h3>
                      <p className="text-gray-400">Select the utility features to include with your Music Node.</p>

<div className="space-y-3">
                        <div className="flex items-center space-x-2">
                          <Switch id="commercial-rights" />
                          <Label htmlFor="commercial-rights">Commercial Usage Rights</Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch id="exclusive-content" />
                          <Label htmlFor="exclusive-content">Exclusive Content Access</Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch id="community-access" />
                          <Label htmlFor="community-access">Community Membership</Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch id="royalty-sharing" />
                          <Label htmlFor="royalty-sharing">Royalty Sharing</Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch id="voting-rights" />
                          <Label htmlFor="voting-rights">Voting Rights</Label>
                        </div>
                      </div>
                    </div>

<div className="space-y-4">
                      <h3 className="text-lg font-semibold">AI Promotion Integration</h3>
                      <p className="text-gray-400">Configure AI agents to help promote your Music Node.</p>

<div className="space-y-3">
                        <div className="flex items-center space-x-2">
                          <Switch id="social-promotion" />
                          <Label htmlFor="social-promotion">Social Media Promotion</Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch id="industry-connect" />
                          <Label htmlFor="industry-connect">Industry Connect</Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch id="audience-analysis" />
                          <Label htmlFor="audience-analysis">Audience Analysis</Label>
                        </div>
                      </div>
                    </div>
                  </TabsContent>

<TabsContent value="contract" className="mt-0 space-y-6">
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold flex items-center">
                        <Zap className="h-5 w-5 mr-2 text-purple-400" /> Blockchain Settings
                      </h3>

<div className="space-y-2">
                        <Label htmlFor="blockchain">Select Blockchain</Label>
                        <Select value={selectedBlockchain} onValueChange={setSelectedBlockchain}>
                          <SelectTrigger className="bg-gray-800/50 border-gray-700">
                            <SelectValue placeholder="Choose blockchain network" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="ethereum">Ethereum</SelectItem>
                            <SelectItem value="solana">Solana</SelectItem>
                            <SelectItem value="tron">Tron</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

{selectedBlockchain && (
                        <div className="p-4 bg-gray-800/30 rounded-lg border border-gray-700">
                          <p className="text-sm text-gray-400 mb-4">
                            {selectedBlockchain === "ethereum" &&
                              "Your Node will be minted as an ERC-1155 token on the Ethereum blockchain."}
                            {selectedBlockchain === "solana" &&
                              "Your Node will be minted using the Metaplex standard on the Solana blockchain."}
                            {selectedBlockchain === "tron" &&
                              "Your Node will be minted as a TRC-721 token on the Tron blockchain."}
                          </p>

<div className="space-y-3">
                            <div className="space-y-2">
                              <Label htmlFor="supply">Supply</Label>
                              <div className="grid grid-cols-2 gap-4">
                                <div className="flex items-center space-x-2">
                                  <input type="radio" id="unique" name="supply" className="text-purple-600" />
                                  <Label htmlFor="unique">Unique (1 of 1)</Label>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <input type="radio" id="limited" name="supply" className="text-purple-600" />
                                  <Label htmlFor="limited">Limited Edition</Label>
                                </div>
                              </div>
                            </div>

<div className="space-y-2">
                              <Label htmlFor="royalty">Creator Royalty (%)</Label>
                              <Input
                                id="royalty"
                                type="number"
                                placeholder="e.g., 10"
                                className="bg-gray-800/50 border-gray-700"
                              />
                              <p className="text-xs text-gray-500">Percentage you receive from secondary sales</p>
                            </div>

<div className="space-y-2">
                              <Label htmlFor="price">Initial Price</Label>
                              <div className="flex space-x-2">
                                <Input
                                  id="price"
                                  type="number"
                                  placeholder="e.g., 0.25"
                                  className="bg-gray-800/50 border-gray-700"
                                />
                                <Select defaultValue="eth">
                                  <SelectTrigger className="w-[100px] bg-gray-800/50 border-gray-700">
                                    <SelectValue placeholder="Currency" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="eth">ETH</SelectItem>
                                    <SelectItem value="sol">SOL</SelectItem>
                                    <SelectItem value="trx">TRX</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          </div>

<div className="lg:col-span-1">
            <Card className="bg-gray-900/60 border-gray-800 sticky top-4">
              <CardContent className="p-6">
                <h3 className="text-xl font-semibold mb-4">Node Preview</h3>

<div className="aspect-[3/4] bg-gradient-to-br from-purple-900/30 to-pink-900/30 rounded-lg border border-purple-500/20 mb-6 flex items-center justify-center">
                  <p className="text-gray-400 text-sm">Preview will appear as you create your Node</p>
                </div>

<div className="space-y-4">
                  <div>
                    <h4 className="text-sm font-medium text-gray-400">Completion Status</h4>
                    <div className="h-2 bg-gray-800 rounded-full mt-2">
                      <div
                        className="h-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"
                        style={{ width: "25%" }}
                      />
                    </div>
                    <p className="text-xs text-gray-500 mt-1">25% complete</p>
                  </div>

<Button className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                    {activeTab === "contract" ? "Create Node" : "Continue"}
                  </Button>

<Button variant="outline" className="w-full border-gray-700 text-gray-400 hover:bg-gray-800">
                    Save Draft
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/explore/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import { Heart, ShoppingCart, Filter, Search, Music, ImageIcon, Package, Zap } from "lucide-react"
import Image from "next/image"

export default function ExplorePage() {
  const [activeTab, setActiveTab] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [priceRange, setPriceRange] = useState([0, 100])
  const [showFilters, setShowFilters] = useState(false)

// Filter items based on active tab, search query, and other filters
  const filteredItems = marketplaceItems.filter((item) => {
    // Filter by category
    if (activeTab !== "all" && item.category !== activeTab) return false

// Filter by search query
    if (
      searchQuery &&
      !item.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
      !item.creator.toLowerCase().includes(searchQuery.toLowerCase())
    )
      return false

return true
  })

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-12">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <h1 className="text-4xl font-bold mb-2">Explore Marketplace</h1>
          <p className="text-gray-400 mb-8">Discover and collect unique music assets from creators around the world.</p>
        </motion.div>

<div className="flex flex-col md:flex-row gap-4 mb-8">
          <div className="relative flex-grow">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-4 w-4" />
            <Input
              placeholder="Search by title, creator, or keyword"
              className="pl-10 bg-gray-900/60 border-gray-800"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>

<Button
            variant="outline"
            className="border-gray-700 text-gray-400 hover:bg-gray-800 flex items-center gap-2"
            onClick={() => setShowFilters(!showFilters)}
          >
            <Filter className="h-4 w-4" /> Filters
          </Button>
        </div>

{showFilters && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="bg-gray-900/60 border border-gray-800 rounded-lg p-6 mb-8"
          >
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="space-y-4">
                <h3 className="font-medium">Blockchain</h3>
                <div className="space-y-2">
                  <div className="flex items-center">
                    <input type="checkbox" id="ethereum" className="mr-2" />
                    <label htmlFor="ethereum">Ethereum</label>
                  </div>
                  <div className="flex items-center">
                    <input type="checkbox" id="solana" className="mr-2" />
                    <label htmlFor="solana">Solana</label>
                  </div>
                  <div className="flex items-center">
                    <input type="checkbox" id="tron" className="mr-2" />
                    <label htmlFor="tron">Tron</label>
                  </div>
                </div>
              </div>

<div className="space-y-4">
                <h3 className="font-medium">Price Range</h3>
                <Slider
                  defaultValue={[0, 100]}
                  max={100}
                  step={1}
                  value={priceRange}
                  onValueChange={setPriceRange}
                  className="py-4"
                />
                <div className="flex justify-between text-sm text-gray-400">
                  <span>Min: ${priceRange[0]}</span>
                  <span>Max: ${priceRange[1]}</span>
                </div>
              </div>

<div className="space-y-4">
                <h3 className="font-medium">Sort By</h3>
                <select className="w-full bg-gray-800 border border-gray-700 rounded-md p-2">
                  <option>Newest First</option>
                  <option>Price: Low to High</option>
                  <option>Price: High to Low</option>
                  <option>Most Popular</option>
                </select>
              </div>
            </div>

<div className="flex justify-end mt-6">
              <Button variant="outline" className="mr-2 border-gray-700 text-gray-400 hover:bg-gray-800">
                Reset
              </Button>
              <Button className="bg-purple-600 hover:bg-purple-700">Apply Filters</Button>
            </div>
          </motion.div>
        )}

<Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="bg-gray-800/50 border border-gray-700">
            <TabsTrigger value="all" className="data-[state=active]:bg-purple-900/50">
              All
            </TabsTrigger>
            <TabsTrigger value="music" className="data-[state=active]:bg-purple-900/50">
              <Music className="h-4 w-4 mr-2" /> Music
            </TabsTrigger>
            <TabsTrigger value="artwork" className="data-[state=active]:bg-purple-900/50">
              <ImageIcon className="h-4 w-4 mr-2" /> Artwork
            </TabsTrigger>
            <TabsTrigger value="physical" className="data-[state=active]:bg-purple-900/50">
              <Package className="h-4 w-4 mr-2" /> Physical
            </TabsTrigger>
            <TabsTrigger value="experience" className="data-[state=active]:bg-purple-900/50">
              <Zap className="h-4 w-4 mr-2" /> Experiences
            </TabsTrigger>
          </TabsList>
        </Tabs>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {filteredItems.length > 0 ? (
            filteredItems.map((item, index) => (
              <motion.div
                key={item.id}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.3, delay: index * 0.05 }}
              >
                <Card className="bg-gray-900/60 border-gray-800 overflow-hidden hover:border-purple-500/50 transition-all duration-300">
                  <div className="relative h-48 w-full overflow-hidden">
                    <Image
                      src={item.image || "/placeholder.svg"}
                      alt={item.title}
                      fill
                      className="object-cover transition-transform duration-500 hover:scale-110"
                    />
                    <Badge className="absolute top-2 right-2 bg-black/60 backdrop-blur-sm border border-white/10">
                      {item.blockchain}
                    </Badge>
                    {item.featured && (
                      <Badge className="absolute top-2 left-2 bg-purple-600/80 backdrop-blur-sm border border-purple-400/20">
                        Featured
                      </Badge>
                    )}
                  </div>
                  <CardContent className="pt-4">
                    <h3 className="font-bold text-lg mb-1">{item.title}</h3>
                    <p className="text-gray-400 text-sm mb-2">by {item.creator}</p>
                    <p className="text-xs text-gray-500 mb-2">{item.type}</p>
                    <div className="flex justify-between items-center">
                      <span className="font-semibold text-purple-400">{item.price}</span>
                      <div className="flex items-center text-gray-400 text-sm">
                        <Heart className="h-4 w-4 mr-1" /> {item.likes}
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="pt-0">
                    <Button className="w-full bg-purple-600 hover:bg-purple-700">
                      <ShoppingCart className="h-4 w-4 mr-2" /> Purchase
                    </Button>
                  </CardFooter>
                </Card>
              </motion.div>
            ))
          ) : (
            <div className="col-span-full text-center py-12">
              <p className="text-gray-400 text-lg mb-4">No items found matching your criteria</p>
              <Button
                variant="outline"
                className="border-purple-500 text-purple-400 hover:bg-purple-950"
                onClick={() => {
                  setSearchQuery("")
                  setActiveTab("all")
                  setPriceRange([0, 100])
                }}
              >
                Reset Filters
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/explore/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Music, Twitter, Instagram, Youtube, Github } from "lucide-react"

export default function Footer() {
  return (
    <footer className="bg-black border-t border-gray-800 text-white">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="md:col-span-1">
            <div className="flex items-center mb-4">
              <Music className="h-6 w-6 text-purple-500 mr-2" />
              <span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">
                Music Nodes
              </span>
            </div>
            <p className="text-gray-400 mb-4">
              Digital cards with utility assets for music creatives. Buy, sell, trade, and license your work through
              smart contracts and AI-powered promotion.
            </p>
            <div className="flex space-x-4">
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-purple-400">
                <Twitter className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-purple-400">
                <Instagram className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-purple-400">
                <Youtube className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-purple-400">
                <Github className="h-5 w-5" />
              </Button>
            </div>
          </div>

<div>
            <h3 className="font-semibold text-lg mb-4">Platform</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/explore" className="text-gray-400 hover:text-purple-400">
                  Explore
                </Link>
              </li>
              <li>
                <Link href="/create" className="text-gray-400 hover:text-purple-400">
                  Create Node
                </Link>
              </li>
              <li>
                <Link href="/marketplace" className="text-gray-400 hover:text-purple-400">
                  Marketplace
                </Link>
              </li>
              <li>
                <Link href="/agents" className="text-gray-400 hover:text-purple-400">
                  AI Agents
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="font-semibold text-lg mb-4">Resources</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/learn" className="text-gray-400 hover:text-purple-400">
                  Learn
                </Link>
              </li>
              <li>
                <Link href="/faq" className="text-gray-400 hover:text-purple-400">
                  FAQ
                </Link>
              </li>
              <li>
                <Link href="/support" className="text-gray-400 hover:text-purple-400">
                  Support
                </Link>
              </li>
              <li>
                <Link href="/blog" className="text-gray-400 hover:text-purple-400">
                  Blog
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="font-semibold text-lg mb-4">Stay Updated</h3>
            <p className="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and features.</p>
            <div className="flex space-x-2">
              <Input placeholder="Your email" className="bg-gray-900 border-gray-700" />
              <Button className="bg-purple-600 hover:bg-purple-700">Subscribe</Button>
            </div>
          </div>
        </div>

<div className="border-t border-gray-800 mt-12 pt-6 flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-500 text-sm mb-4 md:mb-0">
            © {new Date().getFullYear()} Music Nodes. All rights reserved.
          </p>
          <div className="flex space-x-6">
            <Link href="/terms" className="text-gray-500 text-sm hover:text-purple-400">
              Terms of Service
            </Link>
            <Link href="/privacy" className="text-gray-500 text-sm hover:text-purple-400">
              Privacy Policy
            </Link>
            <Link href="/cookies" className="text-gray-500 text-sm hover:text-purple-400">
              Cookie Policy
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="lib/blockchain/ethereum-contract.ts" isMerged="true"
import { ethers } from "ethers"
import type { MusicNodeAsset, MintOptions } from "@/types/blockchain"

// ABI for the ERC-1155 Music Nodes contract
const MUSIC_NODES_ABI = [
  "function mint(address to, uint256 id, uint256 amount, bytes memory data) public",
  "function balanceOf(address account, uint256 id) public view returns (uint256)",
  "function setURI(uint256 id, string memory uri) public",
  "function isApprovedForAll(address account, address operator) public view returns (bool)",
  "function setApprovalForAll(address operator, bool approved) public",
  "function safeTransferFrom(address from, address to, uint256 id, uint256 amount, bytes memory data) public",
  "event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 id, uint256 value)",
  "event URI(string value, uint256 indexed id)",
]

/**
 * Service for interacting with Ethereum-based Music Node assets
 */
export class EthereumMusicNodeService {
  private provider: ethers.providers.Web3Provider
  private contract: ethers.Contract
  private signer: ethers.Signer | null = null

constructor(contractAddress: string) {
    // Initialize provider from browser window.ethereum
    this.provider = new ethers.providers.Web3Provider(window.ethereum)
    this.contract = new ethers.Contract(contractAddress, MUSIC_NODES_ABI, this.provider)
  }

/**
   * Connect wallet and get signer
   */
  async connect(): Promise<string> {
    await this.provider.send("eth_requestAccounts", [])
    this.signer = this.provider.getSigner()
    return await this.signer.getAddress()
  }

/**
   * Mint a new Music Node NFT
   * @param options Minting options
   * @returns Transaction hash
   */
  async mintMusicNode(options: MintOptions): Promise<string> {
    if (!this.signer) throw new Error("Wallet not connected")

const contractWithSigner = this.contract.connect(this.signer)
    const address = await this.signer.getAddress()

// Create IPFS metadata before minting
    const metadataUri = await this.createMetadata(options.metadata)

// Mint the token
    const tx = await contractWithSigner.mint(
      address,
      options.tokenId,
      options.amount || 1,
      ethers.utils.toUtf8Bytes(metadataUri),
    )

await tx.wait()

// Set token URI separately
    const uriTx = await contractWithSigner.setURI(options.tokenId, metadataUri)
    await uriTx.wait()

return tx.hash
  }

/**
   * Create metadata on IPFS
   */
  private async createMetadata(metadata: MusicNodeAsset): Promise<string> {
    // Use NFT.Storage or Pinata to store metadata
    // This is a simplified version - would need actual IPFS integration
    const response = await fetch("/api/store-metadata", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(metadata),
    })

const data = await response.json()
    return `ipfs://${data.ipfsHash}`
  }

/**
   * Get user's Music Node assets
   */
  async getUserAssets(address: string): Promise<number[]> {
    // This is simplified - would need to index events from contract to get all tokenIds
    // In production, use a subgraph or indexing service
    const events = await this.contract.queryFilter(this.contract.filters.TransferSingle(null, null, address))

const tokenIds = events
      .map((event) => {
        const args = event.args
        return args ? Number(args.id) : 0
      })
      .filter((id) => id > 0)

return [...new Set(tokenIds)] // Return unique tokenIds
  }
}
[V0_FILE]typescriptreact:file="types/blockchain.ts" isMerged="true"
export interface MusicNodeAsset {
  name: string
  description: string
  image: string // IPFS URI for the asset image
  audio?: string // IPFS URI for audio file if applicable
  attributes: {
    type: string // "audio", "artwork", "physical", "experience"
    creator: string
    blockchain: string
    category: string
    royaltyPercentage: number
    edition?: {
      number: number
      total: number
    }
    // Additional properties for smart contract logic
    hasCommercialRights: boolean
    hasExclusiveContent: boolean
    hasCommunityAccess: boolean
    hasSharingRights: boolean
  }
}

export interface MintOptions {
  tokenId: number
  amount?: number
  metadata: MusicNodeAsset
}

export interface BlockchainTransaction {
  hash: string
  status: "pending" | "confirmed" | "failed"
  timestamp: number
  blockNumber?: number
  from: string
  to: string
  value?: string
}
[V0_FILE]typescriptreact:file="lib/ai/promotion-agent.ts" isMerged="true"
import type { SocialMediaPlatform, AudienceAnalysis, PromotionStrategy } from "@/types/ai"
import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

// AI Agent for music promotion
export class PromotionAgent {
  private model = openai("gpt-4o")
  private userProfile: any
  private musicAsset: any

constructor(userProfile: any, musicAsset: any) {
    this.userProfile = userProfile
    this.musicAsset = musicAsset
  }

/**
   * Analyze target audience based on music characteristics
   */
  async analyzeAudience(): Promise<AudienceAnalysis> {
    const { text } = await generateText({
      model: this.model,
      prompt: `Analyze the target audience for a music asset with the following characteristics:
      - Genre: ${this.musicAsset.genre}
      - Style: ${this.musicAsset.style}
      - Tone: ${this.musicAsset.tone}
      - Lyrics theme: ${this.musicAsset.lyricsTheme}
      - Similar artists: ${this.musicAsset.similarArtists.join(", ")}
      
      Return a structured JSON object with these fields:
      - primaryDemographic (age range, gender split)
      - interests (array of interests)
      - platforms (array of social media platforms ranked by relevance)
      - keywords (array of keywords for promotion)
      - recommendedApproach (brief description of promotional approach)`,
      system:
        "You are an AI music industry expert specializing in audience analysis and marketing. Return only valid JSON.",
    })

try {
      return JSON.parse(text) as AudienceAnalysis
    } catch (error) {
      console.error("Failed to parse audience analysis:", error)
      throw new Error("Failed to analyze audience")
    }
  }

/**
   * Generate promotion strategy for specific platforms
   */
  async generatePromotionStrategy(platforms: SocialMediaPlatform[]): Promise<PromotionStrategy> {
    // First analyze the audience
    const audienceAnalysis = await this.analyzeAudience()

const { text } = await generateText({
      model: this.model,
      prompt: `Create a comprehensive promotion strategy for a music asset with the following details:
      - Title: ${this.musicAsset.title}
      - Artist: ${this.userProfile.artistName}
      - Genre: ${this.musicAsset.genre}
      - Target audience: ${JSON.stringify(audienceAnalysis.primaryDemographic)}
      - Target platforms: ${platforms.join(", ")}
      
      For each platform, provide:
      1. Content type (video, image, text)
      2. Posting frequency
      3. Best time to post
      4. Content themes
      5. Hashtag strategy
      6. Engagement techniques
      
      Return as structured JSON with platforms as keys and strategies as values.`,
      system: "You are an AI social media marketing specialist for musicians. Return only valid JSON.",
    })

try {
      return JSON.parse(text) as PromotionStrategy
    } catch (error) {
      console.error("Failed to parse promotion strategy:", error)
      throw new Error("Failed to generate promotion strategy")
    }
  }

/**
   * Generate specific content for a platform post
   */
  async generateContentForPost(platform: SocialMediaPlatform, contentType: string): Promise<string> {
    const { text } = await generateText({
      model: this.model,
      prompt: `Create ${contentType} content for ${platform} to promote the music asset titled "${this.musicAsset.title}" by ${this.userProfile.artistName}.
      
      The content should be engaging, authentic to the artist's voice, and optimized for the platform.
      
      Additional context:
      - Genre: ${this.musicAsset.genre}
      - Release type: ${this.musicAsset.type}
      - Key selling points: ${this.musicAsset.sellingPoints.join(", ")}`,
      system:
        "You are a social media content creator specialized in music promotion. Create content that's authentic and engaging.",
    })

return text
  }
}
[V0_FILE]typescript:file="types/ai.ts" isMerged="true"
export type SocialMediaPlatform = "instagram" | "tiktok" | "twitter" | "youtube" | "facebook" | "spotify" | "soundcloud"

export interface AudienceAnalysis {
  primaryDemographic: {
    ageRange: string
    genderSplit: {
      male: number
      female: number
      other: number
    }
  }
  interests: string[]
  platforms: SocialMediaPlatform[]
  keywords: string[]
  recommendedApproach: string
}

export interface PlatformStrategy {
  contentType: string[]
  postingFrequency: string
  bestTimeToPost: string[]
  contentThemes: string[]
  hashtags: string[]
  engagementTechniques: string[]
}

export type PromotionStrategy = {
  [key in SocialMediaPlatform]?: PlatformStrategy
}
[V0_FILE]typescriptreact:file="components/digital-card/card-renderer.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { Play, Pause, Download, Share2 } from "lucide-react"
import Image from "next/image"
import type { MusicNodeAsset } from "@/types/blockchain"
import { useAudioVisualizer } from "@/hooks/use-audio-visualizer"

interface CardRendererProps {
  asset: MusicNodeAsset
  isFlippable?: boolean
  showControls?: boolean
}

export default function CardRenderer({ asset, isFlippable = true, showControls = true }: CardRendererProps) {
  const [isFlipped, setIsFlipped] = useState(false)
  const [isPlaying, setIsPlaying] = useState(false)
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)

// Initialize audio visualizer if audio exists
  const { startVisualizer, stopVisualizer } = useAudioVisualizer(canvasRef, audioRef)

// Handle play/pause
  const togglePlay = () => {
    if (!audioRef.current) return

if (isPlaying) {
      audioRef.current.pause()
      stopVisualizer()
    } else {
      audioRef.current.play()
      startVisualizer()
    }

setIsPlaying(!isPlaying)
  }

// Clean up audio on unmount
  useEffect(() => {
    return () => {
      if (audioRef.current) {
        audioRef.current.pause()
        stopVisualizer()
      }
    }
  }, [stopVisualizer])

const handleFlip = () => {
    if (isFlippable) {
      setIsFlipped(!isFlipped)
    }
  }

return (
    <div className="relative perspective">
      <AnimatePresence initial={false}>
        {!isFlipped ? (
          <motion.div
            key="front"
            className="relative w-full aspect-[3/4] rounded-xl overflow-hidden"
            initial={{ rotateY: 180 }}
            animate={{ rotateY: 0 }}
            exit={{ rotateY: -180 }}
            transition={{ duration: 0.6 }}
          >
            {/* Front of card */}
            <div className="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-pink-900/30 backdrop-blur-sm border border-purple-500/20 rounded-xl overflow-hidden">
              <div className="relative h-full">
                {/* Card image */}
                <div className="absolute inset-0">
                  <Image
                    src={asset.image || "/placeholder.svg"}
                    alt={asset.name}
                    fill
                    className="object-cover opacity-80"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black/40" />
                </div>

{/* Card content */}
                <div className="relative h-full flex flex-col justify-between p-4">
                  <div>
                    <Badge className="bg-black/60 backdrop-blur-sm border border-white/10">
                      {asset.attributes.blockchain}
                    </Badge>

{asset.attributes.edition && (
                      <Badge className="ml-2 bg-purple-600/80 backdrop-blur-sm border border-purple-400/20">
                        #{asset.attributes.edition.number}/{asset.attributes.edition.total}
                      </Badge>
                    )}
                  </div>

<div className="mt-auto">
                    <h3 className="font-bold text-xl mb-1">{asset.name}</h3>
                    <p className="text-gray-300 text-sm mb-2">by {asset.attributes.creator}</p>
                    <p className="text-xs text-gray-400 mb-4">{asset.attributes.type}</p>

{/* Audio visualizer */}
                    {asset.audio && (
                      <div className="mb-3">
                        <canvas ref={canvasRef} className="w-full h-12 rounded-md bg-black/30" />
                        <audio ref={audioRef} src={asset.audio} onEnded={() => setIsPlaying(false)} />
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

{/* Card controls */}
            {showControls && (
              <div className="absolute bottom-4 left-0 right-0 px-4 flex justify-between">
                <div>
                  {asset.audio && (
                    <button
                      onClick={togglePlay}
                      className="p-2 rounded-full bg-purple-600/90 hover:bg-purple-500/90 mr-2"
                    >
                      {isPlaying ? <Pause size={16} /> : <Play size={16} />}
                    </button>
                  )}
                </div>

<div>
                  <button onClick={() => {}} className="p-2 rounded-full bg-black/60 hover:bg-black/80 mr-2">
                    <Download size={16} />
                  </button>

<button onClick={() => {}} className="p-2 rounded-full bg-black/60 hover:bg-black/80">
                    <Share2 size={16} />
                  </button>
                </div>
              </div>
            )}

{isFlippable && (
              <button
                className="absolute top-2 right-2 p-1 rounded-full bg-white/10 hover:bg-white/20 text-xs"
                onClick={handleFlip}
              >
                Details
              </button>
            )}
          </motion.div>
        ) : (
          <motion.div
            key="back"
            className="relative w-full aspect-[3/4] rounded-xl overflow-hidden"
            initial={{ rotateY: -180 }}
            animate={{ rotateY: 0 }}
            exit={{ rotateY: 180 }}
            transition={{ duration: 0.6 }}
          >
            {/* Back of card - details */}
            <div className="absolute inset-0 bg-gray-900/90 backdrop-blur-sm border border-purple-500/20 rounded-xl overflow-hidden p-4">
              <button
                className="absolute top-2 right-2 p-1 rounded-full bg-white/10 hover:bg-white/20 text-xs"
                onClick={handleFlip}
              >
                Back
              </button>

<h3 className="font-bold text-lg mb-3">{asset.name}</h3>
              <p className="text-gray-300 text-sm mb-4">{asset.description}</p>

<div className="space-y-3">
                <div>
                  <h4 className="text-xs font-medium text-gray-400">Creator</h4>
                  <p className="text-sm">{asset.attributes.creator}</p>
                </div>

<div>
                  <h4 className="text-xs font-medium text-gray-400">Type</h4>
                  <p className="text-sm">{asset.attributes.type}</p>
                </div>

<div>
                  <h4 className="text-xs font-medium text-gray-400">Rights & Licenses</h4>
                  <div className="flex flex-wrap gap-2 mt-1">
                    {asset.attributes.hasCommercialRights && (
                      <Badge variant="outline" className="border-green-500/50 text-green-400 text-xs">
                        Commercial Use
                      </Badge>
                    )}
                    {asset.attributes.hasExclusiveContent && (
                      <Badge variant="outline" className="border-blue-500/50 text-blue-400 text-xs">
                        Exclusive Content
                      </Badge>
                    )}
                    {asset.attributes.hasCommunityAccess && (
                      <Badge variant="outline" className="border-amber-500/50 text-amber-400 text-xs">
                        Community Access
                      </Badge>
                    )}
                    {asset.attributes.hasSharingRights && (
                      <Badge variant="outline" className="border-purple-500/50 text-purple-400 text-xs">
                        Sharing Rights
                      </Badge>
                    )}
                  </div>
                </div>

<div>
                  <h4 className="text-xs font-medium text-gray-400">Royalty</h4>
                  <p className="text-sm">{asset.attributes.royaltyPercentage}% on secondary sales</p>
                </div>

<div>
                  <h4 className="text-xs font-medium text-gray-400">Blockchain</h4>
                  <p className="text-sm">{asset.attributes.blockchain}</p>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-audio-visualizer.ts" isMerged="true"
"use client"

import type React from "react"

import { useCallback, useEffect, useRef } from "react"

export function useAudioVisualizer(
  canvasRef: React.RefObject<HTMLCanvasElement>,
  audioRef: React.RefObject<HTMLAudioElement>,
) {
  const animationFrameId = useRef<number | null>(null)
  const analyzerRef = useRef<AnalyserNode | null>(null)
  const dataArrayRef = useRef<Uint8Array | null>(null)

// Clean up animation frame on unmount
  useEffect(() => {
    return () => {
      if (animationFrameId.current) {
        cancelAnimationFrame(animationFrameId.current)
      }
    }
  }, [])

// Setup audio context and analyzer
  const setupAnalyzer = useCallback(() => {
    if (!audioRef.current) return null

const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
    const analyzer = audioContext.createAnalyser()
    analyzer.fftSize = 256

const bufferLength = analyzer.frequencyBinCount
    const dataArray = new Uint8Array(bufferLength)

const audioSource = audioContext.createMediaElementSource(audioRef.current)
    audioSource.connect(analyzer)
    analyzer.connect(audioContext.destination)

analyzerRef.current = analyzer
    dataArrayRef.current = dataArray

return { analyzer, dataArray, bufferLength }
  }, [audioRef])

// Render the visualizer
  const renderVisualizer = useCallback(() => {
    if (!canvasRef.current || !analyzerRef.current || !dataArrayRef.current) return

const canvas = canvasRef.current
    const ctx = canvas.getContext("2d")
    if (!ctx) return

const analyzer = analyzerRef.current
    const dataArray = dataArrayRef.current
    const bufferLength = analyzer.frequencyBinCount

// Set canvas dimensions
    canvas.width = canvas.offsetWidth * window.devicePixelRatio
    canvas.height = canvas.offsetHeight * window.devicePixelRatio

// Get frequency data
    analyzer.getByteFrequencyData(dataArray)

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Define bar width based on canvas and buffer length
    const barWidth = (canvas.width / bufferLength) * 1.5
    let x = 0

// Draw bars
    for (let i = 0; i < bufferLength; i++) {
      const barHeight = (dataArray[i] / 255) * canvas.height

// Create gradient
      const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
      gradient.addColorStop(0, "rgba(159, 122, 234, 0.8)") // Purple
      gradient.addColorStop(1, "rgba(236, 72, 153, 0.8)") // Pink

ctx.fillStyle = gradient
      ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight)

x += barWidth + 1
    }

// Request next frame
    animationFrameId.current = requestAnimationFrame(renderVisualizer)
  }, [canvasRef])

// Start the visualizer
  const startVisualizer = useCallback(() => {
    if (!setupAnalyzer()) return
    renderVisualizer()
  }, [setupAnalyzer, renderVisualizer])

// Stop the visualizer
  const stopVisualizer = useCallback(() => {
    if (animationFrameId.current) {
      cancelAnimationFrame(animationFrameId.current)
      animationFrameId.current = null
    }
  }, [])

return { startVisualizer, stopVisualizer }
}
[V0_FILE]typescriptreact:file="lib/db/marketplace-schema.ts" isMerged="true"
/**
 * Database schema and types for the Music Nodes marketplace
 */

// Marketplace listing types and interfaces
export interface MarketplaceListing {
  id: string
  assetId: string
  sellerId: string
  price: {
    amount: string
    currency: "ETH" | "SOL" | "TRX" | "USD"
  }
  status: "active" | "sold" | "canceled"
  createdAt: Date
  updatedAt: Date
  expiresAt?: Date
  listingType: "fixed" | "auction"
  auctionDetails?: AuctionDetails
  metadata: ListingMetadata
}

export interface AuctionDetails {
  startingPrice: string
  reservePrice?: string
  minimumBid: string
  endTime: Date
  highestBid?: {
    amount: string
    bidderId: string
    timestamp: Date
  }
  bidHistory: Array<{
    amount: string
    bidderId: string
    timestamp: Date
  }>
}

export interface ListingMetadata {
  title: string
  description: string
  tags: string[]
  featured: boolean
  promotionLevel: "none" | "basic" | "premium"
  visibility: "public" | "private" | "followers"
}

// User-related types for marketplace integration
export interface UserProfile {
  id: string
  username: string
  displayName: string
  avatarUrl?: string
  bio?: string
  socialLinks?: {
    website?: string
    twitter?: string
    instagram?: string
    spotify?: string
    soundcloud?: string
  }
  walletAddresses: string[]
  createdAt: Date
  updatedAt: Date
  followerCount: number
  followingCount: number
  salesCount: number
  purchasesCount: number
  verificationStatus: "none" | "pending" | "verified"
  settings: UserSettings
}

export interface UserSettings {
  notificationPreferences: {
    sales: boolean
    purchases: boolean
    bids: boolean
    newFollowers: boolean
    promotions: boolean
  }
  displayPreferences: {
    theme: "light" | "dark" | "system"
    showActivity: boolean
    showBalance: boolean
  }
}

// Transaction and activity tracking
export interface Transaction {
  id: string
  type: "sale" | "purchase" | "bid" | "mint" | "transfer"
  assetId: string
  listingId?: string
  fromUserId: string
  toUserId: string
  amount: string
  currency: "ETH" | "SOL" | "TRX" | "USD"
  blockchainTxHash?: string
  status: "pending" | "completed" | "failed" | "canceled"
  createdAt: Date
  updatedAt: Date
  metadata?: any
}

// Sample database schema for SQL databases
export const SQL_SCHEMAS = {
  assets: `
    CREATE TABLE assets (
      id VARCHAR(36) PRIMARY KEY,
      name VARCHAR(255) NOT NULL,
      description TEXT,
      owner_id VARCHAR(36) NOT NULL,
      creator_id VARCHAR(36) NOT NULL,
      blockchain VARCHAR(50) NOT NULL,
      token_id VARCHAR(100),
      contract_address VARCHAR(100),
      asset_type VARCHAR(50) NOT NULL,
      image_url TEXT NOT NULL,
      audio_url TEXT,
      metadata JSONB NOT NULL,
      created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
      updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
    );
  `,

listings: `
    CREATE TABLE marketplace_listings (
      id VARCHAR(36) PRIMARY KEY,
      asset_id VARCHAR(36) NOT NULL,
      seller_id VARCHAR(36) NOT NULL,
      price_amount VARCHAR(50) NOT NULL,
      price_currency VARCHAR(10) NOT NULL,
      status VARCHAR(20) NOT NULL,
      created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
      updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
      expires_at TIMESTAMP WITH TIME ZONE,
      listing_type VARCHAR(20) NOT NULL,
      auction_details JSONB,
      metadata JSONB NOT NULL,
      FOREIGN KEY (asset_id) REFERENCES assets (id),
      FOREIGN KEY (seller_id) REFERENCES users (id)
    );
  `,

transactions: `
    CREATE TABLE transactions (
      id VARCHAR(36) PRIMARY KEY,
      type VARCHAR(20) NOT NULL,
      asset_id VARCHAR(36) NOT NULL,
      listing_id VARCHAR(36),
      from_user_id VARCHAR(36) NOT NULL,
      to_user_id VARCHAR(36) NOT NULL,
      amount VARCHAR(50) NOT NULL,
      currency VARCHAR(10) NOT NULL,
      blockchain_tx_hash VARCHAR(100),
      status VARCHAR(20) NOT NULL,
      created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
      updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
      metadata JSONB,
      FOREIGN KEY (asset_id) REFERENCES assets (id),
      FOREIGN KEY (listing_id) REFERENCES marketplace_listings (id),
      FOREIGN KEY (from_user_id) REFERENCES users (id),
      FOREIGN KEY (to_user_id) REFERENCES users (id)
    );
  `,
}
[V0_FILE]typescriptreact:file="lib/hooks/use-marketplace.ts" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { useRouter } from "next/navigation"
import { createListing, purchaseItem, placeBid } from "@/app/actions/marketplace-actions"
import type { MarketplaceListing } from "@/lib/db/marketplace-schema"
import { toast } from "@/hooks/use-toast"

export function useMarketplace(initialListings: MarketplaceListing[] = []) {
  const [listings, setListings] = useState<MarketplaceListing[]>(initialListings)
  const [isLoading, setIsLoading] = useState(false)
  const [filters, setFilters] = useState({
    category: "all",
    blockchain: "all",
    priceRange: [0, 1000],
    sortBy: "newest",
  })
  const router = useRouter()

// Load listings with filters
  const loadListings = useCallback(
    async (page = 1) => {
      setIsLoading(true)
      try {
        const queryParams = new URLSearchParams()

if (filters.category !== "all") {
          queryParams.set("category", filters.category)
        }

if (filters.blockchain !== "all") {
          queryParams.set("blockchain", filters.blockchain)
        }

queryParams.set("minPrice", filters.priceRange[0].toString())
        queryParams.set("maxPrice", filters.priceRange[1].toString())
        queryParams.set("sortBy", filters.sortBy)
        queryParams.set("page", page.toString())

const response = await fetch(`/api/marketplace?${queryParams.toString()}`)

if (!response.ok) {
          throw new Error("Failed to load listings")
        }

const data = await response.json()
        setListings((prev) => (page === 1 ? data.listings : [...prev, ...data.listings]))

return data.hasMore
      } catch (error) {
        toast({
          title: "Error",
          description: "Failed to load marketplace listings",
          variant: "destructive",
        })
        return false
      } finally {
        setIsLoading(false)
      }
    },
    [filters],
  )

// Update filters
  const updateFilters = useCallback((newFilters: Partial<typeof filters>) => {
    setFilters((prev) => ({
      ...prev,
      ...newFilters,
    }))
  }, [])

// Handle listing creation
  const handleCreateListing = useCallback(
    async (listingData: any) => {
      setIsLoading(true)
      try {
        const result = await createListing(listingData)

if (result.success) {
          toast({
            title: "Success",
            description: "Your item has been listed in the marketplace",
          })
          router.push(`/marketplace/listing/${result.listingId}`)
        }

return result
      } catch (error: any) {
        toast({
          title: "Failed to create listing",
          description: error.message || "An unexpected error occurred",
          variant: "destructive",
        })
        throw error
      } finally {
        setIsLoading(false)
      }
    },
    [router],
  )

// Handle purchase
  const handlePurchase = useCallback(
    async (listingId: string) => {
      setIsLoading(true)
      try {
        const result = await purchaseItem(listingId)

if (result.success) {
          toast({
            title: "Purchase successful!",
            description: "The item has been added to your collection",
          })
          router.push(`/profile/collection`)
        }

return result
      } catch (error: any) {
        toast({
          title: "Purchase failed",
          description: error.message || "An unexpected error occurred",
          variant: "destructive",
        })
        throw error
      } finally {
        setIsLoading(false)
      }
    },
    [router],
  )

// Handle bidding
  const handlePlaceBid = useCallback(
    async (listingId: string, amount: string) => {
      setIsLoading(true)
      try {
        const result = await placeBid(listingId, amount)

if (result.success) {
          toast({
            title: "Bid placed successfully!",
            description: "You are now the highest bidder",
          })
          router.refresh()
        }

return result
      } catch (error: any) {
        toast({
          title: "Failed to place bid",
          description: error.message || "An unexpected error occurred",
          variant: "destructive",
        })
        throw error
      } finally {
        setIsLoading(false)
      }
    },
    [router],
  )

// Initial load
  useEffect(() => {
    if (initialListings.length === 0) {
      loadListings()
    }
  }, [initialListings.length, loadListings])

// Reload when filters change
  useEffect(() => {
    loadListings()
  }, [filters, loadListings])

return {
    listings,
    isLoading,
    filters,
    updateFilters,
    loadMore: () => loadListings(Math.ceil(listings.length / 12) + 1),
    createListing: handleCreateListing,
    purchaseItem: handlePurchase,
    placeBid: handlePlaceBid,
  }
}
[V0_FILE]typescriptreact:file="types/auth.ts" isMerged="true"
export type AuthMethod = "email" | "google" | "twitter" | "discord" | "wallet"

export interface User {
  id: string
  email?: string
  username: string
  displayName: string
  avatarUrl?: string
  createdAt: Date
  updatedAt: Date
  isEmailVerified?: boolean
}

export interface LinkedWallet {
  id: string
  userId: string
  walletType: "ethereum" | "solana" | "tron"
  address: string
  isPrimary: boolean
  createdAt: Date
}

export interface NFTAccess {
  contractAddress: string
  tokenId?: number
  blockchain: "ethereum" | "solana" | "tron"
  requiredBalance?: number
}
[V0_FILE]typescriptreact:file="components/auth/nft-gated-content.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useAuth } from "@/lib/auth/auth-provider"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Lock, Unlock, Wallet } from "lucide-react"
import MultiAuthModal from "./multi-auth-modal"

interface NFTGatedContentProps {
  contractAddress: string
  tokenId?: number
  blockchain?: "ethereum" | "solana" | "tron"
  title: string
  description: string
  children: React.ReactNode
  fallbackContent?: React.ReactNode
}

export default function NFTGatedContent({
  contractAddress,
  tokenId,
  blockchain = "ethereum",
  title,
  description,
  children,
  fallbackContent,
}: NFTGatedContentProps) {
  const { user, verifyNFTAccess, linkedWallets } = useAuth()
  const [hasAccess, setHasAccess] = useState<boolean | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [showAuthModal, setShowAuthModal] = useState(false)

useEffect(() => {
    async function checkAccess() {
      if (user) {
        setIsLoading(true)
        const access = await verifyNFTAccess(contractAddress, tokenId)
        setHasAccess(access)
        setIsLoading(false)
      } else {
        setHasAccess(false)
        setIsLoading(false)
      }
    }

checkAccess()
  }, [user, contractAddress, tokenId, verifyNFTAccess, linkedWallets])

if (isLoading) {
    return (
      <Card className="bg-gray-900/60 border-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Lock className="h-5 w-5 mr-2 text-purple-400" />
            {title}
          </CardTitle>
          <CardDescription>{description}</CardDescription>
        </CardHeader>
        <CardContent className="flex justify-center items-center py-12">
          <div className="animate-pulse flex flex-col items-center">
            <div className="h-12 w-12 rounded-full bg-purple-900/50 mb-4"></div>
            <div className="h-4 w-32 bg-gray-800 rounded mb-2"></div>
            <div className="h-3 w-24 bg-gray-800 rounded"></div>
          </div>
        </CardContent>
      </Card>
    )
  }

if (hasAccess) {
    return (
      <div>
        <div className="mb-4 flex items-center">
          <Unlock className="h-5 w-5 mr-2 text-green-400" />
          <span className="text-green-400 text-sm font-medium">NFT Access Verified</span>
        </div>
        {children}
      </div>
    )
  }

return (
    <>
      <Card className="bg-gray-900/60 border-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Lock className="h-5 w-5 mr-2 text-purple-400" />
            {title}
          </CardTitle>
          <CardDescription>{description}</CardDescription>
        </CardHeader>
        <CardContent>
          {fallbackContent || (
            <div className="text-center py-8">
              <Lock className="h-16 w-16 mx-auto mb-4 text-gray-600" />
              <h3 className="text-lg font-medium mb-2">NFT Access Required</h3>
              <p className="text-gray-400 mb-4">
                This content requires ownership of a specific NFT from the {blockchain} blockchain.
              </p>
            </div>
          )}
        </CardContent>
        <CardFooter className="flex flex-col space-y-3">
          {user ? (
            <>
              <Button
                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                onClick={() => setShowAuthModal(true)}
              >
                <Wallet className="h-4 w-4 mr-2" />
                Connect NFT Wallet
              </Button>
              <p className="text-xs text-gray-500 text-center">
                Connect a wallet that holds the required NFT to access this content
              </p>
            </>
          ) : (
            <>
              <Button
                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                onClick={() => setShowAuthModal(true)}
              >
                Sign In to Access
              </Button>
              <p className="text-xs text-gray-500 text-center">
                Sign in with your account or wallet to verify NFT ownership
              </p>
            </>
          )}
        </CardFooter>
      </Card>

<MultiAuthModal
        isOpen={showAuthModal}
        onClose={() => setShowAuthModal(false)}
        defaultTab={user ? "wallet" : "email"}
        mode="signin"
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function truncateAddress(address: string, startLength = 6, endLength = 4): string {
  if (!address) return ""
  if (address.length <= startLength + endLength) return address
  return `${address.substring(0, startLength)}...${address.substring(address.length - endLength)}`
}

export function getBlockExplorerUrl(blockchainType: string, address: string): string {
  switch (blockchainType.toLowerCase()) {
    case "ethereum":
      return `https://etherscan.io/address/${address}`
    case "solana":
      return `https://explorer.solana.com/address/${address}`
    case "tron":
      return `https://tronscan.org/#/address/${address}`
    default:
      return "#"
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/verify-nft-access/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"
import { verifyJWT } from "@/lib/auth/jwt"
import { verifyNFTAccess } from "@/app/actions/auth-actions"

export async function POST(request: Request) {
  try {
    const { contractAddress, requiredTokenId, requiredBalance } = await request.json()

// Get session token from cookies
    const sessionToken = cookies().get("session_token")?.value

if (!sessionToken) {
      return NextResponse.json({ hasAccess: false }, { status: 401 })
    }

// Verify JWT token
    const payload = await verifyJWT(sessionToken)

if (!payload || !payload.userId) {
      return NextResponse.json({ hasAccess: false }, { status: 401 })
    }

// Verify NFT access
    const result = await verifyNFTAccess({
      userId: payload.userId,
      contractAddress,
      tokenId: requiredTokenId,
      requiredBalance: requiredBalance || 1,
    })

return NextResponse.json({ hasAccess: result.hasAccess })
  } catch (error) {
    console.error("NFT access verification failed:", error)
    return NextResponse.json({ hasAccess: false }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/profile/wallets/page.tsx" isMerged="true"
import type { Metadata } from "next"
import WalletManager from "@/components/profile/wallet-manager"

export const metadata: Metadata = {
  title: "Manage Wallets | Music Nodes",
  description: "Connect and manage your wallets for Music Nodes platform",
}

export default function WalletsPage() {
  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold mb-6">Wallet Management</h1>
      <p className="text-gray-400 mb-8 max-w-3xl">
        Connect multiple wallets to your Music Nodes account to access different blockchain networks and manage your
        digital assets across ecosystems.
      </p>

<div className="max-w-3xl">
        <WalletManager />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import { AuthProvider } from "@/lib/auth/auth-provider"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "Music Nodes - Digital Assets for Music Creatives",
  description: "Buy, sell, trade, and license music assets through smart contracts and AI-powered promotion.",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AuthProvider>
          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
            <Navbar />
            {children}
            <Footer />
          </ThemeProvider>
        </AuthProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/exclusive-content/page.tsx" isMerged="true"
import type { Metadata } from "next"
import NFTGatedContent from "@/components/auth/nft-gated-content"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Music, Download, Calendar, Users } from "lucide-react"
import Image from "next/image"

export const metadata: Metadata = {
  title: "Exclusive Content | Music Nodes",
  description: "Access exclusive content with your Music Nodes NFTs",
}

export default function ExclusiveContentPage() {
  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold mb-2">Exclusive Content</h1>
      <p className="text-gray-400 mb-8 max-w-3xl">
        Access special content and features with your Music Nodes NFTs. Different content requires different NFTs.
      </p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Example of NFT-gated content */}
        <NFTGatedContent
          contractAddress="0x1234567890abcdef1234567890abcdef12345678"
          title="Producer Pack: Lo-Fi Dreams"
          description="Access exclusive samples, stems, and project files from the Lo-Fi Dreams collection."
        >
          <Card className="bg-gray-900/60 border-gray-800">
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>Producer Pack: Lo-Fi Dreams</CardTitle>
                <Badge className="bg-green-600/80 border-green-500/30">Premium</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="relative h-48 rounded-md overflow-hidden">
                  <Image src="/placeholder.svg?height=400&width=300" alt="Lo-Fi Dreams" fill className="object-cover" />
                </div>
                <div className="space-y-4">
                  <div>
                    <h3 className="text-lg font-medium mb-2">Pack Contents</h3>
                    <ul className="space-y-2">
                      <li className="flex items-center">
                        <Music className="h-4 w-4 mr-2 text-purple-400" />
                        <span>24 Drum Loops</span>
                      </li>
                      <li className="flex items-center">
                        <Music className="h-4 w-4 mr-2 text-purple-400" />
                        <span>18 Melodic Samples</span>
                      </li>
                      <li className="flex items-center">
                        <Music className="h-4 w-4 mr-2 text-purple-400" />
                        <span>12 Bass Loops</span>
                      </li>
                      <li className="flex items-center">
                        <Music className="h-4 w-4 mr-2 text-purple-400" />
                        <span>8 Full Project Files</span>
                      </li>
                    </ul>
                  </div>
                  <button className="flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-md">
                    <Download className="h-4 w-4 mr-2" />
                    Download Pack (1.2 GB)
                  </button>
                </div>
              </div>
            </CardContent>
          </Card>
        </NFTGatedContent>

{/* Another example with different NFT requirement */}
        <NFTGatedContent
          contractAddress="0xabcdef1234567890abcdef1234567890abcdef12"
          blockchain="solana"
          title="Virtual Studio Session"
          description="Join an exclusive virtual studio session with top producers."
        >
          <Card className="bg-gray-900/60 border-gray-800">
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>Virtual Studio Session</CardTitle>
                <Badge className="bg-amber-600/80 border-amber-500/30">VIP Access</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="relative h-48 rounded-md overflow-hidden">
                  <Image
                    src="/placeholder.svg?height=400&width=600"
                    alt="Virtual Studio Session"
                    fill
                    className="object-cover"
                  />
                </div>
                <div>
                  <h3 className="text-lg font-medium mb-2">Upcoming Session</h3>
                  <div className="space-y-2">
                    <div className="flex items-center">
                      <Calendar className="h-4 w-4 mr-2 text-purple-400" />
                      <span>June 15, 2023 - 7:00 PM EST</span>
                    </div>
                    <div className="flex items-center">
                      <Users className="h-4 w-4 mr-2 text-purple-400" />
                      <span>With Grammy-winning producer DJ Harmony</span>
                    </div>
                  </div>
                  <p className="text-gray-400 mt-3">
                    Join this exclusive virtual studio session where DJ Harmony will break down his production
                    techniques and answer your questions live.
                  </p>
                  <button className="mt-4 flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-md">
                    Register for Session
                  </button>
                </div>
              </div>
            </CardContent>
          </Card>
        </NFTGatedContent>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/db.ts" isMerged="true"
// Mock database for demonstration purposes
class Database {
  private assets: any[] = []
  private marketplaceListings: any[] = []
  private transactions: any[] = []
  private users: any[] = []

// Asset methods
  asset = {
    findUnique: async ({ where }: { where: any }) => {
      return this.assets.find(
        (asset) => where.id && asset.id === where.id && (where.ownerId ? asset.ownerId === where.ownerId : true),
      )
    },
    update: async ({ where, data }: { where: any; data: any }) => {
      const index = this.assets.findIndex((asset) => asset.id === where.id)
      if (index !== -1) {
        this.assets[index] = { ...this.assets[index], ...data }
        return this.assets[index]
      }
      return null
    },
  }

// Marketplace listing methods
  marketplaceListing = {
    create: async ({ data }: { data: any }) => {
      const listing = { ...data }
      this.marketplaceListings.push(listing)
      return listing
    },
    findUnique: async ({ where, include }: { where: any; include?: any }) => {
      const listing = this.marketplaceListings.find((listing) => {
        const idMatch = where.id ? listing.id === where.id : true
        const statusMatch = where.status ? listing.status === where.status : true
        const typeMatch = where.listingType ? listing.listingType === where.listingType : true
        return idMatch && statusMatch && typeMatch
      })

if (listing && include?.asset) {
        const asset = this.assets.find((asset) => asset.id === listing.assetId)
        return { ...listing, asset }
      }

return listing
    },
    update: async ({ where, data }: { where: any; data: any }) => {
      const index = this.marketplaceListings.findIndex((listing) => listing.id === where.id)
      if (index !== -1) {
        this.marketplaceListings[index] = { ...this.marketplaceListings[index], ...data }
        return this.marketplaceListings[index]
      }
      return null
    },
  }

// Transaction methods
  transaction = {
    create: async ({ data }: { data: any }) => {
      const transaction = { ...data }
      this.transactions.push(transaction)
      return transaction
    },
  }

// User methods
  user = {
    findUnique: async ({ where }: { where: any }) => {
      return this.users.find(
        (user) => (where.id && user.id === where.id) || (where.username && user.username === where.username),
      )
    },
  }
}

// Export a singleton instance of the database
export const db = new Database()
[V0_FILE]typescript:file="lib/auth.ts" isMerged="true"
// Simple authentication module for Music Nodes
// In a production app, you would use NextAuth.js or a similar solution

import { cookies } from "next/headers"

// Mock user data
const MOCK_USER = {
  id: "user-1",
  username: "musiccreator",
  email: "creator@musicnodes.com",
  name: "Music Creator",
  image: "/placeholder.svg?height=100&width=100",
}

/**
 * Get the current authenticated user
 * In a real app, this would verify the session token and return the user
 */
export async function auth() {
  // Check if user is logged in
  const sessionCookie = cookies().get("session")

// For demo purposes, we'll always return a mock user
  // In a real app, you would verify the session and return the actual user
  return sessionCookie ? MOCK_USER : null
}

/**
 * Sign in a user
 */
export async function signIn(credentials: { email: string; password: string }) {
  // In a real app, you would verify credentials against your database
  // For demo purposes, we'll just return success
  return { success: true, user: MOCK_USER }
}

/**
 * Sign out the current user
 */
export async function signOut() {
  // In a real app, you would invalidate the session
  cookies().delete("session")
  return { success: true }
}
[V0_FILE]typescript:file="lib/api-error.ts" isMerged="true"
/**
 * Custom API error class for handling errors in server actions and API routes
 */
export class ApiError extends Error {
  statusCode: number

constructor(message: string, statusCode = 400) {
    super(message)
    this.name = "ApiError"
    this.statusCode = statusCode
  }
}
[V0_FILE]typescriptreact:file="app/actions/marketplace-actions.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { revalidatePath } from "next/cache"
import { z } from "zod"
import { db } from "@/lib/db"
import { auth } from "@/lib/auth"
import { ApiError } from "@/lib/api-error"

// Schema for creating a new listing
const createListingSchema = z.object({
  assetId: z.string().uuid(),
  price: z.object({
    amount: z.string().regex(/^\d+(\.\d+)?$/),
    currency: z.enum(["ETH", "SOL", "TRX", "USD"]),
  }),
  listingType: z.enum(["fixed", "auction"]),
  auctionDetails: z
    .object({
      startingPrice: z.string().regex(/^\d+(\.\d+)?$/),
      reservePrice: z
        .string()
        .regex(/^\d+(\.\d+)?$/)
        .optional(),
      minimumBid: z.string().regex(/^\d+(\.\d+)?$/),
      endTime: z.date().min(new Date()),
    })
    .optional()
    .superRefine((val, ctx) => {
      if (val && ctx.data.listingType === "auction") {
        if (!val.startingPrice || !val.minimumBid || !val.endTime) {
          ctx.addIssue({
            code: z.ZodIssueCode.custom,
            message: "Auction details are required for auction listings",
          })
        }
      }
    }),
  metadata: z.object({
    title: z.string().min(3).max(100),
    description: z.string().max(1000),
    tags: z.array(z.string()).max(10),
    featured: z.boolean().default(false),
    promotionLevel: z.enum(["none", "basic", "premium"]).default("none"),
    visibility: z.enum(["public", "private", "followers"]).default("public"),
  }),
})

/**
 * Create a new marketplace listing
 */
export async function createListing(data: z.infer<typeof createListingSchema>) {
  // Validate the input data
  const validatedData = createListingSchema.parse(data)

// Get the current user
  const user = await auth()
  if (!user) {
    throw new ApiError("Unauthorized", 401)
  }

// Check if the user owns the asset
  const asset = await db.asset.findUnique({
    where: {
      id: validatedData.assetId,
      ownerId: user.id,
    },
  })

if (!asset) {
    throw new ApiError("Asset not found or not owned by user", 404)
  }

// Create the listing
  const listing = await db.marketplaceListing.create({
    data: {
      id: crypto.randomUUID(),
      assetId: validatedData.assetId,
      sellerId: user.id,
      priceAmount: validatedData.price.amount,
      priceCurrency: validatedData.price.currency,
      status: "active",
      listingType: validatedData.listingType,
      auctionDetails: validatedData.auctionDetails || undefined,
      metadata: validatedData.metadata,
      expiresAt: validatedData.listingType === "auction" ? validatedData.auctionDetails?.endTime : undefined,
    },
  })

// Update the asset status
  await db.asset.update({
    where: { id: validatedData.assetId },
    data: { status: "listed" },
  })

revalidatePath("/marketplace")
  revalidatePath(`/profile/${user.username}`)
  revalidatePath(`/asset/${asset.id}`)

return { success: true, listingId: listing.id }
}

/**
 * Purchase an item from the marketplace (fixed price listing)
 */
export async function purchaseItem(listingId: string) {
  // Get the current user
  const user = await auth()
  if (!user) {
    throw new ApiError("Unauthorized", 401)
  }

// Get the listing
  const listing = await db.marketplaceListing.findUnique({
    where: {
      id: listingId,
      status: "active",
      listingType: "fixed",
    },
    include: {
      asset: true,
    },
  })

if (!listing) {
    throw new ApiError("Listing not found or not available", 404)
  }

// Prevent buying your own listing
  if (listing.sellerId === user.id) {
    throw new ApiError("Cannot purchase your own listing", 400)
  }

// In a real app, we would handle payments here
  // For demo purposes, we'll just create the transaction

// Create transaction record
  const transaction = await db.transaction.create({
    data: {
      id: crypto.randomUUID(),
      type: "purchase",
      assetId: listing.assetId,
      listingId: listing.id,
      fromUserId: listing.sellerId,
      toUserId: user.id,
      amount: listing.priceAmount,
      currency: listing.priceCurrency,
      status: "completed",
      blockchainTxHash: `demo-tx-${Date.now()}`, // In production, this would be the actual blockchain transaction hash
    },
  })

// Update listing status
  await db.marketplaceListing.update({
    where: { id: listingId },
    data: { status: "sold" },
  })

// Transfer asset ownership
  await db.asset.update({
    where: { id: listing.assetId },
    data: {
      ownerId: user.id,
      status: "owned",
    },
  })

revalidatePath("/marketplace")
  revalidatePath(`/profile/${user.username}`)
  revalidatePath(`/profile/${listing.sellerId}`)
  revalidatePath(`/asset/${listing.assetId}`)

return { success: true, transactionId: transaction.id }
}

/**
 * Place a bid on an auction listing
 */
export async function placeBid(listingId: string, amount: string) {
  // Get the current user
  const user = await auth()
  if (!user) {
    throw new ApiError("Unauthorized", 401)
  }

// Validate the bid amount
  if (!amount.match(/^\d+(\.\d+)?$/)) {
    throw new ApiError("Invalid bid amount", 400)
  }

// Get the listing
  const listing = await db.marketplaceListing.findUnique({
    where: {
      id: listingId,
      status: "active",
      listingType: "auction",
    },
  })

if (!listing) {
    throw new ApiError("Auction not found or not active", 404)
  }

// Prevent bidding on your own auction
  if (listing.sellerId === user.id) {
    throw new ApiError("Cannot bid on your own auction", 400)
  }

// Check if auction has ended
  if (listing.expiresAt && new Date(listing.expiresAt) < new Date()) {
    throw new ApiError("Auction has ended", 400)
  }

const auctionDetails = listing.auctionDetails as any

// Check if bid meets minimum requirements
  const bidAmount = Number.parseFloat(amount)
  const minimumBid = Number.parseFloat(auctionDetails.minimumBid)
  const highestBidAmount = auctionDetails.highestBid
    ? Number.parseFloat(auctionDetails.highestBid.amount)
    : Number.parseFloat(auctionDetails.startingPrice)

if (bidAmount < minimumBid) {
    throw new ApiError(`Bid must be at least ${minimumBid} ${listing.priceCurrency}`, 400)
  }

if (bidAmount <= highestBidAmount) {
    throw new ApiError(
      `Bid must be higher than current highest bid of ${highestBidAmount} ${listing.priceCurrency}`,
      400,
    )
  }

// Update the auction with the new bid
  const newBid = {
    amount,
    bidderId: user.id,
    timestamp: new Date(),
  }

const updatedAuctionDetails = {
    ...auctionDetails,
    highestBid: newBid,
    bidHistory: [...(auctionDetails.bidHistory || []), newBid],
  }

await db.marketplaceListing.update({
    where: { id: listingId },
    data: {
      auctionDetails: updatedAuctionDetails,
    },
  })

// Create a bid transaction record
  await db.transaction.create({
    data: {
      id: crypto.randomUUID(),
      type: "bid",
      assetId: listing.assetId,
      listingId: listing.id,
      fromUserId: user.id,
      toUserId: listing.sellerId,
      amount,
      currency: listing.priceCurrency,
      status: "pending",
    },
  })

revalidatePath(`/marketplace`)
  revalidatePath(`/asset/${listing.assetId}`)

return { success: true }
}
[V0_FILE]typescript:file="lib/auth/signature-verification.ts" isMerged="true"
import { ethers } from "ethers"
import { Buffer } from "buffer"
import * as ed25519 from "@noble/ed25519"

/**
 * Verify an Ethereum signature
 * @param address The Ethereum address that supposedly signed the message
 * @param message The message that was signed
 * @param signature The signature to verify
 * @returns boolean indicating if the signature is valid
 */
export function verifyEthereumSignature(address: string, message: string, signature: string): boolean {
  try {
    // Recover the address from the signature
    const recoveredAddress = ethers.utils.verifyMessage(message, signature)

// Compare the recovered address with the provided address (case-insensitive)
    return recoveredAddress.toLowerCase() === address.toLowerCase()
  } catch (error) {
    console.error("Error verifying Ethereum signature:", error)
    return false
  }
}

/**
 * Verify a Phantom (Solana) signature
 * @param publicKey The Solana public key that supposedly signed the message
 * @param message The message that was signed
 * @param signature The signature to verify (base64 encoded)
 * @returns boolean indicating if the signature is valid
 */
export function verifyPhantomSignature(publicKey: string, message: string, signature: string): boolean {
  try {
    // Convert the message to Uint8Array
    const messageBytes = new TextEncoder().encode(message)

// Convert the signature from base64 to Uint8Array
    const signatureBytes = Buffer.from(signature, "base64")

// Convert the public key from base58 to Uint8Array
    const publicKeyBytes = Buffer.from(publicKey, "base58")

// Verify the signature
    // Note: In a real implementation, you would use the Solana web3.js library
    // This is a simplified version for demonstration purposes
    return ed25519.verify(signatureBytes, messageBytes, publicKeyBytes)
  } catch (error) {
    console.error("Error verifying Phantom signature:", error)
    return false
  }
}

/**
 * Verify a Tron signature
 * @param address The Tron address that supposedly signed the message
 * @param message The message that was signed
 * @param signature The signature to verify
 * @returns boolean indicating if the signature is valid
 */
export function verifyTronSignature(address: string, message: string, signature: string): boolean {
  try {
    // In a real implementation, you would use TronWeb to verify the signature
    // This is a placeholder for demonstration purposes
    console.log("Tron signature verification not implemented")
    return true
  } catch (error) {
    console.error("Error verifying Tron signature:", error)
    return false
  }
}
[V0_FILE]typescript:file="lib/auth/jwt.ts" isMerged="true"
import { SignJWT, jwtVerify } from "jose"

// In a real app, these would be environment variables
const JWT_SECRET = new TextEncoder().encode("your-secret-key-here")
const JWT_ISSUER = "music-nodes"
const JWT_AUDIENCE = "music-nodes-users"

/**
 * Sign a JWT token
 * @param payload The data to include in the token
 * @param expiresIn Expiration time in seconds
 * @returns The signed JWT token
 */
export async function signJWT(payload: any, expiresIn = 60 * 60 * 24 * 7): Promise<string> {
  return new SignJWT(payload)
    .setProtectedHeader({ alg: "HS256" })
    .setIssuedAt()
    .setIssuer(JWT_ISSUER)
    .setAudience(JWT_AUDIENCE)
    .setExpirationTime(Math.floor(Date.now() / 1000) + expiresIn)
    .sign(JWT_SECRET)
}

/**
 * Verify a JWT token
 * @param token The JWT token to verify
 * @returns The decoded payload if valid, null otherwise
 */
export async function verifyJWT(token: string): Promise<any | null> {
  try {
    const { payload } = await jwtVerify(token, JWT_SECRET, {
      issuer: JWT_ISSUER,
      audience: JWT_AUDIENCE,
    })
    return payload
  } catch (error) {
    console.error("JWT verification failed:", error)
    return null
  }
}
[V0_FILE]typescript:file="app/actions/auth-actions.ts" isEdit="true" isMerged="true"
"use server"

import { cookies } from "next/headers"
import { db } from "@/lib/db"
import { verifyEthereumSignature, verifyPhantomSignature } from "@/lib/auth/signature-verification"
import { verifyJWT } from "@/lib/auth/jwt"

/**
 * Verify web2 session and return user data
 */
export async function verifyWeb2Session() {
  try {
    const sessionToken = cookies().get("session_token")?.value

if (!sessionToken) {
      return { success: false, error: "No session token found" }
    }

// Verify JWT token
    const payload = await verifyJWT(sessionToken)

if (!payload || !payload.userId) {
      return { success: false, error: "Invalid session token" }
    }

// Get user from database
    const user = await db.user.findUnique({
      where: { id: payload.userId },
      select: {
        id: true,
        email: true,
        username: true,
        displayName: true,
        avatarUrl: true,
        createdAt: true,
        updatedAt: true,
        isEmailVerified: true,
      },
    })

if (!user) {
      return { success: false, error: "User not found" }
    }

// Get linked wallets
    const linkedWallets = [] // In a real app, you would fetch this from the database

return {
      success: true,
      user,
      linkedWallets,
    }
  } catch (error) {
    console.error("Session verification failed:", error)
    return { success: false, error: "Session verification failed" }
  }
}

/**
 * Link a wallet to an existing account
 */
export async function linkWalletToAccount({
  walletType,
  address,
  message,
  signature,
}: {
  walletType: string
  address: string
  message: string
  signature: string
}) {
  try {
    // Verify the current user session
    const session = await verifyWeb2Session()

if (!session.success || !session.user) {
      return { success: false, error: "Not authenticated" }
    }

const user = session.user

// Verify the signature
    let isValidSignature = false

if (walletType === "metamask" || walletType === "walletconnect") {
      isValidSignature = verifyEthereumSignature(address, message, signature)
    } else if (walletType === "phantom") {
      isValidSignature = verifyPhantomSignature(address, message, signature)
    }

if (!isValidSignature) {
      return { success: false, error: "Invalid signature" }
    }

// In a real app, you would check if the wallet is already linked to another account
    // and create or update the wallet link in the database

// For demo purposes, we'll just return success with a mock linked wallet
    const linkedWallets = [
      {
        id: "wallet-1",
        userId: user.id,
        walletType: walletType === "phantom" ? "solana" : "ethereum",
        address: address.toLowerCase(),
        isPrimary: true,
        createdAt: new Date(),
      },
    ]

return { success: true, linkedWallets }
  } catch (error) {
    console.error("Wallet linking failed:", error)
    return { success: false, error: "Failed to link wallet" }
  }
}

/**
 * Unlink a wallet from an account
 */
export async function unlinkWalletFromAccount(walletAddress: string) {
  try {
    // Verify the current user session
    const session = await verifyWeb2Session()

if (!session.success || !session.user) {
      return { success: false, error: "Not authenticated" }
    }

// In a real app, you would delete the wallet link from the database
    // For demo purposes, we'll just return success with an empty array

return { success: true, linkedWallets: [] }
  } catch (error) {
    console.error("Wallet unlinking failed:", error)
    return { success: false, error: "Failed to unlink wallet" }
  }
}

/**
 * Verify NFT ownership for access control
 */
export async function verifyNFTAccess({
  userId,
  contractAddress,
  tokenId,
  requiredBalance = 1,
}: {
  userId: string
  contractAddress: string
  tokenId?: number
  requiredBalance?: number
}) {
  try {
    // In a real app, you would:
    // 1. Get the user's linked wallets
    // 2. Check each wallet for NFT ownership using blockchain APIs

// For demo purposes, we'll just return false
    return { hasAccess: false }
  } catch (error) {
    console.error("NFT access verification failed:", error)
    return { hasAccess: false }
  }
}

// Helper functions for NFT ownership verification would be implemented here
// These would make calls to blockchain APIs or use libraries like ethers.js
[V0_FILE]typescriptreact:file="components/profile/wallet-manager.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useAuth } from "@/lib/auth/auth-provider"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { Wallet, Trash2, Check, ExternalLink } from "lucide-react"
import { truncateAddress, getBlockExplorerUrl } from "@/lib/utils"

export default function WalletManager() {
  const { linkedWallets, linkWallet, unlinkWallet } = useAuth()
  const [isLinking, setIsLinking] = useState(false)
  const { toast } = useToast()

const handleLinkWallet = async (walletType: "metamask" | "walletconnect" | "phantom") => {
    setIsLinking(true)
    try {
      await linkWallet(walletType)
      toast({
        title: "Wallet linked successfully",
        description: "Your wallet has been linked to your account.",
      })
    } catch (error: any) {
      toast({
        title: "Failed to link wallet",
        description: error.message || "Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLinking(false)
    }
  }

const handleUnlinkWallet = async (walletAddress: string) => {
    try {
      await unlinkWallet(walletAddress)
      toast({
        title: "Wallet unlinked",
        description: "Your wallet has been removed from your account.",
      })
    } catch (error: any) {
      toast({
        title: "Failed to unlink wallet",
        description: error.message || "Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <Card className="bg-gray-900/60 border-gray-800">
      <CardHeader>
        <CardTitle className="flex items-center">
          <Wallet className="h-5 w-5 mr-2 text-purple-400" />
          Connected Wallets
        </CardTitle>
        <CardDescription>Manage wallets linked to your Music Nodes account</CardDescription>
      </CardHeader>
      <CardContent>
        {linkedWallets.length > 0 ? (
          <div className="space-y-4">
            {linkedWallets.map((wallet) => (
              <div
                key={wallet.id}
                className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg border border-gray-700"
              >
                <div className="flex items-center">
                  {wallet.walletType === "ethereum" && (
                    <div className="h-8 w-8 rounded-full bg-orange-600/20 flex items-center justify-center mr-3">
                      <svg className="h-5 w-5" viewBox="0 0 35 33" fill="none">
                        <path
                          d="M32.9582 1L19.8241 10.7183L22.2665 5.09944L32.9582 1Z"
                          fill="#E17726"
                          stroke="#E17726"
                          strokeWidth="0.25"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M2.65881 1L15.6758 10.809L13.3529 5.09944L2.65881 1Z"
                          fill="#E27625"
                          stroke="#E27625"
                          strokeWidth="0.25"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    </div>
                  )}
                  {wallet.walletType === "solana" && (
                    <div className="h-8 w-8 rounded-full bg-purple-600/20 flex items-center justify-center mr-3">
                      <svg className="h-5 w-5" viewBox="0 0 128 128" fill="none">
                        <rect width="128" height="128" rx="64" fill="url(#paint0_linear)" />
                        <path
                          d="M110.584 64.9142H99.142C99.142 41.7651 80.173 23 56.7724 23C33.6612 23 14.8716 41.3057 14.4118 64.0583C13.936 87.577 36.241 108 60.0186 108H63.0094C83.9723 108 112.069 91.7667 116.459 71.9874C117.27 68.3413 114.358 64.9142 110.584 64.9142ZM39.7689 65.9454C39.7689 69.0411 37.2095 71.5729 34.0802 71.5729C30.9509 71.5729 28.3916 69.0399 28.3916 65.9454V56.8414C28.3916 53.7457 30.9509 51.2139 34.0802 51.2139C37.2095 51.2139 39.7689 53.7457 39.7689 56.8414V65.9454ZM59.5224 65.9454C59.5224 69.0411 56.9631 71.5729 53.8338 71.5729C50.7045 71.5729 48.1451 69.0399 48.1451 65.9454V56.8414C48.1451 53.7457 50.7056 51.2139 53.8338 51.2139C56.9631 51.2139 59.5224 53.7457 59.5224 56.8414V65.9454Z"
                          fill="white"
                        />
                        <defs>
                          <linearGradient
                            id="paint0_linear"
                            x1="64"
                            y1="0"
                            x2="64"
                            y2="128"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#534BB1" />
                            <stop offset="1" stopColor="#551BF9" />
                          </linearGradient>
                        </defs>
                      </svg>
                    </div>
                  )}
                  {wallet.walletType === "tron" && (
                    <div className="h-8 w-8 rounded-full bg-red-600/20 flex items-center justify-center mr-3">
                      <svg className="h-5 w-5" viewBox="0 0 32 32" fill="#FF0013">
                        <path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm7.375 7h-14.75l-1.25 4.25 8.625 12.875 8.625-12.875L23.375 7zM16 9.5l5.5 5.25h-11L16 9.5zm-4.25 7h8.5L16 23.75l-4.25-7.25z" />
                      </svg>
                    </div>
                  )}
                  <div>
                    <div className="flex items-center">
                      <span className="font-medium">{truncateAddress(wallet.address)}</span>
                      {wallet.isPrimary && (
                        <Badge className="ml-2 bg-green-900/50 text-green-400 border-green-500/30 text-xs">
                          <Check className="h-3 w-3 mr-1" /> Primary
                        </Badge>
                      )}
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      {wallet.walletType.charAt(0).toUpperCase() + wallet.walletType.slice(1)}
                    </div>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-8 w-8 text-gray-400 hover:text-white"
                    onClick={() => window.open(getBlockExplorerUrl(wallet.walletType, wallet.address), "_blank")}
                  >
                    <ExternalLink className="h-4 w-4" />
                  </Button>
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-8 w-8 text-gray-400 hover:text-red-400"
                    onClick={() => handleUnlinkWallet(wallet.address)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-8">
            <Wallet className="h-12 w-12 mx-auto mb-3 text-gray-600" />
            <p className="text-gray-400">No wallets linked to your account yet</p>
          </div>
        )}
      </CardContent>
      <CardFooter className="flex flex-col space-y-3">
        <div className="grid grid-cols-3 gap-2 w-full">
          <Button
            variant="outline"
            className="border-gray-700 hover:bg-gray-800"
            onClick={() => handleLinkWallet("metamask")}
            disabled={isLinking}
          >
            <svg className="h-4 w-4 mr-2" viewBox="0 0 35 33" fill="none">
              <path
                d="M32.9582 1L19.8241 10.7183L22.2665 5.09944L32.9582 1Z"
                fill="#E17726"
                stroke="#E17726"
                strokeWidth="0.25"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M2.65881 1L15.6758 10.809L13.3529 5.09944L2.65881 1Z"
                fill="#E27625"
                stroke="#E27625"
                strokeWidth="0.25"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            MetaMask
          </Button>
          <Button
            variant="outline"
            className="border-gray-700 hover:bg-gray-800"
            onClick={() => handleLinkWallet("phantom")}
            disabled={isLinking}
          >
            <svg className="h-4 w-4 mr-2" viewBox="0 0 128 128" fill="none">
              <rect width="128" height="128" rx="64" fill="#534BB1" />
              <path
                d="M110.584 64.9142H99.142C99.142 41.7651 80.173 23 56.7724 23C33.6612 23 14.8716 41.3057 14.4118 64.0583C13.936 87.577 36.241 108 60.0186 108H63.0094C83.9723 108 112.069 91.7667 116.459 71.9874C117.27 68.3413 114.358 64.9142 110.584 64.9142ZM39.7689 65.9454C39.7689 69.0411 37.2095 71.5729 34.0802 71.5729C30.9509 71.5729 28.3916 69.0399 28.3916 65.9454V56.8414C28.3916 53.7457 30.9509 51.2139 34.0802 51.2139C37.2095 51.2139 39.7689 53.7457 39.7689 56.8414V65.9454ZM59.5224 65.9454C59.5224 69.0411 56.9631 71.5729 53.8338 71.5729C50.7045 71.5729 48.1451 69.0399 48.1451 65.9454V56.8414C48.1451 53.7457 50.7056 51.2139 53.8338 51.2139C56.9631 51.2139 59.5224 53.7457 59.5224 56.8414V65.9454Z"
                fill="white"
              />
            </svg>
            Phantom
          </Button>
          <Button
            variant="outline"
            className="border-gray-700 hover:bg-gray-800"
            onClick={() => handleLinkWallet("walletconnect")}
            disabled={isLinking}
          >
            <svg className="h-4 w-4 mr-2" viewBox="0 0 512 512" fill="none">
              <path
                d="M169.209 184.221C219.965 134.612 301.035 134.612 351.791 184.221L358.954 191.221C361.833 194.03 361.833 198.557 358.954 201.366L338.035 221.73C336.596 223.134 334.228 223.134 332.789 221.73L322.954 212.148C288.219 178.219 232.781 178.219 198.046 212.148L187.454 222.485C186.015 223.889 183.647 223.889 182.209 222.485L161.289 202.121C158.411 199.312 158.411 194.785 161.289 191.976L169.209 184.221ZM388.718 220.366L407.954 239.094C410.833 241.903 410.833 246.43 407.954 249.239L315.289 339.876C312.411 342.685 307.789 342.685 304.911 339.876L241.289 277.876C240.57 277.175 239.43 277.175 238.711 277.876L175.089 339.876C172.211 342.685 167.589 342.685 164.711 339.876L72.0459 249.239C69.1672 246.43 69.1672 241.903 72.0459 239.094L91.2822 220.366C94.1609 217.557 98.7828 217.557 101.661 220.366L165.289 282.366C166.007 283.067 167.147 283.067 167.865 282.366L231.489 220.366C234.367 217.557 238.989 217.557 241.867 220.366L305.489 282.366C306.207 283.067 307.347 283.067 308.065 282.366L371.693 220.366C374.572 217.557 379.193 217.557 382.072 220.366H388.718Z"
                fill="#3B99FC"
              />
            </svg>
            WalletConnect
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/auth/auth-provider.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import type { User, AuthMethod, LinkedWallet } from "@/types/auth"

interface AuthContextType {
  user: User | null
  isLoading: boolean
  authMethod: AuthMethod | null
  linkedWallets: LinkedWallet[]
  signInWithEmail: (email: string, password: string) => Promise<void>
  signInWithSocial: (provider: "google" | "twitter" | "discord") => Promise<void>
  signInWithWallet: (walletType: "metamask" | "walletconnect" | "phantom") => Promise<void>
  signOut: () => Promise<void>
  linkWallet: (walletType: "metamask" | "walletconnect" | "phantom") => Promise<void>
  unlinkWallet: (walletAddress: string) => Promise<void>
  verifyNFTAccess: (contractAddress: string, requiredTokenId?: number) => Promise<boolean>
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [authMethod, setAuthMethod] = useState<AuthMethod | null>(null)
  const [linkedWallets, setLinkedWallets] = useState<LinkedWallet[]>([])
  const router = useRouter()

// Initialize auth state
  useEffect(() => {
    async function loadAuthState() {
      try {
        // Check for existing session
        const response = await fetch("/api/auth/session")

if (!response.ok) {
          // Handle non-200 responses
          console.error("Failed to load auth state:", response.status, response.statusText)
          setIsLoading(false)
          return
        }

const contentType = response.headers.get("content-type")
        if (!contentType || !contentType.includes("application/json")) {
          console.error("Invalid content type:", contentType)
          setIsLoading(false)
          return
        }

const data = await response.json()
        if (data.user) {
          setUser(data.user)
          setAuthMethod(data.authMethod)
          setLinkedWallets(data.linkedWallets || [])
        }
      } catch (error) {
        console.error("Failed to load auth state:", error)
      } finally {
        setIsLoading(false)
      }
    }

loadAuthState()
  }, [])

// Sign in with email and password
  const signInWithEmail = async (email: string, password: string) => {
    setIsLoading(true)
    try {
      // For demo purposes, we'll simulate a successful login
      // In a real app, you would make an API call to verify credentials

const mockUser = {
        id: "user-1",
        email,
        username: "musiccreator",
        displayName: "Music Creator",
        avatarUrl: "/placeholder.svg?height=100&width=100",
        createdAt: new Date(),
        updatedAt: new Date(),
        isEmailVerified: true,
      }

setUser(mockUser)
      setAuthMethod("email")
      setLinkedWallets([])
      router.refresh()

// In a real app, you would make an API call like this:
      /*
      const response = await fetch("/api/auth/email", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      })

if (!response.ok) {
        const error = await response.json()
        throw new Error(error.message || "Failed to sign in")
      }

const data = await response.json()
      setUser(data.user)
      setAuthMethod("email")
      setLinkedWallets(data.linkedWallets || [])
      router.refresh()
      */
    } catch (error) {
      console.error("Email sign in failed:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

// Sign in with social provider
  const signInWithSocial = async (provider: "google" | "twitter" | "discord") => {
    // For demo purposes, we'll simulate a successful login
    // In a real app, you would open an OAuth flow

setIsLoading(true)

try {
      // Simulate a delay for the OAuth flow
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockUser = {
        id: "user-2",
        username: "socialmusiccreator",
        displayName: "Social Music Creator",
        avatarUrl: "/placeholder.svg?height=100&width=100",
        createdAt: new Date(),
        updatedAt: new Date(),
      }

setUser(mockUser)
      setAuthMethod(provider)
      setLinkedWallets([])
      router.refresh()
    } catch (error) {
      console.error(`${provider} sign in failed:`, error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

// Sign in with wallet
  const signInWithWallet = async (walletType: "metamask" | "walletconnect" | "phantom") => {
    setIsLoading(true)
    try {
      // For demo purposes, we'll simulate a successful wallet connection
      // In a real app, you would connect to the actual wallet

const mockUser = {
        id: "user-3",
        username: "walletuser",
        displayName: "Wallet User",
        avatarUrl: "/placeholder.svg?height=100&width=100",
        createdAt: new Date(),
        updatedAt: new Date(),
      }

const mockWallet = {
        id: "wallet-1",
        userId: mockUser.id,
        walletType: walletType === "phantom" ? "solana" : "ethereum",
        address: "0x1234567890abcdef1234567890abcdef12345678",
        isPrimary: true,
        createdAt: new Date(),
      }

setUser(mockUser)
      setAuthMethod("wallet")
      setLinkedWallets([mockWallet])
      router.refresh()
    } catch (error) {
      console.error("Wallet sign in failed:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

// Sign out
  const signOut = async () => {
    setIsLoading(true)
    try {
      // In a real app, you would make an API call to invalidate the session
      // await fetch("/api/auth/signout", { method: "POST" })

setUser(null)
      setAuthMethod(null)
      setLinkedWallets([])
      router.push("/")
      router.refresh()
    } catch (error) {
      console.error("Sign out failed:", error)
    } finally {
      setIsLoading(false)
    }
  }

// Link wallet to existing account
  const linkWallet = async (walletType: "metamask" | "walletconnect" | "phantom") => {
    if (!user) {
      throw new Error("You must be signed in to link a wallet")
    }

setIsLoading(true)
    try {
      // For demo purposes, we'll simulate a successful wallet linking
      // In a real app, you would connect to the actual wallet and sign a message

const mockWallet = {
        id: crypto.randomUUID(),
        userId: user.id,
        walletType: walletType === "phantom" ? "solana" : "ethereum",
        address: `0x${Math.random().toString(16).substring(2, 42)}`,
        isPrimary: linkedWallets.length === 0,
        createdAt: new Date(),
      }

setLinkedWallets([...linkedWallets, mockWallet])
    } catch (error) {
      console.error("Wallet linking failed:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

// Unlink wallet from account
  const unlinkWallet = async (walletAddress: string) => {
    if (!user) {
      throw new Error("You must be signed in to unlink a wallet")
    }

setIsLoading(true)
    try {
      // Filter out the wallet with the matching address
      const updatedWallets = linkedWallets.filter((wallet) => wallet.address !== walletAddress)

// If we removed the primary wallet, make another one primary if available
      if (updatedWallets.length > 0 && !updatedWallets.some((w) => w.isPrimary)) {
        updatedWallets[0].isPrimary = true
      }

setLinkedWallets(updatedWallets)
    } catch (error) {
      console.error("Wallet unlinking failed:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

// Verify NFT access
  const verifyNFTAccess = async (contractAddress: string, requiredTokenId?: number) => {
    if (!user) return false

try {
      // For demo purposes, we'll simulate NFT verification
      // In a real app, you would check the blockchain for NFT ownership

// Randomly return true or false for demo purposes
      return Math.random() > 0.5
    } catch (error) {
      console.error("NFT access verification failed:", error)
      return false
    }
  }

// Helper function to generate a nonce
  const generateNonce = async () => {
    // In a real app, you would fetch a nonce from your server
    return Math.random().toString(36).substring(2, 15)
  }

const value = {
    user,
    isLoading,
    authMethod,
    linkedWallets,
    signInWithEmail,
    signInWithSocial,
    signInWithWallet,
    signOut,
    linkWallet,
    unlinkWallet,
    verifyNFTAccess,
  }

return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

export const useAuth = () => {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescript:file="app/api/auth/email/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"
import { signJWT } from "@/lib/auth/jwt"

export async function POST(request: Request) {
  try {
    const { email, password } = await request.json()

// In a real app, you would validate the credentials against your database
    // For demo purposes, we'll accept any email/password

// Create a mock user
    const user = {
      id: "user-1",
      email,
      username: "musiccreator",
      displayName: "Music Creator",
      avatarUrl: "/placeholder.svg?height=100&width=100",
      createdAt: new Date(),
      updatedAt: new Date(),
      isEmailVerified: true,
    }

// Create a session token
    const token = await signJWT({
      userId: user.id,
      email: user.email,
      authMethod: "email",
    })

// Set the session token as a cookie
    cookies().set({
      name: "session_token",
      value: token,
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "lax",
      path: "/",
      // 7 days
      maxAge: 60 * 60 * 24 * 7,
    })

// Mock linked wallets
    const linkedWallets = []

return NextResponse.json({
      user,
      authMethod: "email",
      linkedWallets,
    })
  } catch (error) {
    console.error("Email authentication failed:", error)
    return NextResponse.json({ message: "Authentication failed" }, { status: 401 })
  }
}
[V0_FILE]typescript:file="app/api/auth/signout/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function POST() {
  // Delete the session token cookie
  cookies().delete("session_token")

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/auth/wallet/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"
import { signJWT } from "@/lib/auth/jwt"
import { verifyEthereumSignature, verifyPhantomSignature } from "@/lib/auth/signature-verification"

export async function POST(request: Request) {
  try {
    const { walletType, address, message, signature } = await request.json()

// Verify the signature
    let isValidSignature = false

if (!isValidSignature) {
      return NextResponse.json({ message: "Invalid signature" }, { status: 401 })
    }

// In a real app, you would check if the wallet is associated with a user
    // If not, you might create a new user or prompt for additional information

// For demo purposes, we'll create a mock user
    const user = {
      id: "user-3",
      username: "walletuser",
      displayName: "Wallet User",
      avatarUrl: "/placeholder.svg?height=100&width=100",
      createdAt: new Date(),
      updatedAt: new Date(),
    }

// Create a session token
    const token = await signJWT({
      userId: user.id,
      address,
      authMethod: "wallet",
    })

// Mock linked wallets
    const linkedWallets = [
      {
        id: "wallet-1",
        userId: user.id,
        walletType: walletType === "phantom" ? "solana" : "ethereum",
        address,
        isPrimary: true,
        createdAt: new Date(),
      },
    ]

return NextResponse.json({
      user,
      authMethod: "wallet",
      linkedWallets,
    })
  } catch (error) {
    console.error("Wallet authentication failed:", error)
    return NextResponse.json({ message: "Authentication failed" }, { status: 401 })
  }
}
[V0_FILE]typescript:file="app/api/auth/nonce/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { randomBytes } from "crypto"

export async function GET() {
  // Generate a random nonce for wallet signing
  const nonce = randomBytes(16).toString("hex")

// Store the nonce in the session for later verification
  // In a real app, you would store this in a database or Redis
  // associated with the user's session

return NextResponse.json({ nonce })
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Menu, X, Music, Search, Bell, User, LogOut, Settings, Wallet } from "lucide-react"
import { useAuth } from "@/lib/auth/auth-provider"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import MultiAuthModal from "./auth/multi-auth-modal"

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const [showAuthModal, setShowAuthModal] = useState(false)
  const { user, signOut, authMethod } = useAuth()

return (
    <header className="sticky top-0 z-50 w-full border-b border-gray-800 bg-black/80 backdrop-blur-sm">
      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
        <div className="flex items-center">
          <Link href="/" className="flex items-center mr-6">
            <Music className="h-6 w-6 text-purple-500 mr-2" />
            <span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">
              Music Nodes
            </span>
          </Link>

<nav className="hidden md:flex items-center space-x-6">
            <Link href="/explore" className="text-gray-300 hover:text-white transition-colors">
              Explore
            </Link>
            <Link href="/create" className="text-gray-300 hover:text-white transition-colors">
              Create
            </Link>
            <Link href="/agents" className="text-gray-300 hover:text-white transition-colors">
              AI Agents
            </Link>
            <Link href="/how-it-works" className="text-gray-300 hover:text-white transition-colors">
              How It Works
            </Link>
            <Link href="/learn" className="text-gray-300 hover:text-white transition-colors">
              Learn
            </Link>
          </nav>
        </div>

<Button
            variant="ghost"
            size="icon"
            className="text-gray-400 hover:text-white md:hidden"
            onClick={() => setIsOpen(true)}
          >
            <Menu className="h-5 w-5" />
          </Button>

{user ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src={user.avatarUrl || ""} alt={user.displayName} />
                    <AvatarFallback className="bg-purple-900/50">
                      {user.displayName.charAt(0).toUpperCase()}
                    </AvatarFallback>
                  </Avatar>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56 bg-gray-900 border-gray-800" align="end" forceMount>
                <DropdownMenuLabel className="font-normal">
                  <div className="flex flex-col space-y-1">
                    <p className="text-sm font-medium leading-none">{user.displayName}</p>
                    <p className="text-xs leading-none text-gray-500">@{user.username}</p>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator className="bg-gray-800" />
                <DropdownMenuItem className="flex items-center cursor-pointer">
                  <User className="mr-2 h-4 w-4" />
                  <Link href="/profile">Profile</Link>
                </DropdownMenuItem>
                <DropdownMenuItem className="flex items-center cursor-pointer">
                  <Wallet className="mr-2 h-4 w-4" />
                  <Link href="/profile/wallets">Manage Wallets</Link>
                </DropdownMenuItem>
                <DropdownMenuItem className="flex items-center cursor-pointer">
                  <Settings className="mr-2 h-4 w-4" />
                  <Link href="/settings">Settings</Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator className="bg-gray-800" />
                <DropdownMenuItem
                  className="flex items-center cursor-pointer text-red-500 focus:text-red-500"
                  onClick={() => signOut()}
                >
                  <LogOut className="mr-2 h-4 w-4" />
                  <span>Log out</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <div className="hidden md:block">
              <Button
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                onClick={() => setShowAuthModal(true)}
              >
                Connect
              </Button>
            </div>
          )}
        </div>
      </div>

<Sheet open={isOpen} onOpenChange={setIsOpen}>
        <SheetContent side="right" className="bg-gray-900 border-gray-800 p-0">
          <div className="flex flex-col h-full">
            <div className="p-4 border-b border-gray-800 flex items-center justify-between">
              <div className="flex items-center">
                <Music className="h-6 w-6 text-purple-500 mr-2" />
                <span className="font-bold text-xl">Music Nodes</span>
              </div>
              <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
                <X className="h-5 w-5" />
              </Button>
            </div>

<nav className="flex flex-col p-4 space-y-4">
              <Link
                href="/explore"
                className="text-gray-300 hover:text-white transition-colors py-2"
                onClick={() => setIsOpen(false)}
              >
                Explore
              </Link>
              <Link
                href="/create"
                className="text-gray-300 hover:text-white transition-colors py-2"
                onClick={() => setIsOpen(false)}
              >
                Create
              </Link>
              <Link
                href="/agents"
                className="text-gray-300 hover:text-white transition-colors py-2"
                onClick={() => setIsOpen(false)}
              >
                AI Agents
              </Link>
              <Link
                href="/how-it-works"
                className="text-gray-300 hover:text-white transition-colors py-2"
                onClick={() => setIsOpen(false)}
              >
                How It Works
              </Link>
              <Link
                href="/learn"
                className="text-gray-300 hover:text-white transition-colors py-2"
                onClick={() => setIsOpen(false)}
              >
                Learn
              </Link>
            </nav>

<div className="mt-auto p-4 border-t border-gray-800">
              {user ? (
                <div className="space-y-3">
                  <div className="flex items-center">
                    <Avatar className="h-8 w-8 mr-2">
                      <AvatarImage src={user.avatarUrl || ""} alt={user.displayName} />
                      <AvatarFallback className="bg-purple-900/50">
                        {user.displayName.charAt(0).toUpperCase()}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="text-sm font-medium">{user.displayName}</p>
                      <p className="text-xs text-gray-500">@{user.username}</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-2">
                    <Button variant="outline" className="border-gray-700 text-gray-400 hover:bg-gray-800">
                      <Link href="/profile" className="flex items-center" onClick={() => setIsOpen(false)}>
                        <User className="h-4 w-4 mr-2" /> Profile
                      </Link>
                    </Button>
                    <Button variant="outline" className="border-gray-700 text-gray-400 hover:bg-gray-800">
                      <Link href="/settings" className="flex items-center" onClick={() => setIsOpen(false)}>
                        <Settings className="h-4 w-4 mr-2" /> Settings
                      </Link>
                    </Button>
                  </div>
                  <Button
                    variant="outline"
                    className="w-full border-red-900/30 text-red-500 hover:bg-red-950/30"
                    onClick={() => {
                      signOut()
                      setIsOpen(false)
                    }}
                  >
                    <LogOut className="h-4 w-4 mr-2" /> Log Out
                  </Button>
                </div>
              ) : (
                <Button
                  className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                  onClick={() => {
                    setShowAuthModal(true)
                    setIsOpen(false)
                  }}
                >
                  Connect
                </Button>
              )}
            </div>
          </div>
        </SheetContent>
      </Sheet>

<MultiAuthModal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} defaultTab="email" mode="signin" />
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/api/auth/session/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"
import { verifyJWT } from "@/lib/auth/jwt"

export async function GET() {
  try {
    // Get session token from cookies
    const sessionToken = cookies().get("session_token")?.value

if (!sessionToken) {
      // No session token, return empty session
      return NextResponse.json({ user: null, authMethod: null, linkedWallets: [] })
    }

// Verify JWT token
    const payload = await verifyJWT(sessionToken)

if (!payload || !payload.userId) {
      // Invalid token, return empty session
      console.log("Invalid session token, clearing cookie")
      cookies().delete("session_token")
      return NextResponse.json({ user: null, authMethod: null, linkedWallets: [] })
    }

// For demo purposes, return a mock user
    // In a real app, you would fetch the user from your database
    const user = {
      id: payload.userId,
      username: "musiccreator",
      displayName: "Music Creator",
      avatarUrl: "/placeholder.svg?height=100&width=100",
      createdAt: new Date(),
      updatedAt: new Date(),
    }

// Mock linked wallets
    const linkedWallets = [
      {
        id: "wallet-1",
        userId: user.id,
        walletType: "ethereum",
        address: "0x1234567890abcdef1234567890abcdef12345678",
        isPrimary: true,
        createdAt: new Date(),
      },
    ]

return NextResponse.json({
      user,
      authMethod: payload.authMethod || "email",
      linkedWallets,
    })
  } catch (error) {
    console.error("Error getting session:", error)
    // Something went wrong with the session validation, clear the token
    cookies().delete("session_token")
    return NextResponse.json({ user: null, authMethod: null, linkedWallets: [] })
  }
}
[V0_FILE]typescriptreact:file="components/auth/how-it-works.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { motion } from "framer-motion"
import { User, Mail, Key, CheckCircle, Wallet, CreditCard, Lock, Unlock, HelpCircle } from "lucide-react"
import { useMediaQuery } from "@/hooks/use-mobile"

export default function AuthHowItWorks() {
  const [activeTab, setActiveTab] = useState("email")
  const isMobile = useMediaQuery("(max-width: 640px)")

const stepVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: i * 0.1,
        duration: 0.5,
        ease: "easeOut",
      },
    }),
  }

return (
    <Card className="bg-gray-900/60 border-gray-800">
      <CardHeader className="px-4 sm:px-6">
        <CardTitle className="text-xl sm:text-2xl font-bold">How Authentication Works</CardTitle>
        <CardDescription>
          Understand the authentication flow and how different methods secure your account
        </CardDescription>
      </CardHeader>
      <CardContent className="pt-0 px-4 sm:px-6">
        <Tabs defaultValue="email" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid grid-cols-3 mb-6 w-full">
            <TabsTrigger value="email" className="data-[state=active]:bg-purple-900/50 text-xs sm:text-sm">
              <Mail className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
              <span className="hidden xs:inline">Email</span> Auth
            </TabsTrigger>
            <TabsTrigger value="wallet" className="data-[state=active]:bg-purple-900/50 text-xs sm:text-sm">
              <Wallet className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
              <span className="hidden xs:inline">Wallet</span> Auth
            </TabsTrigger>
            <TabsTrigger value="nft" className="data-[state=active]:bg-purple-900/50 text-xs sm:text-sm">
              <CreditCard className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
              <span className="hidden xs:inline">NFT</span> Access
            </TabsTrigger>
          </TabsList>

<TabsContent value="email" className="space-y-6">
            <div className="grid gap-4 sm:gap-6">
              {[
                {
                  icon: <User className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "1. User Inputs Credentials",
                  description: "Enter your email and password in the authentication form.",
                },
                {
                  icon: <Mail className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "2. Credentials Sent to Server",
                  description: "The app securely sends your credentials to the authentication API endpoint.",
                },
                {
                  icon: <Key className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "3. Server Validates Credentials",
                  description: "The server verifies your email and password against the database securely.",
                },
                {
                  icon: <CheckCircle className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "4. JWT Session Token Created",
                  description:
                    "Upon successful verification, a JWT token is created containing your user ID and session info.",
                },
                {
                  icon: <CheckCircle className="h-5 w-5 sm:h-6 sm:w-6 text-green-400" />,
                  title: "5. Session Established",
                  description:
                    "The JWT token is stored as an HTTP-only cookie in your browser and used for subsequent requests.",
                },
              ].map((step, i) => (
                <motion.div
                  key={i}
                  custom={i}
                  variants={stepVariants}
                  initial="hidden"
                  animate="visible"
                  className="flex items-start gap-3 sm:gap-4 bg-gray-800/40 p-3 sm:p-4 rounded-md border border-gray-700"
                >
                  <div className="p-1.5 sm:p-2 rounded-full bg-gray-800 border border-gray-700 flex-shrink-0">
                    {step.icon}
                  </div>
                  <div>
                    <h3 className="font-medium text-sm sm:text-base mb-0.5 sm:mb-1">{step.title}</h3>
                    <p className="text-xs sm:text-sm text-gray-400">{step.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </TabsContent>

<TabsContent value="wallet" className="space-y-6">
            <div className="grid gap-4 sm:gap-6">
              {[
                {
                  icon: <Wallet className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "1. Connect Wallet Request",
                  description: "Click the 'Connect Wallet' button to initiate the wallet connection process.",
                },
                {
                  icon: <Key className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "2. Nonce Generation",
                  description: "The server generates a unique nonce (one-time code) for secure wallet signing.",
                },
                {
                  icon: <User className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "3. Sign Message with Wallet",
                  description: "Your wallet prompts you to sign the message containing the nonce.",
                },
                {
                  icon: <CheckCircle className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "4. Signature Verification",
                  description: "The server verifies that the signature came from the wallet you claim to own.",
                },
                {
                  icon: <CheckCircle className="h-5 w-5 sm:h-6 sm:w-6 text-green-400" />,
                  title: "5. Authentication Complete",
                  description: "Upon verification, a session is created and linked to your wallet address.",
                },
              ].map((step, i) => (
                <motion.div
                  key={i}
                  custom={i}
                  variants={stepVariants}
                  initial="hidden"
                  animate="visible"
                  className="flex items-start gap-3 sm:gap-4 bg-gray-800/40 p-3 sm:p-4 rounded-md border border-gray-700"
                >
                  <div className="p-1.5 sm:p-2 rounded-full bg-gray-800 border border-gray-700 flex-shrink-0">
                    {step.icon}
                  </div>
                  <div>
                    <h3 className="font-medium text-sm sm:text-base mb-0.5 sm:mb-1">{step.title}</h3>
                    <p className="text-xs sm:text-sm text-gray-400">{step.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </TabsContent>

<TabsContent value="nft" className="space-y-6">
            <div className="grid gap-4 sm:gap-6">
              {[
                {
                  icon: <Lock className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "1. NFT-Gated Content Request",
                  description: "You attempt to access content that requires ownership of a specific NFT.",
                },
                {
                  icon: <Wallet className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "2. Wallet Verification",
                  description: "The system checks if you have a wallet connected to your account.",
                },
                {
                  icon: <CreditCard className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />,
                  title: "3. NFT Ownership Check",
                  description: "The server queries the blockchain to verify you own the required NFT in your wallet.",
                },
                {
                  icon: <Unlock className="h-5 w-5 sm:h-6 sm:w-6 text-green-400" />,
                  title: "4. Access Granted (if verified)",
                  description: "If you own the required NFT, access to the content is granted immediately.",
                },
                {
                  icon: <Lock className="h-5 w-5 sm:h-6 sm:w-6 text-red-400" />,
                  title: "5. Access Denied (if not verified)",
                  description:
                    "If the NFT is not found in your wallet, you're prompted to acquire it or connect a different wallet.",
                },
              ].map((step, i) => (
                <motion.div
                  key={i}
                  custom={i}
                  variants={stepVariants}
                  initial="hidden"
                  animate="visible"
                  className="flex items-start gap-3 sm:gap-4 bg-gray-800/40 p-3 sm:p-4 rounded-md border border-gray-700"
                >
                  <div className="p-1.5 sm:p-2 rounded-full bg-gray-800 border border-gray-700 flex-shrink-0">
                    {step.icon}
                  </div>
                  <div>
                    <h3 className="font-medium text-sm sm:text-base mb-0.5 sm:mb-1">{step.title}</h3>
                    <p className="text-xs sm:text-sm text-gray-400">{step.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </TabsContent>
        </Tabs>

<div className="mt-6 sm:mt-8 p-3 sm:p-4 bg-purple-900/20 rounded-md border border-purple-800/30">
          <h4 className="font-medium text-sm sm:text-base mb-2 flex items-center">
            <Key className="h-4 w-4 mr-2 text-purple-400" />
            Security Notes
          </h4>
          <ul className="text-xs sm:text-sm text-gray-300 space-y-1.5 sm:space-y-2">
            <li>• Authentication state is managed through secure HTTP-only cookies</li>
            <li>• JWT tokens are used for maintaining sessions and are validated on each request</li>
            <li>• Wallet signatures cryptographically prove ownership without exposing private keys</li>
            <li>• All API routes are protected against CSRF attacks and unauthorized access</li>
          </ul>
        </div>

{/* Help button for mobile users */}
        <div className="mt-6 sm:hidden">
          <button
            className="w-full flex items-center justify-center gap-2 py-3 bg-gray-800/60 rounded-md border border-gray-700 text-sm"
            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
          >
            <HelpCircle className="h-4 w-4 text-purple-400" />
            Back to Top
          </button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="hooks/use-mobile.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

useEffect(() => {
    const media = window.matchMedia(query)

// Update the state initially
    setMatches(media.matches)

// Define a callback function to handle changes
    const listener = (event: MediaQueryListEvent) => {
      setMatches(event.matches)
    }

// Add the listener
    media.addEventListener("change", listener)

// Clean up
    return () => {
      media.removeEventListener("change", listener)
    }
  }, [query])

return matches
}
[V0_FILE]typescriptreact:file="components/auth/multi-auth-modal.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/lib/auth/auth-provider"
import { Mail, Lock, User, Twitter, Wallet } from "lucide-react"

interface MultiAuthModalProps {
  isOpen: boolean
  onClose: () => void
  defaultTab?: "email" | "social" | "wallet"
  mode?: "signin" | "signup"
}

export default function MultiAuthModal({
  isOpen,
  onClose,
  defaultTab = "email",
  mode = "signin",
}: MultiAuthModalProps) {
  const [activeTab, setActiveTab] = useState(defaultTab)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [username, setUsername] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()
  const { signInWithEmail, signInWithSocial, signInWithWallet } = useAuth()

const handleEmailAuth = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      if (mode === "signin") {
        await signInWithEmail(email, password)
        toast({
          title: "Welcome back!",
          description: "You have successfully signed in.",
        })
      } else {
        // In a real app, this would call a registration endpoint
        toast({
          title: "Account created!",
          description: "Please check your email to verify your account.",
        })
      }
      onClose()
    } catch (error: any) {
      toast({
        title: "Authentication failed",
        description: error.message || "Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const handleSocialAuth = async (provider: "google" | "twitter" | "discord") => {
    try {
      await signInWithSocial(provider)
      // The auth flow will be handled by the provider and the auth context
    } catch (error: any) {
      toast({
        title: "Authentication failed",
        description: error.message || "Please try again.",
        variant: "destructive",
      })
    }
  }

const handleWalletAuth = async (walletType: "metamask" | "walletconnect" | "phantom") => {
    try {
      await signInWithWallet(walletType)
      toast({
        title: "Wallet connected!",
        description: "You have successfully signed in with your wallet.",
      })
      onClose()
    } catch (error: any) {
      toast({
        title: "Wallet authentication failed",
        description: error.message || "Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-md bg-gray-900 border-gray-800 p-4 sm:p-6 max-w-[95vw] w-full">
        <DialogHeader className="mb-2 sm:mb-4">
          <DialogTitle className="text-lg sm:text-xl font-bold">
            {mode === "signin" ? "Sign In to Music Nodes" : "Create an Account"}
          </DialogTitle>
          <DialogDescription className="text-gray-400 text-sm">
            Choose your preferred method to {mode === "signin" ? "sign in" : "create an account"}
          </DialogDescription>
        </DialogHeader>

<Tabs defaultValue={activeTab} onValueChange={(value) => setActiveTab(value as any)} className="w-full">
          <TabsList className="grid grid-cols-3 mb-4 sm:mb-6 w-full">
            <TabsTrigger value="email" className="data-[state=active]:bg-purple-900/50 text-xs sm:text-sm">
              <Mail className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" /> Email
            </TabsTrigger>
            <TabsTrigger value="social" className="data-[state=active]:bg-purple-900/50 text-xs sm:text-sm">
              <Twitter className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" /> Social
            </TabsTrigger>
            <TabsTrigger value="wallet" className="data-[state=active]:bg-purple-900/50 text-xs sm:text-sm">
              <Wallet className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" /> Wallet
            </TabsTrigger>
          </TabsList>

<TabsContent value="email" className="space-y-3 sm:space-y-4">
            <form onSubmit={handleEmailAuth} className="space-y-3 sm:space-y-4">
              {mode === "signup" && (
                <div className="space-y-1 sm:space-y-2">
                  <Label htmlFor="username" className="text-xs sm:text-sm">
                    Username
                  </Label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
                    <Input
                      id="username"
                      placeholder="Choose a username"
                      className="pl-8 sm:pl-10 bg-gray-800/50 border-gray-700 text-xs sm:text-sm h-8 sm:h-10"
                      value={username}
                      onChange={(e) => setUsername(e.target.value)}
                      required
                    />
                  </div>
                </div>
              )}

<div className="space-y-1 sm:space-y-2">
                <Label htmlFor="email" className="text-xs sm:text-sm">
                  Email
                </Label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
                  <Input
                    id="email"
                    type="email"
                    placeholder="Enter your email"
                    className="pl-8 sm:pl-10 bg-gray-800/50 border-gray-700 text-xs sm:text-sm h-8 sm:h-10"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>
              </div>

<div className="space-y-1 sm:space-y-2">
                <div className="flex justify-between items-center">
                  <Label htmlFor="password" className="text-xs sm:text-sm">
                    Password
                  </Label>
                  {mode === "signin" && (
                    <a href="#" className="text-xs sm:text-sm text-purple-400 hover:text-purple-300">
                      Forgot?
                    </a>
                  )}
                </div>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
                  <Input
                    id="password"
                    type="password"
                    placeholder="Enter your password"
                    className="pl-8 sm:pl-10 bg-gray-800/50 border-gray-700 text-xs sm:text-sm h-8 sm:h-10"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                </div>
              </div>

<Button
                type="submit"
                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 h-9 sm:h-10 text-xs sm:text-sm"
                disabled={isSubmitting}
              >
                {isSubmitting ? "Processing..." : mode === "signin" ? "Sign In" : "Create Account"}
              </Button>
            </form>

<div className="text-center text-xs sm:text-sm text-gray-500">
              {mode === "signin" ? "Don't have an account? " : "Already have an account? "}
              <button
                onClick={() => (mode === "signin" ? null : setActiveTab("email"))}
                className="text-purple-400 hover:text-purple-300"
              >
                {mode === "signin" ? "Sign up" : "Sign in"}
              </button>
            </div>
          </TabsContent>

<TabsContent value="social" className="space-y-3 sm:space-y-4">
            <div className="grid grid-cols-1 gap-2 sm:gap-3">
              <Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex items-center justify-center h-9 sm:h-10 text-xs sm:text-sm"
                onClick={() => handleSocialAuth("google")}
              >
                <svg className="h-4 w-4 sm:h-5 sm:w-5 mr-2" viewBox="0 0 24 24">
                  <path
                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    fill="#4285F4"
                  />
                  <path
                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    fill="#34A853"
                  />
                  <path
                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    fill="#FBBC05"
                  />
                  <path
                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    fill="#EA4335"
                  />
                </svg>
                Continue with Google
              </Button>

<Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex items-center justify-center h-9 sm:h-10 text-xs sm:text-sm"
                onClick={() => handleSocialAuth("discord")}
              >
                <svg className="h-4 w-4 sm:h-5 sm:w-5 mr-2" viewBox="0 0 24 24" fill="#5865F2">
                  <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
                </svg>
                Continue with Discord
              </Button>
            </div>
          </TabsContent>

<TabsContent value="wallet" className="space-y-4">
            <div className="grid grid-cols-1 gap-3">
              <Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex items-center justify-center"
                onClick={() => handleWalletAuth("metamask")}
              >
                <svg className="h-5 w-5 mr-2" viewBox="0 0 35 33" fill="none">
                  <path
                    d="M32.9582 1L19.8241 10.7183L22.2665 5.09944L32.9582 1Z"
                    fill="#E17726"
                    stroke="#E17726"
                    strokeWidth="0.25"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M2.65881 1L15.6758 10.809L13.3529 5.09944L2.65881 1Z"
                    fill="#E27625"
                    stroke="#E27625"
                    strokeWidth="0.25"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M28.2953 23.5329L24.7665 28.8627L32.2519 30.8834L34.3723 23.6719L28.2953 23.5329Z"
                    fill="#E27625"
                    stroke="#E27625"
                    strokeWidth="0.25"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M1.27441 23.6719L3.38482 30.8834L10.8702 28.8627L7.34138 23.5329L1.27441 23.6719Z"
                    fill="#E27625"
                    stroke="#E27625"
                    strokeWidth="0.25"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                Connect with MetaMask
              </Button>

<Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex items-center justify-center"
                onClick={() => handleWalletAuth("phantom")}
              >
                <svg className="h-5 w-5 mr-2" viewBox="0 0 128 128" fill="none">
                  <rect width="128" height="128" rx="64" fill="url(#paint0_linear)" />
                  <path
                    d="M110.584 64.9142H99.142C99.142 41.7651 80.173 23 56.7724 23C33.6612 23 14.8716 41.3057 14.4118 64.0583C13.936 87.577 36.241 108 60.0186 108H63.0094C83.9723 108 112.069 91.7667 116.459 71.9874C117.27 68.3413 114.358 64.9142 110.584 64.9142ZM39.7689 65.9454C39.7689 69.0411 37.2095 71.5729 34.0802 71.5729C30.9509 71.5729 28.3916 69.0399 28.3916 65.9454V56.8414C28.3916 53.7457 30.9509 51.2139 34.0802 51.2139C37.2095 51.2139 39.7689 53.7457 39.7689 56.8414V65.9454ZM59.5224 65.9454C59.5224 69.0411 56.9631 71.5729 53.8338 71.5729C50.7045 71.5729 48.1451 69.0399 48.1451 65.9454V56.8414C48.1451 53.7457 50.7056 51.2139 53.8338 51.2139C56.9631 51.2139 59.5224 53.7457 59.5224 56.8414V65.9454Z"
                    fill="white"
                  />
                  <defs>
                    <linearGradient id="paint0_linear" x1="64" y1="0" x2="64" y2="128" gradientUnits="userSpaceOnUse">
                      <stop stopColor="#534BB1" />
                      <stop offset="1" stopColor="#551BF9" />
                    </linearGradient>
                  </defs>
                </svg>
                Connect with Phantom
              </Button>

<Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex items-center justify-center"
                onClick={() => handleWalletAuth("walletconnect")}
              >
                <svg className="h-5 w-5 mr-2" viewBox="0 0 512 512" fill="none">
                  <path
                    d="M169.209 184.221C219.965 134.612 301.035 134.612 351.791 184.221L358.954 191.221C361.833 194.03 361.833 198.557 358.954 201.366L338.035 221.73C336.596 223.134 334.228 223.134 332.789 221.73L322.954 212.148C288.219 178.219 232.781 178.219 198.046 212.148L187.454 222.485C186.015 223.889 183.647 223.889 182.209 222.485L161.289 202.121C158.411 199.312 158.411 194.785 161.289 191.976L169.209 184.221ZM388.718 220.366L407.954 239.094C410.833 241.903 410.833 246.43 407.954 249.239L315.289 339.876C312.411 342.685 307.789 342.685 304.911 339.876L241.289 277.876C240.57 277.175 239.43 277.175 238.711 277.876L175.089 339.876C172.211 342.685 167.589 342.685 164.711 339.876L72.0459 249.239C69.1672 246.43 69.1672 241.903 72.0459 239.094L91.2822 220.366C94.1609 217.557 98.7828 217.557 101.661 220.366L165.289 282.366C166.007 283.067 167.147 283.067 167.865 282.366L231.489 220.366C234.367 217.557 238.989 217.557 241.867 220.366L305.489 282.366C306.207 283.067 307.347 283.067 308.065 282.366L371.693 220.366C374.572 217.557 379.193 217.557 382.072 220.366H388.718Z"
                    fill="#3B99FC"
                  />
                </svg>
                Connect with WalletConnect
              </Button>
            </div>

<div className="text-center text-sm text-gray-500 mt-4">
              <p>
                By connecting your wallet, you agree to our{" "}
                <a href="#" className="text-purple-400 hover:text-purple-300">
                  Terms of Service
                </a>{" "}
                and{" "}
                <a href="#" className="text-purple-400 hover:text-purple-300">
                  Privacy Policy
                </a>
                .
              </p>
            </div>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/auth/responsive-how-it-works.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { motion } from "framer-motion"
import { User, Mail, Key, CheckCircle, Wallet, CreditCard, Lock, Unlock, ChevronDown, ChevronUp } from "lucide-react"
import { useMediaQuery } from "@/hooks/use-mobile"

export default function ResponsiveHowItWorks() {
  const [activeTab, setActiveTab] = useState("email")
  const [expandedStep, setExpandedStep] = useState<number | null>(null)
  const isMobile = useMediaQuery("(max-width: 640px)")

const toggleStep = (index: number) => {
    if (expandedStep === index) {
      setExpandedStep(null)
    } else {
      setExpandedStep(index)
    }
  }

const emailSteps = [
    {
      icon: <User className="h-6 w-6 text-purple-400" />,
      title: "1. User Inputs Credentials",
      description: "Enter your email and password in the authentication form.",
    },
    {
      icon: <Mail className="h-6 w-6 text-purple-400" />,
      title: "2. Credentials Sent to Server",
      description: "The app securely sends your credentials to the authentication API endpoint (/api/auth/email).",
    },
    {
      icon: <Key className="h-6 w-6 text-purple-400" />,
      title: "3. Server Validates Credentials",
      description: "The server verifies your email and password against the database securely.",
    },
    {
      icon: <CheckCircle className="h-6 w-6 text-purple-400" />,
      title: "4. JWT Session Token Created",
      description: "Upon successful verification, a JWT token is created containing your user ID and session info.",
    },
    {
      icon: <CheckCircle className="h-6 w-6 text-green-400" />,
      title: "5. Session Established",
      description: "The JWT token is stored as an HTTP-only cookie in your browser and used for subsequent requests.",
    },
  ]

const walletSteps = [
    {
      icon: <Wallet className="h-6 w-6 text-purple-400" />,
      title: "1. Connect Wallet Request",
      description: "Click the 'Connect Wallet' button to initiate the wallet connection process.",
    },
    {
      icon: <Key className="h-6 w-6 text-purple-400" />,
      title: "2. Nonce Generation",
      description: "The server generates a unique nonce (one-time code) for secure wallet signing.",
    },
    {
      icon: <User className="h-6 w-6 text-purple-400" />,
      title: "3. Sign Message with Wallet",
      description: "Your wallet (MetaMask, Phantom, etc.) prompts you to sign the message containing the nonce.",
    },
    {
      icon: <CheckCircle className="h-6 w-6 text-purple-400" />,
      title: "4. Signature Verification",
      description: "The server verifies that the signature came from the wallet you claim to own.",
    },
    {
      icon: <CheckCircle className="h-6 w-6 text-green-400" />,
      title: "5. Authentication Complete",
      description: "Upon verification, a session is created and linked to your wallet address.",
    },
  ]

const nftSteps = [
    {
      icon: <Lock className="h-6 w-6 text-purple-400" />,
      title: "1. NFT-Gated Content Request",
      description: "You attempt to access content that requires ownership of a specific NFT.",
    },
    {
      icon: <Wallet className="h-6 w-6 text-purple-400" />,
      title: "2. Wallet Verification",
      description: "The system checks if you have a wallet connected to your account.",
    },
    {
      icon: <CreditCard className="h-6 w-6 text-purple-400" />,
      title: "3. NFT Ownership Check",
      description: "The server queries the blockchain to verify you own the required NFT in your wallet.",
    },
    {
      icon: <Unlock className="h-6 w-6 text-green-400" />,
      title: "4. Access Granted (if verified)",
      description: "If you own the required NFT, access to the content is granted immediately.",
    },
    {
      icon: <Lock className="h-6 w-6 text-red-400" />,
      title: "5. Access Denied (if not verified)",
      description:
        "If the NFT is not found in your wallet, you're prompted to acquire it or connect a different wallet.",
    },
  ]

const renderSteps = (steps: typeof emailSteps) => {
    if (isMobile) {
      return (
        <div className="grid gap-4">
          {steps.map((step, i) => (
            <motion.div
              key={i}
              custom={i}
              variants={stepVariants}
              initial="hidden"
              animate="visible"
              className="bg-gray-800/40 rounded-md border border-gray-700 overflow-hidden"
            >
              <div className="flex items-center justify-between p-3 cursor-pointer" onClick={() => toggleStep(i)}>
                <div className="flex items-center">
                  <div className="p-2 rounded-full bg-gray-800 border border-gray-700 mr-3">{step.icon}</div>
                  <h3 className="font-medium">{step.title}</h3>
                </div>
                {expandedStep === i ? (
                  <ChevronUp className="h-5 w-5 text-gray-400" />
                ) : (
                  <ChevronDown className="h-5 w-5 text-gray-400" />
                )}
              </div>
              {expandedStep === i && (
                <div className="px-4 pb-3 pt-0">
                  <p className="text-sm text-gray-400 ml-12">{step.description}</p>
                </div>
              )}
            </motion.div>
          ))}
        </div>
      )
    }

return (
      <div className="grid gap-6">
        {steps.map((step, i) => (
          <motion.div
            key={i}
            custom={i}
            variants={stepVariants}
            initial="hidden"
            animate="visible"
            className="flex items-start gap-4 bg-gray-800/40 p-4 rounded-md border border-gray-700"
          >
            <div className="p-2 rounded-full bg-gray-800 border border-gray-700">{step.icon}</div>
            <div>
              <h3 className="font-medium mb-1">{step.title}</h3>
              <p className="text-sm text-gray-400">{step.description}</p>
            </div>
          </motion.div>
        ))}
      </div>
    )
  }

return (
    <Card className="bg-gray-900/60 border-gray-800">
      <CardHeader>
        <CardTitle className="text-2xl font-bold">How Authentication Works</CardTitle>
        <CardDescription>
          Understand the authentication flow and how different methods secure your account
        </CardDescription>
      </CardHeader>
      <CardContent className="pt-0">
        <Tabs
          defaultValue="email"
          value={activeTab}
          onValueChange={(value) => {
            setActiveTab(value)
            setExpandedStep(null) // Reset expanded step when changing tabs
          }}
        >
          <TabsList className="grid grid-cols-3 mb-8">
            <TabsTrigger value="email" className="data-[state=active]:bg-purple-900/50">
              <Mail className="h-4 w-4 mr-2" /> Email
            </TabsTrigger>
            <TabsTrigger value="wallet" className="data-[state=active]:bg-purple-900/50">
              <Wallet className="h-4 w-4 mr-2" /> Wallet
            </TabsTrigger>
            <TabsTrigger value="nft" className="data-[state=active]:bg-purple-900/50">
              <CreditCard className="h-4 w-4 mr-2" /> NFT
            </TabsTrigger>
          </TabsList>

<TabsContent value="email" className="space-y-8">
            {renderSteps(emailSteps)}
          </TabsContent>

<TabsContent value="wallet" className="space-y-8">
            {renderSteps(walletSteps)}
          </TabsContent>

<TabsContent value="nft" className="space-y-8">
            {renderSteps(nftSteps)}
          </TabsContent>
        </Tabs>

<div className="mt-8 p-4 bg-purple-900/20 rounded-md border border-purple-800/30">
          <h4 className="font-medium mb-2 flex items-center">
            <Key className="h-4 w-4 mr-2 text-purple-400" />
            Security Notes
          </h4>
          <ul className="text-sm text-gray-300 space-y-2">
            <li>
              • Authentication state is managed through secure HTTP-only cookies that can't be accessed by JavaScript
            </li>
            <li>• JWT tokens are used for maintaining sessions and are validated on each request</li>
            <li>• Wallet signatures cryptographically prove ownership without exposing private keys</li>
            <li>• All API routes are protected against CSRF attacks and unauthorized access</li>
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/how-it-works/page.tsx" isEdit="true" isMerged="true"
import type { Metadata } from "next"
import ResponsiveHowItWorks from "@/components/auth/responsive-how-it-works"

export const metadata: Metadata = {
  title: "How Authentication Works | Music Nodes",
  description: "Learn about the authentication flow and security in Music Nodes platform",
}

export default function HowItWorksPage() {
  return (
    <div className="container mx-auto px-4 py-8 md:py-12">
      <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">How Music Nodes Authentication Works</h1>
      <p className="text-gray-400 mb-6 md:mb-8 max-w-3xl">
        Music Nodes provides multiple authentication methods to secure your account and digital assets. Learn how each
        method works and how we protect your data.
      </p>

<div className="max-w-3xl mt-8 md:mt-12">
        <h2 className="text-xl md:text-2xl font-bold mb-3 md:mb-4">Technical Implementation Details</h2>
        <div className="space-y-4 md:space-y-6">
          <div>
            <h3 className="text-lg md:text-xl font-semibold mb-2">Server-Side Authentication</h3>
            <p className="text-gray-400 text-sm md:text-base">
              Music Nodes uses Next.js API routes to handle authentication securely on the server-side. This prevents
              exposing sensitive operations to the client and follows best security practices.
            </p>
          </div>

<div>
            <h3 className="text-lg md:text-xl font-semibold mb-2">Session Management</h3>
            <p className="text-gray-400 text-sm md:text-base">
              Sessions are managed using JWT (JSON Web Tokens) stored in HTTP-only cookies, making them inaccessible to
              JavaScript to prevent XSS attacks. Each token contains the user ID and authentication method, with a
              configurable expiration period.
            </p>
          </div>

<div>
            <h3 className="text-lg md:text-xl font-semibold mb-2">Wallet Authentication</h3>
            <p className="text-gray-400 text-sm md:text-base">
              When authenticating with a wallet, we use message signing to verify wallet ownership. This process is
              cryptographically secure as it proves you control the private keys without ever exposing them.
            </p>
          </div>

<div>
            <h3 className="text-lg md:text-xl font-semibold mb-2">Error Handling</h3>
            <p className="text-gray-400 text-sm md:text-base">
              The authentication system includes comprehensive error handling for network issues, invalid responses, and
              authentication failures. This ensures a smooth user experience even when problems occur.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import {
  Heart,
  ShoppingCart,
  Filter,
  Search,
  Music,
  ImageIcon,
  Package,
  Zap,
  SlidersHorizontal,
  X,
  ChevronDown,
  ChevronUp,
  Loader2,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { useMediaQuery } from "@/hooks/use-mobile"

// Sample data for marketplace items (expanded from the preview)
const marketplaceItems = [
  {
    id: 1,
    title: "Cosmic Beats Vol. 1",
    creator: "Stellar Sound",
    price: "0.25 ETH",
    likes: 124,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Audio Track + Stems",
    featured: true,
  },
  {
    id: 2,
    title: "Visual Album Artwork",
    creator: "DigitalCanvas",
    price: "150 TRX",
    likes: 89,
    category: "artwork",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Tron",
    type: "Visual Art + Commercial Rights",
    featured: false,
  },
  {
    id: 3,
    title: "Limited Edition Merch Bundle",
    creator: "FashionBeats",
    price: "2 SOL",
    likes: 67,
    category: "physical",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Solana",
    type: "Physical Goods + Digital Collectible",
    featured: false,
  },
  {
    id: 4,
    title: "Producer Pack: Lo-Fi Dreams",
    creator: "BeatArchitect",
    price: "0.15 ETH",
    likes: 215,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Sample Pack + License",
    featured: true,
  },
  {
    id: 5,
    title: "Concert Experience Pass",
    creator: "LiveNation",
    price: "0.5 ETH",
    likes: 178,
    category: "experience",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Event Access + Digital Memorabilia",
    featured: true,
  },
  {
    id: 6,
    title: "Exclusive Interview Series",
    creator: "MusicInsider",
    price: "75 TRX",
    likes: 42,
    category: "content",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Tron",
    type: "Video Content + Community Access",
    featured: false,
  },
  {
    id: 7,
    title: "Signature Guitar Riffs",
    creator: "GuitarLegend",
    price: "0.08 ETH",
    likes: 156,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Audio Samples + Usage Rights",
    featured: false,
  },
  {
    id: 8,
    title: "Festival Photography Collection",
    creator: "ConcertLens",
    price: "1.2 SOL",
    likes: 93,
    category: "artwork",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Solana",
    type: "Photography + Print Rights",
    featured: false,
  },
  {
    id: 9,
    title: "Ambient Soundscapes",
    creator: "SoundDesigner",
    price: "0.12 ETH",
    likes: 87,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Audio Tracks + License",
    featured: false,
  },
  {
    id: 10,
    title: "Virtual Concert Ticket",
    creator: "VirtualVenue",
    price: "0.3 SOL",
    likes: 134,
    category: "experience",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Solana",
    type: "Virtual Event Access",
    featured: false,
  },
  {
    id: 11,
    title: "Vinyl Album Design",
    creator: "RetroDesigns",
    price: "100 TRX",
    likes: 76,
    category: "artwork",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Tron",
    type: "Album Art + Physical Print",
    featured: false,
  },
  {
    id: 12,
    title: "Music Production Masterclass",
    creator: "ProducerPro",
    price: "0.2 ETH",
    likes: 198,
    category: "content",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Educational Content + Community",
    featured: false,
  },
]

export default function MarketplacePage() {
  const [activeTab, setActiveTab] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [priceRange, setPriceRange] = useState([0, 100])
  const [showFilters, setShowFilters] = useState(false)
  const [sortBy, setSortBy] = useState("newest")
  const [isLoading, setIsLoading] = useState(false)
  const [loadingMore, setLoadingMore] = useState(false)
  const [selectedBlockchains, setSelectedBlockchains] = useState<string[]>([])
  const [expandedFilters, setExpandedFilters] = useState<string[]>([])
  const isMobile = useMediaQuery("(max-width: 768px)")

// Filter by blockchain
    if (selectedBlockchains.length > 0 && !selectedBlockchains.includes(item.blockchain)) return false

return true
  })

// Sort items
  const sortedItems = [...filteredItems].sort((a, b) => {
    if (sortBy === "newest") {
      return b.id - a.id
    } else if (sortBy === "oldest") {
      return a.id - b.id
    } else if (sortBy === "price_low_high") {
      return Number.parseFloat(a.price.split(" ")[0]) - Number.parseFloat(b.price.split(" ")[0])
    } else if (sortBy === "price_high_low") {
      return Number.parseFloat(b.price.split(" ")[0]) - Number.parseFloat(a.price.split(" ")[0])
    } else if (sortBy === "most_liked") {
      return b.likes - a.likes
    }
    return 0
  })

// Simulate loading more items
  const handleLoadMore = () => {
    setLoadingMore(true)
    // Simulate API call delay
    setTimeout(() => {
      setLoadingMore(false)
    }, 1000)
  }

const toggleFilter = (filter: string) => {
    setExpandedFilters((prev) => (prev.includes(filter) ? prev.filter((f) => f !== filter) : [...prev, filter]))
  }

const toggleBlockchain = (blockchain: string) => {
    setSelectedBlockchains((prev) =>
      prev.includes(blockchain) ? prev.filter((b) => b !== blockchain) : [...prev, blockchain],
    )
  }

const resetFilters = () => {
    setActiveTab("all")
    setSearchQuery("")
    setPriceRange([0, 100])
    setSortBy("newest")
    setSelectedBlockchains([])
  }

// Simulate initial loading
  useEffect(() => {
    setIsLoading(true)
    setTimeout(() => {
      setIsLoading(false)
    }, 800)
  }, [])

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8 md:py-12">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <h1 className="text-3xl md:text-4xl font-bold mb-2">Marketplace</h1>
          <p className="text-gray-400 mb-6 md:mb-8">
            Discover and collect unique music assets from creators around the world.
          </p>
        </motion.div>

<div className="flex flex-col md:flex-row gap-4 mb-6">
          <div className="relative flex-grow">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-4 w-4" />
            <Input
              placeholder="Search by title, creator, or keyword"
              className="pl-10 bg-gray-900/60 border-gray-800"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>

{isMobile ? (
            <Sheet>
              <SheetTrigger asChild>
                <Button
                  variant="outline"
                  className="border-gray-700 text-gray-400 hover:bg-gray-800 flex items-center gap-2"
                >
                  <SlidersHorizontal className="h-4 w-4" /> Filters
                </Button>
              </SheetTrigger>
              <SheetContent side="bottom" className="bg-gray-900 border-gray-800 rounded-t-xl h-[80vh]">
                <SheetHeader className="mb-4">
                  <SheetTitle className="text-white flex justify-between items-center">
                    <span>Filters</span>
                    <Button variant="ghost" size="sm" onClick={resetFilters} className="text-gray-400 hover:text-white">
                      Reset All
                    </Button>
                  </SheetTitle>
                </SheetHeader>
                <div className="space-y-6 overflow-y-auto h-full pb-20">
                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <h3 className="font-medium">Blockchain</h3>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => toggleFilter("blockchain")}
                        className="h-8 w-8 p-0"
                      >
                        {expandedFilters.includes("blockchain") ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )}
                      </Button>
                    </div>
                    {expandedFilters.includes("blockchain") && (
                      <div className="space-y-2">
                        {["Ethereum", "Solana", "Tron"].map((blockchain) => (
                          <div key={blockchain} className="flex items-center">
                            <input
                              type="checkbox"
                              id={`mobile-${blockchain}`}
                              className="mr-2"
                              checked={selectedBlockchains.includes(blockchain)}
                              onChange={() => toggleBlockchain(blockchain)}
                            />
                            <label htmlFor={`mobile-${blockchain}`}>{blockchain}</label>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

<div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <h3 className="font-medium">Price Range</h3>
                      <Button variant="ghost" size="sm" onClick={() => toggleFilter("price")} className="h-8 w-8 p-0">
                        {expandedFilters.includes("price") ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )}
                      </Button>
                    </div>
                    {expandedFilters.includes("price") && (
                      <>
                        <Slider
                          defaultValue={[0, 100]}
                          max={100}
                          step={1}
                          value={priceRange}
                          onValueChange={setPriceRange}
                          className="py-4"
                        />
                        <div className="flex justify-between text-sm text-gray-400">
                          <span>Min: ${priceRange[0]}</span>
                          <span>Max: ${priceRange[1]}</span>
                        </div>
                      </>
                    )}
                  </div>

<div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <h3 className="font-medium">Sort By</h3>
                      <Button variant="ghost" size="sm" onClick={() => toggleFilter("sort")} className="h-8 w-8 p-0">
                        {expandedFilters.includes("sort") ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )}
                      </Button>
                    </div>
                    {expandedFilters.includes("sort") && (
                      <div className="space-y-2">
                        {[
                          { value: "newest", label: "Newest First" },
                          { value: "oldest", label: "Oldest First" },
                          { value: "price_low_high", label: "Price: Low to High" },
                          { value: "price_high_low", label: "Price: High to Low" },
                          { value: "most_liked", label: "Most Popular" },
                        ].map((option) => (
                          <div key={option.value} className="flex items-center">
                            <input
                              type="radio"
                              id={`mobile-sort-${option.value}`}
                              name="mobile-sort"
                              className="mr-2"
                              checked={sortBy === option.value}
                              onChange={() => setSortBy(option.value)}
                            />
                            <label htmlFor={`mobile-sort-${option.value}`}>{option.label}</label>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
                <div className="absolute bottom-0 left-0 right-0 p-4 bg-gray-900 border-t border-gray-800">
                  <Button className="w-full bg-purple-600 hover:bg-purple-700">Apply Filters</Button>
                </div>
              </SheetContent>
            </Sheet>
          ) : (
            <Button
              variant="outline"
              className="border-gray-700 text-gray-400 hover:bg-gray-800 flex items-center gap-2"
              onClick={() => setShowFilters(!showFilters)}
            >
              {showFilters ? <X className="h-4 w-4" /> : <Filter className="h-4 w-4" />} Filters
            </Button>
          )}

<Button variant="outline" className="border-purple-500 text-purple-400 hover:bg-purple-950 md:ml-2">
            <Link href="/marketplace/create" className="flex items-center gap-2">
              <ShoppingCart className="h-4 w-4" /> Create Listing
            </Link>
          </Button>
        </div>

{showFilters && !isMobile && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="bg-gray-900/60 border border-gray-800 rounded-lg p-6 mb-8"
          >
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="space-y-4">
                <h3 className="font-medium">Blockchain</h3>
                <div className="space-y-2">
                  {["Ethereum", "Solana", "Tron"].map((blockchain) => (
                    <div key={blockchain} className="flex items-center">
                      <input
                        type="checkbox"
                        id={blockchain}
                        className="mr-2"
                        checked={selectedBlockchains.includes(blockchain)}
                        onChange={() => toggleBlockchain(blockchain)}
                      />
                      <label htmlFor={blockchain}>{blockchain}</label>
                    </div>
                  ))}
                </div>
              </div>

<div className="space-y-4">
                <h3 className="font-medium">Sort By</h3>
                <select
                  className="w-full bg-gray-800 border border-gray-700 rounded-md p-2"
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value)}
                >
                  <option value="newest">Newest First</option>
                  <option value="oldest">Oldest First</option>
                  <option value="price_low_high">Price: Low to High</option>
                  <option value="price_high_low">Price: High to Low</option>
                  <option value="most_liked">Most Popular</option>
                </select>
              </div>
            </div>

<div className="flex justify-end mt-6">
              <Button
                variant="outline"
                className="mr-2 border-gray-700 text-gray-400 hover:bg-gray-800"
                onClick={resetFilters}
              >
                Reset
              </Button>
              <Button className="bg-purple-600 hover:bg-purple-700">Apply Filters</Button>
            </div>
          </motion.div>
        )}

<Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="bg-gray-800/50 border border-gray-700 overflow-x-auto flex-nowrap w-full justify-start md:justify-center">
            <TabsTrigger value="all" className="data-[state=active]:bg-purple-900/50">
              All
            </TabsTrigger>
            <TabsTrigger value="music" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              <Music className="h-4 w-4 mr-2" /> Music
            </TabsTrigger>
            <TabsTrigger value="artwork" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              <ImageIcon className="h-4 w-4 mr-2" /> Artwork
            </TabsTrigger>
            <TabsTrigger value="physical" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              <Package className="h-4 w-4 mr-2" /> Physical
            </TabsTrigger>
            <TabsTrigger value="experience" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              <Zap className="h-4 w-4 mr-2" /> Experiences
            </TabsTrigger>
            <TabsTrigger value="content" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              <Zap className="h-4 w-4 mr-2" /> Content
            </TabsTrigger>
          </TabsList>
        </Tabs>

{isLoading ? (
          <div className="flex justify-center items-center py-20">
            <Loader2 className="h-10 w-10 animate-spin text-purple-500" />
          </div>
        ) : sortedItems.length > 0 ? (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
              {sortedItems.map((item, index) => (
                <motion.div
                  key={item.id}
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3, delay: index * 0.05 }}
                >
                  <Link href={`/marketplace/${item.id}`}>
                    <Card className="bg-gray-900/60 border-gray-800 overflow-hidden hover:border-purple-500/50 transition-all duration-300 h-full">
                      <div className="relative h-48 w-full overflow-hidden">
                        <Image
                          src={item.image || "/placeholder.svg"}
                          alt={item.title}
                          fill
                          className="object-cover transition-transform duration-500 hover:scale-110"
                        />
                        <Badge className="absolute top-2 right-2 bg-black/60 backdrop-blur-sm border border-white/10">
                          {item.blockchain}
                        </Badge>
                        {item.featured && (
                          <Badge className="absolute top-2 left-2 bg-purple-600/80 backdrop-blur-sm border border-purple-400/20">
                            Featured
                          </Badge>
                        )}
                      </div>
                      <CardContent className="pt-4">
                        <h3 className="font-bold text-lg mb-1 line-clamp-1">{item.title}</h3>
                        <p className="text-gray-400 text-sm mb-2">by {item.creator}</p>
                        <p className="text-xs text-gray-500 mb-2">{item.type}</p>
                        <div className="flex justify-between items-center">
                          <span className="font-semibold text-purple-400">{item.price}</span>
                          <div className="flex items-center text-gray-400 text-sm">
                            <Heart className="h-4 w-4 mr-1" /> {item.likes}
                          </div>
                        </div>
                      </CardContent>
                      <CardFooter className="pt-0">
                        <Button className="w-full bg-purple-600 hover:bg-purple-700">
                          <ShoppingCart className="h-4 w-4 mr-2" /> View Details
                        </Button>
                      </CardFooter>
                    </Card>
                  </Link>
                </motion.div>
              ))}
            </div>

<div className="mt-10 text-center">
              <Button
                onClick={handleLoadMore}
                disabled={loadingMore}
                className="bg-gray-800 hover:bg-gray-700 border border-gray-700"
              >
                {loadingMore ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading...
                  </>
                ) : (
                  "Load More"
                )}
              </Button>
            </div>
          </>
        ) : (
          <div className="col-span-full text-center py-12">
            <p className="text-gray-400 text-lg mb-4">No items found matching your criteria</p>
            <Button
              variant="outline"
              className="border-purple-500 text-purple-400 hover:bg-purple-950"
              onClick={resetFilters}
            >
              Reset Filters
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/marketplace/[id]/page.tsx" isMerged="true"
"use client"

import { Card } from "@/components/ui/card"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  Heart,
  Share2,
  ShoppingCart,
  Music,
  FileText,
  Clock,
  Tag,
  Shield,
  ArrowLeft,
  Loader2,
  ChevronDown,
  ChevronUp,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useMediaQuery } from "@/hooks/use-mobile"
import { useToast } from "@/hooks/use-toast"
import { useRouter } from "next/navigation"

// Sample marketplace item data
const marketplaceItem = {
  id: 1,
  title: "Cosmic Beats Vol. 1",
  creator: "Stellar Sound",
  creatorId: "stellar-sound",
  creatorAvatar: "/placeholder.svg?height=100&width=100",
  price: "0.25 ETH",
  fiatPrice: "$450 USD",
  likes: 124,
  category: "music",
  image: "/placeholder.svg?height=600&width=600",
  blockchain: "Ethereum",
  type: "Audio Track + Stems",
  featured: true,
  description:
    "Cosmic Beats Vol. 1 is a collection of futuristic electronic music tracks with a space-themed ambiance. Perfect for producers looking to create atmospheric soundscapes or DJs wanting to add unique transitions to their sets.",
  details: {
    contractAddress: "0x1234...5678",
    tokenId: "42",
    tokenStandard: "ERC-1155",
    blockchain: "Ethereum",
    createdDate: "2023-06-15",
  },
  content: {
    audioTracks: 5,
    stemFiles: 20,
    totalSize: "1.2 GB",
    fileFormats: ["WAV", "MP3"],
    bpm: "90-120",
    key: "Various",
  },
  rights: {
    commercial: true,
    remix: true,
    attribution: false,
    territorial: "Worldwide",
    duration: "Perpetual",
  },
  history: [
    {
      event: "Listed",
      price: "0.25 ETH",
      from: "Stellar Sound",
      to: "Marketplace",
      date: "2023-06-15",
      txHash: "0xabcd...1234",
    },
    {
      event: "Created",
      from: "Stellar Sound",
      date: "2023-06-10",
      txHash: "0xefgh...5678",
    },
  ],
}

// Sample related items
const relatedItems = [
  {
    id: 4,
    title: "Producer Pack: Lo-Fi Dreams",
    creator: "BeatArchitect",
    price: "0.15 ETH",
    likes: 215,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Sample Pack + License",
  },
  {
    id: 7,
    title: "Signature Guitar Riffs",
    creator: "GuitarLegend",
    price: "0.08 ETH",
    likes: 156,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Audio Samples + Usage Rights",
  },
  {
    id: 9,
    title: "Ambient Soundscapes",
    creator: "SoundDesigner",
    price: "0.12 ETH",
    likes: 87,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Audio Tracks + License",
  },
]

export default function MarketplaceItemPage({ params }: { params: { id: string } }) {
  const [activeTab, setActiveTab] = useState("details")
  const [isLiked, setIsLiked] = useState(false)
  const [likeCount, setLikeCount] = useState(marketplaceItem.likes)
  const [isPurchasing, setIsPurchasing] = useState(false)
  const [expandedSection, setExpandedSection] = useState<string | null>(null)
  const isMobile = useMediaQuery("(max-width: 768px)")
  const { toast } = useToast()
  const router = useRouter()

const handlePurchase = async () => {
    setIsPurchasing(true)
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))
      toast({
        title: "Purchase successful!",
        description: "The item has been added to your collection",
      })
      router.push("/profile/collection")
    } catch (error) {
      toast({
        title: "Purchase failed",
        description: "An error occurred while processing your purchase",
        variant: "destructive",
      })
    } finally {
      setIsPurchasing(false)
    }
  }

const toggleLike = () => {
    if (isLiked) {
      setLikeCount((prev) => prev - 1)
    } else {
      setLikeCount((prev) => prev + 1)
    }
    setIsLiked(!isLiked)
  }

const toggleSection = (section: string) => {
    if (expandedSection === section) {
      setExpandedSection(null)
    } else {
      setExpandedSection(section)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8 md:py-12">
        <div className="mb-6">
          <Link
            href="/marketplace"
            className="inline-flex items-center text-gray-400 hover:text-white transition-colors"
          >
            <ArrowLeft className="h-4 w-4 mr-2" /> Back to Marketplace
          </Link>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Left column - Image and audio preview */}
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
            <div className="relative aspect-square rounded-xl overflow-hidden border border-gray-800">
              <Image
                src={marketplaceItem.image || "/placeholder.svg"}
                alt={marketplaceItem.title}
                fill
                className="object-cover"
                priority
              />
            </div>

{/* Audio preview controls - Only shown for music items */}
            {marketplaceItem.category === "music" && (
              <div className="mt-4 p-4 bg-gray-900/60 border border-gray-800 rounded-lg">
                <h3 className="text-lg font-medium mb-3 flex items-center">
                  <Music className="h-5 w-5 mr-2 text-purple-400" /> Audio Preview
                </h3>
                <div className="space-y-3">
                  {[1, 2, 3].map((track) => (
                    <div
                      key={track}
                      className="flex items-center justify-between p-2 bg-gray-800/50 rounded-md border border-gray-700"
                    >
                      <div className="flex items-center">
                        <Button
                          size="sm"
                          variant="ghost"
                          className="h-8 w-8 rounded-full p-0 mr-3 text-purple-400 hover:text-purple-300 hover:bg-purple-900/20"
                        >
                          <Music className="h-4 w-4" />
                        </Button>
                        <span className="text-sm">Track {track} Preview</span>
                      </div>
                      <span className="text-xs text-gray-500">0:30</span>
                    </div>
                  ))}
                </div>
                <p className="text-xs text-gray-500 mt-3">
                  Preview tracks are 30-second samples. Purchase to access full tracks and stems.
                </p>
              </div>
            )}
          </motion.div>

{/* Right column - Item details and purchase options */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <div className="flex items-center justify-between mb-2">
              <Badge className="bg-black/60 backdrop-blur-sm border border-white/10">
                {marketplaceItem.blockchain}
              </Badge>
              <div className="flex items-center space-x-2">
                <Button size="sm" variant="ghost" className="h-8 w-8 rounded-full p-0" onClick={toggleLike}>
                  <Heart className={`h-4 w-4 ${isLiked ? "fill-red-500 text-red-500" : "text-gray-400"}`} />
                </Button>
                <Button size="sm" variant="ghost" className="h-8 w-8 rounded-full p-0">
                  <Share2 className="h-4 w-4 text-gray-400" />
                </Button>
              </div>
            </div>

<h1 className="text-2xl md:text-3xl font-bold mb-2">{marketplaceItem.title}</h1>

<div className="flex items-center mb-4">
              <Link href={`/profile/${marketplaceItem.creatorId}`} className="flex items-center">
                <Avatar className="h-6 w-6 mr-2">
                  <AvatarImage
                    src={marketplaceItem.creatorAvatar || "/placeholder.svg"}
                    alt={marketplaceItem.creator}
                  />
                  <AvatarFallback>{marketplaceItem.creator[0]}</AvatarFallback>
                </Avatar>
                <span className="text-gray-300 text-sm">by {marketplaceItem.creator}</span>
              </Link>
              <span className="mx-2 text-gray-600">•</span>
              <span className="text-gray-400 text-sm flex items-center">
                <Heart className="h-3 w-3 mr-1" /> {likeCount}
              </span>
            </div>

<div className="mb-6">
              <div className="text-2xl font-bold text-purple-400 mb-1">{marketplaceItem.price}</div>
              <div className="text-sm text-gray-400">{marketplaceItem.fiatPrice}</div>
            </div>

<div className="flex flex-col sm:flex-row gap-3 mb-8">
              <Button
                className="flex-1 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                onClick={handlePurchase}
                disabled={isPurchasing}
              >
                {isPurchasing ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Processing...
                  </>
                ) : (
                  <>
                    <ShoppingCart className="h-4 w-4 mr-2" /> Buy Now
                  </>
                )}
              </Button>
              <Button variant="outline" className="flex-1 border-purple-500 text-purple-400 hover:bg-purple-950">
                Make Offer
              </Button>
            </div>

{isMobile ? (
              <div className="space-y-4">
                <div className="border-t border-gray-800 pt-4">
                  <div
                    className="flex justify-between items-center cursor-pointer"
                    onClick={() => toggleSection("description")}
                  >
                    <h3 className="text-lg font-medium">Description</h3>
                    {expandedSection === "description" ? (
                      <ChevronUp className="h-5 w-5 text-gray-400" />
                    ) : (
                      <ChevronDown className="h-5 w-5 text-gray-400" />
                    )}
                  </div>
                  {expandedSection === "description" && (
                    <p className="text-gray-400 mt-3">{marketplaceItem.description}</p>
                  )}
                </div>

<div className="border-t border-gray-800 pt-4">
                  <div
                    className="flex justify-between items-center cursor-pointer"
                    onClick={() => toggleSection("details")}
                  >
                    <h3 className="text-lg font-medium">Item Details</h3>
                    {expandedSection === "details" ? (
                      <ChevronUp className="h-5 w-5 text-gray-400" />
                    ) : (
                      <ChevronDown className="h-5 w-5 text-gray-400" />
                    )}
                  </div>
                  {expandedSection === "details" && (
                    <div className="mt-3 space-y-2">
                      <div className="flex justify-between">
                        <span className="text-gray-400">Contract Address</span>
                        <span className="text-sm font-mono">{marketplaceItem.details.contractAddress}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Token ID</span>
                        <span>{marketplaceItem.details.tokenId}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Token Standard</span>
                        <span>{marketplaceItem.details.tokenStandard}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Blockchain</span>
                        <span>{marketplaceItem.details.blockchain}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Created</span>
                        <span>{marketplaceItem.details.createdDate}</span>
                      </div>
                    </div>
                  )}
                </div>

<div className="border-t border-gray-800 pt-4">
                  <div
                    className="flex justify-between items-center cursor-pointer"
                    onClick={() => toggleSection("content")}
                  >
                    <h3 className="text-lg font-medium">Content</h3>
                    {expandedSection === "content" ? (
                      <ChevronUp className="h-5 w-5 text-gray-400" />
                    ) : (
                      <ChevronDown className="h-5 w-5 text-gray-400" />
                    )}
                  </div>
                  {expandedSection === "content" && (
                    <div className="mt-3 space-y-2">
                      <div className="flex justify-between">
                        <span className="text-gray-400">Audio Tracks</span>
                        <span>{marketplaceItem.content.audioTracks}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Stem Files</span>
                        <span>{marketplaceItem.content.stemFiles}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Total Size</span>
                        <span>{marketplaceItem.content.totalSize}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">File Formats</span>
                        <span>{marketplaceItem.content.fileFormats.join(", ")}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">BPM Range</span>
                        <span>{marketplaceItem.content.bpm}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Key</span>
                        <span>{marketplaceItem.content.key}</span>
                      </div>
                    </div>
                  )}
                </div>

<div className="border-t border-gray-800 pt-4">
                  <div
                    className="flex justify-between items-center cursor-pointer"
                    onClick={() => toggleSection("rights")}
                  >
                    <h3 className="text-lg font-medium">Rights & Licensing</h3>
                    {expandedSection === "rights" ? (
                      <ChevronUp className="h-5 w-5 text-gray-400" />
                    ) : (
                      <ChevronDown className="h-5 w-5 text-gray-400" />
                    )}
                  </div>
                  {expandedSection === "rights" && (
                    <div className="mt-3 space-y-2">
                      <div className="flex justify-between">
                        <span className="text-gray-400">Commercial Use</span>
                        <span>{marketplaceItem.rights.commercial ? "Allowed" : "Not Allowed"}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Remix Rights</span>
                        <span>{marketplaceItem.rights.remix ? "Allowed" : "Not Allowed"}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Attribution Required</span>
                        <span>{marketplaceItem.rights.attribution ? "Yes" : "No"}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">Territorial Rights</span>
                        <span>{marketplaceItem.rights.territorial}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">License Duration</span>
                        <span>{marketplaceItem.rights.duration}</span>
                      </div>
                    </div>
                  )}
                </div>

<div className="border-t border-gray-800 pt-4">
                  <div
                    className="flex justify-between items-center cursor-pointer"
                    onClick={() => toggleSection("history")}
                  >
                    <h3 className="text-lg font-medium">Item History</h3>
                    {expandedSection === "history" ? (
                      <ChevronUp className="h-5 w-5 text-gray-400" />
                    ) : (
                      <ChevronDown className="h-5 w-5 text-gray-400" />
                    )}
                  </div>
                  {expandedSection === "history" && (
                    <div className="mt-3 space-y-3">
                      {marketplaceItem.history.map((event, index) => (
                        <div
                          key={index}
                          className="flex items-start p-2 bg-gray-800/30 rounded-md border border-gray-800"
                        >
                          <div className="p-2 rounded-full bg-gray-800 mr-3">
                            {event.event === "Listed" ? (
                              <Tag className="h-4 w-4 text-purple-400" />
                            ) : (
                              <Clock className="h-4 w-4 text-blue-400" />
                            )}
                          </div>
                          <div>
                            <div className="flex items-center">
                              <span className="font-medium">{event.event}</span>
                              {event.price && <span className="ml-2 text-sm text-purple-400">for {event.price}</span>}
                            </div>
                            <div className="text-xs text-gray-500 mt-1">
                              {event.from && (
                                <span>
                                  From: {event.from}
                                  {event.to && ` To: ${event.to}`}
                                </span>
                              )}
                            </div>
                            <div className="text-xs text-gray-500 mt-1">{event.date}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ) : (
              <Tabs defaultValue="details" value={activeTab} onValueChange={setActiveTab}>
                <TabsList className="bg-gray-800/50 border border-gray-700 mb-6">
                  <TabsTrigger value="details" className="data-[state=active]:bg-purple-900/50">
                    <FileText className="h-4 w-4 mr-2" /> Details
                  </TabsTrigger>
                  <TabsTrigger value="content" className="data-[state=active]:bg-purple-900/50">
                    <Music className="h-4 w-4 mr-2" /> Content
                  </TabsTrigger>
                  <TabsTrigger value="rights" className="data-[state=active]:bg-purple-900/50">
                    <Shield className="h-4 w-4 mr-2" /> Rights
                  </TabsTrigger>
                  <TabsTrigger value="history" className="data-[state=active]:bg-purple-900/50">
                    <Clock className="h-4 w-4 mr-2" /> History
                  </TabsTrigger>
                </TabsList>

<TabsContent value="details" className="mt-0">
                  <div className="mb-6">
                    <h3 className="text-lg font-medium mb-3">Description</h3>
                    <p className="text-gray-400">{marketplaceItem.description}</p>
                  </div>

<div>
                    <h3 className="text-lg font-medium mb-3">Item Details</h3>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Contract Address</p>
                        <p className="font-mono text-sm">{marketplaceItem.details.contractAddress}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Token ID</p>
                        <p>{marketplaceItem.details.tokenId}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Token Standard</p>
                        <p>{marketplaceItem.details.tokenStandard}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Blockchain</p>
                        <p>{marketplaceItem.details.blockchain}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Created</p>
                        <p>{marketplaceItem.details.createdDate}</p>
                      </div>
                    </div>
                  </div>
                </TabsContent>

<TabsContent value="content" className="mt-0">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <h3 className="text-lg font-medium mb-3">Content Details</h3>
                      <div className="space-y-3">
                        <div>
                          <p className="text-sm text-gray-500 mb-1">Audio Tracks</p>
                          <p>{marketplaceItem.content.audioTracks}</p>
                        </div>
                        <div>
                          <p className="text-sm text-gray-500 mb-1">Stem Files</p>
                          <p>{marketplaceItem.content.stemFiles}</p>
                        </div>
                        <div>
                          <p className="text-sm text-gray-500 mb-1">Total Size</p>
                          <p>{marketplaceItem.content.totalSize}</p>
                        </div>
                        <div>
                          <p className="text-sm text-gray-500 mb-1">File Formats</p>
                          <p>{marketplaceItem.content.fileFormats.join(", ")}</p>
                        </div>
                      </div>
                    </div>
                    <div>
                      <h3 className="text-lg font-medium mb-3">Music Details</h3>
                      <div className="space-y-3">
                        <div>
                          <p className="text-sm text-gray-500 mb-1">BPM Range</p>
                          <p>{marketplaceItem.content.bpm}</p>
                        </div>
                        <div>
                          <p className="text-sm text-gray-500 mb-1">Key</p>
                          <p>{marketplaceItem.content.key}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </TabsContent>

<TabsContent value="rights" className="mt-0">
                  <h3 className="text-lg font-medium mb-3">Rights & Licensing</h3>
                  <div className="grid grid-cols-2 gap-6">
                    <div className="space-y-3">
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Commercial Use</p>
                        <p>{marketplaceItem.rights.commercial ? "Allowed" : "Not Allowed"}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Remix Rights</p>
                        <p>{marketplaceItem.rights.remix ? "Allowed" : "Not Allowed"}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Attribution Required</p>
                        <p>{marketplaceItem.rights.attribution ? "Yes" : "No"}</p>
                      </div>
                    </div>
                    <div className="space-y-3">
                      <div>
                        <p className="text-sm text-gray-500 mb-1">Territorial Rights</p>
                        <p>{marketplaceItem.rights.territorial}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500 mb-1">License Duration</p>
                        <p>{marketplaceItem.rights.duration}</p>
                      </div>
                    </div>
                  </div>
                </TabsContent>

<TabsContent value="history" className="mt-0">
                  <h3 className="text-lg font-medium mb-3">Item History</h3>
                  <div className="space-y-4">
                    {marketplaceItem.history.map((event, index) => (
                      <div
                        key={index}
                        className="flex items-start p-3 bg-gray-800/30 rounded-md border border-gray-800"
                      >
                        <div className="p-2 rounded-full bg-gray-800 mr-3">
                          {event.event === "Listed" ? (
                            <Tag className="h-4 w-4 text-purple-400" />
                          ) : (
                            <Clock className="h-4 w-4 text-blue-400" />
                          )}
                        </div>
                        <div>
                          <div className="flex items-center">
                            <span className="font-medium">{event.event}</span>
                            {event.price && <span className="ml-2 text-purple-400">for {event.price}</span>}
                          </div>
                          <div className="text-sm text-gray-500 mt-1">
                            {event.from && (
                              <span>
                                From: {event.from}
                                {event.to && ` To: ${event.to}`}
                              </span>
                            )}
                          </div>
                          <div className="text-sm text-gray-500 mt-1">{event.date}</div>
                          <div className="text-xs font-mono text-gray-600 mt-1">Tx: {event.txHash}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </TabsContent>
              </Tabs>
            )}
          </motion.div>
        </div>

{/* Related items section */}
        <div className="mt-16">
          <h2 className="text-2xl font-bold mb-6">Related Items</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
            {relatedItems.map((item) => (
              <motion.div
                key={item.id}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.3 }}
              >
                <Link href={`/marketplace/${item.id}`}>
                  <Card className="bg-gray-900/60 border-gray-800 overflow-hidden hover:border-purple-500/50 transition-all duration-300">
                    <div className="relative h-48 w-full overflow-hidden">
                      <Image
                        src={item.image || "/placeholder.svg"}
                        alt={item.title}
                        fill
                        className="object-cover transition-transform duration-500 hover:scale-110"
                      />
                      <Badge className="absolute top-2 right-2 bg-black/60 backdrop-blur-sm border border-white/10">
                        {item.blockchain}
                      </Badge>
                    </div>
                    <div className="p-4">
                      <h3 className="font-bold text-lg mb-1 line-clamp-1">{item.title}</h3>
                      <p className="text-gray-400 text-sm mb-2">by {item.creator}</p>
                      <p className="text-xs text-gray-500 mb-2">{item.type}</p>
                      <div className="flex justify-between items-center">
                        <span className="font-semibold text-purple-400">{item.price}</span>
                        <div className="flex items-center text-gray-400 text-sm">
                          <Heart className="h-4 w-4 mr-1" /> {item.likes}
                        </div>
                      </div>
                    </div>
                  </Card>
                </Link>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/learn/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="app/api/learn/progress/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"
import { verifyJWT } from "@/lib/auth/jwt"

// Mock user progress data
const mockUserProgress = {
  "user-1": {
    "music-production-101": {
      courseId: "music-production-101",
      progress: 45,
      completedLessons: ["lesson-1-1", "lesson-1-2"],
      lastAccessed: "2023-06-20T15:30:00Z",
      lastWatched: "lesson-1-3",
    },
    "blockchain-for-musicians": {
      courseId: "blockchain-for-musicians",
      progress: 20,
      completedLessons: ["lesson-1-1"],
      lastAccessed: "2023-06-18T10:15:00Z",
      lastWatched: "lesson-1-2",
    },
  },
}

// GET handler for retrieving user progress
export async function GET(request: Request) {
  try {
    // Get session token from cookies
    const sessionToken = cookies().get("session_token")?.value

if (!sessionToken) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

// Verify JWT token
    const payload = await verifyJWT(sessionToken)

if (!payload || !payload.userId) {
      return NextResponse.json({ error: "Invalid session" }, { status: 401 })
    }

const userId = payload.userId

// Get course ID from query params
    const url = new URL(request.url)
    const courseId = url.searchParams.get("courseId")

// In a real app, you would fetch progress from a database
    // Return all courses progress or specific course progress
    if (courseId) {
      const courseProgress = mockUserProgress[userId]?.[courseId] || {
        courseId,
        progress: 0,
        completedLessons: [],
        lastAccessed: new Date().toISOString(),
      }
      return NextResponse.json(courseProgress)
    } else {
      const userProgress = mockUserProgress[userId] || {}
      return NextResponse.json(Object.values(userProgress))
    }
  } catch (error) {
    console.error("Error fetching progress:", error)
    return NextResponse.json({ error: "Failed to fetch progress" }, { status: 500 })
  }
}

// POST handler for updating user progress
export async function POST(request: Request) {
  try {
    // Get session token from cookies
    const sessionToken = cookies().get("session_token")?.value

if (!sessionToken) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

// Verify JWT token
    const payload = await verifyJWT(sessionToken)

if (!payload || !payload.userId) {
      return NextResponse.json({ error: "Invalid session" }, { status: 401 })
    }

const userId = payload.userId
    const body = await request.json()

// Validate required fields
    if (!body.courseId || !body.lessonId) {
      return NextResponse.json({ error: "Missing required fields: courseId and lessonId" }, { status: 400 })
    }

// In a real app, you would update progress in a database
    // For now, just return a success response
    return NextResponse.json({
      success: true,
      message: "Progress updated successfully",
      data: {
        courseId: body.courseId,
        lessonId: body.lessonId,
        completed: body.completed || false,
        progress: body.progress || 0,
        lastAccessed: new Date().toISOString(),
      },
    })
  } catch (error) {
    console.error("Error updating progress:", error)
    return NextResponse.json({ error: "Failed to update progress" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="lib/ai/agent-system/types.ts" isMerged="true"
/**
 * Core types for the AI Agent Ecosystem
 */

export interface AgentCapability {
  id: string
  name: string
  description: string
  modalities: ModalityType[]
  requiresAuth: boolean
  pricing?: {
    type: "free" | "premium" | "pay-per-use"
    amount?: number
  }
}

export interface AIAgent {
  id: string
  name: string
  description: string
  avatar: string
  role: "creator" | "promoter" | "manager" | "analyst" | "mentor" | "coach"
  capabilities: AgentCapability[]
  specialization: string[]
  modelProvider: "openai" | "anthropic" | "nvidia" | "amx" | "custom"
  baseModel: string
  finetuned: boolean
  multiModal: boolean
  contextWindow: number
  createdAt: Date
  updatedAt: Date
}

export interface RoleModel extends AIAgent {
  basedOn: {
    name: string
    profession: string
    achievements: string[]
    socialProfiles?: Record<string, string>
  }
  careerPath: {
    milestones: Array<{
      title: string
      description: string
      timeframe: string
      completed: boolean
    }>
  }
  marketingStrategy: {
    channels: string[]
    targetAudience: string[]
    contentCalendar?: any
  }
}

export interface AgentAction {
  id: string
  agentId: string
  type: "inbound" | "outbound"
  name: string
  description: string
  parameters: Record<string, any>
  result?: any
  status: "pending" | "in-progress" | "completed" | "failed"
  createdAt: Date
  completedAt?: Date
}

export interface AgentSession {
  id: string
  userId: string
  agentId: string
  startedAt: Date
  endedAt?: Date
  messages: AgentMessage[]
  actions: AgentAction[]
  context: Record<string, any>
}

export interface AgentMessage {
  id: string
  sessionId: string
  role: "user" | "agent" | "system"
  content: string | AgentMessageContent[]
  createdAt: Date
}

export interface AgentMessageContent {
  type: ModalityType
  value: string
  metadata?: Record<string, any>
}

export interface LearnToEarnMilestone {
  id: string
  title: string
  description: string
  xpReward: number
  nftReward?: {
    contractAddress: string
    tokenId: string
    metadata: Record<string, any>
  }
  requirements: {
    type: "course_completion" | "content_creation" | "social_engagement" | "nft_creation"
    value: string | number
  }[]
  completed: boolean
  completedAt?: Date
}

export interface UserAgentProfile {
  userId: string
  activeAgents: string[]
  completedMilestones: string[]
  xpPoints: number
  level: number
  preferences: Record<string, any>
  insights: Record<string, any>
}
[V0_FILE]typescriptreact:file="lib/ai/agent-system/agent-service.ts" isMerged="true"
import { generateText, streamText } from "ai"
import { openai } from "@ai-sdk/openai"
import type { AIAgent, AgentAction, AgentSession, AgentMessage, ModalityType } from "./types"

export class AgentService {
  private agent: AIAgent

constructor(agent: AIAgent) {
    this.agent = agent
  }

async createSession(userId: string): Promise<AgentSession> {
    // In a real implementation, this would create a session in the database
    const session: AgentSession = {
      id: crypto.randomUUID(),
      userId,
      agentId: this.agent.id,
      startedAt: new Date(),
      messages: [],
      actions: [],
      context: {
        agentRole: this.agent.role,
        agentSpecialization: this.agent.specialization,
      },
    }

return session
  }

async processMessage(session: AgentSession, message: string, modality: ModalityType = "text"): Promise<AgentMessage> {
    // Create user message
    const userMessage: AgentMessage = {
      id: crypto.randomUUID(),
      sessionId: session.id,
      role: "user",
      content: message,
      createdAt: new Date(),
    }

// Add to session messages
    session.messages.push(userMessage)

// Prepare system prompt based on agent role and specialization
    const systemPrompt = this.buildSystemPrompt()

// Prepare conversation history
    const conversationHistory = this.formatConversationHistory(session.messages)

// Generate response using AI SDK
    const { text } = await generateText({
      model: this.getModelForAgent(),
      system: systemPrompt,
      prompt: `${conversationHistory}\nUser: ${message}\nAgent:`,
    })

// Parse actions from response if any
    const actions = this.extractActions(text)

// Create agent message
    const agentMessage: AgentMessage = {
      id: crypto.randomUUID(),
      sessionId: session.id,
      role: "agent",
      content: text,
      createdAt: new Date(),
    }

// Add to session messages
    session.messages.push(agentMessage)

// Process any actions
    if (actions.length > 0) {
      for (const action of actions) {
        session.actions.push({
          id: crypto.randomUUID(),
          agentId: this.agent.id,
          type: "inbound",
          name: action.name,
          description: action.description,
          parameters: action.parameters,
          status: "pending",
          createdAt: new Date(),
        })
      }
    }

return agentMessage
  }

async streamResponse(
    session: AgentSession,
    message: string,
    onChunk: (chunk: string) => void,
  ): Promise<AgentMessage> {
    // Create user message
    const userMessage: AgentMessage = {
      id: crypto.randomUUID(),
      sessionId: session.id,
      role: "user",
      content: message,
      createdAt: new Date(),
    }

// Add to session messages
    session.messages.push(userMessage)

// Prepare system prompt based on agent role and specialization
    const systemPrompt = this.buildSystemPrompt()

// Prepare conversation history
    const conversationHistory = this.formatConversationHistory(session.messages.slice(0, -1))

// Full response to be built up
    let fullResponse = ""

// Stream response using AI SDK
    const result = streamText({
      model: this.getModelForAgent(),
      system: systemPrompt,
      prompt: `${conversationHistory}\nUser: ${message}\nAgent:`,
      onChunk: ({ chunk }) => {
        if (chunk.type === "text-delta") {
          fullResponse += chunk.text
          onChunk(chunk.text)
        }
      },
    })

// Wait for completion
    await result.text

// Create agent message
    const agentMessage: AgentMessage = {
      id: crypto.randomUUID(),
      sessionId: session.id,
      role: "agent",
      content: fullResponse,
      createdAt: new Date(),
    }

// Add to session messages
    session.messages.push(agentMessage)

// Parse and process actions
    const actions = this.extractActions(fullResponse)
    if (actions.length > 0) {
      for (const action of actions) {
        session.actions.push({
          id: crypto.randomUUID(),
          agentId: this.agent.id,
          type: "inbound",
          name: action.name,
          description: action.description,
          parameters: action.parameters,
          status: "pending",
          createdAt: new Date(),
        })
      }
    }

return agentMessage
  }

async executeAction(action: AgentAction): Promise<AgentAction> {
    // Implementation would depend on the specific action
    // This is a placeholder
    action.status = "in-progress"

try {
      // Execute action logic here
      // For example, if it's a social media post, it would call the social media API

action.status = "completed"
      action.completedAt = new Date()
    } catch (error) {
      action.status = "failed"
      action.result = { error: error.message }
    }

return action
  }

private buildSystemPrompt(): string {
    return `You are an AI agent named ${this.agent.name} with the role of ${this.agent.role} specializing in ${this.agent.specialization.join(", ")}. 
    
Your goal is to assist users in the music industry with their career development, marketing, and creative needs.

When responding, consider the following:
1. Be concise and helpful
2. Provide actionable advice based on your specialization
3. When suggesting actions, format them as: [ACTION:name:description:parameters]
4. Stay focused on music industry topics and career development

Your capabilities include: ${this.agent.capabilities.map((c) => c.name).join(", ")}`
  }

private formatConversationHistory(messages: AgentMessage[]): string {
    return messages
      .map((msg) => {
        const role = msg.role === "agent" ? this.agent.name : "User"
        return `${role}: ${typeof msg.content === "string" ? msg.content : JSON.stringify(msg.content)}`
      })
      .join("\n")
  }

private extractActions(text: string): Array<{ name: string; description: string; parameters: Record<string, any> }> {
    const actions = []
    const actionRegex = /\[ACTION:([^:]+):([^:]+):({[^}]+})\]/g
    let match

while ((match = actionRegex.exec(text)) !== null) {
      try {
        const name = match[1]
        const description = match[2]
        const parameters = JSON.parse(match[3])

actions.push({
          name,
          description,
          parameters,
        })
      } catch (e) {
        console.error("Failed to parse action:", e)
      }
    }

return actions
  }

private getModelForAgent() {
    // Map agent configuration to actual model
    switch (this.agent.modelProvider) {
      case "openai":
        return openai(this.agent.baseModel)
      // Add other providers as needed
      default:
        return openai("gpt-4o")
    }
  }
}
[V0_FILE]typescriptreact:file="lib/ai/agent-system/role-model-service.ts" isMerged="true"
import type { RoleModel } from "./types"
import { AgentService } from "./agent-service"
import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

export class RoleModelService extends AgentService {
  private roleModel: RoleModel

constructor(roleModel: RoleModel) {
    super(roleModel)
    this.roleModel = roleModel
  }

async generateCareerRoadmap(userId: string, userGoals: string, timeframe: string): Promise<any> {
    const systemPrompt = `You are an AI career advisor specialized in the music industry. 
    You are modeling your advice after ${this.roleModel.basedOn.name}, who is known for ${this.roleModel.basedOn.achievements.join(", ")}.
    
    Create a detailed career roadmap with specific milestones, actions, and timelines. The roadmap should be realistic and actionable.`

const { text } = await generateText({
      model: openai("gpt-4o"),
      system: systemPrompt,
      prompt: `User Goals: ${userGoals}\nTimeframe: ${timeframe}\n\nPlease create a detailed career roadmap with milestones, specific actions, and timelines.`,
    })

try {
      // Attempt to parse structured data from the response
      // In a real implementation, we would ensure the model returns properly formatted JSON
      return JSON.parse(text)
    } catch (e) {
      // Fallback to returning the raw text
      return { rawPlan: text }
    }
  }

async generateMarketingStrategy(userId: string, artistProfile: any, targetAudience: string): Promise<any> {
    const systemPrompt = `You are an AI marketing strategist specialized in the music industry.
    You are modeling your strategy after the approach used by ${this.roleModel.basedOn.name}, who is known for ${this.roleModel.basedOn.achievements.join(", ")}.
    
    Create a detailed marketing strategy with specific channels, content types, posting schedules, and engagement tactics. The strategy should be data-driven and actionable.`

const { text } = await generateText({
      model: openai("gpt-4o"),
      system: systemPrompt,
      prompt: `Artist Profile: ${JSON.stringify(artistProfile)}\nTarget Audience: ${targetAudience}\n\nPlease create a detailed marketing strategy with specific channels, content types, posting schedules, and engagement tactics.`,
    })

try {
      // Attempt to parse structured data from the response
      return JSON.parse(text)
    } catch (e) {
      // Fallback to returning the raw text
      return { rawStrategy: text }
    }
  }

async analyzeMarketTrends(niche: string): Promise<any> {
    const systemPrompt = `You are an AI market analyst specialized in the music industry.
    Analyze current trends, opportunities, and challenges in the specified niche.
    Provide data-driven insights and actionable recommendations.`

const { text } = await generateText({
      model: openai("gpt-4o"),
      system: systemPrompt,
      prompt: `Please analyze the current market trends, opportunities, and challenges in the ${niche} niche of the music industry. Provide specific insights and recommendations.`,
    })

try {
      return JSON.parse(text)
    } catch (e) {
      return { rawAnalysis: text }
    }
  }

override buildSystemPrompt(): string {
    return `You are an AI agent named ${this.roleModel.name} with the role of ${this.roleModel.role} specializing in ${this.roleModel.specialization.join(", ")}. 
    
You are modeling your approach after ${this.roleModel.basedOn.name}, who is known for ${this.roleModel.basedOn.achievements.join(", ")}.

Your goal is to assist users in the music industry with their career development, marketing, and creative needs, using the strategies and approaches that made ${this.roleModel.basedOn.name} successful.

When responding, consider the following:
1. Be concise and helpful
2. Provide actionable advice based on your specialization and the career path of ${this.roleModel.basedOn.name}
3. When suggesting actions, format them as: [ACTION:name:description:parameters]
4. Stay focused on music industry topics and career development

Your capabilities include: ${this.roleModel.capabilities.map((c) => c.name).join(", ")}`
  }
}
[V0_FILE]typescriptreact:file="lib/ai/agent-system/learn-to-earn-service.ts" isMerged="true"
import type { LearnToEarnMilestone, UserAgentProfile } from "./types"

export class LearnToEarnService {
  async getUserProfile(userId: string): Promise<UserAgentProfile> {
    // In a real implementation, this would fetch from the database
    // For now, return a mock profile
    return {
      userId,
      activeAgents: [],
      completedMilestones: [],
      xpPoints: 0,
      level: 1,
      preferences: {},
      insights: {},
    }
  }

async getMilestones(userId: string): Promise<LearnToEarnMilestone[]> {
    // In a real implementation, this would fetch from the database
    // For now, return mock milestones
    return [
      {
        id: "1",
        title: "Complete Music Production Basics",
        description: "Finish the Music Production 101 course to earn XP and an exclusive NFT.",
        xpReward: 100,
        nftReward: {
          contractAddress: "0x1234567890abcdef1234567890abcdef12345678",
          tokenId: "1",
          metadata: {
            name: "Music Producer Certificate",
            description: "Awarded for completing Music Production 101",
            image: "/placeholder.svg?height=400&width=400",
          },
        },
        requirements: [
          {
            type: "course_completion",
            value: "music-production-101",
          },
        ],
        completed: false,
      },
      {
        id: "2",
        title: "Create Your First Beat",
        description: "Upload your first beat to the platform to earn XP.",
        xpReward: 50,
        requirements: [
          {
            type: "content_creation",
            value: "audio_upload",
          },
        ],
        completed: false,
      },
      {
        id: "3",
        title: "Build Your Social Presence",
        description: "Connect your social media accounts and make 3 posts about your music.",
        xpReward: 75,
        requirements: [
          {
            type: "social_engagement",
            value: 3,
          },
        ],
        completed: false,
      },
    ]
  }

async completeMilestone(userId: string, milestoneId: string): Promise<UserAgentProfile> {
    // Get user profile
    const userProfile = await this.getUserProfile(userId)

// Get milestone
    const milestones = await this.getMilestones(userId)
    const milestone = milestones.find((m) => m.id === milestoneId)

if (!milestone) {
      throw new Error("Milestone not found")
    }

// Check if already completed
    if (userProfile.completedMilestones.includes(milestoneId)) {
      return userProfile
    }

// Update user profile
    userProfile.completedMilestones.push(milestoneId)
    userProfile.xpPoints += milestone.xpReward

// Check if level up is needed
    const newLevel = Math.floor(userProfile.xpPoints / 100) + 1
    if (newLevel > userProfile.level) {
      userProfile.level = newLevel
      // Could trigger level-up rewards here
    }

// If there's an NFT reward, mint it
    if (milestone.nftReward) {
      // In a real implementation, this would call the blockchain service to mint the NFT
      console.log(`Minting NFT for user ${userId}: ${JSON.stringify(milestone.nftReward)}`)
    }

// In a real implementation, this would update the database

return userProfile
  }

async checkMilestoneProgress(userId: string, milestoneId: string): Promise<number> {
    // Get milestone
    const milestones = await this.getMilestones(userId)
    const milestone = milestones.find((m) => m.id === milestoneId)

if (!milestone) {
      throw new Error("Milestone not found")
    }

// In a real implementation, this would check the actual progress
    // For now, return a random percentage
    return Math.floor(Math.random() * 100)
  }
}
[V0_FILE]typescriptreact:file="components/ai-agents/multi-modal-chat.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Send, Mic, ImageIcon, FileAudio, FileVideo, Paperclip, Loader2, X } from "lucide-react"
import { motion } from "framer-motion"
import type { AgentMessage, AIAgent } from "@/lib/ai/agent-system/types"
import { useToast } from "@/hooks/use-toast"
import { cn } from "@/lib/utils"

interface MultiModalChatProps {
  agent: AIAgent
  initialMessages?: AgentMessage[]
  onSendMessage: (message: string, attachments: File[]) => Promise<void>
  isProcessing?: boolean
}

export default function MultiModalChat({
  agent,
  initialMessages = [],
  onSendMessage,
  isProcessing = false,
}: MultiModalChatProps) {
  const [messages, setMessages] = useState<AgentMessage[]>(initialMessages)
  const [input, setInput] = useState("")
  const [attachments, setAttachments] = useState<File[]>([])
  const [isRecording, setIsRecording] = useState(false)
  const [activeTab, setActiveTab] = useState<string>("text")
  const fileInputRef = useRef<HTMLInputElement>(null)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()

// Scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

// Update messages when initialMessages change
  useEffect(() => {
    setMessages(initialMessages)
  }, [initialMessages])

const handleSendMessage = async () => {
    if ((!input.trim() && attachments.length === 0) || isProcessing) return

try {
      await onSendMessage(input, attachments)
      setInput("")
      setAttachments([])
    } catch (error) {
      toast({
        title: "Error sending message",
        description: error.message || "Something went wrong",
        variant: "destructive",
      })
    }
  }

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const newFiles = Array.from(e.target.files)
      setAttachments((prev) => [...prev, ...newFiles])
    }
  }

const removeAttachment = (index: number) => {
    setAttachments((prev) => prev.filter((_, i) => i !== index))
  }

const startRecording = () => {
    // In a real implementation, this would start audio recording
    setIsRecording(true)
    toast({
      title: "Recording started",
      description: "Speak clearly into your microphone",
    })
  }

const stopRecording = () => {
    // In a real implementation, this would stop recording and process the audio
    setIsRecording(false)
    toast({
      title: "Recording stopped",
      description: "Processing your audio...",
    })

// Simulate processing delay
    setTimeout(() => {
      setInput((prev) => prev + " [Transcribed audio would appear here]")
    }, 1000)
  }

const triggerFileInput = (accept: string) => {
    if (fileInputRef.current) {
      fileInputRef.current.accept = accept
      fileInputRef.current.click()
    }
  }

return (
    <div className="flex flex-col h-full">
      {/* Chat messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((message, index) => (
          <motion.div
            key={message.id || index}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
            className={cn("flex items-start gap-3 max-w-[85%]", message.role === "user" ? "ml-auto" : "mr-auto")}
          >
            {message.role !== "user" && (
              <Avatar className="h-8 w-8">
                <AvatarImage src={agent.avatar || "/placeholder.svg"} alt={agent.name} />
                <AvatarFallback>{agent.name[0]}</AvatarFallback>
              </Avatar>
            )}
            <Card
              className={cn(
                "p-3",
                message.role === "user" ? "bg-purple-600 text-white" : "bg-gray-900/60 border-gray-800",
              )}
            >
              <CardContent className="p-0 text-sm">
                {typeof message.content === "string" ? (
                  <p className="whitespace-pre-wrap">{message.content}</p>
                ) : (
                  <div className="space-y-2">
                    {message.content.map((content, i) => (
                      <div key={i}>
                        {content.type === "text" && <p>{content.value}</p>}
                        {content.type === "image" && (
                          <img
                            src={content.value || "/placeholder.svg"}
                            alt="Image content"
                            className="rounded-md max-h-60 object-contain"
                          />
                        )}
                        {content.type === "audio" && (
                          <audio controls className="w-full">
                            <source src={content.value} />
                          </audio>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
            {message.role === "user" && (
              <Avatar className="h-8 w-8">
                <AvatarImage src="/placeholder.svg?height=40&width=40" alt="You" />
                <AvatarFallback>You</AvatarFallback>
              </Avatar>
            )}
          </motion.div>
        ))}
        <div ref={messagesEndRef} />
      </div>

{/* Attachments preview */}
      {attachments.length > 0 && (
        <div className="px-4 py-2 flex flex-wrap gap-2">
          {attachments.map((file, index) => (
            <Badge key={index} variant="outline" className="flex items-center gap-1 bg-gray-800 border-gray-700">
              {file.type.startsWith("image/") && <ImageIcon className="h-3 w-3" />}
              {file.type.startsWith("audio/") && <FileAudio className="h-3 w-3" />}
              {file.type.startsWith("video/") && <FileVideo className="h-3 w-3" />}
              <span className="truncate max-w-[100px]">{file.name}</span>
              <button onClick={() => removeAttachment(index)} className="ml-1 hover:text-red-400">
                <X className="h-3 w-3" />
              </button>
            </Badge>
          ))}
        </div>
      )}

{/* Input area */}
      <div className="p-4 border-t border-gray-800">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-4">
          <TabsList className="bg-gray-800/50 border border-gray-700">
            <TabsTrigger value="text" className="data-[state=active]:bg-purple-900/50">
              Text
            </TabsTrigger>
            <TabsTrigger value="voice" className="data-[state=active]:bg-purple-900/50">
              Voice
            </TabsTrigger>
            <TabsTrigger value="media" className="data-[state=active]:bg-purple-900/50">
              Media
            </TabsTrigger>
          </TabsList>

<TabsContent value="text" className="mt-2">
            <div className="flex items-end gap-2">
              <Textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder={`Message ${agent.name}...`}
                className="min-h-[80px] bg-gray-900/60 border-gray-800 resize-none"
              />
              <Button
                onClick={handleSendMessage}
                disabled={(!input.trim() && attachments.length === 0) || isProcessing}
                className="bg-purple-600 hover:bg-purple-700"
              >
                {isProcessing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
              </Button>
            </div>
          </TabsContent>

<TabsContent value="voice" className="mt-2">
            <div className="flex justify-center">
              <Button
                size="lg"
                className={cn(
                  "rounded-full h-16 w-16",
                  isRecording ? "bg-red-600 hover:bg-red-700" : "bg-purple-600 hover:bg-purple-700",
                )}
                onClick={isRecording ? stopRecording : startRecording}
              >
                <Mic className="h-6 w-6" />
              </Button>
            </div>
            <p className="text-center text-sm text-gray-400 mt-2">
              {isRecording ? "Recording... Click to stop" : "Click to start recording"}
            </p>
          </TabsContent>

<TabsContent value="media" className="mt-2">
            <div className="flex justify-center gap-4">
              <Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex-1"
                onClick={() => triggerFileInput("image/*")}
              >
                <ImageIcon className="h-4 w-4 mr-2" /> Image
              </Button>
              <Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex-1"
                onClick={() => triggerFileInput("audio/*")}
              >
                <FileAudio className="h-4 w-4 mr-2" /> Audio
              </Button>
              <Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex-1"
                onClick={() => triggerFileInput("video/*")}
              >
                <FileVideo className="h-4 w-4 mr-2" /> Video
              </Button>
              <Button
                variant="outline"
                className="border-gray-700 hover:bg-gray-800 flex-1"
                onClick={() => triggerFileInput("*")}
              >
                <Paperclip className="h-4 w-4 mr-2" /> File
              </Button>
            </div>
            <input type="file" ref={fileInputRef} className="hidden" onChange={handleFileSelect} multiple />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="types/ai-agents.ts" isTerminated="true" isMerged="true"
export interface AIAgent {
  id: string
  name: string
  type: AgentType
  description: string
  capabilities: AgentCapability[]
  avatar: string
  status: AgentStatus
  createdAt: Date
  updatedAt: Date
  lastActive: Date
  owner: string
  settings: AgentSettings
  metrics: AgentMetrics
  integrations: AgentIntegration[]
}

export type AgentStatus = "active" | "inactive" | "learning" | "processing"

export interface AgentSettings {
  autonomyLevel: number // 0-10 scale of how autonomous the agent is
  privacyLevel: number // 0-10 scale of privacy restrictions
  notificationFrequency: "hourly" | "daily" | "weekly" | "custom"
  allowedPlatforms: string[]
  customInstructions: string
  voiceSettings?: {
    voice: string
    speed: number
    pitch: number
  }
  availabilityHours: {
    start: string // HH:MM format
    end: string // HH:MM format
    timezone: string
  }
}

export interface AgentMetrics {
  engagementRate: number
  successRate: number
  responseTime: number
  tasksCompleted: number
  revenueGenerated: number
  connectionsCreated: number
  learningProgress: number
  userSatisfaction: number
}

export interface AgentIntegration {
  platform: string
  connected: boolean
  accountId?: string
  lastSynced?: Date
  permissions: string[]
}

export interface RoleModel {
  id: string
  name: string
  type: string
  description: string
  achievements: string[]
  expertise: string[]
  career: CareerMilestone[]
  socialProfiles: SocialProfile[]
  content: ContentSample[]
  marketingStrategies: MarketingStrategy[]
  metrics: RoleModelMetrics
}

export interface CareerMilestone {
  title: string
  date: Date
  description: string
  impact: string
}

export interface SocialProfile {
  platform: string
  handle: string
  followers: number
  engagement: number
  contentType: string[]
  url: string
}

export interface ContentSample {
  type: string
  title: string
  url: string
  performance: {
    views: number
    engagement: number
    conversion: number
  }
  tags: string[]
}

export interface MarketingStrategy {
  name: string
  description: string
  channels: string[]
  targetAudience: string[]
  successMetrics: {
    [key: string]: number
  }
}

export interface RoleModelMetrics {
  averageGrowthRate: number
  peakFollowers: number
  revenueStreams: string[]
  industryInfluence: number // 0-100 scale
  careerLongevity: number // years
  brandDeals: number
  collaborations: number
}

export interface CareerRoadmap {
  id: string
  userId: string
  agentId: string
  name: string
  description: string
  currentStage: number
  stages: RoadmapStage[]
  metrics: RoadmapMetrics
  createdAt: Date
  updatedAt: Date
}

export interface RoadmapStage {
  id: number
  name: string
  description: string
  goals: RoadmapGoal[]
  duration: {
    min: number // in days
    max: number // in days
  }
  requiredSkills: string[]
  resources: RoadmapResource[]
  completionCriteria: string[]
  nextStages: number[] // IDs of possible next stages
}

export interface RoadmapGoal {
  id: string
  description: string
  metrics: {
    [key: string]: number
  }
  completed: boolean
  priority: "low" | "medium" | "high"
  deadline?: Date
}

export interface RoadmapResource {
  type: "course" | "mentor" | "tool" | "community" | "content"
  name: string
  description: string
  url?: string
  cost?: number
  timeCommitment?: string
}

export interface RoadmapMetrics {
  progress: number // 0-100 percentage
  timeInvested: number // hours
  skillsAcquired: number
  goalsCompleted: number
  totalGoals: number
  projectedCompletion?: Date
}

export interface LearnToEarnProgram {
  id: string
  name: string
  description: string
  modules: LearningModule[]
  rewards: LearningReward[]
  prerequisites: string[]
  skillsGained: string[]
  certificationAvailable: boolean
  estimatedCompletionTime: number // hours
  difficulty: "beginner" | "intermediate" | "advanced"
  enrollmentCount: number
  completionRate: number
  createdAt: Date
  updatedAt: Date
}

export interface LearningModule {
  id: string
  name: string
  description: string
  content: LearningContent[]
  quizzes: Quiz[]
  assignments: Assignment[]
  completionRequirements: string[]
  estimatedTime: number // hours
}

export interface LearningContent {
  id: string
  type: "video" | "article" | "audio" | "interactive"
  title: string
  description: string
  url: string
  duration: number // minutes
  creator: string
  tags: string[]
}

export interface Quiz {
  id: string
  title: string
  questions: QuizQuestion[]
  passingScore: number
  timeLimit?: number // minutes
  attempts: number
}

export interface QuizQuestion {
  id: string
  question: string
  type: "multiple_choice" | "true_false" | "short_answer"
  options?: string[]
  correctAnswer: string | string[]
  points: number
}

export interface Assignment {
  id: string
  title: string
  description: string
  requirements: string[]
  rubric: {
    criteria: string
    weight: number
  }[]
  dueDate?: Date
  submissionType: "file" | "link" | "text"
}

export interface LearningReward {
  id: string
  type: "token" | "nft" | "badge" | "certificate" | "access"
  name: string
  description: string
  value?: number
  requirements: string[]
  image?: string
  rarity?: "common" | "uncommon" | "rare" | "epic" | "legendary"
}

export interface AIAgentContainer {
  id: string
  name: string
  description: string
  type: "microservice" | "function" | "application"
  status: "running" | "stopped" | "error"
  resources: {
    cpu: number
    memory: number
    storage: number
  }
  scaling: {
    min: number
    max: number
    current: number
    autoScale: boolean
  }
  dependencies: string[]
  endpoints: {
    url: string
    method: string
    description: string
  }[]
  metrics: {
    requests: number
    errors: number
    latency: number
    uptime: number
  }
  createdAt: Date
  updatedAt: Date
}

export interface MarketAnalysis {
  id: string
  timestamp: Date
  market: string
  trends: MarketTrend[]
  opportunities: MarketOpportunity[]
  threats: MarketThreat[]
  competitorAnalysis: CompetitorAnalysis[]
  audienceInsights: AudienceInsight[]
  recommendations: MarketRecommendation[]
}

export interface MarketTrend {
  name: string
  description: string
  strength: number // 0-100 scale
  duration: "short_term" | "medium_term" | "long_term"
  relevance: number // 0-100 scale
  sources: string[]
}

export interface MarketOpportunity {
  description: string
  potentialImpact: number // 0-100 scale
  timeframe: string
  requiredResources: string[]
  risks: string[]
}

export interface MarketThreat {
  description: string
  severity: number // 0-100 scale
  probability: number // 0-100 scale
  timeframe: string
  mitigationStrategies: string[]
}

export interface CompetitorAnalysis {
  name: string
  strengths: string[]
  weaknesses: string[]
  marketShare: number
  targetAudience: string[]
  uniqueSellingPoints: string[]
}

export interface AudienceInsight {
  segment: string
  demographics: {
    ageRange: string
    gender: {
      male: number
      female: number
      other: number
    }
    locations: {
      name: string
      percentage: number
    }[]
  }
  interests: string[]
  behaviors: string[]
  platforms: {
    name: string
    usage: number // 0-100 scale
  }[]
  engagementMetrics: {
    [key: string]: number
  }
}

export interface MarketRecommendation {
  action: string
  reasoning: string
  expectedOutcome: string
  priority: "low" | "medium" | "high"
  difficulty: "easy" | "moderate" | "hard"
  timeframe: string
}

export interface SocialMediaCampaign {
  id: string
  name: string
  description: string
  platforms: string[]
  startDate: Date
  endDate: Date
  budget: number
  status: "draft" | "scheduled" | "active" | "completed" | "cancelled"
  goals: {
    type: string
    target: number
    current: number
  }[]
  content: SocialMediaContent[]
  targeting: {
    demographics: {
      ageRange: string[]
      gender: string[]
      locations: string[]
      languages: string[]
    }
    interests: string[]
    behaviors: string[]
  }
  performance: {
    reach: number
    impressions: number
    engagement: number
    clicks: number
    conversions: number
    roi: number
  }
  createdBy: string
  createdAt: Date
  updatedAt: Date
}

export interface SocialMediaContent {
  id: string
  type: "image" | "video" | "text" | "link" | "story" | "reel"
  platform: string
  content: string
  media?: string[]
  scheduledTime?: Date
  status: "draft" | "scheduled" | "published" | "failed"
  performance?: {
    reach: number
    impressions: number
    engagement: number
    clicks: number
    saves: number
    shares: number
  }
}

export interface BrandDeal {
  id: string
  brandName: string
  description: string
  type: "sponsorship" | "collaboration" | "endorsement" | "affiliate" | "ambassador"
  status: "negotiating" | "pending" | "active" | "completed" | "cancelled"
  startDate?: Date
  endDate?: Date
  value: number
  paymentTerms: string
  deliverables: {
    description: string
    deadline: Date
    completed: boolean
  }[]
  contacts: {
    name: string
    role: string
    email: string
    phone?: string
  }[]
  contractUrl?: string
  notes: string
  createdAt: Date
  updatedAt: Date
}

export interface MentorshipProgram {
  id: string;
  name: string;
  description: string;
  mentor: {
    id: string;
    name: string;
    expertise: string[];
[V0_FILE]typescriptreact:file="components/ai-agents/agent-dashboard.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { Award, Star, BarChart, Zap } from "lucide-react"
import MultiModalChat from "./multi-modal-chat"
import type { AIAgent, RoleModel, LearnToEarnMilestone, UserAgentProfile } from "@/lib/ai/agent-system/types"

interface AgentDashboardProps {
  agents?: AIAgent[]
  roleModels?: RoleModel[]
  userProfile?: UserAgentProfile
  milestones?: LearnToEarnMilestone[]
}

export default function AgentDashboard({
  agents = [],
  roleModels = [],
  userProfile = {
    userId: "user-1",
    activeAgents: [],
    completedMilestones: [],
    xpPoints: 120,
    level: 2,
    preferences: {},
    insights: {},
  },
  milestones = [],
}: AgentDashboardProps) {
  const [activeTab, setActiveTab] = useState("agents")
  const [selectedAgent, setSelectedAgent] = useState<AIAgent | null>(null)
  const [chatMessages, setChatMessages] = useState<any[]>([])
  const [isProcessing, setIsProcessing] = useState(false)
  const { toast } = useToast()

// Sample AI agents if none provided
  const sampleAgents: AIAgent[] = [
    {
      id: "promotion-agent",
      name: "Promo Pro",
      description: "Automates social media campaigns and promotional strategies tailored to your audience.",
      avatar: "/placeholder.svg?height=100&width=100",
      role: "promoter",
      capabilities: [
        {
          id: "social-campaign",
          name: "Social Media Campaign Creation",
          description: "Creates targeted social media campaigns across platforms",
          modalities: ["text", "image", "social"],
          requiresAuth: true,
        },
        {
          id: "content-calendar",
          name: "Content Calendar Planning",
          description: "Develops strategic content calendars for consistent engagement",
          modalities: ["text"],
          requiresAuth: false,
        },
      ],
      specialization: ["Social Media", "Digital Marketing", "Content Strategy"],
      modelProvider: "openai",
      baseModel: "gpt-4o",
      finetuned: true,
      multiModal: true,
      contextWindow: 128000,
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: "booking-agent",
      name: "Booking Buddy",
      description: "Helps secure performance opportunities and manages your event calendar.",
      avatar: "/placeholder.svg?height=100&width=100",
      role: "manager",
      capabilities: [
        {
          id: "venue-research",
          name: "Venue Research",
          description: "Researches suitable venues based on your genre and audience",
          modalities: ["text"],
          requiresAuth: false,
        },
        {
          id: "booking-outreach",
          name: "Booking Outreach",
          description: "Creates professional booking requests and follow-ups",
          modalities: ["text", "social"],
          requiresAuth: true,
        },
      ],
      specialization: ["Event Booking", "Tour Planning", "Venue Relations"],
      modelProvider: "openai",
      baseModel: "gpt-4o",
      finetuned: true,
      multiModal: false,
      contextWindow: 128000,
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: "ar-agent",
      name: "A&R Advisor",
      description: "Connects your music with the right industry professionals and potential collaborators.",
      avatar: "/placeholder.svg?height=100&width=100",
      role: "analyst",
      capabilities: [
        {
          id: "industry-matching",
          name: "Industry Professional Matching",
          description: "Matches your music with relevant industry professionals",
          modalities: ["text", "audio"],
          requiresAuth: true,
        },
        {
          id: "collaboration-suggestions",
          name: "Collaboration Suggestions",
          description: "Suggests potential collaborators based on your style",
          modalities: ["text", "audio"],
          requiresAuth: false,
        },
      ],
      specialization: ["A&R", "Industry Networking", "Talent Development"],
      modelProvider: "anthropic",
      baseModel: "claude-3-opus",
      finetuned: false,
      multiModal: true,
      contextWindow: 200000,
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: "business-manager",
      name: "Biz Manager",
      description: "Optimizes your revenue streams and manages licensing opportunities.",
      avatar: "/placeholder.svg?height=100&width=100",
      role: "manager",
      capabilities: [
        {
          id: "revenue-analysis",
          name: "Revenue Stream Analysis",
          description: "Analyzes and optimizes your revenue streams",
          modalities: ["text", "market"],
          requiresAuth: true,
        },
        {
          id: "licensing-opportunities",
          name: "Licensing Opportunity Finder",
          description: "Identifies potential licensing opportunities for your music",
          modalities: ["text", "audio", "market"],
          requiresAuth: true,
        },
      ],
      specialization: ["Music Business", "Licensing", "Revenue Optimization"],
      modelProvider: "openai",
      baseModel: "gpt-4o",
      finetuned: true,
      multiModal: true,
      contextWindow: 128000,
      createdAt: new Date(),
      updatedAt: new Date(),
    },
  ]

// Sample role models if none provided
  const sampleRoleModels: RoleModel[] = [
    {
      id: "drake-model",
      name: "Chart Topper",
      description: "Based on Drake's career path, this agent helps you navigate from mixtapes to mainstream success.",
      avatar: "/placeholder.svg?height=100&width=100",
      role: "mentor",
      capabilities: [
        {
          id: "career-roadmap",
          name: "Career Roadmap Creation",
          description: "Creates a detailed career roadmap based on Drake's path",
          modalities: ["text"],
          requiresAuth: false,
        },
        {
          id: "brand-strategy",
          name: "Brand Strategy Development",
          description: "Develops a personal brand strategy inspired by Drake",
          modalities: ["text", "image"],
          requiresAuth: true,
        },
      ],
      specialization: ["Hip-Hop", "Mainstream Crossover", "Brand Building"],
      modelProvider: "openai",
      baseModel: "gpt-4o",
      finetuned: true,
      multiModal: true,
      contextWindow: 128000,
      createdAt: new Date(),
      updatedAt: new Date(),
      basedOn: {
        name: "Drake",
        profession: "Rapper, Singer, Entrepreneur",
        achievements: [
          "Multiple Grammy Awards",
          "Record-breaking Billboard chart positions",
          "Successful label OVO Sound",
          "Diverse business ventures",
        ],
        socialProfiles: {
          instagram: "@champagnepapi",
          twitter: "@drake",
        },
      },
      careerPath: {
        milestones: [
          {
            title: "Release mixtapes and build local following",
            description: "Create and release 3 high-quality mixtapes to build a local fanbase",
            timeframe: "Year 1",
            completed: false,
          },
          {
            title: "Secure major label deal",
            description: "Leverage mixtape success to secure a favorable major label deal",
            timeframe: "Year 2-3",
            completed: false,
          },
          {
            title: "Mainstream breakthrough album",
            description: "Release a breakthrough album with crossover appeal",
            timeframe: "Year 3-4",
            completed: false,
          },
          {
            title: "Establish personal brand and ventures",
            description: "Launch clothing line, beverages, or other brand extensions",
            timeframe: "Year 5+",
            completed: false,
          },
        ],
      },
      marketingStrategy: {
        channels: ["Instagram", "TikTok", "YouTube", "Streaming Platforms"],
        targetAudience: ["18-34 year olds", "Hip-hop fans", "Pop music listeners"],
      },
    },
    {
      id: "taylor-swift-model",
      name: "Genre Evolver",
      description:
        "Based on Taylor Swift's career evolution, this agent helps you navigate genre transitions and business moves.",
      avatar: "/placeholder.svg?height=100&width=100",
      role: "mentor",
      capabilities: [
        {
          id: "genre-transition",
          name: "Genre Transition Strategy",
          description: "Creates a strategy for successfully transitioning between genres",
          modalities: ["text", "audio"],
          requiresAuth: false,
        },
        {
          id: "fanbase-nurturing",
          name: "Fanbase Nurturing",
          description: "Develops strategies for maintaining and growing a loyal fanbase",
          modalities: ["text", "social"],
          requiresAuth: true,
        },
      ],
      specialization: ["Genre Evolution", "Fanbase Building", "Business Ownership"],
      modelProvider: "anthropic",
      baseModel: "claude-3-opus",
      finetuned: true,
      multiModal: true,
      contextWindow: 200000,
      createdAt: new Date(),
      updatedAt: new Date(),
      basedOn: {
        name: "Taylor Swift",
        profession: "Singer-Songwriter, Businesswoman",
        achievements: [
          "Multiple Grammy Awards including Album of the Year",
          "Successful transition from country to pop",
          "Re-recording masters to own her work",
          "Record-breaking tours and album sales",
        ],
        socialProfiles: {
          instagram: "@taylorswift",
          twitter: "@taylorswift13",
        },
      },
      careerPath: {
        milestones: [
          {
            title: "Establish in initial genre",
            description: "Build a solid foundation in your starting genre",
            timeframe: "Year 1-2",
            completed: false,
          },
          {
            title: "Begin genre evolution",
            description: "Start incorporating elements of target genre while maintaining core audience",
            timeframe: "Year 3-4",
            completed: false,
          },
          {
            title: "Complete transition",
            description: "Release a definitive album in new genre while bringing original fans along",
            timeframe: "Year 5",
            completed: false,
          },
          {
            title: "Business ownership moves",
            description: "Secure ownership of masters and publishing where possible",
            timeframe: "Ongoing",
            completed: false,
          },
        ],
      },
      marketingStrategy: {
        channels: ["Instagram", "TikTok", "Twitter", "YouTube", "Fan Communities"],
        targetAudience: ["13-35 year olds", "Pop music fans", "Lyrics-focused listeners"],
      },
    },
  ]

// Sample milestones if none provided
  const sampleMilestones: LearnToEarnMilestone[] = [
    {
      id: "1",
      title: "Complete Music Production Basics",
      description: "Finish the Music Production 101 course to earn XP and an exclusive NFT.",
      xpReward: 100,
      nftReward: {
        contractAddress: "0x1234567890abcdef1234567890abcdef12345678",
        tokenId: "1",
        metadata: {
          name: "Music Producer Certificate",
          description: "Awarded for completing Music Production 101",
          image: "/placeholder.svg?height=400&width=400",
        },
      },
      requirements: [
        {
          type: "course_completion",
          value: "music-production-101",
        },
      ],
      completed: false,
    },
    {
      id: "2",
      title: "Create Your First Beat",
      description: "Upload your first beat to the platform to earn XP.",
      xpReward: 50,
      requirements: [
        {
          type: "content_creation",
          value: "audio_upload",
        },
      ],
      completed: false,
    },
    {
      id: "3",
      title: "Build Your Social Presence",
      description: "Connect your social media accounts and make 3 posts about your music.",
      xpReward: 75,
      requirements: [
        {
          type: "social_engagement",
          value: 3,
        },
      ],
      completed: false,
    },
  ]

// Use provided data or fallback to samples
  const displayAgents = agents.length > 0 ? agents : sampleAgents
  const displayRoleModels = roleModels.length > 0 ? roleModels : sampleRoleModels
  const displayMilestones = milestones.length > 0 ? milestones : sampleMilestones

const handleAgentSelect = (agent: AIAgent) => {
    setSelectedAgent(agent)
    setChatMessages([
      {
        id: "welcome",
        role: "agent",
        content: `Hi there! I'm ${agent.name}, your ${agent.role} specialized in ${agent.specialization.join(", ")}. How can I help you today?`,
        createdAt: new Date(),
      },
    ])
  }

const handleSendMessage = async (message: string, attachments: File[]) => {
    if (!selectedAgent) return

// Add user message to chat
    const userMessage = {
      id: `user-${Date.now()}`,
      role: "user",
      content: message,
      createdAt: new Date(),
    }

setChatMessages((prev) => [...prev, userMessage])
    setIsProcessing(true)

try {
      // In a real implementation, this would call the agent service
      // Simulate API delay
      await new Promise((resolve) => setTimeout(resolve, 1500))

// Add agent response
      const agentResponse = {
        id: `agent-${Date.now()}`,
        role: "agent",
        content: `This is a simulated response from ${selectedAgent.name}. In a real implementation, this would be generated by the AI model based on your message: "${message}"`,
        createdAt: new Date(),
      }

setChatMessages((prev) => [...prev, agentResponse])
    } catch (error) {
      console.error("Error sending message:", error)
    } finally {
      setIsProcessing(false)
    }
  }

return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">AI Agent Ecosystem</h1>

<Tabs defaultValue={activeTab} onValueChange={setActiveTab} className="mb-8">
        <TabsList className="bg-gray-800/50 border border-gray-700">
          <TabsTrigger value="agents" className="data-[state=active]:bg-purple-900/50">
            AI Agents
          </TabsTrigger>
          <TabsTrigger value="roleModels" className="data-[state=active]:bg-purple-900/50">
            Role Models
          </TabsTrigger>
          <TabsTrigger value="learnToEarn" className="data-[state=active]:bg-purple-900/50">
            Learn to Earn
          </TabsTrigger>
        </TabsList>

<TabsContent value="agents" className="mt-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {displayAgents.map((agent) => (
              <Card
                key={agent.id}
                className={`bg-gray-900/60 border-gray-800 hover:border-purple-500/50 transition-all duration-300 cursor-pointer ${
                  selectedAgent?.id === agent.id ? "border-purple-500" : ""
                }`}
                onClick={() => handleAgentSelect(agent)}
              >
                <CardHeader className="pb-2">
                  <div className="flex items-center gap-3">
                    <Avatar className="h-12 w-12">
                      <AvatarImage src={agent.avatar || "/placeholder.svg"} alt={agent.name} />
                      <AvatarFallback>{agent.name[0]}</AvatarFallback>
                    </Avatar>
                    <div>
                      <CardTitle className="text-lg">{agent.name}</CardTitle>
                      <CardDescription>{agent.role}</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-400 mb-3">{agent.description}</p>
                  <div className="flex flex-wrap gap-2 mb-3">
                    {agent.specialization.map((spec) => (
                      <Badge key={spec} variant="outline" className="bg-gray-800/50 border-gray-700">
                        {spec}
                      </Badge>
                    ))}
                  </div>
                  <div className="text-xs text-gray-500">
                    <p>Model: {agent.baseModel}</p>
                    <p>Provider: {agent.modelProvider}</p>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button className="w-full bg-purple-600 hover:bg-purple-700">Chat with Agent</Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </TabsContent>

<TabsContent value="roleModels" className="mt-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {displayRoleModels.map((model) => (
              <Card
                key={model.id}
                className="bg-gray-900/60 border-gray-800 hover:border-purple-500/50 transition-all duration-300"
              >
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <Avatar className="h-12 w-12">
                      <AvatarImage src={model.avatar || "/placeholder.svg"} alt={model.name} />
                      <AvatarFallback>{model.name[0]}</AvatarFallback>
                    </Avatar>
                    <div>
                      <CardTitle className="text-lg">{model.name}</CardTitle>
                      <CardDescription>Based on {model.basedOn?.name || "Industry Expert"}</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-400 mb-3">{model.description}</p>
                  <div className="mb-3">
                    <h4 className="text-sm font-medium mb-2">Key Achievements</h4>
                    <ul className="text-xs text-gray-400 space-y-1 list-disc pl-4">
                      {model.basedOn?.achievements
                        ?.slice(0, 3)
                        .map((achievement, index) => <li key={index}>{achievement}</li>) || (
                        <>
                          <li>Industry recognition</li>
                          <li>Career longevity</li>
                          <li>Business success</li>
                        </>
                      )}
                    </ul>
                  </div>
                  <div className="mb-3">
                    <h4 className="text-sm font-medium mb-2">Career Path</h4>
                    <div className="space-y-2">
                      {model.careerPath?.milestones?.slice(0, 2).map((milestone, index) => (
                        <div key={index} className="flex items-center gap-2">
                          <div
                            className={`h-2 w-2 rounded-full ${milestone.completed ? "bg-green-500" : "bg-gray-600"}`}
                          ></div>
                          <span className="text-xs text-gray-400">{milestone.title}</span>
                        </div>
                      )) || (
                        <>
                          <div className="flex items-center gap-2">
                            <div className="h-2 w-2 rounded-full bg-gray-600"></div>
                            <span className="text-xs text-gray-400">Early career development</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <div className="h-2 w-2 rounded-full bg-gray-600"></div>
                            <span className="text-xs text-gray-400">Mainstream breakthrough</span>
                          </div>
                        </>
                      )}
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="flex gap-2">
                  <Button className="flex-1 bg-purple-600 hover:bg-purple-700">Career Roadmap</Button>
                  <Button variant="outline" className="flex-1 border-gray-700 hover:bg-gray-800">
                    Marketing Plan
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </TabsContent>

<TabsContent value="learnToEarn" className="mt-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-1">
              <Card className="bg-gray-900/60 border-gray-800 mb-6">
                <CardHeader>
                  <CardTitle className="text-lg">Your Progress</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-3 mb-4">
                    <div className="bg-purple-900/30 border border-purple-500/30 rounded-full p-3">
                      <Star className="h-6 w-6 text-purple-400" />
                    </div>
                    <div>
                      <p className="text-sm text-gray-400">Current Level</p>
                      <p className="text-2xl font-bold">{userProfile.level}</p>
                    </div>
                  </div>

<div className="mb-4">
                    <div className="flex justify-between text-sm mb-1">
                      <span>XP Progress</span>
                      <span>
                        {userProfile.xpPoints} / {userProfile.level * 100}
                      </span>
                    </div>
                    <Progress value={userProfile.xpPoints % 100} className="h-2" />
                  </div>

<div className="space-y-3">
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-400">Milestones Completed</span>
                      <span>
                        {userProfile.completedMilestones.length} / {displayMilestones.length}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-400">Active Agents</span>
                      <span>{userProfile.activeAgents.length}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card className="bg-gray-900/60 border-gray-800">
                <CardHeader>
                  <CardTitle className="text-lg">Rewards</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center gap-3">
                      <div className="bg-amber-900/30 border border-amber-500/30 rounded-full p-3">
                        <Award className="h-6 w-6 text-amber-400" />
                      </div>
                      <div>
                        <p className="font-medium">NFT Certificates</p>
                        <p className="text-sm text-gray-400">Earn unique NFTs for completing courses</p>
                      </div>
                    </div>

<div className="flex items-center gap-3">
                      <div className="bg-blue-900/30 border border-blue-500/30 rounded-full p-3">
                        <Zap className="h-6 w-6 text-blue-400" />
                      </div>
                      <div>
                        <p className="font-medium">Premium Features</p>
                        <p className="text-sm text-gray-400">Unlock advanced AI agent capabilities</p>
                      </div>
                    </div>

<div className="flex items-center gap-3">
                      <div className="bg-green-900/30 border border-green-500/30 rounded-full p-3">
                        <BarChart className="h-6 w-6 text-green-400" />
                      </div>
                      <div>
                        <p className="font-medium">Career Opportunities</p>
                        <p className="text-sm text-gray-400">Get matched with industry professionals</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<div className="lg:col-span-2">
              <h3 className="text-xl font-bold mb-4">Available Milestones</h3>
              <div className="space-y-4">
                {displayMilestones.map((milestone) => (
                  <Card
                    key={milestone.id}
                    className={`bg-gray-900/60 border-gray-800 hover:border-purple-500/50 transition-all duration-300 ${
                      milestone.completed ? "bg-purple-900/20" : ""
                    }`}
                  >
                    <CardContent className="p-4">
                      <div className="flex items-start gap-4">
                        <div
                          className={`p-3 rounded-full ${
                            milestone.completed
                              ? "bg-green-900/30 border border-green-500/30"
                              : "bg-gray-800 border border-gray-700"
                          }`}
                        >
                          {milestone.completed ? (
                            <Award className="h-6 w-6 text-green-400" />
                          ) : (
                            <Award className="h-6 w-6 text-gray-400" />
                          )}
                        </div>

<div className="flex-1">
                          <div className="flex justify-between items-start">
                            <div>
                              <h4 className="font-medium">{milestone.title}</h4>
                              <p className="text-sm text-gray-400 mb-2">{milestone.description}</p>
                            </div>
                            <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">
                              {milestone.xpReward} XP
                            </Badge>
                          </div>

<div className="mb-3">
                            <div className="flex justify-between text-xs text-gray-500 mb-1">
                              <span>Progress</span>
                              <span>{milestone.completed ? "100%" : "0%"}</span>
                            </div>
                            <Progress value={milestone.completed ? 100 : 0} className="h-1.5" />
                          </div>

<div className="flex justify-between items-center">
                            <div className="flex items-center">
                              {milestone.nftReward && (
                                <Badge variant="outline" className="bg-amber-900/20 text-amber-300 border-amber-500/30">
                                  NFT Reward
                                </Badge>
                              )}
                            </div>

<Button
                              size="sm"
                              variant={milestone.completed ? "outline" : "default"}
                              className={
                                milestone.completed
                                  ? "border-green-500 text-green-400 hover:bg-green-900/20"
                                  : "bg-purple-600 hover:bg-purple-700"
                              }
                              disabled={milestone.completed}
                            >
                              {milestone.completed ? "Completed" : "Start"}
                            </Button>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
        </TabsContent>
      </Tabs>

{/* Chat interface */}
      {selectedAgent && (
        <div className="mt-8">
          <Card className="bg-gray-900/60 border-gray-800">
            <CardHeader className="border-b border-gray-800">
              <div className="flex items-center gap-3">
                <Avatar className="h-10 w-10">
                  <AvatarImage src={selectedAgent.avatar || "/placeholder.svg"} alt={selectedAgent.name} />
                  <AvatarFallback>{selectedAgent.name[0]}</AvatarFallback>
                </Avatar>
                <div>
                  <CardTitle>{selectedAgent.name}</CardTitle>
                  <CardDescription>{selectedAgent.role}</CardDescription>
                </div>
              </div>
            </CardHeader>
            <div className="h-[500px]">
              <MultiModalChat
                agent={selectedAgent}
                initialMessages={chatMessages}
                onSendMessage={handleSendMessage}
                isProcessing={isProcessing}
              />
            </div>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ai-agents/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Progress } from "@/components/ui/progress"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useToast } from "@/hooks/use-toast"
import {
  TrendingUp,
  Calendar,
  Users,
  Briefcase,
  Sparkles,
  Bot,
  Zap,
  ChevronRight,
  Award,
  Star,
  BarChart,
  Music,
  Headphones,
  Mic,
} from "lucide-react"
import AgentDashboard from "@/components/ai-agents/agent-dashboard"
import type { AIAgent, RoleModel, LearnToEarnMilestone, UserAgentProfile } from "@/lib/ai/agent-system/types"

export default function AIAgentsPage() {
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(true)
  const [agents, setAgents] = useState<AIAgent[]>([])
  const [roleModels, setRoleModels] = useState<RoleModel[]>([])
  const [userProfile, setUserProfile] = useState<UserAgentProfile | null>(null)
  const [milestones, setMilestones] = useState<LearnToEarnMilestone[]>([])
  const [activeTab, setActiveTab] = useState("overview")

// Fetch data on component mount
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true)
      try {
        // In a real implementation, these would be API calls
        // For now, we'll simulate a delay
        await new Promise((resolve) => setTimeout(resolve, 1000))

// Sample data would be loaded here from API
        setAgents([])
        setRoleModels([])
        setUserProfile({
          userId: "user-1",
          activeAgents: [],
          completedMilestones: [],
          xpPoints: 120,
          level: 2,
          preferences: {},
          insights: {},
        })
        setMilestones([])
      } catch (error) {
        console.error("Error fetching data:", error)
        toast({
          title: "Error",
          description: "Failed to load AI agent data. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchData()
  }, [toast])

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="mb-8"
        >
          <h1 className="text-4xl font-bold mb-2">AI Agent Ecosystem</h1>
          <p className="text-gray-400 max-w-3xl">
            Leverage AI agents with multi-modal interfaces to accelerate your music career. Our agents are powered by
            the AMX MCP + NVIDIA MCP technology stack and can emulate successful artists to help you build your career.
          </p>
        </motion.div>

<Tabs defaultValue={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="bg-gray-800/50 border border-gray-700">
            <TabsTrigger value="overview" className="data-[state=active]:bg-purple-900/50">
              Overview
            </TabsTrigger>
            <TabsTrigger value="dashboard" className="data-[state=active]:bg-purple-900/50">
              Agent Dashboard
            </TabsTrigger>
            <TabsTrigger value="roleModels" className="data-[state=active]:bg-purple-900/50">
              Role Models
            </TabsTrigger>
            <TabsTrigger value="learnToEarn" className="data-[state=active]:bg-purple-900/50">
              Learn to Earn
            </TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
              <Card className="bg-gray-900/60 border-gray-800">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Bot className="h-5 w-5 mr-2 text-purple-400" /> AI Agents
                  </CardTitle>
                  <CardDescription>
                    Specialized AI assistants that help you with different aspects of your music career
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-start gap-3">
                    <div className="p-2 rounded-full bg-purple-900/30 border border-purple-500/30">
                      <TrendingUp className="h-4 w-4 text-purple-400" />
                    </div>
                    <div>
                      <h3 className="font-medium">Promotion Agent</h3>
                      <p className="text-sm text-gray-400">
                        Automates social media campaigns and promotional strategies
                      </p>
                    </div>
                  </div>

<div className="flex items-start gap-3">
                    <div className="p-2 rounded-full bg-purple-900/30 border border-purple-500/30">
                      <Calendar className="h-4 w-4 text-purple-400" />
                    </div>
                    <div>
                      <h3 className="font-medium">Booking Agent</h3>
                      <p className="text-sm text-gray-400">
                        Helps secure performance opportunities and manages your calendar
                      </p>
                    </div>
                  </div>

<div className="flex items-start gap-3">
                    <div className="p-2 rounded-full bg-purple-900/30 border border-purple-500/30">
                      <Users className="h-4 w-4 text-purple-400" />
                    </div>
                    <div>
                      <h3 className="font-medium">A&R Agent</h3>
                      <p className="text-sm text-gray-400">
                        Connects your music with industry professionals and collaborators
                      </p>
                    </div>
                  </div>

<div className="flex items-start gap-3">
                    <div className="p-2 rounded-full bg-purple-900/30 border border-purple-500/30">
                      <Briefcase className="h-4 w-4 text-purple-400" />
                    </div>
                    <div>
                      <h3 className="font-medium">Business Manager</h3>
                      <p className="text-sm text-gray-400">
                        Optimizes revenue streams and manages licensing opportunities
                      </p>
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button
                    className="w-full bg-purple-600 hover:bg-purple-700"
                    onClick={() => setActiveTab("dashboard")}
                  >
                    Explore AI Agents <ChevronRight className="h-4 w-4 ml-2" />
                  </Button>
                </CardFooter>
              </Card>

<Card className="bg-gray-900/60 border-gray-800">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Star className="h-5 w-5 mr-2 text-purple-400" /> Role Models
                  </CardTitle>
                  <CardDescription>
                    AI agents modeled after successful artists to guide your career development
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-start gap-3">
                    <Avatar className="h-10 w-10">
                      <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Chart Topper" />
                      <AvatarFallback>CT</AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="font-medium">Chart Topper</h3>
                      <p className="text-sm text-gray-400">Based on Drake's career path from mixtapes to mainstream</p>
                    </div>
                  </div>

<div className="flex items-start gap-3">
                    <Avatar className="h-10 w-10">
                      <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Genre Evolver" />
                      <AvatarFallback>GE</AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="font-medium">Genre Evolver</h3>
                      <p className="text-sm text-gray-400">
                        Based on Taylor Swift's genre transitions and business moves
                      </p>
                    </div>
                  </div>

<div className="flex items-start gap-3">
                    <Avatar className="h-10 w-10">
                      <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Mysterious Persona" />
                      <AvatarFallback>MP</AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="font-medium">Mysterious Persona</h3>
                      <p className="text-sm text-gray-400">Based on The Weeknd's mystique and sound evolution</p>
                    </div>
                  </div>

<div className="flex items-start gap-3">
                    <Avatar className="h-10 w-10">
                      <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Indie Success" />
                      <AvatarFallback>IS</AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="font-medium">Indie Success</h3>
                      <p className="text-sm text-gray-400">
                        Based on independent artists who built careers without labels
                      </p>
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button
                    className="w-full bg-purple-600 hover:bg-purple-700"
                    onClick={() => setActiveTab("roleModels")}
                  >
                    Explore Role Models <ChevronRight className="h-4 w-4 ml-2" />
                  </Button>
                </CardFooter>
              </Card>
            </div>

<Card className="bg-gray-900/60 border-gray-800 mb-12">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Award className="h-5 w-5 mr-2 text-purple-400" /> Learn to Earn Program
                </CardTitle>
                <CardDescription>
                  Complete learning modules and tasks to earn XP, NFT certificates, and unlock advanced features
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="flex flex-col items-center text-center p-4 bg-gray-800/50 rounded-lg border border-gray-700">
                    <div className="p-3 rounded-full bg-purple-900/30 border border-purple-500/30 mb-3">
                      <Music className="h-6 w-6 text-purple-400" />
                    </div>
                    <h3 className="font-medium mb-2">Music Production</h3>
                    <p className="text-sm text-gray-400 mb-3">
                      Learn the fundamentals of music production and earn NFT certificates
                    </p>
                    <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">100 XP</Badge>
                  </div>

<div className="flex flex-col items-center text-center p-4 bg-gray-800/50 rounded-lg border border-gray-700">
                    <div className="p-3 rounded-full bg-purple-900/30 border border-purple-500/30 mb-3">
                      <Headphones className="h-6 w-6 text-purple-400" />
                    </div>
                    <h3 className="font-medium mb-2">Social Presence</h3>
                    <p className="text-sm text-gray-400 mb-3">
                      Build your social media presence with AI-assisted strategies
                    </p>
                    <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">75 XP</Badge>
                  </div>
                </div>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700"
                  onClick={() => setActiveTab("learnToEarn")}
                >
                  Explore Learn to Earn <ChevronRight className="h-4 w-4 ml-2" />
                </Button>
              </CardFooter>
            </Card>

<div className="bg-gradient-to-r from-purple-900/20 via-pink-900/20 to-purple-900/20 rounded-xl p-8 border border-purple-500/20">
              <div className="flex flex-col md:flex-row items-center justify-between gap-6">
                <div className="flex items-center gap-4">
                  <div className="p-4 rounded-full bg-purple-600/30 border border-purple-500/30">
                    <Sparkles className="h-8 w-8 text-purple-400" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-semibold mb-1">Get Started Today</h3>
                    <p className="text-gray-300">Begin your AI-powered music career journey</p>
                  </div>
                </div>

<Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                  <Zap className="h-4 w-4 mr-2" /> Activate AI Agents
                </Button>
              </div>
            </div>
          </TabsContent>

<TabsContent value="roleModels" className="mt-6">
            <div className="mb-6">
              <h2 className="text-2xl font-bold mb-2">Role Model AI Agents</h2>
              <p className="text-gray-400 max-w-3xl">
                Our Role Model AI agents are trained on the career paths, strategies, and approaches of successful
                artists. They can help you develop a personalized career roadmap and marketing strategy based on proven
                success patterns.
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* Role model cards would be dynamically generated here */}
              <Card className="bg-gray-900/60 border-gray-800">
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <Avatar className="h-12 w-12">
                      <AvatarImage src="/placeholder.svg?height=100&width=100" alt="Chart Topper" />
                      <AvatarFallback>CT</AvatarFallback>
                    </Avatar>
                    <div>
                      <CardTitle className="text-lg">Chart Topper</CardTitle>
                      <CardDescription>Based on Drake</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-400 mb-3">
                    Based on Drake's career path, this agent helps you navigate from mixtapes to mainstream success.
                  </p>
                  <div className="mb-3">
                    <h4 className="text-sm font-medium mb-2">Key Achievements</h4>
                    <ul className="text-xs text-gray-400 space-y-1 list-disc pl-4">
                      <li>Multiple Grammy Awards</li>
                      <li>Record-breaking Billboard chart positions</li>
                      <li>Successful label OVO Sound</li>
                    </ul>
                  </div>
                  <div className="mb-3">
                    <h4 className="text-sm font-medium mb-2">Career Path</h4>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <div className="h-2 w-2 rounded-full bg-gray-600"></div>
                        <span className="text-xs text-gray-400">Release mixtapes and build local following</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="h-2 w-2 rounded-full bg-gray-600"></div>
                        <span className="text-xs text-gray-400">Secure major label deal</span>
                      </div>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="flex gap-2">
                  <Button className="flex-1 bg-purple-600 hover:bg-purple-700">Career Roadmap</Button>
                  <Button variant="outline" className="flex-1 border-gray-700 hover:bg-gray-800">
                    Marketing Plan
                  </Button>
                </CardFooter>
              </Card>

{/* More role model cards would go here */}
            </div>
          </TabsContent>

<TabsContent value="learnToEarn" className="mt-6">
            <div className="mb-6">
              <h2 className="text-2xl font-bold mb-2">Learn to Earn Program</h2>
              <p className="text-gray-400 max-w-3xl">
                Complete learning modules, create content, and engage with the community to earn XP, NFT certificates,
                and unlock advanced features. Our containerized learning components are designed for scalability and
                easy management.
              </p>
            </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              <div className="lg:col-span-1">
                <Card className="bg-gray-900/60 border-gray-800 mb-6">
                  <CardHeader>
                    <CardTitle className="text-lg">Your Progress</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center gap-3 mb-4">
                      <div className="bg-purple-900/30 border border-purple-500/30 rounded-full p-3">
                        <Star className="h-6 w-6 text-purple-400" />
                      </div>
                      <div>
                        <p className="text-sm text-gray-400">Current Level</p>
                        <p className="text-2xl font-bold">2</p>
                      </div>
                    </div>

<div className="mb-4">
                      <div className="flex justify-between text-sm mb-1">
                        <span>XP Progress</span>
                        <span>120 / 200</span>
                      </div>
                      <Progress value={60} className="h-2" />
                    </div>

<div className="space-y-3">
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-400">Milestones Completed</span>
                        <span>1 / 3</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-400">Active Agents</span>
                        <span>2</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-gray-900/60 border-gray-800">
                  <CardHeader>
                    <CardTitle className="text-lg">Rewards</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-center gap-3">
                        <div className="bg-amber-900/30 border border-amber-500/30 rounded-full p-3">
                          <Award className="h-6 w-6 text-amber-400" />
                        </div>
                        <div>
                          <p className="font-medium">NFT Certificates</p>
                          <p className="text-sm text-gray-400">Earn unique NFTs for completing courses</p>
                        </div>
                      </div>

<div className="flex items-center gap-3">
                        <div className="bg-blue-900/30 border border-blue-500/30 rounded-full p-3">
                          <Zap className="h-6 w-6 text-blue-400" />
                        </div>
                        <div>
                          <p className="font-medium">Premium Features</p>
                          <p className="text-sm text-gray-400">Unlock advanced AI agent capabilities</p>
                        </div>
                      </div>

<div className="flex items-center gap-3">
                        <div className="bg-green-900/30 border border-green-500/30 rounded-full p-3">
                          <BarChart className="h-6 w-6 text-green-400" />
                        </div>
                        <div>
                          <p className="font-medium">Career Opportunities</p>
                          <p className="text-sm text-gray-400">Get matched with industry professionals</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

<div className="lg:col-span-2">
                <h3 className="text-xl font-bold mb-4">Available Milestones</h3>
                <div className="space-y-4">
                  {/* Milestone cards would be dynamically generated here */}
                  <Card className="bg-gray-900/60 border-gray-800">
                    <CardContent className="p-4">
                      <div className="flex items-start gap-4">
                        <div className="p-3 rounded-full bg-green-900/30 border border-green-500/30">
                          <Award className="h-6 w-6 text-green-400" />
                        </div>

<div className="flex-1">
                          <div className="flex justify-between items-start">
                            <div>
                              <h4 className="font-medium">Complete Music Production Basics</h4>
                              <p className="text-sm text-gray-400 mb-2">
                                Finish the Music Production 101 course to earn XP and an exclusive NFT.
                              </p>
                            </div>
                            <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">100 XP</Badge>
                          </div>

<div className="mb-3">
                            <div className="flex justify-between text-xs text-gray-500 mb-1">
                              <span>Progress</span>
                              <span>100%</span>
                            </div>
                            <Progress value={100} className="h-1.5" />
                          </div>

<div className="flex justify-between items-center">
                            <div className="flex items-center">
                              <Badge variant="outline" className="bg-amber-900/20 text-amber-300 border-amber-500/30">
                                NFT Reward
                              </Badge>
                            </div>

<Button
                              size="sm"
                              variant="outline"
                              className="border-green-500 text-green-400 hover:bg-green-900/20"
                              disabled
                            >
                              Completed
                            </Button>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

<div className="flex-1">
                          <div className="flex justify-between items-start">
                            <div>
                              <h4 className="font-medium">Create Your First Beat</h4>
                              <p className="text-sm text-gray-400 mb-2">
                                Upload your first beat to the platform to earn XP.
                              </p>
                            </div>
                            <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">50 XP</Badge>
                          </div>

<div className="mb-3">
                            <div className="flex justify-between text-xs text-gray-500 mb-1">
                              <span>Progress</span>
                              <span>0%</span>
                            </div>
                            <Progress value={0} className="h-1.5" />
                          </div>

<div className="flex justify-between items-center">
                            <div className="flex items-center">{/* No NFT badge for this milestone */}</div>

<Button size="sm" className="bg-purple-600 hover:bg-purple-700">
                              Start
                            </Button>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

{/* More milestone cards would go here */}
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/agents/learn-to-earn/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Award, Star, BarChart, Zap, CheckCircle, Lock, BookOpen, Trophy } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

// Sample user profile data
const userProfile = {
  userId: "user-1",
  activeAgents: ["promotion-agent", "booking-agent"],
  completedMilestones: ["1"],
  xpPoints: 145,
  level: 2,
  preferences: {},
  insights: {},
}

// Sample milestone data
const milestones = [
  {
    id: "1",
    title: "Complete Music Production Basics",
    description: "Finish the Music Production 101 course to earn XP and an exclusive NFT.",
    xpReward: 100,
    nftReward: {
      contractAddress: "0x1234567890abcdef1234567890abcdef12345678",
      tokenId: "1",
      metadata: {
        name: "Music Producer Certificate",
        description: "Awarded for completing Music Production 101",
        image: "/placeholder.svg?height=400&width=400",
      },
    },
    requirements: [
      {
        type: "course_completion",
        value: "music-production-101",
      },
    ],
    completed: true,
  },
  {
    id: "2",
    title: "Create Your First Beat",
    description: "Upload your first beat to the platform to earn XP.",
    xpReward: 50,
    requirements: [
      {
        type: "content_creation",
        value: "audio_upload",
      },
    ],
    completed: false,
  },
  {
    id: "3",
    title: "Build Your Social Presence",
    description: "Connect your social media accounts and make 3 posts about your music.",
    xpReward: 75,
    requirements: [
      {
        type: "social_engagement",
        value: 3,
      },
    ],
    completed: false,
  },
  {
    id: "4",
    title: "Complete Blockchain Basics",
    description: "Finish the Blockchain for Musicians course to earn XP and unlock advanced features.",
    xpReward: 125,
    nftReward: {
      contractAddress: "0x1234567890abcdef1234567890abcdef12345678",
      tokenId: "2",
      metadata: {
        name: "Blockchain Innovator Certificate",
        description: "Awarded for completing Blockchain for Musicians",
        image: "/placeholder.svg?height=400&width=400",
      },
    },
    requirements: [
      {
        type: "course_completion",
        value: "blockchain-for-musicians",
      },
    ],
    completed: false,
  },
  {
    id: "5",
    title: "Mint Your First NFT",
    description: "Create and mint your first music NFT on the platform.",
    xpReward: 150,
    requirements: [
      {
        type: "nft_creation",
        value: "music_nft",
      },
    ],
    completed: false,
  },
]

// Sample learning modules
const learningModules = [
  {
    id: "music-production-101",
    title: "Music Production 101",
    description: "Learn the fundamentals of music production from setup to final mix.",
    progress: 100,
    totalLessons: 12,
    completedLessons: 12,
    image: "/placeholder.svg?height=400&width=600",
    xpReward: 100,
    level: "Beginner",
    duration: "4h 30m",
    completed: true,
  },
  {
    id: "blockchain-for-musicians",
    title: "Blockchain for Musicians",
    description: "Understand how blockchain technology is revolutionizing the music industry.",
    progress: 20,
    totalLessons: 14,
    completedLessons: 3,
    image: "/placeholder.svg?height=400&width=600",
    xpReward: 125,
    level: "Intermediate",
    duration: "5h 20m",
    completed: false,
  },
  {
    id: "marketing-essentials",
    title: "Music Marketing Essentials",
    description: "Learn how to effectively market your music in the digital age.",
    progress: 0,
    totalLessons: 10,
    completedLessons: 0,
    image: "/placeholder.svg?height=400&width=600",
    xpReward: 75,
    level: "Beginner",
    duration: "3h 45m",
    completed: false,
  },
  {
    id: "advanced-mixing",
    title: "Advanced Mixing Techniques",
    description: "Take your mixing skills to the next level with professional techniques.",
    progress: 0,
    totalLessons: 15,
    completedLessons: 0,
    image: "/placeholder.svg?height=400&width=600",
    xpReward: 150,
    level: "Advanced",
    duration: "6h 15m",
    completed: false,
  },
]

// Sample rewards
const rewards = [
  {
    id: "1",
    type: "nft",
    name: "Music Producer Certificate",
    description: "Awarded for completing Music Production 101",
    image: "/placeholder.svg?height=200&width=200",
    acquired: true,
    rarity: "common",
  },
  {
    id: "2",
    type: "nft",
    name: "Blockchain Innovator Certificate",
    description: "Awarded for completing Blockchain for Musicians",
    image: "/placeholder.svg?height=200&width=200",
    acquired: false,
    rarity: "uncommon",
  },
  {
    id: "3",
    type: "badge",
    name: "Content Creator",
    description: "Created and uploaded 5 original tracks",
    image: "/placeholder.svg?height=200&width=200",
    acquired: false,
    rarity: "common",
  },
  {
    id: "4",
    type: "access",
    name: "Premium AI Agent Access",
    description: "Unlock advanced AI agent capabilities",
    image: "/placeholder.svg?height=200&width=200",
    acquired: false,
    rarity: "rare",
  },
  {
    id: "5",
    type: "nft",
    name: "Music Entrepreneur",
    description: "Completed the full business curriculum",
    image: "/placeholder.svg?height=200&width=200",
    acquired: false,
    rarity: "epic",
  },
]

export default function LearnToEarnPage() {
  const [activeTab, setActiveTab] = useState("overview")
  const { toast } = useToast()

const handleStartModule = (moduleId: string) => {
    toast({
      title: "Module started",
      description: `You've started the ${learningModules.find((m) => m.id === moduleId)?.title} module`,
    })
  }

const handleClaimReward = (rewardId: string) => {
    toast({
      title: "Reward claimed",
      description: "Your reward has been added to your collection",
    })
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8 md:py-12">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <h1 className="text-3xl md:text-4xl font-bold mb-2">Learn to Earn</h1>
          <p className="text-gray-400 mb-6 md:mb-8">
            Complete learning modules, earn XP, and unlock exclusive rewards as you develop your music career.
          </p>
        </motion.div>

<Tabs defaultValue={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="bg-gray-800/50 border border-gray-700">
            <TabsTrigger value="overview" className="data-[state=active]:bg-purple-900/50">
              Overview
            </TabsTrigger>
            <TabsTrigger value="modules" className="data-[state=active]:bg-purple-900/50">
              Learning Modules
            </TabsTrigger>
            <TabsTrigger value="milestones" className="data-[state=active]:bg-purple-900/50">
              Milestones
            </TabsTrigger>
            <TabsTrigger value="rewards" className="data-[state=active]:bg-purple-900/50">
              Rewards
            </TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="mt-6">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              <div className="lg:col-span-1">
                <Card className="bg-gray-900/60 border-gray-800 mb-6">
                  <CardHeader>
                    <CardTitle className="text-lg">Your Progress</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center gap-3 mb-4">
                      <div className="bg-purple-900/30 border border-purple-500/30 rounded-full p-3">
                        <Star className="h-6 w-6 text-purple-400" />
                      </div>
                      <div>
                        <p className="text-sm text-gray-400">Current Level</p>
                        <p className="text-2xl font-bold">{userProfile.level}</p>
                      </div>
                    </div>

<div className="mb-4">
                      <div className="flex justify-between text-sm mb-1">
                        <span>XP Progress</span>
                        <span>
                          {userProfile.xpPoints} / {userProfile.level * 100}
                        </span>
                      </div>
                      <Progress value={(userProfile.xpPoints % 100) * 2} className="h-2" />
                    </div>

<div className="space-y-3">
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-400">Milestones Completed</span>
                        <span>
                          {userProfile.completedMilestones.length} / {milestones.length}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-400">Active Agents</span>
                        <span>{userProfile.activeAgents.length}</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-gray-900/60 border-gray-800">
                  <CardHeader>
                    <CardTitle className="text-lg">Rewards</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-center gap-3">
                        <div className="bg-amber-900/30 border border-amber-500/30 rounded-full p-3">
                          <Award className="h-6 w-6 text-amber-400" />
                        </div>
                        <div>
                          <p className="font-medium">NFT Certificates</p>
                          <p className="text-sm text-gray-400">Earn unique NFTs for completing courses</p>
                        </div>
                      </div>

<div className="flex items-center gap-3">
                        <div className="bg-blue-900/30 border border-blue-500/30 rounded-full p-3">
                          <Zap className="h-6 w-6 text-blue-400" />
                        </div>
                        <div>
                          <p className="font-medium">Premium Features</p>
                          <p className="text-sm text-gray-400">Unlock advanced AI agent capabilities</p>
                        </div>
                      </div>

<div className="flex items-center gap-3">
                        <div className="bg-green-900/30 border border-green-500/30 rounded-full p-3">
                          <BarChart className="h-6 w-6 text-green-400" />
                        </div>
                        <div>
                          <p className="font-medium">Career Opportunities</p>
                          <p className="text-sm text-gray-400">Get matched with industry professionals</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

<div className="lg:col-span-2">
                <Card className="bg-gray-900/60 border-gray-800 mb-6">
                  <CardHeader>
                    <CardTitle className="text-lg">Recent Activity</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-start gap-3">
                        <div className="bg-green-900/30 border border-green-500/30 rounded-full p-2">
                          <CheckCircle className="h-5 w-5 text-green-400" />
                        </div>
                        <div>
                          <p className="font-medium">Completed Music Production 101</p>
                          <p className="text-sm text-gray-400">
                            You earned 100 XP and a Music Producer Certificate NFT
                          </p>
                          <p className="text-xs text-gray-500 mt-1">2 days ago</p>
                        </div>
                      </div>

<div className="flex items-start gap-3">
                        <div className="bg-purple-900/30 border border-purple-500/30 rounded-full p-2">
                          <BookOpen className="h-5 w-5 text-purple-400" />
                        </div>
                        <div>
                          <p className="font-medium">Started Blockchain for Musicians</p>
                          <p className="text-sm text-gray-400">You've completed 3 of 14 lessons</p>
                          <p className="text-xs text-gray-500 mt-1">1 day ago</p>
                        </div>
                      </div>

<div className="flex items-start gap-3">
                        <div className="bg-blue-900/30 border border-blue-500/30 rounded-full p-2">
                          <Zap className="h-5 w-5 text-blue-400" />
                        </div>
                        <div>
                          <p className="font-medium">Unlocked Promotion Agent</p>
                          <p className="text-sm text-gray-400">You now have access to the Promotion AI Agent</p>
                          <p className="text-xs text-gray-500 mt-1">3 days ago</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-gray-900/60 border-gray-800">
                  <CardHeader>
                    <CardTitle className="text-lg">Recommended Next Steps</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="p-4 bg-gray-800/50 rounded-lg border border-gray-700">
                        <div className="flex items-start gap-3">
                          <div className="bg-purple-900/30 border border-purple-500/30 rounded-full p-2">
                            <BookOpen className="h-5 w-5 text-purple-400" />
                          </div>
                          <div className="flex-1">
                            <div className="flex justify-between items-start">
                              <p className="font-medium">Continue Blockchain for Musicians</p>
                              <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">125 XP</Badge>
                            </div>
                            <p className="text-sm text-gray-400 mb-2">Complete the course to earn an NFT certificate</p>
                            <Button size="sm" className="bg-purple-600 hover:bg-purple-700">
                              Continue Learning
                            </Button>
                          </div>
                        </div>
                      </div>

<div className="p-4 bg-gray-800/50 rounded-lg border border-gray-700">
                        <div className="flex items-start gap-3">
                          <div className="bg-amber-900/30 border border-amber-500/30 rounded-full p-2">
                            <Award className="h-5 w-5 text-amber-400" />
                          </div>
                          <div className="flex-1">
                            <div className="flex justify-between items-start">
                              <p className="font-medium">Create Your First Beat</p>
                              <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">50 XP</Badge>
                            </div>
                            <p className="text-sm text-gray-400 mb-2">Upload your first beat to the platform</p>
                            <Button size="sm" className="bg-purple-600 hover:bg-purple-700">
                              Start Creating
                            </Button>
                          </div>
                        </div>
                      </div>

<div className="p-4 bg-gray-800/50 rounded-lg border border-gray-700">
                        <div className="flex items-start gap-3">
                          <div className="bg-blue-900/30 border border-blue-500/30 rounded-full p-2">
                            <Zap className="h-5 w-5 text-blue-400" />
                          </div>
                          <div className="flex-1">
                            <div className="flex justify-between items-start">
                              <p className="font-medium">Connect Social Media Accounts</p>
                              <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">75 XP</Badge>
                            </div>
                            <p className="text-sm text-gray-400 mb-2">Connect your accounts and make 3 posts</p>
                            <Button size="sm" className="bg-purple-600 hover:bg-purple-700">
                              Connect Accounts
                            </Button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

<TabsContent value="modules" className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {learningModules.map((module) => (
                <Card
                  key={module.id}
                  className={`bg-gray-900/60 border-gray-800 hover:border-purple-500/50 transition-all duration-300 ${
                    module.completed ? "bg-purple-900/20" : ""
                  }`}
                >
                  <div className="relative h-48">
                    <img
                      src={module.image || "/placeholder.svg"}
                      alt={module.title}
                      className="absolute inset-0 w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
                    <div className="absolute bottom-4 left-4 right-4 flex justify-between items-center">
                      <Badge className="bg-black/60 backdrop-blur-sm border border-white/10">{module.level}</Badge>
                      <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">
                        {module.xpReward} XP
                      </Badge>
                    </div>
                  </div>
                  <CardContent className="p-4">
                    <h3 className="font-bold text-lg mb-1">{module.title}</h3>
                    <p className="text-gray-400 text-sm mb-2">{module.description}</p>
                    <div className="flex items-center text-sm text-gray-400 mb-3">
                      <BookOpen className="h-4 w-4 mr-1" /> {module.completedLessons}/{module.totalLessons} lessons
                      <span className="mx-2">•</span>
                      <span>{module.duration}</span>
                    </div>
                    <div className="mb-4">
                      <div className="flex justify-between text-xs text-gray-500 mb-1">
                        <span>Progress</span>
                        <span>{module.progress}%</span>
                      </div>
                      <Progress value={module.progress} className="h-1.5" />
                    </div>
                  </CardContent>
                  <CardFooter className="pt-0 px-4 pb-4">
                    <Button
                      className={`w-full ${
                        module.completed ? "bg-green-600 hover:bg-green-700" : "bg-purple-600 hover:bg-purple-700"
                      }`}
                      onClick={() => handleStartModule(module.id)}
                    >
                      {module.completed ? (
                        <>
                          <CheckCircle className="h-4 w-4 mr-2" /> Completed
                        </>
                      ) : module.progress > 0 ? (
                        "Continue"
                      ) : (
                        "Start Learning"
                      )}
                    </Button>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="milestones" className="mt-6">
            <div className="space-y-4">
              {milestones.map((milestone) => (
                <Card
                  key={milestone.id}
                  className={`bg-gray-900/60 border-gray-800 hover:border-purple-500/50 transition-all duration-300 ${
                    milestone.completed ? "bg-purple-900/20" : ""
                  }`}
                >
                  <CardContent className="p-4">
                    <div className="flex items-start gap-4">
                      <div
                        className={`p-3 rounded-full ${
                          milestone.completed
                            ? "bg-green-900/30 border border-green-500/30"
                            : "bg-gray-800 border border-gray-700"
                        }`}
                      >
                        {milestone.completed ? (
                          <Award className="h-6 w-6 text-green-400" />
                        ) : (
                          <Award className="h-6 w-6 text-gray-400" />
                        )}
                      </div>

<div className="flex-1">
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="font-medium">{milestone.title}</h4>
                            <p className="text-sm text-gray-400 mb-2">{milestone.description}</p>
                          </div>
                          <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">
                            {milestone.xpReward} XP
                          </Badge>
                        </div>

<div className="mb-3">
                          <div className="flex justify-between text-xs text-gray-500 mb-1">
                            <span>Progress</span>
                            <span>{milestone.completed ? "100%" : "0%"}</span>
                          </div>
                          <Progress value={milestone.completed ? 100 : 0} className="h-1.5" />
                        </div>

<div className="flex justify-between items-center">
                          <div className="flex items-center">
                            {milestone.nftReward && (
                              <Badge variant="outline" className="bg-amber-900/20 text-amber-300 border-amber-500/30">
                                NFT Reward
                              </Badge>
                            )}
                          </div>

<Button
                            size="sm"
                            variant={milestone.completed ? "outline" : "default"}
                            className={
                              milestone.completed
                                ? "border-green-500 text-green-400 hover:bg-green-900/20"
                                : "bg-purple-600 hover:bg-purple-700"
                            }
                            disabled={milestone.completed}
                          >
                            {milestone.completed ? "Completed" : "Start"}
                          </Button>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="rewards" className="mt-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
              {rewards.map((reward) => (
                <Card
                  key={reward.id}
                  className={`bg-gray-900/60 border-gray-800 hover:border-purple-500/50 transition-all duration-300 ${
                    reward.acquired ? "bg-purple-900/20" : ""
                  }`}
                >
                  <div className="relative pt-6">
                    <div className="mx-auto w-32 h-32 relative">
                      <img
                        src={reward.image || "/placeholder.svg"}
                        alt={reward.name}
                        className="w-full h-full object-contain"
                      />
                      {!reward.acquired && (
                        <div className="absolute inset-0 flex items-center justify-center bg-black/60 rounded-full">
                          <Lock className="h-8 w-8 text-gray-400" />
                        </div>
                      )}
                    </div>
                    <Badge
                      className={`absolute top-2 right-2 ${
                        reward.rarity === "common"
                          ? "bg-gray-700"
                          : reward.rarity === "uncommon"
                            ? "bg-green-700"
                            : reward.rarity === "rare"
                              ? "bg-blue-700"
                              : reward.rarity === "epic"
                                ? "bg-purple-700"
                                : "bg-amber-700"
                      }`}
                    >
                      {reward.rarity}
                    </Badge>
                  </div>
                  <CardContent className="p-4 text-center">
                    <h3 className="font-bold text-lg mb-1">{reward.name}</h3>
                    <p className="text-gray-400 text-sm mb-3">{reward.description}</p>
                    <Badge
                      variant="outline"
                      className={`${
                        reward.type === "nft"
                          ? "border-amber-500/30 text-amber-300"
                          : reward.type === "badge"
                            ? "border-blue-500/30 text-blue-300"
                            : "border-purple-500/30 text-purple-300"
                      }`}
                    >
                      {reward.type === "nft" ? "NFT" : reward.type === "badge" ? "Badge" : "Access"}
                    </Badge>
                  </CardContent>
                  <CardFooter className="pt-0 px-4 pb-4">
                    <Button
                      className={`w-full ${
                        reward.acquired
                          ? "bg-green-600 hover:bg-green-700"
                          : "bg-gray-700 hover:bg-gray-600 cursor-not-allowed"
                      }`}
                      disabled={!reward.acquired}
                      onClick={() => reward.acquired && handleClaimReward(reward.id)}
                    >
                      {reward.acquired ? (
                        <>
                          <Trophy className="h-4 w-4 mr-2" /> View Reward
                        </>
                      ) : (
                        <>
                          <Lock className="h-4 w-4 mr-2" /> Locked
                        </>
                      )}
                    </Button>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/agents/role-models/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Award, Star, BarChart } from "lucide-react"
import Link from "next/link"

// Sample role models data
const roleModels = [
  {
    id: "drake-model",
    name: "Chart Topper",
    description: "Based on Drake's career path, this agent helps you navigate from mixtapes to mainstream success.",
    avatar: "/placeholder.svg?height=100&width=100",
    role: "mentor",
    capabilities: [
      {
        id: "career-roadmap",
        name: "Career Roadmap Creation",
        description: "Creates a detailed career roadmap based on Drake's path",
        modalities: ["text"],
        requiresAuth: false,
      },
      {
        id: "brand-strategy",
        name: "Brand Strategy Development",
        description: "Develops a personal brand strategy inspired by Drake",
        modalities: ["text", "image"],
        requiresAuth: true,
      },
    ],
    specialization: ["Hip-Hop", "Mainstream Crossover", "Brand Building"],
    modelProvider: "openai",
    baseModel: "gpt-4o",
    finetuned: true,
    multiModal: true,
    contextWindow: 128000,
    createdAt: new Date(),
    updatedAt: new Date(),
    basedOn: {
      name: "Drake",
      profession: "Rapper, Singer, Entrepreneur",
      achievements: ["Multiple Grammy Awards", "Record-breaking Billboard chart positions"],
    },
  },
]

const HowItWorksPage = () => {
  return (
    <div className="container mx-auto py-10">
      <h1 className="text-3xl font-bold text-center mb-8">How AI Agents Work</h1>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* Step 1: Choose a Role Model */}
        <Card>
          <CardHeader>
            <CardTitle>Step 1: Choose a Role Model</CardTitle>
            <CardDescription>Select an AI agent based on a successful figure.</CardDescription>
          </CardHeader>
          <CardContent>
            <p>
              Browse our library of AI agents inspired by industry leaders, innovators, and experts. Each agent embodies
              the knowledge, skills, and strategies of their real-world counterpart.
            </p>
          </CardContent>
          <CardFooter>
            <Award className="mr-2 h-4 w-4" />
            Inspiration from the best
          </CardFooter>
        </Card>

{/* Step 2: Define Your Goals */}
        <Card>
          <CardHeader>
            <CardTitle>Step 2: Define Your Goals</CardTitle>
            <CardDescription>Specify what you want to achieve with the agent.</CardDescription>
          </CardHeader>
          <CardContent>
            <p>
              Clearly define your objectives. Whether it's launching a product, creating content, or developing a new
              skill, your goals will guide the AI agent's actions and recommendations.
            </p>
          </CardContent>
          <CardFooter>
            <Star className="mr-2 h-4 w-4" />
            Set clear objectives
          </CardFooter>
        </Card>

{/* Step 3: Interact and Collaborate */}
        <Card>
          <CardHeader>
            <CardTitle>Step 3: Interact and Collaborate</CardTitle>
            <CardDescription>Work with the AI agent to achieve your goals.</CardDescription>
          </CardHeader>
          <CardContent>
            <p>
              Engage in conversations, ask questions, and provide feedback. The AI agent will offer insights, generate
              ideas, and help you make informed decisions, all while emulating the approach of your chosen role model.
            </p>
          </CardContent>
          <CardFooter>
            <BarChart className="mr-2 h-4 w-4" />
            Collaborate for success
          </CardFooter>
        </Card>
      </div>

<section className="mt-12">
        <h2 className="text-2xl font-semibold mb-4">Benefits of Using AI Agents</h2>
        <ul className="list-disc list-inside">
          <li>Gain insights from successful role models.</li>
          <li>Accelerate your learning and development.</li>
          <li>Make data-driven decisions with confidence.</li>
          <li>Unlock new opportunities and achieve your goals faster.</li>
        </ul>
      </section>

<section className="mt-12">
        <h2 className="text-2xl font-semibold mb-4">Ready to Get Started?</h2>
        <p>Explore our AI agent library and find the perfect role model to help you achieve your aspirations.</p>
        <Button asChild>
          <Link href="/agents">Explore Agents</Link>
        </Button>
      </section>
    </div>
  )
}

export default HowItWorksPage
[V0_FILE]typescriptreact:file="app/agents/how-it-works/page.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowRight, Bot, Sparkles, Users, TrendingUp, Calendar, Briefcase, Brain, Zap, Award } from "lucide-react"

export default function HowItWorksPage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-12">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center mb-16"
        >
          <h1 className="text-4xl md:text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-purple-400">
            How AI Agents Work
          </h1>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
            Discover how our AI Agent ecosystem helps music creatives build successful careers through personalized
            guidance, automation, and industry insights.
          </p>
        </motion.div>

<Tabs defaultValue="overview" className="mb-16">
          <TabsList className="grid grid-cols-4 max-w-2xl mx-auto bg-gray-800/50 border border-gray-700">
            <TabsTrigger value="overview" className="data-[state=active]:bg-purple-900/50">
              Overview
            </TabsTrigger>
            <TabsTrigger value="agents" className="data-[state=active]:bg-purple-900/50">
              AI Agents
            </TabsTrigger>
            <TabsTrigger value="roleModels" className="data-[state=active]:bg-purple-900/50">
              Role Models
            </TabsTrigger>
            <TabsTrigger value="learnToEarn" className="data-[state=active]:bg-purple-900/50">
              Learn to Earn
            </TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="mt-8">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold mb-6">The Music Nodes AI Ecosystem</h2>
                <p className="text-gray-300 mb-6">
                  Our AI Agent ecosystem is designed to provide music creatives with the tools, guidance, and automation
                  they need to succeed in today's competitive music industry.
                </p>
                <p className="text-gray-300 mb-6">
                  By combining advanced AI technology with industry expertise, we've created a comprehensive system that
                  can help you with everything from promotion and booking to business management and creative
                  development.
                </p>
                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <div className="p-2 rounded-full bg-purple-900/30 border border-purple-500/30 mt-1">
                      <Bot className="h-5 w-5 text-purple-400" />
                    </div>
                    <div>
                      <h3 className="font-medium text-lg">Specialized AI Agents</h3>
                      <p className="text-gray-400">
                        Task-specific AI assistants that help with promotion, booking, A&R, and business management.
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="p-2 rounded-full bg-pink-900/30 border border-pink-500/30 mt-1">
                      <Users className="h-5 w-5 text-pink-400" />
                    </div>
                    <div>
                      <h3 className="font-medium text-lg">Role Models</h3>
                      <p className="text-gray-400">
                        AI agents modeled after successful artists and industry professionals to guide your career path.
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="p-2 rounded-full bg-blue-900/30 border border-blue-500/30 mt-1">
                      <Award className="h-5 w-5 text-blue-400" />
                    </div>
                    <div>
                      <h3 className="font-medium text-lg">Learn to Earn</h3>
                      <p className="text-gray-400">
                        Educational program that rewards you with XP, NFTs, and access to premium features as you learn
                        and grow.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="relative h-[400px] rounded-xl overflow-hidden border border-gray-800">
                <Image
                  src="/placeholder.svg?height=800&width=600"
                  alt="AI Agent Ecosystem"
                  fill
                  className="object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent flex items-end p-6">
                  <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                    <Link href="/agents" className="flex items-center">
                      Explore AI Agents <ArrowRight className="ml-2 h-4 w-4" />
                    </Link>
                  </Button>
                </div>
              </div>
            </div>

<div className="mt-16">
              <h2 className="text-3xl font-bold mb-8 text-center">How It All Works Together</h2>
              <div className="relative">
                <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-purple-600 to-pink-600 rounded-full"></div>
                <div className="space-y-16 relative">
                  {[
                    {
                      title: "Connect & Analyze",
                      description:
                        "Connect your music assets, social profiles, and streaming accounts to allow our AI agents to analyze your current position and audience.",
                      icon: <Zap className="h-6 w-6 text-purple-400" />,
                      position: "left",
                    },
                    {
                      title: "Set Goals & Choose Role Models",
                      description:
                        "Define your career goals and select role models whose career paths you'd like to emulate. Our AI will create a customized roadmap based on these inputs.",
                      icon: <TrendingUp className="h-6 w-6 text-pink-400" />,
                      position: "right",
                    },
                    {
                      title: "Deploy AI Agents",
                      description:
                        "Activate specialized AI agents to help with specific aspects of your career, from promotion and booking to business management and creative development.",
                      icon: <Bot className="h-6 w-6 text-blue-400" />,
                      position: "left",
                    },
                    {
                      title: "Learn & Earn",
                      description:
                        "Complete courses, tasks, and milestones to earn XP, NFTs, and unlock premium features while building your skills and career.",
                      icon: <Brain className="h-6 w-6 text-green-400" />,
                      position: "right",
                    },
                    {
                      title: "Monitor & Optimize",
                      description:
                        "Track your progress, analyze results, and continuously optimize your strategy with AI-powered insights and recommendations.",
                      icon: <Sparkles className="h-6 w-6 text-amber-400" />,
                      position: "left",
                    },
                  ].map((step, index) => (
                    <div
                      key={index}
                      className={`flex ${step.position === "left" ? "flex-row" : "flex-row-reverse"} items-center`}
                    >
                      <div className={`w-1/2 ${step.position === "left" ? "pr-12 text-right" : "pl-12 text-left"}`}>
                        <h3 className="text-2xl font-bold mb-3">{step.title}</h3>
                        <p className="text-gray-300">{step.description}</p>
                      </div>
                      <div className="absolute left-1/2 transform -translate-x-1/2 w-12 h-12 rounded-full bg-gray-900 border-4 border-gray-800 flex items-center justify-center">
                        {step.icon}
                      </div>
                      <div className="w-1/2"></div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="agents" className="mt-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4">Specialized AI Agents</h2>
              <p className="text-gray-300 max-w-3xl mx-auto">
                Our AI agents are trained on industry-specific roles and tasks to help automate and optimize your music
                career.
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
              {[
                {
                  name: "Promotion Agent",
                  icon: <TrendingUp className="h-6 w-6 text-purple-400" />,
                  description: "Automates social media campaigns and promotional strategies tailored to your audience.",
                  capabilities: [
                    "Social media campaign creation",
                    "Content calendar planning",
                    "Audience analysis",
                    "Trend identification",
                  ],
                },
                {
                  name: "Booking Agent",
                  icon: <Calendar className="h-6 w-6 text-pink-400" />,
                  description: "Helps secure performance opportunities and manages your event calendar.",
                  capabilities: ["Venue research", "Booking outreach", "Tour planning", "Performance scheduling"],
                },
                {
                  name: "A&R Agent",
                  icon: <Users className="h-6 w-6 text-blue-400" />,
                  description: "Connects your music with the right industry professionals and potential collaborators.",
                  capabilities: [
                    "Industry matching",
                    "Collaboration suggestions",
                    "Feedback analysis",
                    "Trend forecasting",
                  ],
                },
                {
                  name: "Business Manager",
                  icon: <Briefcase className="h-6 w-6 text-amber-400" />,
                  description: "Optimizes your revenue streams and manages licensing opportunities.",
                  capabilities: [
                    "Revenue analysis",
                    "Licensing opportunities",
                    "Contract review",
                    "Financial planning",
                  ],
                },
              ].map((agent, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.5 }}
                  viewport={{ once: true }}
                >
                  <Card className="bg-gray-900/60 border-purple-900/50 hover:border-purple-500/50 transition-all duration-300">
                    <CardContent className="p-6">
                      <div className="flex items-start gap-4">
                        <div className="p-3 rounded-full bg-purple-900/30 border border-purple-500/30">
                          {agent.icon}
                        </div>
                        <div>
                          <h3 className="text-xl font-semibold mb-2">{agent.name}</h3>
                          <p className="text-gray-400 mb-4">{agent.description}</p>
                          <div className="space-y-1">
                            <p className="text-sm font-medium text-gray-300">Key Capabilities:</p>
                            <ul className="text-sm text-gray-400 space-y-1">
                              {agent.capabilities.map((capability, i) => (
                                <li key={i} className="flex items-center">
                                  <div className="h-1.5 w-1.5 rounded-full bg-purple-500 mr-2"></div>
                                  {capability}
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>

<div className="text-center mt-8">
              <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                <Link href="/agents" className="flex items-center">
                  Explore All Agents <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </TabsContent>

<TabsContent value="roleModels" className="mt-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4">AI Role Models</h2>
              <p className="text-gray-300 max-w-3xl mx-auto">
                Our AI Role Models are designed to emulate the career paths and strategies of successful artists and
                industry professionals.
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
              {[
                {
                  name: "Chart Topper",
                  basedOn: "Drake",
                  description:
                    "Based on Drake's career path, this agent helps you navigate from mixtapes to mainstream success.",
                  image: "/placeholder.svg?height=200&width=200",
                  specialization: ["Hip-Hop", "Mainstream Crossover", "Brand Building"],
                },
                {
                  name: "Genre Evolver",
                  basedOn: "Taylor Swift",
                  description:
                    "Based on Taylor Swift's career evolution, this agent helps you navigate genre transitions and business moves.",
                  image: "/placeholder.svg?height=200&width=200",
                  specialization: ["Genre Evolution", "Fanbase Building", "Business Ownership"],
                },
                {
                  name: "Mysterious Persona",
                  basedOn: "The Weeknd",
                  description:
                    "Based on The Weeknd's career, this agent helps you build mystique and evolve your sound and image.",
                  image: "/placeholder.svg?height=200&width=200",
                  specialization: ["R&B/Pop Crossover", "Visual Aesthetics", "Persona Building"],
                },
              ].map((model, index) => (
                <Card key={index} className="bg-gray-900/60 border-gray-800 overflow-hidden">
                  <div className="p-6 text-center">
                    <div className="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-2 border-purple-500">
                      <Image src={model.image || "/placeholder.svg"} alt={model.name} fill className="object-cover" />
                    </div>
                    <h3 className="text-xl font-bold mb-1">{model.name}</h3>
                    <p className="text-sm text-gray-400 mb-3">Based on {model.basedOn}</p>
                    <p className="text-gray-300 mb-4">{model.description}</p>
                    <div className="flex flex-wrap justify-center gap-2">
                      {model.specialization.map((spec, i) => (
                        <Badge key={i} variant="outline" className="bg-purple-900/20 border-purple-500/30">
                          {spec}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </Card>
              ))}
            </div>

<div className="bg-gradient-to-r from-purple-900/20 via-pink-900/20 to-purple-900/20 rounded-xl p-8 border border-purple-500/20">
              <div className="text-center mb-6">
                <h3 className="text-2xl font-bold mb-2">How Role Models Guide Your Career</h3>
                <p className="text-gray-300">Role Models provide personalized guidance based on proven career paths</p>
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-gray-900/60 rounded-lg p-4 border border-gray-800">
                  <h4 className="font-medium mb-2 flex items-center">
                    <TrendingUp className="h-5 w-5 mr-2 text-purple-400" /> Career Roadmap
                  </h4>
                  <p className="text-sm text-gray-400">
                    Detailed career path with specific milestones, actions, and timelines based on your role model's
                    journey.
                  </p>
                </div>
                <div className="bg-gray-900/60 rounded-lg p-4 border border-gray-800">
                  <h4 className="font-medium mb-2 flex items-center">
                    <Users className="h-5 w-5 mr-2 text-pink-400" /> Marketing Strategy
                  </h4>
                  <p className="text-sm text-gray-400">
                    Customized marketing approach using channels and tactics that proved successful for your role model.
                  </p>
                </div>
                <div className="bg-gray-900/60 rounded-lg p-4 border border-gray-800">
                  <h4 className="font-medium mb-2 flex items-center">
                    <Sparkles className="h-5 w-5 mr-2 text-blue-400" /> Industry Insights
                  </h4>
                  <p className="text-sm text-gray-400">
                    Valuable insights and lessons learned from your role model's career experiences and decisions.
                  </p>
                </div>
              </div>
            </div>

<div className="text-center mt-8">
              <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                <Link href="/agents/role-models" className="flex items-center">
                  Explore Role Models <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </TabsContent>

<TabsContent value="learnToEarn" className="mt-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4">Learn to Earn Program</h2>
              <p className="text-gray-300 max-w-3xl mx-auto">
                Our Learn to Earn program rewards you for developing your skills and knowledge in music production,
                marketing, and business.
              </p>
            </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              <div className="lg:col-span-1">
                <Card className="bg-gray-900/60 border-gray-800 mb-6">
                  <CardHeader>
                    <CardTitle className="text-lg">Program Benefits</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center gap-3">
                      <div className="bg-purple-900/30 border border-purple-500/30 rounded-full p-3">
                        <Award className="h-6 w-6 text-purple-400" />
                      </div>
                      <div>
                        <p className="font-medium">NFT Certificates</p>
                        <p className="text-sm text-gray-400">Earn unique NFTs for completing courses</p>
                      </div>
                    </div>

<div className="flex items-center gap-3">
                      <div className="bg-pink-900/30 border border-pink-500/30 rounded-full p-3">
                        <Zap className="h-6 w-6 text-pink-400" />
                      </div>
                      <div>
                        <p className="font-medium">XP & Levels</p>
                        <p className="text-sm text-gray-400">Gain experience points and level up your profile</p>
                      </div>
                    </div>

<div className="flex items-center gap-3">
                      <div className="bg-blue-900/30 border border-blue-500/30 rounded-full p-3">
                        <Bot className="h-6 w-6 text-blue-400" />
                      </div>
                      <div>
                        <p className="font-medium">Premium AI Features</p>
                        <p className="text-sm text-gray-400">Unlock advanced AI agent capabilities</p>
                      </div>
                    </div>

<div className="flex items-center gap-3">
                      <div className="bg-amber-900/30 border border-amber-500/30 rounded-full p-3">
                        <Users className="h-6 w-6 text-amber-400" />
                      </div>
                      <div>
                        <p className="font-medium">Industry Connections</p>
                        <p className="text-sm text-gray-400">Get matched with mentors and professionals</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

<div className="lg:col-span-2">
                <h3 className="text-xl font-bold mb-4">Learning Paths</h3>
                <div className="space-y-4">
                  {[
                    {
                      title: "Music Production Mastery",
                      description: "Learn the fundamentals of music production from setup to final mix.",
                      modules: 12,
                      hours: 24,
                      level: "Beginner to Advanced",
                      xpReward: 500,
                      nftReward: true,
                    },
                    {
                      title: "Music Marketing & Promotion",
                      description: "Master the art of promoting your music in the digital age.",
                      modules: 8,
                      hours: 16,
                      level: "Intermediate",
                      xpReward: 350,
                      nftReward: true,
                    },
                    {
                      title: "Music Business Essentials",
                      description: "Understand the business side of music, from contracts to royalties.",
                      modules: 10,
                      hours: 20,
                      level: "All Levels",
                      xpReward: 400,
                      nftReward: true,
                    },
                  ].map((path, index) => (
                    <Card
                      key={index}
                      className="bg-gray-900/60 border-gray-800 hover:border-purple-500/50 transition-all duration-300"
                    >
                      <CardContent className="p-4">
                        <div className="flex flex-col md:flex-row gap-4">
                          <div className="md:w-2/3">
                            <h4 className="text-lg font-bold mb-2">{path.title}</h4>
                            <p className="text-gray-300 mb-3">{path.description}</p>
                            <div className="grid grid-cols-2 gap-2 text-sm">
                              <div>
                                <span className="text-gray-400">Modules:</span> {path.modules}
                              </div>
                              <div>
                                <span className="text-gray-400">Hours:</span> {path.hours}
                              </div>
                              <div>
                                <span className="text-gray-400">Level:</span> {path.level}
                              </div>
                              <div>
                                <span className="text-gray-400">XP Reward:</span> {path.xpReward}
                              </div>
                            </div>
                          </div>
                          <div className="md:w-1/3 flex flex-col justify-between">
                            <div className="flex flex-wrap gap-2 mb-3">
                              {path.nftReward && (
                                <Badge className="bg-amber-900/50 text-amber-300 border-amber-500/30">NFT Reward</Badge>
                              )}
                              <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">
                                {path.xpReward} XP
                              </Badge>
                            </div>
                            <Button className="w-full bg-purple-600 hover:bg-purple-700">Start Learning</Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            </div>

<div className="text-center mt-8">
              <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                <Link href="/agents/learn-to-earn" className="flex items-center">
                  Explore Learn to Earn <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </TabsContent>
        </Tabs>

<div className="mt-16 bg-gradient-to-r from-purple-900/30 to-pink-900/30 rounded-xl p-8 border border-purple-500/20">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <div>
              <h3 className="text-2xl font-semibold mb-2">Ready to Transform Your Music Career?</h3>
              <p className="text-gray-300 max-w-xl">
                Get started with AI Agents today and take your music career to the next level with personalized
                guidance, automation, and industry insights.
              </p>
            </div>
            <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
              <Link href="/agents" className="flex items-center">
                Get Started <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ai-agents/agent-architecture.tsx" isTerminated="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { TrendingUp, Brain, Database, Network, Lock } from "lucide-react"

export default function AgentArchitecture() {
  return (
    <div className="w-full">
      <div className="mb-8 text-center">
        <h2 className="text-2xl font-bold mb-2">AI Agent Architecture</h2>
        <p className="text-gray-400">
          How our multi-modal AI agents work together to power your music career
        </p>
      </div>

<div className="relative">
        {/* Core System */}
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5 }}
          className="mx-auto w-full max-w-3xl"
        >
          <Card className="bg-gray-900/60 border-purple-500/30 mb-8">
            <CardContent className="p-6">
              <div className="flex items-center justify-center mb-4">
                <div className="p-3 rounded-full bg-purple-900/30 border border-purple-500/30">
                  <Brain className="h-8 w-8 text-purple-400" />
                </div>
                <h3 className="text-xl font-bold ml-3">Core AI System</h3>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700 text-center">
                  <Database className="h-5 w-5 mx-auto mb-2 text-blue-400" />
                  <h4 className="text-sm font-medium">Knowledge Base</h4>
                  <p className="text-xs text-gray-400">Industry data & best practices</p>
                </div>
                <div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700 text-center">
                  <Network className="h-5 w-5 mx-auto mb-2 text-green-400" />
                  <h4 className="text-sm font-medium">Neural Networks</h4>
                  <p className="text-xs text-gray-400">Advanced AI models</p>
                </div>
                <div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700 text-center">
                  <Lock className="h-5 w-5 mx-auto mb-2 text-amber-400" />
                  <h4 className="text-sm font-medium">Secure Container</h4>
                  <p className="text-xs text-gray-400">Isolated & protected</p>
                </div>
              </div>
              
              <div className="text-center">
                <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">
                  Powered by AMX MCP + NVIDIA MCP
                </Badge>
              </div>
            </CardContent>
          </Card>
        </motion.div>

{/* Connection Lines */}
        <div className="hidden md:block absolute left-1/2 top-[180px] transform -translate-x-1/2 w-0.5 h-16 bg-gradient-to-b from-purple-500 to-pink-500"></div>
        
        {/* Agent Layer */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mx-auto w-full max-w-4xl"
        >
          <div className="text-center mb-4">
            <Badge className="bg-pink-900/50 text-pink-300 border-pink-500/30">
              Specialized AI Agents
            </Badge>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
            {[
              { name: "Promotion", icon: <TrendingUp className="h-5 w-5 text\
[V0_FILE]typescriptreact:file="components/learn/mux-player.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Script from "next/script"
import { useToast } from "@/hooks/use-toast"

interface MuxPlayerProps {
  playbackId: string
  metadata?: {
    video_id?: string
    video_title?: string
    course_name?: string
    viewer_user_id?: string
    [key: string]: string | undefined
  }
  autoPlay?: boolean
  muted?: boolean
  loop?: boolean
  startTime?: number
  className?: string
  onError?: (error: any) => void
  onPlaying?: () => void
  onEnded?: () => void
  onTimeUpdate?: (currentTime: number, duration: number) => void
}

export default function MuxPlayer({
  playbackId,
  metadata = {},
  autoPlay = false,
  muted = false,
  loop = false,
  startTime = 0,
  className = "",
  onError,
  onPlaying,
  onEnded,
  onTimeUpdate,
}: MuxPlayerProps) {
  const playerRef = useRef<HTMLDivElement>(null)
  const playerElementRef = useRef<any>(null)
  const playerInitialized = useRef(false)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const { toast } = useToast()

useEffect(() => {
    // Only initialize the player once the script is loaded and the ref is available
    if (window.MuxPlayerElement && playerRef.current && !playerInitialized.current) {
      try {
        const player = new window.MuxPlayerElement({
          playbackId,
          metadata: {
            video_id: metadata.video_id || playbackId,
            video_title: metadata.video_title || "Untitled Video",
            course_name: metadata.course_name || "Music Nodes Course",
            viewer_user_id: metadata.viewer_user_id || "anonymous",
            ...metadata,
          },
          autoPlay,
          muted,
          loop,
          startTime,
          preload: "auto",
          streamType: "on-demand",
        })

// Add event listeners
        player.addEventListener("playing", () => {
          setIsLoading(false)
          onPlaying?.()
        })

player.addEventListener("ended", () => {
          onEnded?.()
        })

player.addEventListener("error", (e: any) => {
          setError("Error loading video")
          setIsLoading(false)
          onError?.(e)
          toast({
            title: "Video Error",
            description: "There was a problem loading the video. Please try again.",
            variant: "destructive",
          })
        })

player.addEventListener("timeupdate", () => {
          if (player.currentTime && player.duration) {
            onTimeUpdate?.(player.currentTime, player.duration)
          }
        })

// Clear any existing content and append the player
        if (playerRef.current) {
          playerRef.current.innerHTML = ""
          playerRef.current.appendChild(player)
          playerElementRef.current = player
        }

playerInitialized.current = true
      } catch (err) {
        console.error("Error initializing Mux player:", err)
        setError("Failed to initialize player")
        setIsLoading(false)
        onError?.(err)
      }

// Cleanup function
      return () => {
        if (playerElementRef.current) {
          playerElementRef.current.remove()
          playerElementRef.current = null
        }
        playerInitialized.current = false
      }
    }
  }, [playbackId, metadata, autoPlay, muted, loop, startTime, onPlaying, onEnded, onError, onTimeUpdate, toast])

// Update player if playbackId changes
  useEffect(() => {
    if (window.MuxPlayerElement && playerRef.current && playerInitialized.current && playerElementRef.current) {
      try {
        playerElementRef.current.setAttribute("playback-id", playbackId)

// Update metadata
        const newMetadata = {
          video_id: metadata.video_id || playbackId,
          video_title: metadata.video_title || "Untitled Video",
          course_name: metadata.course_name || "Music Nodes Course",
          viewer_user_id: metadata.viewer_user_id || "anonymous",
          ...metadata,
        }

playerElementRef.current.setAttribute("metadata", JSON.stringify(newMetadata))
      } catch (err) {
        console.error("Error updating Mux player:", err)
        setError("Failed to update player")
        onError?.(err)
      }
    }
  }, [playbackId, metadata, onError])

return (
    <>
      <Script
        src="https://unpkg.com/@mux/mux-player"
        strategy="afterInteractive"
        onLoad={() => {
          // Re-trigger the effect to initialize the player after script loads
          if (playerRef.current && !playerInitialized.current) {
            const event = new Event("mux-script-loaded")
            document.dispatchEvent(event)
          }
        }}
        onError={() => {
          setError("Failed to load player script")
          setIsLoading(false)
          toast({
            title: "Player Error",
            description: "Failed to load video player. Please refresh the page.",
            variant: "destructive",
          })
        }}
      />
      <div ref={playerRef} className={`w-full h-full ${className}`}>
        {/* Player will be inserted here by useEffect */}
        {isLoading && !error && (
          <div className="w-full h-full flex items-center justify-center bg-black">
            <div className="animate-pulse">
              <svg className="w-12 h-12 text-purple-500" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
            </div>
          </div>
        )}
        {error && (
          <div className="w-full h-full flex flex-col items-center justify-center bg-black">
            <svg className="w-12 h-12 text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
            <p className="text-white text-center px-4">{error}</p>
            <button
              className="mt-4 px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors"
              onClick={() => window.location.reload()}
            >
              Retry
            </button>
          </div>
        )}
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/learn/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Search, Play, Clock, BookOpen, Award, ChevronRight, Loader2 } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useMediaQuery } from "@/hooks/use-mobile"
import { useToast } from "@/hooks/use-toast"

// Sample course data - in a real app, this would come from your backend
const courses = [
  {
    id: "music-production-101",
    title: "Music Production 101",
    instructor: "Alex Johnson",
    level: "Beginner",
    duration: "4h 30m",
    lessons: 12,
    category: "production",
    image: "/placeholder.svg?height=400&width=600",
    description: "Learn the fundamentals of music production from setup to final mix.",
    featured: true,
    progress: 0,
    videoPlaybackId: "FjHGZj2IjBk", // Example Mux playback ID
  },
  {
    id: "advanced-mixing-techniques",
    title: "Advanced Mixing Techniques",
    instructor: "Sarah Williams",
    level: "Advanced",
    duration: "6h 15m",
    lessons: 15,
    category: "mixing",
    image: "/placeholder.svg?height=400&width=600",
    description: "Take your mixing skills to the next level with professional techniques.",
    featured: true,
    progress: 0,
    videoPlaybackId: "SDPUXoWJh7k", // Example Mux playback ID
  },
  {
    id: "music-marketing-essentials",
    title: "Music Marketing Essentials",
    instructor: "Michael Davis",
    level: "Intermediate",
    duration: "3h 45m",
    lessons: 10,
    category: "business",
    image: "/placeholder.svg?height=400&width=600",
    description: "Learn how to effectively market your music in the digital age.",
    featured: false,
    progress: 0,
    videoPlaybackId: "6G6Z2Qj6-nk", // Example Mux playback ID
  },
  {
    id: "blockchain-for-musicians",
    title: "Blockchain for Musicians",
    instructor: "Emma Thompson",
    level: "Intermediate",
    duration: "5h 20m",
    lessons: 14,
    category: "blockchain",
    image: "/placeholder.svg?height=400&width=600",
    description: "Understand how blockchain technology is revolutionizing the music industry.",
    featured: true,
    progress: 0,
    videoPlaybackId: "dLOxAYFTH1I", // Example Mux playback ID
  },
  {
    id: "songwriting-masterclass",
    title: "Songwriting Masterclass",
    instructor: "David Wilson",
    level: "All Levels",
    duration: "8h 10m",
    lessons: 20,
    category: "creation",
    image: "/placeholder.svg?height=400&width=600",
    description: "Develop your songwriting skills with techniques from hit songwriters.",
    featured: false,
    progress: 0,
    videoPlaybackId: "pt4Ty8h7TuY", // Example Mux playback ID
  },
  {
    id: "music-nft-creation",
    title: "Creating Music NFTs",
    instructor: "Lisa Chen",
    level: "Intermediate",
    duration: "4h 45m",
    lessons: 12,
    category: "blockchain",
    image: "/placeholder.svg?height=400&width=600",
    description: "Learn to create, mint, and sell your music as NFTs.",
    featured: false,
    progress: 0,
    videoPlaybackId: "YP1dSPX8doc", // Example Mux playback ID
  },
  {
    id: "vocal-production",
    title: "Vocal Production Essentials",
    instructor: "James Miller",
    level: "Intermediate",
    duration: "5h 30m",
    lessons: 14,
    category: "production",
    image: "/placeholder.svg?height=400&width=600",
    description: "Master the art of recording and processing vocals for professional results.",
    featured: false,
    progress: 0,
    videoPlaybackId: "yi0J9JsRdI4", // Example Mux playback ID
  },
  {
    id: "music-licensing",
    title: "Music Licensing & Royalties",
    instructor: "Patricia Moore",
    level: "Beginner",
    duration: "3h 15m",
    lessons: 8,
    category: "business",
    image: "/placeholder.svg?height=400&width=600",
    description: "Understand music licensing, royalties, and how to protect your work.",
    featured: false,
    progress: 0,
    videoPlaybackId: "YQiABUCJ-7I", // Example Mux playback ID
  },
]

// Sample in-progress courses - in a real app, this would be user-specific data from your backend
const inProgressCourses = [
  {
    id: "music-production-101",
    title: "Music Production 101",
    instructor: "Alex Johnson",
    level: "Beginner",
    duration: "4h 30m",
    lessons: 12,
    category: "production",
    image: "/placeholder.svg?height=400&width=600",
    description: "Learn the fundamentals of music production from setup to final mix.",
    featured: true,
    progress: 45,
    lastWatched: "Introduction to DAWs",
    videoPlaybackId: "FjHGZj2IjBk", // Example Mux playback ID
  },
  {
    id: "blockchain-for-musicians",
    title: "Blockchain for Musicians",
    instructor: "Emma Thompson",
    level: "Intermediate",
    duration: "5h 20m",
    lessons: 14,
    category: "blockchain",
    image: "/placeholder.svg?height=400&width=600",
    description: "Understand how blockchain technology is revolutionizing the music industry.",
    featured: true,
    progress: 20,
    lastWatched: "Smart Contracts Explained",
    videoPlaybackId: "dLOxAYFTH1I", // Example Mux playback ID
  },
]

export default function LearnPage() {
  const [activeTab, setActiveTab] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [featuredCourse, setFeaturedCourse] = useState(courses.find((c) => c.featured) || courses[0])
  const [hasVideosLoaded, setHasVideosLoaded] = useState(false)
  const isMobile = useMediaQuery("(max-width: 768px)")
  const { toast } = useToast()

// Filter courses based on active tab and search query
  const filteredCourses = courses.filter((course) => {
    // Filter by category
    if (activeTab !== "all" && course.category !== activeTab) return false

// Filter by search query
    if (
      searchQuery &&
      !course.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
      !course.instructor.toLowerCase().includes(searchQuery.toLowerCase()) &&
      !course.description.toLowerCase().includes(searchQuery.toLowerCase())
    )
      return false

return true
  })

// Simulate initial loading
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
      setHasVideosLoaded(true)
    }, 1500)

// Check Mux API credentials
    const checkMuxCredentials = async () => {
      try {
        const response = await fetch("/api/mux/check-credentials")
        if (response.ok) {
          console.log("Mux credentials are valid")
        } else {
          console.error("Mux credentials are invalid or unavailable")
          toast({
            title: "API Configuration Issue",
            description: "There was a problem with the video API credentials. Some videos may not play correctly.",
            variant: "destructive",
          })
        }
      } catch (error) {
        console.error("Error checking Mux credentials:", error)
      }
    }

checkMuxCredentials()

return () => clearTimeout(timer)
  }, [toast])

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8 md:py-12">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <h1 className="text-3xl md:text-4xl font-bold mb-2">Learn</h1>
          <p className="text-gray-400 mb-6 md:mb-8">
            Expand your knowledge with courses on music production, blockchain, and more.
          </p>
        </motion.div>

{/* Search bar */}
        <div className="relative mb-8">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-4 w-4" />
          <Input
            placeholder="Search courses by title, instructor, or keywords"
            className="pl-10 bg-gray-900/60 border-gray-800"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

{/* Featured Course Section */}
        {!searchQuery && activeTab === "all" && (
          <section className="mb-12">
            <h2 className="text-2xl font-bold mb-6">Featured Course</h2>
            <div className="bg-gray-900/60 border border-gray-800 rounded-lg overflow-hidden">
              <div className="grid grid-cols-1 lg:grid-cols-2">
                <div className="relative h-64 lg:h-auto">
                  {isLoading ? (
                    <div className="absolute inset-0 flex items-center justify-center bg-gray-800">
                      <Loader2 className="h-10 w-10 animate-spin text-purple-500" />
                    </div>
                  ) : (
                    <div className="absolute inset-0 overflow-hidden">
                      {hasVideosLoaded ? (
                        <div className="w-full h-full bg-black">
                          {/* This would be the Mux video player for the featured course */}
                          <iframe
                            src={`https://iframe.mux.com/${featuredCourse.videoPlaybackId}`}
                            width="100%"
                            height="100%"
                            frameBorder="0"
                            allowFullScreen
                            className="w-full h-full"
                          ></iframe>
                        </div>
                      ) : (
                        <Image
                          src={featuredCourse.image || "/placeholder.svg"}
                          alt={featuredCourse.title}
                          fill
                          className="object-cover"
                        />
                      )}
                    </div>
                  )}
                </div>
                <div className="p-6 lg:p-8">
                  <Badge className="mb-2 bg-purple-900/50 text-purple-300 border-purple-500/30">Featured Course</Badge>
                  <h3 className="text-2xl font-bold mb-2">{featuredCourse.title}</h3>
                  <p className="text-gray-400 mb-4">{featuredCourse.description}</p>
                  <div className="flex flex-wrap gap-2 mb-4">
                    <div className="bg-gray-800/50 px-3 py-1 rounded-full text-sm flex items-center">
                      <Clock className="h-3 w-3 mr-1" /> {featuredCourse.duration}
                    </div>
                    <div className="bg-gray-800/50 px-3 py-1 rounded-full text-sm flex items-center">
                      <BookOpen className="h-3 w-3 mr-1" /> {featuredCourse.lessons} lessons
                    </div>
                    <div className="bg-gray-800/50 px-3 py-1 rounded-full text-sm">{featuredCourse.level}</div>
                  </div>
                  <div className="flex items-center mb-4">
                    <div className="h-8 w-8 rounded-full bg-purple-900/50 mr-2"></div>
                    <span className="text-sm">{featuredCourse.instructor}</span>
                  </div>
                  <Button className="bg-purple-600 hover:bg-purple-700">
                    <Link href={`/learn/${featuredCourse.id}`} className="flex items-center">
                      Start Learning <ChevronRight className="ml-2 h-4 w-4" />
                    </Link>
                  </Button>
                </div>
              </div>
            </div>
          </section>
        )}

{/* Continue Learning Section */}
        {!searchQuery && activeTab === "all" && inProgressCourses.length > 0 && (
          <section className="mb-12">
            <h2 className="text-2xl font-bold mb-6">Continue Learning</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {inProgressCourses.map((course) => (
                <motion.div
                  key={course.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  <Link href={`/learn/${course.id}`}>
                    <Card className="bg-gray-900/60 border-gray-800 overflow-hidden hover:border-purple-500/50 transition-all duration-300">
                      <CardContent className="p-0">
                        <div className="flex flex-col md:flex-row">
                          <div className="relative h-48 md:h-auto md:w-1/3">
                            <Image
                              src={course.image || "/placeholder.svg"}
                              alt={course.title}
                              fill
                              className="object-cover"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent md:bg-gradient-to-r md:from-black/80 md:via-transparent md:to-transparent" />
                            <Button
                              size="sm"
                              className="absolute bottom-4 left-4 md:top-1/2 md:left-1/2 md:transform md:-translate-x-1/2 md:-translate-y-1/2 bg-purple-600 hover:bg-purple-700"
                            >
                              <Play className="h-4 w-4 mr-2" /> Resume
                            </Button>
                          </div>
                          <div className="p-4 md:p-6 md:w-2/3">
                            <Badge className="mb-2 bg-purple-900/50 text-purple-300 border-purple-500/30">
                              {course.progress}% Complete
                            </Badge>
                            <h3 className="text-xl font-bold mb-2">{course.title}</h3>
                            <p className="text-gray-400 text-sm mb-4">Last watched: {course.lastWatched}</p>
                            <div className="w-full bg-gray-800 rounded-full h-2 mb-4">
                              <div
                                className="bg-gradient-to-r from-purple-600 to-pink-600 h-2 rounded-full"
                                style={{ width: `${course.progress}%` }}
                              ></div>
                            </div>
                            <div className="flex items-center text-sm text-gray-400">
                              <Clock className="h-4 w-4 mr-1" /> {course.duration}
                              <span className="mx-2">•</span>
                              <BookOpen className="h-4 w-4 mr-1" /> {course.lessons} lessons
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                </motion.div>
              ))}
            </div>
          </section>
        )}

{/* Category tabs */}
        <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="bg-gray-800/50 border border-gray-700 overflow-x-auto flex-nowrap w-full justify-start md:justify-center">
            <TabsTrigger value="all" className="data-[state=active]:bg-purple-900/50">
              All Courses
            </TabsTrigger>
            <TabsTrigger value="production" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              Production
            </TabsTrigger>
            <TabsTrigger value="mixing" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              Mixing
            </TabsTrigger>
            <TabsTrigger value="business" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              Business
            </TabsTrigger>
            <TabsTrigger value="blockchain" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              Blockchain
            </TabsTrigger>
            <TabsTrigger value="creation" className="data-[state=active]:bg-purple-900/50 whitespace-nowrap">
              Creation
            </TabsTrigger>
          </TabsList>
        </Tabs>

{/* All courses or filtered courses */}
        <section>
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">
              {activeTab === "all"
                ? "All Courses"
                : `${activeTab.charAt(0).toUpperCase() + activeTab.slice(1)} Courses`}
            </h2>
          </div>

{isLoading ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {Array(8)
                .fill(0)
                .map((_, index) => (
                  <Card key={index} className="bg-gray-900/60 border-gray-800 overflow-hidden">
                    <div className="animate-pulse">
                      <div className="h-48 bg-gray-800" />
                      <div className="p-4">
                        <div className="h-4 bg-gray-800 rounded w-1/4 mb-2" />
                        <div className="h-6 bg-gray-800 rounded w-3/4 mb-4" />
                        <div className="h-4 bg-gray-800 rounded w-full mb-2" />
                        <div className="h-4 bg-gray-800 rounded w-2/3" />
                      </div>
                    </div>
                  </Card>
                ))}
            </div>
          ) : filteredCourses.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
              {filteredCourses.map((course) => (
                <motion.div
                  key={course.id}
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3 }}
                >
                  <Link href={`/learn/${course.id}`}>
                    <Card className="bg-gray-900/60 border-gray-800 overflow-hidden hover:border-purple-500/50 transition-all duration-300 h-full">
                      <div className="relative h-48">
                        <Image
                          src={course.image || "/placeholder.svg"}
                          alt={course.title}
                          fill
                          className="object-cover"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
                        <div className="absolute bottom-4 left-4 right-4 flex justify-between items-center">
                          <Badge className="bg-black/60 backdrop-blur-sm border border-white/10">{course.level}</Badge>
                          <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">
                            {course.category}
                          </Badge>
                        </div>
                      </div>
                      <CardContent className="p-4">
                        <h3 className="font-bold text-lg mb-1">{course.title}</h3>
                        <p className="text-gray-400 text-sm mb-2">by {course.instructor}</p>
                        <p className="text-xs text-gray-500 mb-4 line-clamp-2">{course.description}</p>
                        <div className="flex items-center text-sm text-gray-400">
                          <Clock className="h-4 w-4 mr-1" /> {course.duration}
                          <span className="mx-2">•</span>
                          <BookOpen className="h-4 w-4 mr-1" /> {course.lessons} lessons
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                </motion.div>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <Award className="h-16 w-16 mx-auto text-gray-700 mb-4" />
              <h3 className="text-xl font-medium mb-2">No courses found</h3>
              <p className="text-gray-400 mb-6">
                We couldn't find any courses matching your criteria. Try adjusting your search or filters.
              </p>
              <Button
                variant="outline"
                className="border-purple-500 text-purple-400 hover:bg-purple-950"
                onClick={() => {
                  setSearchQuery("")
                  setActiveTab("all")
                }}
              >
                Clear Filters
              </Button>
            </div>
          )}
        </section>

{/* Call to action */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mt-16 bg-gradient-to-r from-purple-900/30 to-pink-900/30 rounded-xl p-8 border border-purple-500/20"
        >
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <div>
              <h3 className="text-2xl font-semibold mb-2">Become an Instructor</h3>
              <p className="text-gray-300 max-w-xl">
                Share your knowledge with the Music Nodes community. Create courses and earn revenue while helping
                others succeed in the music industry.
              </p>
            </div>
            <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
              Apply Now <ChevronRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/learn/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  ArrowLeft,
  CheckCircle,
  ChevronRight,
  ChevronDown,
  ChevronUp,
  PlayCircle,
  Download,
  FileText,
  Loader2,
} from "lucide-react"
import Link from "next/link"
import { useMediaQuery } from "@/hooks/use-mobile"
import { useToast } from "@/hooks/use-toast"
import MuxPlayer from "@/components/learn/mux-player"

// Sample course data - in a real app, this would come from your backend
const courseData = {
  id: "music-production-101",
  title: "Music Production 101",
  instructor: "Alex Johnson",
  instructorTitle: "Grammy-nominated Producer & Educator",
  instructorBio:
    "Alex Johnson is a Grammy-nominated producer with over 15 years of experience in the music industry. He has worked with top artists and specializes in electronic and hip-hop production.",
  instructorAvatar: "/placeholder.svg?height=100&width=100",
  level: "Beginner",
  duration: "4h 30m",
  lessons: 12,
  students: 1245,
  rating: 4.8,
  reviews: 156,
  category: "production",
  image: "/placeholder.svg?height=600&width=1200",
  description:
    "Learn the fundamentals of music production from setup to final mix. This comprehensive course covers everything you need to know to start producing professional-quality music, including DAW basics, recording techniques, MIDI programming, and essential mixing concepts.",
  features: [
    "12 comprehensive video lessons",
    "Downloadable project files",
    "Access to private Discord community",
    "Lifetime access to course updates",
    "Certificate of completion",
  ],
  requirements: ["Basic computer skills", "Any DAW software (demos available)", "Headphones or monitors"],
  modules: [
    {
      id: 1,
      title: "Getting Started",
      description: "Set up your production environment and learn the basics of your DAW.",
      lessons: [
        {
          id: "lesson-1-1",
          title: "Introduction to Music Production",
          duration: "10:25",
          completed: true,
          videoId: "FjHGZj2IjBk",
        },
        {
          id: "lesson-1-2",
          title: "Setting Up Your DAW",
          duration: "15:40",
          completed: true,
          videoId: "6G6Z2Qj6-nk",
        },
        {
          id: "lesson-1-3",
          title: "Understanding Audio vs. MIDI",
          duration: "12:15",
          completed: false,
          videoId: "XVomXB3ZVTc",
        },
      ],
    },
    {
      id: 2,
      title: "Recording Basics",
      description: "Learn how to record audio and set up your recording environment.",
      lessons: [
        {
          id: "lesson-2-1",
          title: "Microphone Types and Techniques",
          duration: "18:30",
          completed: false,
          videoId: "SDPUXoWJh7k",
        },
        {
          id: "lesson-2-2",
          title: "Recording Vocals",
          duration: "22:15",
          completed: false,
          videoId: "YQiABUCJ-7I",
        },
        {
          id: "lesson-2-3",
          title: "Recording Instruments",
          duration: "25:40",
          completed: false,
          videoId: "1gEz3B7QUzk",
        },
      ],
    },
    {
      id: 3,
      title: "MIDI Production",
      description: "Master MIDI programming and virtual instruments.",
      lessons: [
        {
          id: "lesson-3-1",
          title: "MIDI Basics",
          duration: "14:20",
          completed: false,
          videoId: "ItVk5Nj3Urk",
        },
        {
          id: "lesson-3-2",
          title: "Working with Virtual Instruments",
          duration: "20:10",
          completed: false,
          videoId: "dLOxAYFTH1I",
        },
        {
          id: "lesson-3-3",
          title: "Programming Drums",
          duration: "18:45",
          completed: false,
          videoId: "pt4Ty8h7TuY",
        },
      ],
    },
    {
      id: 4,
      title: "Mixing Fundamentals",
      description: "Learn the basics of mixing your tracks.",
      lessons: [
        {
          id: "lesson-4-1",
          title: "EQ Fundamentals",
          duration: "19:30",
          completed: false,
          videoId: "PA-JmDgYkts",
        },
        {
          id: "lesson-4-2",
          title: "Compression Basics",
          duration: "21:15",
          completed: false,
          videoId: "yi0J9JsRdI4",
        },
        {
          id: "lesson-4-3",
          title: "Adding Effects",
          duration: "16:40",
          completed: false,
          videoId: "YP1dSPX8doc",
        },
      ],
    },
  ],
}

export default function CourseDetailPage({ params }: { params: { id: string } }) {
  const [activeTab, setActiveTab] = useState("overview")
  const [expandedModules, setExpandedModules] = useState<number[]>([1])
  const [currentLesson, setCurrentLesson] = useState<any>(courseData.modules[0].lessons[0])
  const [isLoading, setIsLoading] = useState(true)
  const [progress, setProgress] = useState(0)
  const isMobile = useMediaQuery("(max-width: 768px)")
  const { toast } = useToast()

// Calculate course progress
  useEffect(() => {
    const totalLessons = courseData.modules.reduce((acc, module) => acc + module.lessons.length, 0)
    const completedLessons = courseData.modules.reduce(
      (acc, module) => acc + module.lessons.filter((lesson) => lesson.completed).length,
      0,
    )
    setProgress(Math.round((completedLessons / totalLessons) * 100))

// Simulate loading the course data
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1000)

return () => clearTimeout(timer)
  }, [])

const toggleModule = (moduleId: number) => {
    setExpandedModules((prev) => (prev.includes(moduleId) ? prev.filter((id) => id !== moduleId) : [...prev, moduleId]))
  }

const handleLessonSelect = (lesson: any) => {
    setCurrentLesson(lesson)
    // Scroll to top on mobile
    if (isMobile) {
      window.scrollTo({ top: 0, behavior: "smooth" })
    }
  }

const markAsComplete = () => {
    toast({
      title: "Lesson completed!",
      description: "Your progress has been updated.",
    })
    // In a real app, you would update the lesson status in the database
  }

const downloadResources = () => {
    toast({
      title: "Downloading resources",
      description: "Your download will start shortly.",
    })
    // In a real app, you would trigger the download
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8">
        <div className="mb-6">
          <Link href="/learn" className="inline-flex items-center text-gray-400 hover:text-white transition-colors">
            <ArrowLeft className="h-4 w-4 mr-2" /> Back to Courses
          </Link>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Left column - Video player and lesson details */}
          <div className="lg:col-span-2">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="mb-6"
            >
              {isLoading ? (
                <div className="aspect-video bg-gray-900 flex items-center justify-center rounded-lg border border-gray-800">
                  <Loader2 className="h-10 w-10 animate-spin text-purple-500" />
                </div>
              ) : (
                <div className="relative aspect-video rounded-lg overflow-hidden border border-gray-800">
                  <MuxPlayer
                    playbackId={currentLesson.videoId}
                    metadata={{
                      video_title: currentLesson.title,
                      course_name: courseData.title,
                    }}
                  />
                </div>
              )}
            </motion.div>

<div className="mb-8">
              <div className="flex items-center justify-between mb-4">
                <h1 className="text-2xl font-bold">{currentLesson.title}</h1>
                <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">
                  {currentLesson.duration}
                </Badge>
              </div>

<div className="flex flex-wrap gap-4 mb-6">
                <Button
                  className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                  onClick={markAsComplete}
                >
                  <CheckCircle className="h-4 w-4 mr-2" /> Mark as Complete
                </Button>
                <Button variant="outline" className="border-purple-500 text-purple-400 hover:bg-purple-950">
                  <Download className="h-4 w-4 mr-2" /> Download Resources
                </Button>
              </div>

<Tabs defaultValue="description" className="w-full">
                <TabsList className="bg-gray-800/50 border border-gray-700 mb-4">
                  <TabsTrigger value="description" className="data-[state=active]:bg-purple-900/50">
                    Description
                  </TabsTrigger>
                  <TabsTrigger value="transcript" className="data-[state=active]:bg-purple-900/50">
                    Transcript
                  </TabsTrigger>
                  <TabsTrigger value="resources" className="data-[state=active]:bg-purple-900/50">
                    Resources
                  </TabsTrigger>
                </TabsList>

<TabsContent value="description" className="mt-0">
                  <div className="p-4 bg-gray-900/60 border border-gray-800 rounded-lg">
                    <p className="text-gray-300">
                      In this lesson, you'll learn about {currentLesson.title.toLowerCase()}. We'll cover the
                      fundamental concepts and practical applications to help you build a strong foundation in music
                      production.
                    </p>
                  </div>
                </TabsContent>

<TabsContent value="transcript" className="mt-0">
                  <div className="p-4 bg-gray-900/60 border border-gray-800 rounded-lg max-h-64 overflow-y-auto">
                    <p className="text-gray-300">
                      Welcome to this lesson on {currentLesson.title}. Today we're going to explore the key concepts and
                      techniques that will help you become a better music producer.
                      <br />
                      <br />
                      [Transcript content would appear here in a real application]
                    </p>
                  </div>
                </TabsContent>

<TabsContent value="resources" className="mt-0">
                  <div className="p-4 bg-gray-900/60 border border-gray-800 rounded-lg">
                    <ul className="space-y-2">
                      <li className="flex items-center">
                        <FileText className="h-4 w-4 mr-2 text-purple-400" />
                        <span className="text-gray-300">Lesson PDF Guide</span>
                        <Button
                          size="sm"
                          variant="ghost"
                          className="ml-auto text-purple-400 hover:text-purple-300"
                          onClick={downloadResources}
                        >
                          <Download className="h-4 w-4" />
                        </Button>
                      </li>
                      <li className="flex items-center">
                        <FileText className="h-4 w-4 mr-2 text-purple-400" />
                        <span className="text-gray-300">Project Files</span>
                        <Button
                          size="sm"
                          variant="ghost"
                          className="ml-auto text-purple-400 hover:text-purple-300"
                          onClick={downloadResources}
                        >
                          <Download className="h-4 w-4" />
                        </Button>
                      </li>
                      <li className="flex items-center">
                        <FileText className="h-4 w-4 mr-2 text-purple-400" />
                        <span className="text-gray-300">Additional Resources</span>
                        <Button
                          size="sm"
                          variant="ghost"
                          className="ml-auto text-purple-400 hover:text-purple-300"
                          onClick={downloadResources}
                        >
                          <Download className="h-4 w-4" />
                        </Button>
                      </li>
                    </ul>
                  </div>
                </TabsContent>
              </Tabs>
            </div>

{/* Course navigation buttons */}
            <div className="flex justify-between mb-8">
              <Button variant="outline" className="border-gray-700 text-gray-400 hover:bg-gray-800">
                <ArrowLeft className="h-4 w-4 mr-2" /> Previous Lesson
              </Button>
              <Button className="bg-purple-600 hover:bg-purple-700">
                Next Lesson <ChevronRight className="h-4 w-4 ml-2" />
              </Button>
            </div>
          </div>

{/* Right column - Course curriculum */}
          <div className="lg:col-span-1">
            <div className="sticky top-20">
              <div className="bg-gray-900/60 border border-gray-800 rounded-lg p-4 mb-6">
                <h2 className="text-xl font-bold mb-4">Course Progress</h2>
                <Progress value={progress} className="h-2 mb-2" />
                <div className="flex justify-between text-sm text-gray-400">
                  <span>{progress}% complete</span>
                  <span>
                    {courseData.modules.reduce(
                      (acc, module) => acc + module.lessons.filter((lesson) => lesson.completed).length,
                      0,
                    )}{" "}
                    / {courseData.lessons} lessons
                  </span>
                </div>
              </div>

<div className="bg-gray-900/60 border border-gray-800 rounded-lg overflow-hidden">
                <div className="p-4 border-b border-gray-800">
                  <h2 className="text-xl font-bold">Course Curriculum</h2>
                </div>

<div className="max-h-[600px] overflow-y-auto">
                  {courseData.modules.map((module) => (
                    <div key={module.id} className="border-b border-gray-800 last:border-b-0">
                      <div
                        className="p-4 flex justify-between items-center cursor-pointer hover:bg-gray-800/30"
                        onClick={() => toggleModule(module.id)}
                      >
                        <h3 className="font-medium">{module.title}</h3>
                        {expandedModules.includes(module.id) ? (
                          <ChevronUp className="h-5 w-5 text-gray-400" />
                        ) : (
                          <ChevronDown className="h-5 w-5 text-gray-400" />
                        )}
                      </div>

{expandedModules.includes(module.id) && (
                        <div className="px-4 pb-2">
                          <p className="text-sm text-gray-400 mb-2">{module.description}</p>
                          <ul className="space-y-1">
                            {module.lessons.map((lesson) => (
                              <li
                                key={lesson.id}
                                className={`p-2 rounded-md flex items-center cursor-pointer ${
                                  currentLesson.id === lesson.id
                                    ? "bg-purple-900/30 border border-purple-500/30"
                                    : "hover:bg-gray-800/50"
                                }`}
                                onClick={() => handleLessonSelect(lesson)}
                              >
                                {lesson.completed ? (
                                  <CheckCircle className="h-4 w-4 mr-2 text-green-500" />
                                ) : (
                                  <PlayCircle className="h-4 w-4 mr-2 text-gray-400" />
                                )}
                                <div className="flex-1">
                                  <p className="text-sm">{lesson.title}</p>
                                </div>
                                <span className="text-xs text-gray-500">{lesson.duration}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>

{/* Instructor info */}
              <div className="mt-6 bg-gray-900/60 border border-gray-800 rounded-lg p-4">
                <h2 className="text-xl font-bold mb-4">About the Instructor</h2>
                <div className="flex items-center mb-4">
                  <Avatar className="h-12 w-12 mr-4">
                    <AvatarImage src={courseData.instructorAvatar || "/placeholder.svg"} alt={courseData.instructor} />
                    <AvatarFallback>{courseData.instructor[0]}</AvatarFallback>
                  </Avatar>
                  <div>
                    <h3 className="font-medium">{courseData.instructor}</h3>
                    <p className="text-sm text-gray-400">{courseData.instructorTitle}</p>
                  </div>
                </div>
                <p className="text-sm text-gray-300 mb-4">{courseData.instructorBio}</p>
                <Button variant="outline" className="w-full border-purple-500 text-purple-400 hover:bg-purple-950">
                  View Profile
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="types/mux.d.ts" isEdit="true" isMerged="true"
// Type definitions for Mux Player
declare global {
  interface Window {
    MuxPlayerElement: any
  }
}

export interface MuxAsset {
  id: string
  playback_id: string
  status: string
  created_at: string
  duration?: number
  aspect_ratio?: string
  max_stored_resolution?: string
  max_stored_frame_rate?: number
  mp4_support?: string
  master_access?: string
  playback_policy?: string[]
}

export interface MuxUpload {
  id: string
  status: string
  new_asset_settings: {
    playback_policy: string[]
    mp4_support?: string
  }
  cors_origin?: string
  url?: string
  timeout?: number
  created_at: string
  completed_at?: string
  asset_id?: string
}

export interface MuxMetadata {
  video_id?: string
  video_title?: string
  course_name?: string
  viewer_user_id?: string
  [key: string]: string | undefined
}

export interface CourseProgress {
  courseId: string
  progress: number
  completedLessons: string[]
  lastAccessed: string
  lastWatched?: string
}
[V0_FILE]typescriptreact:file="components/learn/mux-uploader.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { useToast } from "@/hooks/use-toast"
import { Upload, X, CheckCircle, AlertCircle } from "lucide-react"

interface MuxUploaderProps {
  onUploadComplete?: (asset: { playbackId: string; assetId: string }) => void
  onUploadError?: (error: Error) => void
  allowedFileTypes?: string[]
  maxFileSize?: number // in bytes
  className?: string
}

export default function MuxUploader({
  onUploadComplete,
  onUploadError,
  allowedFileTypes = ["video/mp4", "video/quicktime", "video/x-msvideo"],
  maxFileSize = 1024 * 1024 * 500, // 500MB default
  className = "",
}: MuxUploaderProps) {
  const [isUploading, setIsUploading] = useState(false)
  const [uploadProgress, setUploadProgress] = useState(0)
  const [uploadError, setUploadError] = useState<string | null>(null)
  const [uploadSuccess, setUploadSuccess] = useState(false)
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const { toast } = useToast()

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

// Validate file type
    if (!allowedFileTypes.includes(file.type)) {
      setUploadError(`Invalid file type. Allowed types: ${allowedFileTypes.join(", ")}`)
      toast({
        title: "Invalid file type",
        description: `Please select a valid video file (${allowedFileTypes.join(", ")})`,
        variant: "destructive",
      })
      return
    }

// Validate file size
    if (file.size > maxFileSize) {
      setUploadError(`File too large. Maximum size: ${Math.round(maxFileSize / (1024 * 1024))}MB`)
      toast({
        title: "File too large",
        description: `Maximum file size is ${Math.round(maxFileSize / (1024 * 1024))}MB`,
        variant: "destructive",
      })
      return
    }

setSelectedFile(file)
    setUploadError(null)
  }

const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()

const file = e.dataTransfer.files?.[0]
    if (!file) return

setSelectedFile(file)
    setUploadError(null)
  }

const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
  }

const clearFile = () => {
    setSelectedFile(null)
    setUploadError(null)
    setUploadSuccess(false)
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const uploadFile = async () => {
    if (!selectedFile) return

setIsUploading(true)
    setUploadProgress(0)
    setUploadError(null)
    setUploadSuccess(false)

try {
      // Step 1: Create a direct upload URL
      const uploadResponse = await fetch("/api/mux/upload", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          new_asset_settings: {
            playback_policy: ["public"],
            mp4_support: "standard",
          },
        }),
      })

if (!uploadResponse.ok) {
        throw new Error("Failed to create upload URL")
      }

const uploadData = await uploadResponse.json()
      const uploadUrl = uploadData.url

// Step 2: Upload the file to the direct upload URL
      const formData = new FormData()
      formData.append("file", selectedFile)

const xhr = new XMLHttpRequest()
      xhr.open("PUT", uploadUrl, true)

xhr.upload.addEventListener("progress", (event) => {
        if (event.lengthComputable) {
          const progress = Math.round((event.loaded / event.total) * 100)
          setUploadProgress(progress)
        }
      })

xhr.onload = async () => {
        if (xhr.status >= 200 && xhr.status < 300) {
          // Step 3: Check upload status and get asset details
          let assetId = null
          let playbackId = null
          let attempts = 0
          const maxAttempts = 30
          const checkInterval = 2000 // 2 seconds

const checkUploadStatus = async () => {
            attempts++
            const statusResponse = await fetch(`/api/mux/upload/${uploadData.id}`)
            if (!statusResponse.ok) {
              throw new Error("Failed to check upload status")
            }

const statusData = await statusResponse.json()

if (statusData.status === "asset_created") {
              assetId = statusData.asset_id

// Get asset details to get the playback ID
              const assetResponse = await fetch(`/api/mux/${assetId}`)
              if (!assetResponse.ok) {
                throw new Error("Failed to get asset details")
              }

const assetData = await assetResponse.json()
              playbackId = assetData.playback_ids?.[0]?.id

setUploadSuccess(true)
              setIsUploading(false)
              toast({
                title: "Upload successful",
                description: "Your video has been uploaded successfully",
              })

if (onUploadComplete && playbackId) {
                onUploadComplete({ playbackId, assetId })
              }
            } else if (statusData.status === "errored") {
              throw new Error("Upload failed: " + (statusData.error?.message || "Unknown error"))
            } else if (attempts < maxAttempts) {
              // Still processing, check again after interval
              setTimeout(checkUploadStatus, checkInterval)
            } else {
              throw new Error("Upload timed out. Please try again.")
            }
          }

// Start checking upload status
          await checkUploadStatus()
        } else {
          throw new Error(`Upload failed with status: ${xhr.status}`)
        }
      }

xhr.onerror = () => {
        setUploadError("Network error during upload")
        setIsUploading(false)
        toast({
          title: "Upload failed",
          description: "A network error occurred during upload",
          variant: "destructive",
        })
        if (onUploadError) {
          onUploadError(new Error("Network error during upload"))
        }
      }

xhr.send(formData)
    } catch (error) {
      console.error("Upload error:", error)
      setUploadError(error instanceof Error ? error.message : "Unknown error")
      setIsUploading(false)
      toast({
        title: "Upload failed",
        description: error instanceof Error ? error.message : "An unknown error occurred",
        variant: "destructive",
      })
      if (onUploadError && error instanceof Error) {
        onUploadError(error)
      }
    }
  }

return (
    <div className={`w-full ${className}`}>
      <div
        className={`border-2 border-dashed rounded-lg p-6 text-center ${
          uploadError ? "border-red-500 bg-red-50/5" : "border-gray-700 bg-gray-900/30"
        } ${isUploading ? "pointer-events-none opacity-70" : ""}`}
        onDrop={handleDrop}
        onDragOver={handleDragOver}
      >
        {!selectedFile ? (
          <>
            <Upload className="h-12 w-12 mx-auto mb-4 text-gray-500" />
            <p className="text-gray-400 mb-2">Drag and drop your video file here or</p>
            <Button
              variant="outline"
              className="border-purple-500 text-purple-400 hover:bg-purple-950"
              onClick={() => fileInputRef.current?.click()}
            >
              Browse Files
            </Button>
            <p className="text-xs text-gray-500 mt-2">
              Supports {allowedFileTypes.join(", ")} (max {Math.round(maxFileSize / (1024 * 1024))}MB)
            </p>
            <input
              ref={fileInputRef}
              type="file"
              accept={allowedFileTypes.join(",")}
              onChange={handleFileChange}
              className="hidden"
            />
          </>
        ) : (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="p-2 rounded-full bg-gray-800 mr-3">
                  {uploadSuccess ? (
                    <CheckCircle className="h-5 w-5 text-green-500" />
                  ) : uploadError ? (
                    <AlertCircle className="h-5 w-5 text-red-500" />
                  ) : (
                    <Upload className="h-5 w-5 text-purple-400" />
                  )}
                </div>
                <div className="text-left">
                  <p className="font-medium truncate max-w-[200px]">{selectedFile.name}</p>
                  <p className="text-xs text-gray-500">{(selectedFile.size / (1024 * 1024)).toFixed(2)} MB</p>
                </div>
              </div>
              {!isUploading && !uploadSuccess && (
                <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white" onClick={clearFile}>
                  <X className="h-4 w-4" />
                </Button>
              )}
            </div>

{isUploading && (
              <div className="space-y-2">
                <Progress value={uploadProgress} className="h-2" />
                <p className="text-sm text-gray-400">Uploading... {uploadProgress}%</p>
              </div>
            )}

{uploadError && <p className="text-sm text-red-500">{uploadError}</p>}

{!isUploading && !uploadSuccess && !uploadError && (
              <Button
                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                onClick={uploadFile}
              >
                Upload Video
              </Button>
            )}

{uploadSuccess && (
              <p className="text-sm text-green-500">Upload complete! Your video is now being processed.</p>
            )}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/learn/instructor/upload/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft, Upload, CheckCircle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import Link from "next/link"
import MuxUploader from "@/components/learn/mux-uploader"

export default function InstructorUploadPage() {
  const [videoTitle, setVideoTitle] = useState("")
  const [videoDescription, setVideoDescription] = useState("")
  const [courseId, setCourseId] = useState("")
  const [category, setCategory] = useState("")
  const [uploadedAsset, setUploadedAsset] = useState<{ playbackId: string; assetId: string } | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

// Sample courses for the dropdown
  const courses = [
    { id: "music-production-101", name: "Music Production 101" },
    { id: "advanced-mixing-techniques", name: "Advanced Mixing Techniques" },
    { id: "music-marketing-essentials", name: "Music Marketing Essentials" },
    { id: "blockchain-for-musicians", name: "Blockchain for Musicians" },
  ]

// Sample categories for the dropdown
  const categories = [
    { id: "production", name: "Production" },
    { id: "mixing", name: "Mixing" },
    { id: "business", name: "Business" },
    { id: "blockchain", name: "Blockchain" },
    { id: "creation", name: "Creation" },
  ]

const handleUploadComplete = (asset: { playbackId: string; assetId: string }) => {
    setUploadedAsset(asset)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!uploadedAsset) {
      toast({
        title: "Missing video",
        description: "Please upload a video before submitting",
        variant: "destructive",
      })
      return
    }

if (!videoTitle || !courseId || !category) {
      toast({
        title: "Missing information",
        description: "Please fill in all required fields",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      // Submit the video metadata to your backend
      const response = await fetch("/api/learn/videos", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          title: videoTitle,
          description: videoDescription,
          courseId,
          category,
          assetId: uploadedAsset.assetId,
          playbackId: uploadedAsset.playbackId,
        }),
      })

if (!response.ok) {
        throw new Error("Failed to save video metadata")
      }

toast({
        title: "Success!",
        description: "Your video has been added to the course",
      })

// Reset the form
      setVideoTitle("")
      setVideoDescription("")
      setCourseId("")
      setCategory("")
      setUploadedAsset(null)
    } catch (error) {
      console.error("Error saving video metadata:", error)
      toast({
        title: "Error",
        description: "Failed to save video metadata. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8">
        <div className="mb-6">
          <Link
            href="/learn/instructor"
            className="inline-flex items-center text-gray-400 hover:text-white transition-colors"
          >
            <ArrowLeft className="h-4 w-4 mr-2" /> Back to Instructor Dashboard
          </Link>
        </div>

<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <h1 className="text-3xl font-bold mb-2">Upload New Video</h1>
          <p className="text-gray-400 mb-8">Add a new video lesson to your course</p>
        </motion.div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div>
            <Card className="bg-gray-900/60 border-gray-800">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Upload className="h-5 w-5 mr-2 text-purple-400" /> Upload Video
                </CardTitle>
              </CardHeader>
              <CardContent>
                <MuxUploader
                  onUploadComplete={handleUploadComplete}
                  onUploadError={(error) => {
                    toast({
                      title: "Upload Error",
                      description: error.message || "An error occurred during upload",
                      variant: "destructive",
                    })
                  }}
                />

{uploadedAsset && (
                  <div className="mt-4 p-4 bg-green-900/20 border border-green-500/30 rounded-md flex items-center">
                    <CheckCircle className="h-5 w-5 text-green-500 mr-2" />
                    <div>
                      <p className="font-medium">Video uploaded successfully!</p>
                      <p className="text-sm text-gray-400">Your video is ready to be added to a course.</p>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

<div>
            <Card className="bg-gray-900/60 border-gray-800">
              <CardHeader>
                <CardTitle>Video Details</CardTitle>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="title">Video Title *</Label>
                    <Input
                      id="title"
                      value={videoTitle}
                      onChange={(e) => setVideoTitle(e.target.value)}
                      placeholder="Enter a title for your video"
                      className="bg-gray-800/50 border-gray-700"
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="description">Description</Label>
                    <Textarea
                      id="description"
                      value={videoDescription}
                      onChange={(e) => setVideoDescription(e.target.value)}
                      placeholder="Enter a description for your video"
                      className="bg-gray-800/50 border-gray-700 min-h-[100px]"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="course">Course *</Label>
                    <Select value={courseId} onValueChange={setCourseId} required>
                      <SelectTrigger className="bg-gray-800/50 border-gray-700">
                        <SelectValue placeholder="Select a course" />
                      </SelectTrigger>
                      <SelectContent>
                        {courses.map((course) => (
                          <SelectItem key={course.id} value={course.id}>
                            {course.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="category">Category *</Label>
                    <Select value={category} onValueChange={setCategory} required>
                      <SelectTrigger className="bg-gray-800/50 border-gray-700">
                        <SelectValue placeholder="Select a category" />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((cat) => (
                          <SelectItem key={cat.id} value={cat.id}>
                            {cat.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<Button
                    type="submit"
                    className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 mt-4"
                    disabled={isSubmitting || !uploadedAsset}
                  >
                    {isSubmitting ? "Saving..." : "Save Video"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/learn/instructor/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { Plus, Video, Pencil, Trash2, RefreshCw, Loader2, Play } from "lucide-react"
import Link from "next/link"

export default function InstructorDashboardPage() {
  const [activeTab, setActiveTab] = useState("videos")
  const [videos, setVideos] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isRefreshing, setIsRefreshing] = useState(false)
  const { toast } = useToast()

// Fetch videos on initial load
  useEffect(() => {
    fetchVideos()
  }, [])

const fetchVideos = async () => {
    try {
      setIsLoading(true)
      // In a real app, this would fetch from your API
      // For now, we'll use mock data

// Simulate API call delay
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockVideos = [
        {
          id: "1",
          title: "Introduction to Music Production",
          description: "Learn the basics of music production",
          courseId: "music-production-101",
          courseName: "Music Production 101",
          category: "production",
          assetId: "asset123",
          playbackId: "playback123",
          status: "ready",
          duration: 610, // 10:10
          createdAt: new Date().toISOString(),
        },
        {
          id: "2",
          title: "Understanding DAWs",
          description: "A comprehensive guide to Digital Audio Workstations",
          courseId: "music-production-101",
          courseName: "Music Production 101",
          category: "production",
          assetId: "asset456",
          playbackId: "playback456",
          status: "ready",
          duration: 845, // 14:05
          createdAt: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
        },
        {
          id: "3",
          title: "Advanced EQ Techniques",
          description: "Master the art of equalization",
          courseId: "advanced-mixing-techniques",
          courseName: "Advanced Mixing Techniques",
          category: "mixing",
          assetId: "asset789",
          playbackId: "playback789",
          status: "processing",
          duration: 0, // Unknown yet
          createdAt: new Date(Date.now() - 3600000).toISOString(), // 1 hour ago
        },
      ]

setVideos(mockVideos)
    } catch (error) {
      console.error("Error fetching videos:", error)
      toast({
        title: "Error",
        description: "Failed to fetch videos. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const refreshVideos = async () => {
    try {
      setIsRefreshing(true)
      await fetchVideos()
      toast({
        title: "Success",
        description: "Video list refreshed successfully",
      })
    } catch (error) {
      console.error("Error refreshing videos:", error)
    } finally {
      setIsRefreshing(false)
    }
  }

const handleDeleteVideo = async (videoId: string) => {
    if (!confirm("Are you sure you want to delete this video? This action cannot be undone.")) {
      return
    }

try {
      // In a real app, this would call your API
      // For now, we'll just simulate success

// Simulate API call delay
      await new Promise((resolve) => setTimeout(resolve, 500))

// Remove the video from the list
      setVideos(videos.filter((video) => video.id !== videoId))

toast({
        title: "Success",
        description: "Video deleted successfully",
      })
    } catch (error) {
      console.error("Error deleting video:", error)
      toast({
        title: "Error",
        description: "Failed to delete video. Please try again.",
        variant: "destructive",
      })
    }
  }

const formatDuration = (seconds: number) => {
    if (!seconds) return "00:00"

const minutes = Math.floor(seconds / 60)
    const remainingSeconds = Math.floor(seconds % 60)

return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`
  }

const formatDate = (dateString: string) => {
    if (!dateString) return ""

const date = new Date(dateString)
    return date.toLocaleDateString() + " " + date.toLocaleTimeString()
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8">
        <div className="flex justify-between items-center mb-6">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
            <h1 className="text-3xl font-bold mb-2">Instructor Dashboard</h1>
            <p className="text-gray-400">Manage your courses and video content</p>
          </motion.div>

<Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
            <Link href="/learn/instructor/upload" className="flex items-center">
              <Plus className="h-4 w-4 mr-2" /> Upload New Video
            </Link>
          </Button>
        </div>

<Tabs defaultValue={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="bg-gray-800/50 border border-gray-700">
            <TabsTrigger value="videos" className="data-[state=active]:bg-purple-900/50">
              Videos
            </TabsTrigger>
            <TabsTrigger value="courses" className="data-[state=active]:bg-purple-900/50">
              Courses
            </TabsTrigger>
            <TabsTrigger value="analytics" className="data-[state=active]:bg-purple-900/50">
              Analytics
            </TabsTrigger>
          </TabsList>

<TabsContent value="videos" className="mt-6">
            <Card className="bg-gray-900/60 border-gray-800">
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>Your Videos</CardTitle>
                <Button
                  onClick={refreshVideos}
                  variant="outline"
                  className="border-gray-700 text-gray-400 hover:bg-gray-800"
                  disabled={isRefreshing}
                >
                  {isRefreshing ? (
                    <>
                      <Loader2 className="h-4 w-4 mr-2 animate-spin" /> Refreshing...
                    </>
                  ) : (
                    <>
                      <RefreshCw className="h-4 w-4 mr-2" /> Refresh
                    </>
                  )}
                </Button>
              </CardHeader>
              <CardContent>
                {isLoading ? (
                  <div className="flex justify-center items-center py-20">
                    <Loader2 className="h-10 w-10 animate-spin text-purple-500" />
                  </div>
                ) : videos.length > 0 ? (
                  <div className="space-y-4">
                    {videos.map((video) => (
                      <div
                        key={video.id}
                        className="p-4 bg-gray-800/50 rounded-lg border border-gray-700 flex flex-col sm:flex-row justify-between"
                      >
                        <div className="flex items-start gap-3">
                          <div className="p-2 rounded-full bg-gray-800 border border-gray-700">
                            <Video className="h-5 w-5 text-purple-400" />
                          </div>
                          <div>
                            <h3 className="font-medium">{video.title}</h3>
                            <p className="text-sm text-gray-400 mb-2">{video.description}</p>
                            <div className="flex flex-wrap gap-2 mb-2">
                              <Badge className="bg-gray-700 text-gray-300">{video.courseName}</Badge>
                              <Badge className="bg-purple-900/50 text-purple-300 border-purple-500/30">
                                {video.category}
                              </Badge>
                              <Badge
                                className={`${
                                  video.status === "ready"
                                    ? "bg-green-900/50 text-green-300 border-green-500/30"
                                    : "bg-amber-900/50 text-amber-300 border-amber-500/30"
                                }`}
                              >
                                {video.status}
                              </Badge>
                            </div>
                            <div className="flex flex-wrap gap-4 text-xs text-gray-500">
                              <span>Duration: {formatDuration(video.duration)}</span>
                              <span>Created: {formatDate(video.createdAt)}</span>
                              <span>ID: {video.playbackId}</span>
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 mt-4 sm:mt-0">
                          <Button
                            size="sm"
                            variant="ghost"
                            className="text-blue-400 hover:text-blue-300 hover:bg-blue-900/20"
                          >
                            <Play className="h-4 w-4" />
                          </Button>
                          <Button
                            size="sm"
                            variant="ghost"
                            className="text-gray-400 hover:text-white hover:bg-gray-800"
                          >
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button
                            size="sm"
                            variant="ghost"
                            className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
                            onClick={() => handleDeleteVideo(video.id)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <Video className="h-16 w-16 mx-auto text-gray-700 mb-4" />
                    <h3 className="text-xl font-medium mb-2">No videos found</h3>
                    <p className="text-gray-400 mb-6">
                      You haven't uploaded any videos yet. Get started by uploading your first video.
                    </p>
                    <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                      <Link href="/learn/instructor/upload" className="flex items-center">
                        <Plus className="h-4 w-4 mr-2" /> Upload Video
                      </Link>
                    </Button>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="courses" className="mt-6">
            <Card className="bg-gray-900/60 border-gray-800">
              <CardContent className="pt-6">
                <div className="text-center py-12">
                  <h3 className="text-xl font-medium mb-2">Course Management</h3>
                  <p className="text-gray-400 mb-6">Create and manage your courses, modules, and lessons.</p>
                  <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                    <Plus className="h-4 w-4 mr-2" /> Create New Course
                  </Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="analytics" className="mt-6">
            <Card className="bg-gray-900/60 border-gray-800">
              <CardContent className="pt-6">
                <div className="text-center py-12">
                  <h3 className="text-xl font-medium mb-2">Video Analytics</h3>
                  <p className="text-gray-400 mb-6">Track views, engagement, and performance of your videos.</p>
                  <Button variant="outline" className="border-gray-700 text-gray-400 hover:bg-gray-800">
                    View Analytics Dashboard
                  </Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/learn/videos/route.ts" isMerged="true"
import { NextResponse } from "next/server"

// POST handler for creating a new video
export async function POST(request: Request) {
  try {
    const body = await request.json()

// Validate required fields
    if (!body.title || !body.courseId || !body.assetId || !body.playbackId) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

// In a real app, you would save this data to your database
    // For now, we'll just return success

return NextResponse.json({
      success: true,
      message: "Video saved successfully",
      video: {
        id: crypto.randomUUID(),
        title: body.title,
        description: body.description || "",
        courseId: body.courseId,
        category: body.category,
        assetId: body.assetId,
        playbackId: body.playbackId,
        status: "ready",
        createdAt: new Date().toISOString(),
      },
    })
  } catch (error) {
    console.error("Error creating video:", error)
    return NextResponse.json({ error: "Failed to create video" }, { status: 500 })
  }
}

// GET handler for retrieving videos
export async function GET(request: Request) {
  try {
    // In a real app, you would fetch videos from your database
    // For now, we'll return mock data

return NextResponse.json({ videos: mockVideos })
  } catch (error) {
    console.error("Error fetching videos:", error)
    return NextResponse.json({ error: "Failed to fetch videos" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/learn/admin/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { Loader2, Plus, Trash2, RefreshCw, Play, Edit } from "lucide-react"
import MuxUploader from "@/components/learn/mux-uploader"
import MuxPlayer from "@/components/learn/mux-player"
import Link from "next/link"

export default function LearnAdminPage() {
  const [activeTab, setActiveTab] = useState("videos")
  const [videos, setVideos] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [selectedVideo, setSelectedVideo] = useState<any>(null)
  const { toast } = useToast()

// Fetch videos on initial load
  useEffect(() => {
    fetchVideos()
  }, [])

const fetchVideos = async () => {
    try {
      setIsLoading(true)
      const response = await fetch("/api/mux")

if (!response.ok) {
        throw new Error("Failed to fetch videos")
      }

const data = await response.json()
      setVideos(data.data || [])
    } catch (error) {
      console.error("Error fetching videos:", error)
      toast({
        title: "Error",
        description: "Failed to fetch videos. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleUploadComplete = async ({ playbackId, assetId }: { playbackId: string; assetId: string }) => {
    toast({
      title: "Upload Complete",
      description: "Video has been uploaded and is being processed",
    })

// Refresh the video list after a short delay to allow processing
    setTimeout(refreshVideos, 2000)
  }

const handleDeleteVideo = async (assetId: string) => {
    if (!confirm("Are you sure you want to delete this video? This action cannot be undone.")) {
      return
    }

try {
      const response = await fetch(`/api/mux/${assetId}`, {
        method: "DELETE",
      })

if (!response.ok) {
        throw new Error("Failed to delete video")
      }

toast({
        title: "Success",
        description: "Video deleted successfully",
      })

// Remove the deleted video from the list
      setVideos((prev) => prev.filter((video) => video.id !== assetId))

// Clear selected video if it was deleted
      if (selectedVideo?.id === assetId) {
        setSelectedVideo(null)
      }
    } catch (error) {
      console.error("Error deleting video:", error)
      toast({
        title: "Error",
        description: "Failed to delete video. Please try again.",
        variant: "destructive",
      })
    }
  }

const formatDuration = (seconds: number) => {
    if (!seconds) return "00:00"

const minutes = Math.floor(seconds / 60)
    const remainingSeconds = Math.floor(seconds % 60)

return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`
  }

const formatDate = (dateString: string) => {
    if (!dateString) return ""

const date = new Date(dateString)
    return date.toLocaleDateString() + " " + date.toLocaleTimeString()
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8 md:py-12">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold">Course Video Management</h1>
          <Button
            onClick={refreshVideos}
            variant="outline"
            className="border-purple-500 text-purple-400 hover:bg-purple-950"
            disabled={isRefreshing}
          >
            {isRefreshing ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" /> Refreshing...
              </>
            ) : (
              <>
                <RefreshCw className="h-4 w-4 mr-2" /> Refresh
              </>
            )}
          </Button>
        </div>

<Tabs defaultValue="videos" value={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="bg-gray-800/50 border border-gray-700">
            <TabsTrigger value="videos" className="data-[state=active]:bg-purple-900/50">
              Videos
            </TabsTrigger>
            <TabsTrigger value="upload" className="data-[state=active]:bg-purple-900/50">
              Upload New Video
            </TabsTrigger>
          </TabsList>

<TabsContent value="videos" className="mt-6">
            {isLoading ? (
              <div className="flex justify-center items-center py-20">
                <Loader2 className="h-10 w-10 animate-spin text-purple-500" />
              </div>
            ) : videos.length > 0 ? (
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div className="lg:col-span-2">
                  <div className="bg-gray-900/60 border border-gray-800 rounded-lg overflow-hidden">
                    <div className="p-4 border-b border-gray-800">
                      <h2 className="text-xl font-bold">Video Library</h2>
                    </div>
                    <div className="max-h-[600px] overflow-y-auto">
                      {videos.map((video) => (
                        <div
                          key={video.id}
                          className={`border-b border-gray-800 last:border-b-0 p-4 flex justify-between items-center hover:bg-gray-800/30 cursor-pointer ${
                            selectedVideo?.id === video.id ? "bg-purple-900/20" : ""
                          }`}
                          onClick={() => setSelectedVideo(video)}
                        >
                          <div className="flex items-center">
                            <div className="p-2 rounded-full bg-gray-800 mr-3">
                              <Play className="h-4 w-4 text-purple-400" />
                            </div>
                            <div>
                              <h3 className="font-medium">{video.playback_ids?.[0]?.id || "Untitled Video"}</h3>
                              <div className="flex items-center text-xs text-gray-500 mt-1">
                                <span>{formatDuration(video.duration)}</span>
                                <span className="mx-2">•</span>
                                <span>{formatDate(video.created_at)}</span>
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center">
                            <Badge
                              className={`mr-2 ${
                                video.status === "ready"
                                  ? "bg-green-900/50 text-green-300"
                                  : "bg-amber-900/50 text-amber-300"
                              }`}
                            >
                              {video.status}
                            </Badge>
                            <Button
                              variant="ghost"
                              size="sm"
                              className="text-gray-400 hover:text-red-400"
                              onClick={(e) => {
                                e.stopPropagation()
                                handleDeleteVideo(video.id)
                              }}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

<div className="lg:col-span-1">
                  <div className="sticky top-20">
                    {selectedVideo ? (
                      <Card className="bg-gray-900/60 border-gray-800">
                        <CardHeader>
                          <CardTitle className="text-lg">Video Preview</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="aspect-video rounded-lg overflow-hidden border border-gray-800">
                            <MuxPlayer
                              playbackId={selectedVideo.playback_ids?.[0]?.id}
                              metadata={{
                                video_id: selectedVideo.id,
                                video_title: selectedVideo.playback_ids?.[0]?.id || "Untitled Video",
                              }}
                            />
                          </div>
                          <div className="space-y-2">
                            <div className="flex justify-between">
                              <span className="text-sm text-gray-400">ID:</span>
                              <span className="text-sm font-mono">{selectedVideo.id}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-sm text-gray-400">Playback ID:</span>
                              <span className="text-sm font-mono">{selectedVideo.playback_ids?.[0]?.id || "N/A"}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-sm text-gray-400">Duration:</span>
                              <span className="text-sm">{formatDuration(selectedVideo.duration)}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-sm text-gray-400">Created:</span>
                              <span className="text-sm">{formatDate(selectedVideo.created_at)}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-sm text-gray-400">Status:</span>
                              <Badge
                                className={
                                  selectedVideo.status === "ready"
                                    ? "bg-green-900/50 text-green-300"
                                    : "bg-amber-900/50 text-amber-300"
                                }
                              >
                                {selectedVideo.status}
                              </Badge>
                            </div>
                          </div>
                          <Button className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                            <Edit className="h-4 w-4 mr-2" /> Edit Video Details
                          </Button>
                        </CardContent>
                      </Card>
                    ) : (
                      <Card className="bg-gray-900/60 border-gray-800">
                        <CardContent className="p-8 text-center">
                          <Play className="h-12 w-12 mx-auto mb-4 text-gray-700" />
                          <p className="text-gray-400">Select a video to preview</p>
                        </CardContent>
                      </Card>
                    )}
                  </div>
                </div>
              </div>
            ) : (
              <div className="text-center py-12">
                <Play className="h-16 w-16 mx-auto text-gray-700 mb-4" />
                <h3 className="text-xl font-medium mb-2">No videos found</h3>
                <p className="text-gray-400 mb-6">
                  You haven't uploaded any videos yet. Get started by uploading your first video.
                </p>
                <Button
                  onClick={() => setActiveTab("upload")}
                  className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                >
                  <Plus className="h-4 w-4 mr-2" /> Upload Video
                </Button>
              </div>
            )}
          </TabsContent>

<TabsContent value="upload" className="mt-6">
            <Card className="bg-gray-900/60 border-gray-800">
              <CardHeader>
                <CardTitle>Upload New Video</CardTitle>
              </CardHeader>
              <CardContent>
                <MuxUploader
                  onUploadComplete={handleUploadComplete}
                  onUploadError={(error) => {
                    toast({
                      title: "Upload Error",
                      description: error.message || "An error occurred during upload",
                      variant: "destructive",
                    })
                  }}
                />
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

<div className="mt-8">
          <Link href="/learn">
            <Button variant="outline" className="border-gray-700 text-gray-400 hover:bg-gray-800">
              Back to Learn
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/learn/instructor/courses/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { ArrowLeft, Plus, Edit, Trash2, Eye, Search, Book, Clock, Users, Loader2, FileText } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import CourseDeleteDialog from "@/components/learn/course-delete-dialog"

// Sample course data - in a real app, this would come from your backend
const sampleCourses = [
  {
    id: "music-production-101",
    title: "Music Production 101",
    description: "Learn the fundamentals of music production from setup to final mix.",
    instructor: "Alex Johnson",
    level: "Beginner",
    duration: "4h 30m",
    lessons: 12,
    students: 1245,
    status: "published",
    image: "/placeholder.svg?height=400&width=600",
    modules: 4,
    createdAt: "2023-09-15T10:30:00Z",
    updatedAt: "2023-10-20T15:45:00Z",
  },
  {
    id: "advanced-mixing-techniques",
    title: "Advanced Mixing Techniques",
    description: "Take your mixing skills to the next level with professional techniques.",
    instructor: "Sarah Williams",
    level: "Advanced",
    duration: "6h 15m",
    lessons: 15,
    students: 876,
    status: "published",
    image: "/placeholder.svg?height=400&width=600",
    modules: 5,
    createdAt: "2023-08-05T08:20:00Z",
    updatedAt: "2023-10-18T11:30:00Z",
  },
  {
    id: "blockchain-for-musicians",
    title: "Blockchain for Musicians",
    description: "Understand how blockchain technology is revolutionizing the music industry.",
    instructor: "Emma Thompson",
    level: "Intermediate",
    duration: "5h 20m",
    lessons: 14,
    students: 543,
    status: "published",
    image: "/placeholder.svg?height=400&width=600",
    modules: 4,
    createdAt: "2023-07-12T14:15:00Z",
    updatedAt: "2023-09-30T09:40:00Z",
  },
  {
    id: "music-marketing-essentials",
    title: "Music Marketing Essentials",
    description: "Learn how to effectively market your music in the digital age.",
    instructor: "Michael Davis",
    level: "Beginner",
    duration: "3h 45m",
    lessons: 10,
    students: 0,
    status: "draft",
    image: "/placeholder.svg?height=400&width=600",
    modules: 3,
    createdAt: "2023-10-05T16:20:00Z",
    updatedAt: "2023-10-10T13:10:00Z",
  },
]

export default function CoursesPage() {
  const [activeTab, setActiveTab] = useState("all")
  const [courses, setCourses] = useState(sampleCourses)
  const [isLoading, setIsLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [courseToDelete, setCourseToDelete] = useState<string | null>(null)
  const { toast } = useToast()

// Filter courses based on active tab and search query
  const filteredCourses = courses.filter((course) => {
    // Filter by status
    if (activeTab === "published" && course.status !== "published") return false
    if (activeTab === "drafts" && course.status !== "draft") return false

// Filter by search query
    if (
      searchQuery &&
      !course.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
      !course.description.toLowerCase().includes(searchQuery.toLowerCase())
    )
      return false

return true
  })

// Simulate loading state
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1000)

return () => clearTimeout(timer)
  }, [])

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString()
  }

const handleDeleteCourse = (courseId: string) => {
    setCourseToDelete(courseId)
    setDeleteDialogOpen(true)
  }

const confirmDeleteCourse = () => {
    if (courseToDelete) {
      // Filter out the course to delete
      setCourses(courses.filter((course) => course.id !== courseToDelete))

toast({
        title: "Course deleted",
        description: "The course has been successfully deleted",
      })

// Close the dialog and reset courseToDelete
      setDeleteDialogOpen(false)
      setCourseToDelete(null)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8">
        <div className="mb-6">
          <Link
            href="/learn/instructor"
            className="inline-flex items-center text-gray-400 hover:text-white transition-colors"
          >
            <ArrowLeft className="h-4 w-4 mr-2" /> Back to Instructor Dashboard
          </Link>
        </div>

<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
            <h1 className="text-3xl font-bold mb-2">Course Management</h1>
            <p className="text-gray-400">Create and manage your courses, modules, and lessons</p>
          </motion.div>

<Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
            <Link href="/learn/instructor/courses/new" className="flex items-center">
              <Plus className="h-4 w-4 mr-2" /> Create New Course
            </Link>
          </Button>
        </div>

<div className="flex flex-col md:flex-row gap-4 mb-8">
          <div className="relative flex-grow">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-4 w-4" />
            <Input
              placeholder="Search courses by title or description"
              className="pl-10 bg-gray-900/60 border-gray-800"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
        </div>

{isLoading ? (
          <div className="flex justify-center items-center py-20">
            <Loader2 className="h-10 w-10 animate-spin text-purple-500" />
          </div>
        ) : filteredCourses.length > 0 ? (
          <div className="grid grid-cols-1 gap-6">
            {filteredCourses.map((course) => (
              <Card key={course.id} className="bg-gray-900/60 border-gray-800">
                <CardContent className="p-0">
                  <div className="flex flex-col md:flex-row">
                    <div className="relative h-48 md:h-auto md:w-1/4 md:min-h-[200px]">
                      <Image
                        src={course.image || "/placeholder.svg"}
                        alt={course.title}
                        fill
                        className="object-cover"
                      />
                    </div>
                    <div className="p-6 md:w-3/4">
                      <div className="flex items-start justify-between">
                        <div>
                          <div className="flex items-center gap-2 mb-2">
                            <h2 className="text-xl font-bold">{course.title}</h2>
                            <Badge
                              className={
                                course.status === "published"
                                  ? "bg-green-900/50 text-green-300 border-green-500/30"
                                  : "bg-amber-900/50 text-amber-300 border-amber-500/30"
                              }
                            >
                              {course.status === "published" ? "Published" : "Draft"}
                            </Badge>
                          </div>
                          <p className="text-gray-400 mb-4">{course.description}</p>
                        </div>
                      </div>

<div className="flex flex-wrap gap-4 mb-4 text-sm text-gray-400">
                        <div className="flex items-center">
                          <Book className="h-4 w-4 mr-1" /> {course.modules} Modules
                        </div>
                        <div className="flex items-center">
                          <FileText className="h-4 w-4 mr-1" /> {course.lessons} Lessons
                        </div>
                        <div className="flex items-center">
                          <Clock className="h-4 w-4 mr-1" /> {course.duration}
                        </div>
                        <div className="flex items-center">
                          <Users className="h-4 w-4 mr-1" /> {course.students} Students
                        </div>
                      </div>

<div className="flex flex-wrap gap-2 mb-4">
                        <Badge className="bg-gray-700 text-gray-300">{course.level}</Badge>
                      </div>

<div className="flex flex-col xs:flex-row gap-2 mt-4 justify-between">
                        <div className="text-sm text-gray-500">
                          Created: {formatDate(course.createdAt)}
                          <span className="mx-2">•</span>
                          Last Updated: {formatDate(course.updatedAt)}
                        </div>

<div className="flex gap-2">
                          <Button
                            size="sm"
                            variant="ghost"
                            className="text-gray-400 hover:text-white hover:bg-gray-800"
                            asChild
                          >
                            <Link href={`/learn/${course.id}`}>
                              <Eye className="h-4 w-4 mr-2" /> View
                            </Link>
                          </Button>
                          <Button
                            size="sm"
                            variant="ghost"
                            className="text-blue-400 hover:text-blue-300 hover:bg-blue-900/20"
                            asChild
                          >
                            <Link href={`/learn/instructor/courses/${course.id}`}>
                              <Edit className="h-4 w-4 mr-2" /> Edit
                            </Link>
                          </Button>
                          <Button
                            size="sm"
                            variant="ghost"
                            className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
                            onClick={() => handleDeleteCourse(course.id)}
                          >
                            <Trash2 className="h-4 w-4 mr-2" /> Delete
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <Book className="h-16 w-16 mx-auto text-gray-700 mb-4" />
            <h3 className="text-xl font-medium mb-2">No courses found</h3>
            <p className="text-gray-400 mb-6">
              {searchQuery
                ? "No courses match your search criteria. Try adjusting your search."
                : activeTab === "drafts"
                  ? "You don't have any draft courses. Create a new course to get started."
                  : activeTab === "published"
                    ? "You don't have any published courses yet."
                    : "You haven't created any courses yet. Get started by creating your first course."}
            </p>
            <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
              <Link href="/learn/instructor/courses/new" className="flex items-center">
                <Plus className="h-4 w-4 mr-2" /> Create New Course
              </Link>
            </Button>
          </div>
        )}
      </div>

<CourseDeleteDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen} onConfirm={confirmDeleteCourse} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/learn/instructor/courses/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/learn/course-delete-dialog.tsx" isMerged="true"
"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

interface CourseDeleteDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onConfirm: () => void
}

export default function CourseDeleteDialog({ open, onOpenChange, onConfirm }: CourseDeleteDialogProps) {
  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="bg-gray-900 border-gray-800">
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription className="text-gray-400">
            This action cannot be undone. This will permanently delete this course and all its contents, including
            modules and lessons.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel className="border-gray-700 text-gray-300 hover:bg-gray-800">Cancel</AlertDialogCancel>
          <AlertDialogAction
            className="bg-red-600 hover:bg-red-700 text-white"
            onClick={(e) => {
              e.preventDefault()
              onConfirm()
            }}
          >
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
[V0_FILE]typescriptreact:file="app/learn/instructor/courses/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import {
  ArrowLeft,
  Save,
  Eye,
  Trash2,
  PlusCircle,
  GripVertical,
  ChevronDown,
  ChevronUp,
  File,
  Video,
  Pencil,
  Clock,
  Loader2,
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import ModuleEditor from "@/components/learn/module-editor"
import LessonEditor from "@/components/learn/lesson-editor"
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core"
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
  useSortable,
} from "@dnd-kit/sortable"
import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
import { CSS } from "@dnd-kit/utilities"

// Types
interface Module {
  id: string
  title: string
  description: string
  isExpanded?: boolean
  lessons: Lesson[]
}

interface Lesson {
  id: string
  title: string
  description: string
  duration: string
  videoId: string
  type: "video" | "quiz" | "assignment"
}

interface Course {
  id: string
  title: string
  description: string
  shortDescription: string
  level: string
  category: string
  price: number
  isFree: boolean
  isPublished: boolean
  image: string
  modules: Module[]
  prerequisites: string[]
  outcomes: string[]
  createdAt: string
  updatedAt: string
}

// Sample data
const sampleCourse: Course = {
  id: "music-production-101",
  title: "Music Production 101",
  description:
    "Learn the fundamentals of music production from setup to final mix. This comprehensive course covers everything you need to know to start producing professional-quality music, including DAW basics, recording techniques, MIDI programming, and essential mixing concepts.",
  shortDescription: "Learn the fundamentals of music production from setup to final mix.",
  level: "beginner",
  category: "production",
  price: 49.99,
  isFree: false,
  isPublished: true,
  image: "/placeholder.svg?height=400&width=600",
  prerequisites: ["Basic computer skills", "Any DAW software (demos available)", "Headphones or monitors"],
  outcomes: [
    "Understanding of core music production concepts",
    "Ability to navigate your DAW confidently",
    "Recording and MIDI programming skills",
    "Basic mixing techniques",
  ],
  modules: [
    {
      id: "module-1",
      title: "Getting Started",
      description: "Set up your production environment and learn the basics of your DAW.",
      isExpanded: true,
      lessons: [
        {
          id: "lesson-1-1",
          title: "Introduction to Music Production",
          description: "An overview of what you'll learn in this course.",
          duration: "10:25",
          videoId: "FjHGZj2IjBk",
          type: "video",
        },
        {
          id: "lesson-1-2",
          title: "Setting Up Your DAW",
          description: "How to configure your Digital Audio Workstation for optimal performance.",
          duration: "15:40",
          videoId: "6G6Z2Qj6-nk",
          type: "video",
        },
        {
          id: "lesson-1-3",
          title: "Understanding Audio vs. MIDI",
          description: "Learn the difference between audio and MIDI and when to use each.",
          duration: "12:15",
          videoId: "XVomXB3ZVTc",
          type: "video",
        },
      ],
    },
    {
      id: "module-2",
      title: "Recording Basics",
      description: "Learn how to record audio and set up your recording environment.",
      lessons: [
        {
          id: "lesson-2-1",
          title: "Microphone Types and Techniques",
          description: "Understanding different microphones and how to use them.",
          duration: "18:30",
          videoId: "SDPUXoWJh7k",
          type: "video",
        },
        {
          id: "lesson-2-2",
          title: "Recording Vocals",
          description: "Learn how to record professional-sounding vocals.",
          duration: "22:15",
          videoId: "YQiABUCJ-7I",
          type: "video",
        },
      ],
    },
  ],
  createdAt: "2023-09-15T10:30:00Z",
  updatedAt: "2023-10-20T15:45:00Z",
}

// New Course Template
const newCourseTemplate: Course = {
  id: "new",
  title: "",
  description: "",
  shortDescription: "",
  level: "beginner",
  category: "production",
  price: 0,
  isFree: true,
  isPublished: false,
  image: "/placeholder.svg?height=400&width=600",
  prerequisites: [],
  outcomes: [],
  modules: [],
  createdAt: new Date().toISOString(),
  updatedAt: new Date().toISOString(),
}

// Module Item Component
function SortableModuleItem({ module, onToggle, onEdit, onDelete, onEditLesson, onDeleteLesson, onAddLesson }: any) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: module.id })

const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  }

return (
    <div ref={setNodeRef} style={style} className="mb-4">
      <Card className="bg-gray-900/60 border-gray-800">
        <CardHeader className="px-4 py-3 flex flex-row items-center justify-between bg-gray-800/50">
          <div className="flex items-center">
            <div className="cursor-move" {...attributes} {...listeners}>
              <GripVertical className="h-5 w-5 text-gray-500 mr-2" />
            </div>
            <div onClick={() => onToggle(module.id)} className="flex items-center cursor-pointer">
              {module.isExpanded ? (
                <ChevronDown className="h-5 w-5 text-gray-400 mr-2" />
              ) : (
                <ChevronUp className="h-5 w-5 text-gray-400 mr-2" />
              )}
              <CardTitle className="text-md">{module.title}</CardTitle>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button
              size="sm"
              variant="ghost"
              className="h-8 w-8 p-0 text-blue-400 hover:text-blue-300 hover:bg-blue-900/20"
              onClick={() => onEdit(module)}
            >
              <Pencil className="h-4 w-4" />
            </Button>
            <Button
              size="sm"
              variant="ghost"
              className="h-8 w-8 p-0 text-red-400 hover:text-red-300 hover:bg-red-900/20"
              onClick={() => onDelete(module.id)}
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        </CardHeader>

{module.isExpanded && (
          <CardContent className="p-4">
            <p className="text-gray-400 mb-4 text-sm">{module.description}</p>

<div className="space-y-2">
              <div className="flex justify-between items-center mb-2">
                <h4 className="text-sm font-medium">Lessons</h4>
                <Button
                  size="sm"
                  variant="ghost"
                  className="text-purple-400 hover:text-purple-300 hover:bg-purple-900/20"
                  onClick={() => onAddLesson(module.id)}
                >
                  <PlusCircle className="h-4 w-4 mr-1" /> Add Lesson
                </Button>
              </div>

{module.lessons.length > 0 ? (
                <div className="space-y-2">
                  {module.lessons.map((lesson) => (
                    <div
                      key={lesson.id}
                      className="flex items-center justify-between p-2 bg-gray-800/30 rounded-md border border-gray-700"
                    >
                      <div className="flex items-center">
                        {lesson.type === "video" ? (
                          <Video className="h-4 w-4 text-purple-400 mr-2" />
                        ) : lesson.type === "quiz" ? (
                          <File className="h-4 w-4 text-blue-400 mr-2" />
                        ) : (
                          <File className="h-4 w-4 text-green-400 mr-2" />
                        )}
                        <div>
                          <p className="text-sm font-medium">{lesson.title}</p>
                          <div className="flex items-center text-xs text-gray-500">
                            <Clock className="h-3 w-3 mr-1" /> {lesson.duration}
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-1">
                        <Button
                          size="sm"
                          variant="ghost"
                          className="h-7 w-7 p-0 text-blue-400 hover:text-blue-300 hover:bg-blue-900/20"
                          onClick={() => onEditLesson(module.id, lesson)}
                        >
                          <Pencil className="h-3 w-3" />
                        </Button>
                        <Button
                          size="sm"
                          variant="ghost"
                          className="h-7 w-7 p-0 text-red-400 hover:text-red-300 hover:bg-red-900/20"
                          onClick={() => onDeleteLesson(module.id, lesson.id)}
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-4 bg-gray-800/30 rounded-md border border-dashed border-gray-700">
                  <p className="text-sm text-gray-500">No lessons yet. Click "Add Lesson" to create one.</p>
                </div>
              )}
            </div>
          </CardContent>
        )}
      </Card>
    </div>
  )
}

export default function CourseEditorPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [activeTab, setActiveTab] = useState("content")
  const [course, setCourse] = useState<Course | null>(null)
  const [currentModule, setCurrentModule] = useState<Module | null>(null)
  const [moduleEditorOpen, setModuleEditorOpen] = useState(false)
  const [currentLesson, setCurrentLesson] = useState<Lesson | null>(null)
  const [lessonModuleId, setLessonModuleId] = useState<string | null>(null)
  const [lessonEditorOpen, setLessonEditorOpen] = useState(false)
  const [newPrerequisite, setNewPrerequisite] = useState("")
  const [newOutcome, setNewOutcome] = useState("")

// DnD sensors
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  )

// Load course data
  useEffect(() => {
    const fetchCourse = async () => {
      setIsLoading(true)
      try {
        // In a real app, this would be an API call
        // For demo purposes, we're using sample data
        setTimeout(() => {
          if (params.id === "new") {
            setCourse({ ...newCourseTemplate })
          } else {
            setCourse({ ...sampleCourse })
          }
          setIsLoading(false)
        }, 800)
      } catch (error) {
        console.error("Error fetching course:", error)
        toast({
          title: "Error",
          description: "Failed to load course data",
          variant: "destructive",
        })
        setIsLoading(false)
      }
    }

fetchCourse()
  }, [params.id, toast])

const handleSaveCourse = async () => {
    if (!course) return

setIsSaving(true)

try {
      // Validate required fields
      if (!course.title) {
        toast({
          title: "Error",
          description: "Course title is required",
          variant: "destructive",
        })
        setIsSaving(false)
        return
      }

// In a real app, this would be an API call to save the course
      await new Promise((resolve) => setTimeout(resolve, 1000))

// If this is a new course, redirect to the edit page for the new course
      if (course.id === "new") {
        // Generate a new ID for the course
        const newId = `course-${Date.now()}`
        setCourse({ ...course, id: newId })

toast({
          title: "Course created",
          description: "Your new course has been created successfully",
        })

// In a real app, you'd redirect to the new course's edit page
        router.push(`/learn/instructor/courses/${newId}`)
      } else {
        // For existing courses, just show a success message
        toast({
          title: "Course saved",
          description: "Your changes have been saved successfully",
        })
      }
    } catch (error) {
      console.error("Error saving course:", error)
      toast({
        title: "Error",
        description: "Failed to save course",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

// Module management
  const toggleModuleExpanded = (moduleId: string) => {
    if (!course) return

setCourse({
      ...course,
      modules: course.modules.map((mod) => (mod.id === moduleId ? { ...mod, isExpanded: !mod.isExpanded } : mod)),
    })
  }

const handleAddModule = () => {
    setCurrentModule(null) // For new modules
    setModuleEditorOpen(true)
  }

const handleEditModule = (module: Module) => {
    setCurrentModule(module)
    setModuleEditorOpen(true)
  }

const handleDeleteModule = (moduleId: string) => {
    if (!course) return

if (confirm("Are you sure you want to delete this module and all its lessons?")) {
      setCourse({
        ...course,
        modules: course.modules.filter((mod) => mod.id !== moduleId),
      })

toast({
        title: "Module deleted",
        description: "The module and its lessons have been deleted",
      })
    }
  }

const handleSaveModule = (moduleData: Partial<Module>) => {
    if (!course) return

if (currentModule) {
      // Editing existing module
      setCourse({
        ...course,
        modules: course.modules.map((mod) =>
          mod.id === currentModule.id
            ? { ...mod, title: moduleData.title || "", description: moduleData.description || "" }
            : mod,
        ),
      })
    } else {
      // Adding new module
      const newModule: Module = {
        id: `module-${Date.now()}`,
        title: moduleData.title || "New Module",
        description: moduleData.description || "",
        isExpanded: true,
        lessons: [],
      }

setCourse({
        ...course,
        modules: [...course.modules, newModule],
      })
    }

setModuleEditorOpen(false)
    setCurrentModule(null)
  }

// Handle drag and drop reordering of modules
  const handleDragEnd = (event: any) => {
    const { active, over } = event

if (active.id !== over.id) {
      setCourse((course) => {
        if (!course) return null

const oldIndex = course.modules.findIndex((module) => module.id === active.id)
        const newIndex = course.modules.findIndex((module) => module.id === over.id)

return {
          ...course,
          modules: arrayMove(course.modules, oldIndex, newIndex),
        }
      })
    }
  }

// Lesson management
  const handleAddLesson = (moduleId: string) => {
    setCurrentLesson(null)
    setLessonModuleId(moduleId)
    setLessonEditorOpen(true)
  }

const handleEditLesson = (moduleId: string, lesson: Lesson) => {
    setCurrentLesson(lesson)
    setLessonModuleId(moduleId)
    setLessonEditorOpen(true)
  }

const handleDeleteLesson = (moduleId: string, lessonId: string) => {
    if (!course) return

if (confirm("Are you sure you want to delete this lesson?")) {
      setCourse({
        ...course,
        modules: course.modules.map((mod) =>
          mod.id === moduleId ? { ...mod, lessons: mod.lessons.filter((lesson) => lesson.id !== lessonId) } : mod,
        ),
      })

toast({
        title: "Lesson deleted",
        description: "The lesson has been deleted",
      })
    }
  }

const handleSaveLesson = (lessonData: Partial<Lesson>) => {
    if (!course || !lessonModuleId) return

if (currentLesson) {
      // Editing existing lesson
      setCourse({
        ...course,
        modules: course.modules.map((mod) =>
          mod.id === lessonModuleId
            ? {
                ...mod,
                lessons: mod.lessons.map((lesson) =>
                  lesson.id === currentLesson.id
                    ? {
                        ...lesson,
                        title: lessonData.title || "",
                        description: lessonData.description || "",
                        duration: lessonData.duration || "",
                        videoId: lessonData.videoId || "",
                        type: lessonData.type || "video",
                      }
                    : lesson,
                ),
              }
            : mod,
        ),
      })
    } else {
      // Adding new lesson
      const newLesson: Lesson = {
        id: `lesson-${Date.now()}`,
        title: lessonData.title || "New Lesson",
        description: lessonData.description || "",
        duration: lessonData.duration || "00:00",
        videoId: lessonData.videoId || "",
        type: lessonData.type || "video",
      }

setCourse({
        ...course,
        modules: course.modules.map((mod) =>
          mod.id === lessonModuleId ? { ...mod, lessons: [...mod.lessons, newLesson] } : mod,
        ),
      })
    }

setLessonEditorOpen(false)
    setCurrentLesson(null)
    setLessonModuleId(null)
  }

// Prerequisites and Outcomes management
  const addPrerequisite = () => {
    if (!course || !newPrerequisite.trim()) return

setCourse({
      ...course,
      prerequisites: [...course.prerequisites, newPrerequisite.trim()],
    })
    setNewPrerequisite("")
  }

const removePrerequisite = (index: number) => {
    if (!course) return

setCourse({
      ...course,
      prerequisites: course.prerequisites.filter((_, i) => i !== index),
    })
  }

const addOutcome = () => {
    if (!course || !newOutcome.trim()) return

setCourse({
      ...course,
      outcomes: [...course.outcomes, newOutcome.trim()],
    })
    setNewOutcome("")
  }

const removeOutcome = (index: number) => {
    if (!course) return

setCourse({
      ...course,
      outcomes: course.outcomes.filter((_, i) => i !== index),
    })
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white flex items-center justify-center">
        <Loader2 className="h-12 w-12 animate-spin text-purple-500" />
      </div>
    )
  }

if (!course) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold mb-2">Course not found</h2>
          <p className="text-gray-400 mb-4">The course you're looking for doesn't exist.</p>
          <Button asChild>
            <Link href="/learn/instructor/courses">Back to Courses</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-8">
        <div className="mb-6">
          <Link
            href="/learn/instructor/courses"
            className="inline-flex items-center text-gray-400 hover:text-white transition-colors"
          >
            <ArrowLeft className="h-4 w-4 mr-2" /> Back to Courses
          </Link>
        </div>

<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
            <h1 className="text-3xl font-bold mb-2">{course.id === "new" ? "Create New Course" : "Edit Course"}</h1>
            <p className="text-gray-400">{course.id === "new" ? "Create a new course" : course.title}</p>
          </motion.div>

<div className="flex flex-col xs:flex-row gap-2">
            <Button
              variant="outline"
              className="border-gray-700 text-gray-400 hover:bg-gray-800"
              disabled={course.id === "new"}
            >
              <Link
                href={course.id === "new" ? "#" : `/learn/${course.id}`}
                className="flex items-center"
                onClick={(e) => {
                  if (course.id === "new") e.preventDefault()
                }}
              >
                <Eye className="h-4 w-4 mr-2" /> Preview
              </Link>
            </Button>
            <Button
              className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
              onClick={handleSaveCourse}
              disabled={isSaving}
            >
              {isSaving ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" /> Saving...
                </>
              ) : (
                <>
                  <Save className="h-4 w-4 mr-2" /> Save Course
                </>
              )}
            </Button>
          </div>
        </div>

<Tabs defaultValue="content" value={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="bg-gray-800/50 border border-gray-700">
            <TabsTrigger value="content" className="data-[state=active]:bg-purple-900/50">
              Content
            </TabsTrigger>
            <TabsTrigger value="details" className="data-[state=active]:bg-purple-900/50">
              Course Details
            </TabsTrigger>
            <TabsTrigger value="requirements" className="data-[state=active]:bg-purple-900/50">
              Requirements & Outcomes
            </TabsTrigger>
          </TabsList>

<TabsContent value="content" className="mt-6">
            <Card className="bg-gray-900/60 border-gray-800 mb-6">
              <CardHeader>
                <CardTitle>Course Modules</CardTitle>
              </CardHeader>
              <CardContent>
                {course.modules.length > 0 ? (
                  <DndContext
                    sensors={sensors}
                    collisionDetection={closestCenter}
                    onDragEnd={handleDragEnd}
                    modifiers={[restrictToVerticalAxis]}
                  >
                    <SortableContext
                      items={course.modules.map((module) => module.id)}
                      strategy={verticalListSortingStrategy}
                    >
                      {course.modules.map((module) => (
                        <SortableModuleItem
                          key={module.id}
                          module={module}
                          onToggle={toggleModuleExpanded}
                          onEdit={handleEditModule}
                          onDelete={handleDeleteModule}
                          onAddLesson={handleAddLesson}
                          onEditLesson={handleEditLesson}
                          onDeleteLesson={handleDeleteLesson}
                        />
                      ))}
                    </SortableContext>
                  </DndContext>
                ) : (
                  <div className="text-center py-8 bg-gray-800/30 rounded-md border border-dashed border-gray-700">
                    <p className="text-gray-400 mb-4">No modules yet. Add your first module to get started.</p>
                  </div>
                )}

<Button
                  className="mt-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                  onClick={handleAddModule}
                >
                  <PlusCircle className="h-4 w-4 mr-2" /> Add Module
                </Button>
              </CardContent>
            </Card>

<div className="text-center">
              <Button
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                onClick={handleSaveCourse}
                disabled={isSaving}
              >
                {isSaving ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" /> Saving...
                  </>
                ) : (
                  <>
                    <Save className="h-4 w-4 mr-2" /> Save Course
                  </>
                )}
              </Button>
            </div>
          </TabsContent>

<TabsContent value="details" className="mt-6">
            <Card className="bg-gray-900/60 border-gray-800 mb-6">
              <CardHeader>
                <CardTitle>Course Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="title">Course Title *</Label>
                  <Input
                    id="title"
                    value={course.title}
                    onChange={(e) => setCourse({ ...course, title: e.target.value })}
                    placeholder="Enter course title"
                    className="bg-gray-800/50 border-gray-700"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="shortDescription">Short Description *</Label>
                  <Input
                    id="shortDescription"
                    value={course.shortDescription}
                    onChange={(e) => setCourse({ ...course, shortDescription: e.target.value })}
                    placeholder="Enter a short description (displayed in course cards)"
                    className="bg-gray-800/50 border-gray-700"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="description">Full Description *</Label>
                  <Textarea
                    id="description"
                    value={course.description}
                    onChange={(e) => setCourse({ ...course, description: e.target.value })}
                    placeholder="Enter a detailed course description"
                    className="bg-gray-800/50 border-gray-700 min-h-[150px]"
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="level">Course Level *</Label>
                    <Select value={course.level} onValueChange={(value) => setCourse({ ...course, level: value })}>
                      <SelectTrigger className="bg-gray-800/50 border-gray-700">
                        <SelectValue placeholder="Select level" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="beginner">Beginner</SelectItem>
                        <SelectItem value="intermediate">Intermediate</SelectItem>
                        <SelectItem value="advanced">Advanced</SelectItem>
                        <SelectItem value="all-levels">All Levels</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="category">Category *</Label>
                    <Select
                      value={course.category}
                      onValueChange={(value) => setCourse({ ...course, category: value })}
                    >
                      <SelectTrigger className="bg-gray-800/50 border-gray-700">
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="production">Production</SelectItem>
                        <SelectItem value="mixing">Mixing</SelectItem>
                        <SelectItem value="mastering">Mastering</SelectItem>
                        <SelectItem value="business">Business</SelectItem>
                        <SelectItem value="blockchain">Blockchain</SelectItem>
                        <SelectItem value="creation">Creation</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="image">Course Image URL</Label>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="col-span-2">
                      <Input
                        id="image"
                        value={course.image}
                        onChange={(e) => setCourse({ ...course, image: e.target.value })}
                        placeholder="Enter image URL"
                        className="bg-gray-800/50 border-gray-700"
                      />
                      <p className="text-xs text-gray-500 mt-1">
                        Enter a URL for the course image, or upload one (upload functionality coming soon)
                      </p>
                    </div>
                    <div className="relative aspect-video rounded-md overflow-hidden">
                      <Image
                        src={course.image || "/placeholder.svg"}
                        alt="Course preview"
                        fill
                        className="object-cover"
                      />
                    </div>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="price">Price ($)</Label>
                    <Input
                      id="price"
                      type="number"
                      min="0"
                      step="0.01"
                      value={course.isFree ? 0 : course.price}
                      onChange={(e) => setCourse({ ...course, price: Number.parseFloat(e.target.value) })}
                      disabled={course.isFree}
                      className="bg-gray-800/50 border-gray-700"
                    />
                  </div>

<div className="flex items-end">
                    <div className="flex items-center space-x-2 h-10">
                      <Switch
                        id="isFree"
                        checked={course.isFree}
                        onCheckedChange={(checked) =>
                          setCourse({ ...course, isFree: checked, price: checked ? 0 : course.price })
                        }
                      />
                      <Label htmlFor="isFree">Free Course</Label>
                    </div>
                  </div>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="isPublished"
                    checked={course.isPublished}
                    onCheckedChange={(checked) => setCourse({ ...course, isPublished: checked })}
                  />
                  <Label htmlFor="isPublished">
                    {course.isPublished ? "Published (visible to students)" : "Draft (not visible to students)"}
                  </Label>
                </div>
              </CardContent>
            </Card>

<TabsContent value="requirements" className="mt-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card className="bg-gray-900/60 border-gray-800">
                <CardHeader>
                  <CardTitle>Course Prerequisites</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex space-x-2">
                    <Input
                      value={newPrerequisite}
                      onChange={(e) => setNewPrerequisite(e.target.value)}
                      placeholder="Add a prerequisite"
                      className="bg-gray-800/50 border-gray-700"
                      onKeyDown={(e) => {
                        if (e.key === "Enter" && newPrerequisite.trim()) {
                          e.preventDefault()
                          addPrerequisite()
                        }
                      }}
                    />
                    <Button
                      onClick={addPrerequisite}
                      disabled={!newPrerequisite.trim()}
                      className="bg-purple-600 hover:bg-purple-700"
                    >
                      Add
                    </Button>
                  </div>

{course.prerequisites.length > 0 ? (
                    <ul className="space-y-2">
                      {course.prerequisites.map((prereq, index) => (
                        <li key={index} className="flex justify-between items-center bg-gray-800/30 p-2 rounded-md">
                          <span className="text-sm">{prereq}</span>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0 text-red-400 hover:text-red-300 hover:bg-red-900/20"
                            onClick={() => removePrerequisite(index)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </li>
                      ))}
                    </ul>
                  ) : (
                    <p className="text-sm text-gray-500">
                      No prerequisites added yet. Add what students need to know before taking this course.
                    </p>
                  )}
                </CardContent>
              </Card>

<Card className="bg-gray-900/60 border-gray-800">
                <CardHeader>
                  <CardTitle>Learning Outcomes</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex space-x-2">
                    <Input
                      value={newOutcome}
                      onChange={(e) => setNewOutcome(e.target.value)}
                      placeholder="Add a learning outcome"
                      className="bg-gray-800/50 border-gray-700"
                      onKeyDown={(e) => {
                        if (e.key === "Enter" && newOutcome.trim()) {
                          e.preventDefault()
                          addOutcome()
                        }
                      }}
                    />
                    <Button
                      onClick={addOutcome}
                      disabled={!newOutcome.trim()}
                      className="bg-purple-600 hover:bg-purple-700"
                    >
                      Add
                    </Button>
                  </div>

{course.outcomes.length > 0 ? (
                    <ul className="space-y-2">
                      {course.outcomes.map((outcome, index) => (
                        <li key={index} className="flex justify-between items-center bg-gray-800/30 p-2 rounded-md">
                          <span className="text-sm">{outcome}</span>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0 text-red-400 hover:text-red-300 hover:bg-red-900/20"
                            onClick={() => removeOutcome(index)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </li>
                      ))}
                    </ul>
                  ) : (
                    <p className="text-sm text-gray-500">
                      No learning outcomes added yet. Add what students will learn from this course.
                    </p>
                  )}
                </CardContent>
              </Card>
            </div>

<div className="text-center mt-6">
              <Button
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                onClick={handleSaveCourse}
                disabled={isSaving}
              >
                {isSaving ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" /> Saving...
                  </>
                ) : (
                  <>
                    <Save className="h-4 w-4 mr-2" /> Save Course
                  </>
                )}
              </Button>
            </div>
          </TabsContent>
        </Tabs>
      </div>

<LessonEditor
        open={lessonEditorOpen}
        onOpenChange={setLessonEditorOpen}
        lesson={currentLesson}
        onSave={handleSaveLesson}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/learn/module-editor.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"

interface Module {
  id?: string
  title: string
  description: string
}

interface ModuleEditorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  module: Module | null
  onSave: (moduleData: Partial<Module>) => void
}

export default function ModuleEditor({ open, onOpenChange, module, onSave }: ModuleEditorProps) {
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")

// Reset form when module changes
  useEffect(() => {
    if (module) {
      setTitle(module.title)
      setDescription(module.description)
    } else {
      setTitle("")
      setDescription("")
    }
  }, [module, open])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSave({
      id: module?.id,
      title,
      description,
    })
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-gray-900 border-gray-800 sm:max-w-[550px]">
        <DialogHeader>
          <DialogTitle>{module ? "Edit Module" : "Add Module"}</DialogTitle>
          <DialogDescription className="text-gray-400">
            {module ? "Update the details of this module." : "Add a new module to organize your course content."}
          </DialogDescription>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="module-title">Module Title *</Label>
            <Input
              id="module-title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="Enter module title"
              className="bg-gray-800/50 border-gray-700"
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="module-description">Description</Label>
            <Textarea
              id="module-description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Enter module description"
              className="bg-gray-800/50 border-gray-700 min-h-[100px]"
            />
          </div>

<DialogFooter className="pt-4">
            <Button
              type="button"
              variant="outline"
              className="border-gray-700 text-gray-300 hover:bg-gray-800"
              onClick={() => onOpenChange(false)}
            >
              Cancel
            </Button>
            <Button type="submit" className="bg-purple-600 hover:bg-purple-700">
              {module ? "Update Module" : "Add Module"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/learn/lesson-editor.tsx" isTerminated="true" isMerged="true"
interface Lesson {
  id?: string
  title: string
  description: string
  duration: string
  videoId: string
  type: "video" | "quiz" | "assignment"
}

interface LessonEditorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  lesson: Lesson | null
  onSave: (lessonData: Partial<Lesson>) => void
}

// Sample video data for the dropdown
const sampleVideos = [
  { id: "FjHGZj2IjBk", title: "Introduction to Music Production" },
  { id: "6G6Z2Qj6-nk", title: "Setting Up Your DAW" },
  { id: "XVomXB3ZVTc", title: "Understanding Audio vs. MIDI" },
  { id: "SDPUXoWJh7k", title: "Microphone Types and Techniques" },
  { id: "YQiABUCJ-7I", title: "Recording Vocals" },
  { id: "1gEz3B7QUzk", title: "Recording Instruments" },
  { id: "ItVk5Nj3Urk", title: "MIDI Basics" },\
  { id: "dL
[V0_FILE]typescript:file="lib/mux-client.ts" isEdit="true"
import Mux from "@mux/mux-node"

// Initialize the Mux client with environment variables
const mux = new Mux({
  tokenId: process.env.MUX_TOKEN_ID!,
  tokenSecret: process.env.MUX_TOKEN_SECRET!,
})

// Export the video instance
export const muxVideo = mux.video

// Also export the full client if needed
export default mux
[V0_FILE]typescript:file="app/api/mux/check-credentials/route.ts" isEdit="true"
import { NextResponse } from "next/server"
import { muxVideo } from "@/lib/mux-client"

export async function GET() {
  try {
    // Check if credentials are configured
    if (!process.env.MUX_TOKEN_ID || !process.env.MUX_TOKEN_SECRET) {
      return NextResponse.json(
        {
          success: false,
          message: "Mux credentials not configured",
          error: "MUX_TOKEN_ID or MUX_TOKEN_SECRET environment variables are missing",
        },
        { status: 500 },
      )
    }

// Try to list assets as a simple check that credentials are valid
    const assets = await muxVideo.assets.list({ limit: 1 })

// If we get here, the credentials are valid
    return NextResponse.json({
      success: true,
      message: "Mux credentials are valid",
      assetsCount: assets.length,
    })
  } catch (error: any) {
    console.error("Error checking Mux credentials:", error)

// Return an error response
    return NextResponse.json(
      {
        success: false,
        message: "Invalid Mux credentials or API error",
        error: error.message,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/mux/route.ts" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { muxVideo } from "@/lib/mux-client"

export async function GET() {
  try {
    const assets = await muxVideo.assets.list({ limit: 25 })
    return NextResponse.json({ assets })
  } catch (error: any) {
    console.error("Error fetching Mux assets:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { url } = body

if (!url) {
      return NextResponse.json({ error: "URL is required" }, { status: 400 })
    }

const asset = await muxVideo.assets.create({
      input: [{ url }],
      playback_policy: ["public"],
      video_quality: "basic",
    })

return NextResponse.json({ asset })
  } catch (error: any) {
    console.error("Error creating Mux asset:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/mux/[id]/route.ts" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { muxVideo } from "@/lib/mux-client"

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const asset = await muxVideo.assets.retrieve(params.id)
    return NextResponse.json({ asset })
  } catch (error: any) {
    console.error("Error fetching Mux asset:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { corsOrigin = "*", newAssetSettings = {} } = body

// Create a direct upload
    const upload = await muxVideo.uploads.create({
      cors_origin: corsOrigin,
      new_asset_settings: {
        playback_policy: ["public"],
        video_quality: "basic",
        ...newAssetSettings,
      },
    })

return NextResponse.json({
      uploadId: upload.id,
      url: upload.url,
    })
  } catch (error: any) {
    console.error("Error creating Mux upload:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/mux/upload/[id]/route.ts" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { muxVideo } from "@/lib/mux-client"

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const upload = await muxVideo.uploads.retrieve(params.id)
    return NextResponse.json({ upload })
  } catch (error: any) {
    console.error("Error fetching Mux upload:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    await muxVideo.uploads.cancel(params.id)
    return NextResponse.json({ success: true })
  } catch (error: any) {
    console.error("Error canceling Mux upload:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/mux/asset/[id]/route.ts" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { muxVideo } from "@/lib/mux-client"

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const asset = await muxVideo.assets.retrieve(params.id)

return NextResponse.json({
      id: asset.id,
      status: asset.status,
      duration: asset.duration,
      playbackIds: asset.playback_ids,
      createdAt: asset.created_at,
    })
  } catch (error: any) {
    console.error("Error fetching Mux asset details:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

export async function PATCH(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const body = await request.json()
    const asset = await muxVideo.assets.update(params.id, body)

return NextResponse.json({ asset })
  } catch (error: any) {
    console.error("Error updating Mux asset:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

import { motion } from "framer-motion"
import { Pacifico } from "next/font/google"
import Image from "next/image"
import { cn } from "@/lib/utils"

const pacifico = Pacifico({
  subsets: ["latin"],
  weight: ["400"],
  variable: "--font-pacifico",
})

function ElegantShape({
  className,
  delay = 0,
  width = 400,
  height = 100,
  rotate = 0,
  gradient = "from-white/[0.08]",
}: {
  className?: string
  delay?: number
  width?: number
  height?: number
  rotate?: number
  gradient?: string
}) {
  return (
    <motion.div
      initial={{
        opacity: 0,
        y: -150,
        rotate: rotate - 15,
      }}
      animate={{
        opacity: 1,
        y: 0,
        rotate: rotate,
      }}
      transition={{
        duration: 2.4,
        delay,
        ease: [0.23, 0.86, 0.39, 0.96],
        opacity: { duration: 1.2 },
      }}
      className={cn("absolute", className)}
    >
      <motion.div
        animate={{
          y: [0, 15, 0],
        }}
        transition={{
          duration: 12,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
        }}
        style={{
          width,
          height,
        }}
        className="relative"
      >
        <div
          className={cn(
            "absolute inset-0 rounded-full",
            "bg-gradient-to-r to-transparent",
            gradient,
            "backdrop-blur-[2px] border-2 border-white/[0.15]",
            "shadow-[0_8px_32px_0_rgba(255,255,255,0.1)]",
            "after:absolute after:inset-0 after:rounded-full",
            "after:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.2),transparent_70%)]",
          )}
        />
      </motion.div>
    </motion.div>
  )
}

export default function HeroGeometric({
  badge = "Kokonut UI",
  title1 = "Elevate Your",
  title2 = "Digital Vision",
}: {
  badge?: string
  title1?: string
  title2?: string
}) {
  const fadeUpVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        duration: 1,
        delay: 0.5 + i * 0.2,
        ease: [0.25, 0.4, 0.25, 1],
      },
    }),
  }

return (
    <div className="relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-[#030303]">
      <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/[0.05] via-transparent to-rose-500/[0.05] blur-3xl" />

<div className="relative z-10 container mx-auto px-4 md:px-6">
        <div className="max-w-3xl mx-auto text-center">
          <motion.div
            custom={0}
            variants={fadeUpVariants}
            initial="hidden"
            animate="visible"
            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/[0.03] border border-white/[0.08] mb-8 md:mb-12"
          >
            <Image src="https://kokonutui.com/logo.svg" alt="Kokonut UI" width={20} height={20} />
            <span className="text-sm text-white/60 tracking-wide">{badge}</span>
          </motion.div>

<motion.div custom={1} variants={fadeUpVariants} initial="hidden" animate="visible">
            <h1 className="text-4xl sm:text-6xl md:text-8xl font-bold mb-6 md:mb-8 tracking-tight">
              <span className="bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80">{title1}</span>
              <br />
              <span
                className={cn(
                  "bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 via-white/90 to-rose-300 ",
                  pacifico.className,
                )}
              >
                {title2}
              </span>
            </h1>
          </motion.div>

<motion.div custom={2} variants={fadeUpVariants} initial="hidden" animate="visible">
            <p className="text-base sm:text-lg md:text-xl text-white/40 mb-8 leading-relaxed font-light tracking-wide max-w-xl mx-auto px-4">
              Crafting exceptional digital experiences through innovative design and cutting-edge technology.
            </p>
          </motion.div>
        </div>
      </div>

<div className="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]/80 pointer-events-none" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import HeroSection from "@/components/hero-section"
import FeatureCards from "@/components/feature-cards"
import MarketplacePreview from "@/components/marketplace-preview"
import AIAgentSection from "@/components/ai-agent-section"
import BlockchainIntegration from "@/components/blockchain-integration"

export default function HomePage() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <HeroSection />

<section className="text-center py-12">
          <h2 className="text-3xl font-bold mb-6">Ready to Transform Your Music Career?</h2>
          <p className="text-gray-300 max-w-2xl mx-auto mb-8">
            Join the revolution in music asset management, promotion, and monetization.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Button
              size="lg"
              className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
            >
              <Link href="/signup">Get Started</Link>
            </Button>
            <Button size="lg" variant="outline" className="border-purple-500 text-purple-400 hover:bg-purple-950">
              <Link href="/demo">Watch Demo</Link>
            </Button>
          </div>
        </section>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function HeroSection() {
  return (
    <div className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/30 via-transparent to-pink-900/30 z-0" />

{/* Animated music nodes background */}
      <div className="absolute inset-0 z-0">
        {[...Array(15)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute rounded-full bg-gradient-to-r from-purple-500/20 to-pink-500/20 backdrop-blur-sm border border-white/10"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              width: `${Math.random() * 100 + 50}px`,
              height: `${Math.random() * 100 + 50}px`,
            }}
            animate={{
              x: [0, Math.random() * 50 - 25],
              y: [0, Math.random() * 50 - 25],
            }}
            transition={{
              duration: Math.random() * 10 + 10,
              repeat: Number.POSITIVE_INFINITY,
              repeatType: "reverse",
              ease: "easeInOut",
            }}
          />
        ))}
      </div>

<div className="container mx-auto px-4 z-10 text-center">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
          <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-purple-400">
            Music Nodes
          </h1>
          <p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-8">
            Digital cards with utility assets for music creatives. Buy, sell, trade, and license your work through smart
            contracts and AI-powered promotion.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Button
              size="lg"
              className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
            >
              <Link href="/explore">Explore Marketplace</Link>
            </Button>
            <Button size="lg" variant="outline" className="border-purple-500 text-purple-400 hover:bg-purple-950">
              <Link href="/create">Create Node</Link>
            </Button>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/feature-cards.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Music, Zap, BarChart3, Award, Share2, ShoppingBag } from "lucide-react"

const features = [
  {
    title: "Digital Asset Cards",
    description: "Create unique digital cards containing your music, artwork, and more with embedded utility.",
    icon: <Music className="h-8 w-8 text-purple-400" />,
  },
  {
    title: "Smart Contract Integration",
    description: "Secure your assets with blockchain technology across Tron, Solana, and Ethereum networks.",
    icon: <Zap className="h-8 w-8 text-purple-400" />,
  },
  {
    title: "AI Promotion Tools",
    description: "Leverage AI agents trained on industry roles to automate promotion and marketing tasks.",
    icon: <BarChart3 className="h-8 w-8 text-purple-400" />,
  },
  {
    title: "Industry Connect Matrix",
    description: "Network with industry professionals and build valuable partnerships through our platform.",
    icon: <Share2 className="h-8 w-8 text-purple-400" />,
  },
  {
    title: "Asset Bartering Market",
    description: "Trade and barter your digital assets with other creators for mutual benefit.",
    icon: <Award className="h-8 w-8 text-purple-400" />,
  },
  {
    title: "Physical Goods Integration",
    description: "Sell physical merchandise and experiences tied to your digital assets.",
    icon: <ShoppingBag className="h-8 w-8 text-purple-400" />,
  },
]

export default function FeatureCards() {
  return (
    <section className="py-12">
      <div className="text-center mb-12">
        <h2 className="text-3xl font-bold mb-4">Platform Features</h2>
        <p className="text-gray-300 max-w-2xl mx-auto">
          Music Nodes combines blockchain technology, AI, and industry expertise to create a powerful ecosystem for
          music creatives.
        </p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {features.map((feature, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
            viewport={{ once: true }}
          >
            <Card className="bg-gray-900/60 border-purple-900/50 hover:border-purple-500/50 transition-all duration-300">
              <CardHeader>
                <div className="mb-2">{feature.icon}</div>
                <CardTitle className="text-xl text-white">{feature.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-gray-400 text-base">{feature.description}</CardDescription>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace-preview.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Heart, ShoppingCart, ArrowRight } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

// Sample data for marketplace items
const marketplaceItems = [
  {
    id: 1,
    title: "Cosmic Beats Vol. 1",
    creator: "Stellar Sound",
    price: "0.25 ETH",
    likes: 124,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Audio Track + Stems",
  },
  {
    id: 2,
    title: "Visual Album Artwork",
    creator: "DigitalCanvas",
    price: "150 TRX",
    likes: 89,
    category: "artwork",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Tron",
    type: "Visual Art + Commercial Rights",
  },
  {
    id: 3,
    title: "Limited Edition Merch Bundle",
    creator: "FashionBeats",
    price: "2 SOL",
    likes: 67,
    category: "physical",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Solana",
    type: "Physical Goods + Digital Collectible",
  },
  {
    id: 4,
    title: "Producer Pack: Lo-Fi Dreams",
    creator: "BeatArchitect",
    price: "0.15 ETH",
    likes: 215,
    category: "music",
    image: "/placeholder.svg?height=400&width=300",
    blockchain: "Ethereum",
    type: "Sample Pack + License",
  },
]

export default function MarketplacePreview() {
  const [activeTab, setActiveTab] = useState("all")

const filteredItems =
    activeTab === "all" ? marketplaceItems : marketplaceItems.filter((item) => item.category === activeTab)

return (
    <section className="py-12">
      <div className="flex justify-between items-center mb-8">
        <h2 className="text-3xl font-bold">Marketplace</h2>
        <Button variant="ghost" className="text-purple-400 hover:text-purple-300">
          <Link href="/marketplace" className="flex items-center">
            View All <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {filteredItems.map((item, index) => (
          <motion.div
            key={item.id}
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3, delay: index * 0.1 }}
          >
            <Card className="bg-gray-900/60 border-gray-800 overflow-hidden hover:border-purple-500/50 transition-all duration-300">
              <div className="relative h-48 w-full overflow-hidden">
                <Image
                  src={item.image || "/placeholder.svg"}
                  alt={item.title}
                  fill
                  className="object-cover transition-transform duration-500 hover:scale-110"
                />
                <Badge className="absolute top-2 right-2 bg-black/60 backdrop-blur-sm border border-white/10">
                  {item.blockchain}
                </Badge>
              </div>
              <CardContent className="pt-4">
                <h3 className="font-bold text-lg mb-1">{item.title}</h3>
                <p className="text-gray-400 text-sm mb-2">by {item.creator}</p>
                <p className="text-xs text-gray-500 mb-2">{item.type}</p>
                <div className="flex justify-between items-center">
                  <span className="font-semibold text-purple-400">{item.price}</span>
                  <div className="flex items-center text-gray-400 text-sm">
                    <Heart className="h-4 w-4 mr-1" /> {item.likes}
                  </div>
                </div>
              </CardContent>
              <CardFooter className="pt-0">
                <Button className="w-full bg-purple-600 hover:bg-purple-700">
                  <ShoppingCart className="h-4 w-4 mr-2" /> Purchase
                </Button>
              </CardFooter>
            </Card>
          </motion.div>
        ))}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ai-agent-section.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Bot, Sparkles, Users, TrendingUp, Calendar, Briefcase } from "lucide-react"

const aiAgents = [
  {
    name: "Promotion Agent",
    icon: <TrendingUp className="h-6 w-6 text-purple-400" />,
    description: "Automates social media campaigns and promotional strategies tailored to your audience.",
  },
  {
    name: "Booking Agent",
    icon: <Calendar className="h-6 w-6 text-purple-400" />,
    description: "Helps secure performance opportunities and manages your event calendar.",
  },
  {
    name: "A&R Agent",
    icon: <Users className="h-6 w-6 text-purple-400" />,
    description: "Connects your music with the right industry professionals and potential collaborators.",
  },
  {
    name: "Business Manager",
    icon: <Briefcase className="h-6 w-6 text-purple-400" />,
    description: "Optimizes your revenue streams and manages licensing opportunities.",
  },
]

export default function AIAgentSection() {
  return (
    <section className="py-12">
      <div className="text-center mb-12">
        <h2 className="text-3xl font-bold mb-4">AI Industry Agents</h2>
        <p className="text-gray-300 max-w-2xl mx-auto">
          Our AI agents are trained on industry-specific roles and tasks to help automate and optimize your music
          career.
        </p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        {aiAgents.map((agent, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <Card className="bg-gray-900/60 border-purple-900/50 hover:border-purple-500/50 transition-all duration-300">
              <CardContent className="p-6">
                <div className="flex items-start gap-4">
                  <div className="p-3 rounded-full bg-purple-900/30 border border-purple-500/30">{agent.icon}</div>
                  <div>
                    <h3 className="text-xl font-semibold mb-2">{agent.name}</h3>
                    <p className="text-gray-400">{agent.description}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>

<div className="bg-gradient-to-r from-purple-900/20 via-pink-900/20 to-purple-900/20 rounded-xl p-8 border border-purple-500/20">
        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
          <div className="flex items-center gap-4">
            <div className="p-4 rounded-full bg-purple-600/30 border border-purple-500/30">
              <Bot className="h-8 w-8 text-purple-400" />
            </div>
            <div>
              <h3 className="text-2xl font-semibold mb-1">AI Assistant</h3>
              <p className="text-gray-400">Your personal music industry guide</p>
            </div>
          </div>

<div className="flex-1 max-w-md">
            <div className="bg-black/40 rounded-lg p-4 border border-gray-800">
              <p className="text-gray-300 italic">
                "How can I help you today? I can analyze your audience demographics, suggest promotion strategies, or
                help you find collaboration opportunities."
              </p>
            </div>
          </div>

<Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
            <Sparkles className="h-4 w-4 mr-2" /> Chat with AI
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/blockchain-integration.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import Image from "next/image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"

const blockchains = [
  {
    id: "ethereum",
    name: "Ethereum",
    logo: "/placeholder.svg?height=100&width=100",
    description: "The most established blockchain for NFTs with the largest user base and marketplace ecosystem.",
    features: [
      "ERC-721 and ERC-1155 token standards",
      "Integration with major marketplaces like OpenSea",
      "Smart contract royalties for ongoing revenue",
      "Robust security and decentralization",
    ],
  },
  {
    id: "solana",
    name: "Solana",
    logo: "/placeholder.svg?height=100&width=100",
    description: "High-performance blockchain with low transaction fees and fast confirmation times.",
    features: [
      "Metaplex NFT standard",
      "Fraction-of-a-cent transaction fees",
      "High throughput for scalable applications",
      "Growing ecosystem of music-focused platforms",
    ],
  },
  {
    id: "tron",
    name: "Tron",
    logo: "/placeholder.svg?height=100&width=100",
    description: "Entertainment-focused blockchain with strong Asian market presence and low fees.",
    features: [
      "TRC-721 and TRC-1155 token standards",
      "High transaction throughput",
      "Strong entertainment industry partnerships",
      "Growing DeFi ecosystem for additional utility",
    ],
  },
]

export default function BlockchainIntegration() {
  return (
    <section className="py-12">
      <div className="text-center mb-12">
        <h2 className="text-3xl font-bold mb-4">Multi-Chain Support</h2>
        <p className="text-gray-300 max-w-2xl mx-auto">
          Music Nodes supports multiple blockchain networks, giving you flexibility in how you create, sell, and manage
          your digital assets.
        </p>
      </div>

<Tabs defaultValue="ethereum" className="w-full">
        <TabsList className="w-full max-w-md mx-auto bg-gray-800/50 border border-gray-700 mb-8">
          <TabsTrigger value="ethereum" className="flex-1 data-[state=active]:bg-purple-900/50">
            Ethereum
          </TabsTrigger>
          <TabsTrigger value="solana" className="flex-1 data-[state=active]:bg-purple-900/50">
            Solana
          </TabsTrigger>
          <TabsTrigger value="tron" className="flex-1 data-[state=active]:bg-purple-900/50">
            Tron
          </TabsTrigger>
        </TabsList>

{blockchains.map((blockchain) => (
          <TabsContent key={blockchain.id} value={blockchain.id} className="mt-0">
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
              <Card className="bg-gray-900/60 border-purple-900/50">
                <CardContent className="p-6">
                  <div className="flex flex-col md:flex-row gap-8">
                    <div className="flex flex-col items-center md:items-start">
                      <div className="relative w-24 h-24 mb-4">
                        <Image
                          src={blockchain.logo || "/placeholder.svg"}
                          alt={blockchain.name}
                          fill
                          className="object-contain"
                        />
                      </div>
                      <h3 className="text-2xl font-bold mb-2">{blockchain.name}</h3>
                      <p className="text-gray-400 text-center md:text-left mb-4 max-w-xs">{blockchain.description}</p>
                    </div>

<div className="flex-1">
                      <h4 className="text-lg font-semibold mb-4 text-purple-400">Key Features</h4>
                      <ul className="space-y-3">
                        {blockchain.features.map((feature, index) => (
                          <motion.li
                            key={index}
                            initial={{ opacity: 0, x: 20 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ duration: 0.3, delay: index * 0.1 }}
                            className="flex items-center"
                          >
                            <div className="h-2 w-2 rounded-full bg-purple-500 mr-3"></div>
                            <span className="text-gray-300">{feature}</span>
                          </motion.li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </TabsContent>
        ))}
      </Tabs>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/create/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Upload, Music, ImageIcon, Package, Zap } from "lucide-react"

export default function CreateNodePage() {
  const [activeTab, setActiveTab] = useState("basic")
  const [selectedBlockchain, setSelectedBlockchain] = useState("")

return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white">
      <div className="container mx-auto px-4 py-12">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <h1 className="text-4xl font-bold mb-2">Create Music Node</h1>
          <p className="text-gray-400 mb-8">
            Design your digital asset card with embedded utility and smart contract functionality.
          </p>
        </motion.div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            <Card className="bg-gray-900/60 border-gray-800">
              <CardContent className="p-6">
                <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                  <TabsList className="w-full bg-gray-800/50 border border-gray-700 mb-6">
                    <TabsTrigger value="basic" className="flex-1 data-[state=active]:bg-purple-900/50">
                      Basic Info
                    </TabsTrigger>
                    <TabsTrigger value="assets" className="flex-1 data-[state=active]:bg-purple-900/50">
                      Assets
                    </TabsTrigger>
                    <TabsTrigger value="utility" className="flex-1 data-[state=active]:bg-purple-900/50">
                      Utility
                    </TabsTrigger>
                    <TabsTrigger value="contract" className="flex-1 data-[state=active]:bg-purple-900/50">
                      Contract
                    </TabsTrigger>
                  </TabsList>

<TabsContent value="basic" className="mt-0 space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="title">Title</Label>
                      <Input
                        id="title"
                        placeholder="Enter the title of your Music Node"
                        className="bg-gray-800/50 border-gray-700"
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="description">Description</Label>
                      <Textarea
                        id="description"
                        placeholder="Describe your Music Node and what makes it special"
                        className="bg-gray-800/50 border-gray-700 min-h-[120px]"
                      />
                    </div>