import { ChevronDown, ChevronRight, Search, Star, Grid, List } from 'lucide-react'

interface Prompt {
  id: string
  name: string
  category: string
  description: string
  icon: string
  featured?: boolean
}

const prompts: Prompt[] = [
  {
    id: "1",
    name: "SOP Analyzer",
    category: "Education",
    description: "Analyzes statements of purpose for academic applications",
    icon: "📝",
    featured: true
  },
  {
    id: "2",
    name: "Break This GPT",
    category: "Security",
    description: "Tests GPT vulnerabilities and security",
    icon: "🔓",
    featured: true
  },
  // Add all your prompts here...
  {
    id: "100",
    name: "Coinflipper Game",
    category: "Games",
    description: "Simple coin flipping game",
    icon: "🪙"
  }
]

const categories = Array.from(new Set(prompts.map(p => p.category)))
const featuredPrompts = prompts.filter(p => p.featured)

export default function PromptsPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
        <div className="container mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center space-x-6">
            <h1 className="text-xl font-bold">Prompt Store</h1>
            <nav className="hidden md:flex space-x-6">
              <button className="text-sm font-medium">Discover</button>
              <button className="text-sm font-medium">Categories</button>
              <button className="text-sm font-medium">Top Charts</button>
              <button className="text-sm font-medium">Collections</button>
            </nav>
          </div>
          <div className="flex items-center space-x-4">
            <button className="p-2 rounded-full hover:bg-gray-100">
              <Search className="h-4 w-4" />
            </button>
            <button className="px-4 py-2 text-sm font-medium rounded-full bg-black text-white">
              Sign In
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-6">
        {/* Hero Section */}
        <section className="mb-12">
          <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl p-8 text-white">
            <h2 className="text-3xl font-bold mb-2">Discover Amazing GPTs</h2>
            <p className="text-lg mb-6">Browse hundreds of specialized AI assistants</p>
            <div className="relative max-w-md">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                type="text"
                placeholder="Search prompts..."
                className="w-full pl-10 pr-4 py-2 rounded-full text-gray-900 focus:outline-none"
              />
            </div>
          </div>
        </section>

        {/* Featured Section */}
        <section className="mb-12">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold">Featured Prompts</h2>
            <button className="text-blue-600 text-sm font-medium flex items-center">
              See All <ChevronRight className="h-4 w-4 ml-1" />
            </button>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {featuredPrompts.map(prompt => (
              <div key={prompt.id} className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                <div className="p-5">
                  <div className="flex items-center mb-4">
                    <span className="text-3xl mr-3">{prompt.icon}</span>
                    <div>
                      <h3 className="font-semibold">{prompt.name}</h3>
                      <p className="text-xs text-gray-500">{prompt.category}</p>
                    </div>
                  </div>
                  <p className="text-sm text-gray-600 mb-4 line-clamp-2">{prompt.description}</p>
                  <div className="flex justify-between items-center">
                    <div className="flex items-center">
                      <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
                      <span className="text-xs ml-1">Featured</span>
                    </div>
                    <button className="text-xs font-medium text-blue-600 hover:text-blue-800">
                      Get Prompt
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Categories Section */}
        <section>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold">Browse by Category</h2>
            <div className="flex items-center space-x-2">
              <button className="p-2 rounded-md hover:bg-gray-100">
                <Grid className="h-5 w-5" />
              </button>
              <button className="p-2 rounded-md hover:bg-gray-100">
                <List className="h-5 w-5" />
              </button>
            </div>
          </div>

          <div className="space-y-8">
            {categories.map(category => {
              const categoryPrompts = prompts.filter(p => p.category === category)
              return (
                <div key={category}>
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-xl font-semibold">{category}</h3>
                    <button className="text-sm text-blue-600 font-medium flex items-center">
                      See All <ChevronRight className="h-4 w-4 ml-1" />
                    </button>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    {categoryPrompts.slice(0, 4).map(prompt => (
                      <div key={prompt.id} className="bg-white rounded-lg border overflow-hidden hover:shadow-sm transition-shadow">
                        <div className="p-4">
                          <div className="flex items-center mb-3">
                            <span className="text-2xl mr-2">{prompt.icon}</span>
                            <h4 className="font-medium">{prompt.name}</h4>
                          </div>
                          <p className="text-sm text-gray-600 mb-4 line-clamp-2">{prompt.description}</p>
                          <button className="w-full py-2 text-sm font-medium rounded-md bg-gray-100 hover:bg-gray-200">
                            View Details
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )
            })}
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-gray-100 border-t mt-12">
        <div className="container mx-auto px-4 py-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div>
              <h4 className="font-semibold mb-4">The Prompt Store</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="hover:text-blue-600">About Us</a></li>
                <li><a href="#" className="hover:text-blue-600">Careers</a></li>
                <li><a href="#" className="hover:text-blue-600">News</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">For Developers</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="hover:text-blue-600">Submit a Prompt</a></li>
                <li><a href="#" className="hover:text-blue-600">Documentation</a></li>
                <li><a href="#" className="hover:text-blue-600">API</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Support</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="hover:text-blue-600">Help Center</a></li>
                <li><a href="#" className="hover:text-blue-600">Community</a></li>
                <li><a href="#" className="hover:text-blue-600">Contact Us</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Legal</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="hover:text-blue-600">Terms of Service</a></li>
                <li><a href="#" className="hover:text-blue-600">Privacy Policy</a></li>
                <li><a href="#" className="hover:text-blue-600">Cookie Policy</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t mt-8 pt-8 text-sm text-gray-500">
            © {new Date().getFullYear()} Prompt Store. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  )
}