import React, { useState, useEffect, useMemo } from 'react';
import { 
  Terminal, 
  Database, 
  Server, 
  Code2, 
  Layers, 
  Search, 
  Plus, 
  Copy, 
  Check, 
  Cpu, 
  Globe, 
  X,
  Zap,
  Hash,
  Sparkles,
  Wand2,
  Loader2,
  Lightbulb,
  Maximize2
} from 'lucide-react';

// --- Gemini API Integration ---
const generateGeminiContent = async (promptText: string, jsonMode: boolean = false) => {
  const apiKey = ""; // Injected at runtime
  
  try {
    const response = await fetch(
      `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          contents: [{ parts: [{ text: promptText }] }],
          generationConfig: jsonMode ? { responseMimeType: "application/json" } : undefined
        }),
      }
    );

    if (!response.ok) {
      throw new Error(`API call failed: ${response.statusText}`);
    }

    const data = await response.json();
    return data.candidates?.[0]?.content?.parts?.[0]?.text || "No response generated.";
  } catch (error) {
    console.error("Gemini API Error:", error);
    return "Failed to generate content. Please try again later.";
  }
};

// --- Type Definitions ---
type Category = 'All' | 'Full Stack' | 'DevOps' | 'Database' | 'Rust' | 'General';

interface Prompt {
  id: string;
  title: string;
  description: string;
  code: string;
  category: Category;
  tags: string[];
  likes: number;
}

// --- Initial Data (Seeding the Database) ---
const INITIAL_DATA: Prompt[] = [
  {
    id: '1',
    title: 'Next.js 14 Server Action Pattern',
    description: 'A robust pattern for handling form submissions with Zod validation and error handling in Next.js App Router.',
    category: 'Full Stack',
    tags: ['nextjs', 'react', 'zod', 'typescript'],
    likes: 124,
    code: `'use server'

import { z } from 'zod';
import { revalidatePath } from 'next/cache';

const schema = z.object({
  email: z.string().email(),
});

export async function subscribe(prevState: any, formData: FormData) {
  const validatedFields = schema.safeParse({
    email: formData.get('email'),
  });

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }

  // Simulate DB call
  await new Promise((resolve) => setTimeout(resolve, 500));
  
  revalidatePath('/');
  return { message: 'Subscribed successfully!' };
}`
  },
  {
    id: '2',
    title: 'Docker Multi-Stage Build',
    description: 'Optimized Dockerfile for Node.js applications to reduce image size using multi-stage builds.',
    category: 'DevOps',
    tags: ['docker', 'nodejs', 'deployment'],
    likes: 89,
    code: `# Build Stage
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Production Stage
FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
CMD ["npm", "start"]`
  },
  {
    id: '3',
    title: 'PostgreSQL Complex Join with JSONB',
    description: 'Advanced SQL query to join tables and aggregate related rows into a JSON array.',
    category: 'Database',
    tags: ['postgresql', 'sql', 'json'],
    likes: 56,
    code: `SELECT 
  u.id, 
  u.username, 
  json_agg(json_build_object(
    'order_id', o.id, 
    'total', o.total_amount,
    'date', o.created_at
  )) AS order_history
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.active = true
GROUP BY u.id
ORDER BY u.created_at DESC;`
  },
  {
    id: '4',
    title: 'Rust Async Tokio Setup',
    description: 'Basic boilerplate for a high-performance asynchronous Rust application using Tokio.',
    category: 'Rust',
    tags: ['rust', 'tokio', 'async'],
    likes: 210,
    code: `use tokio::net::TcpListener;
use tokio::io::{AsyncReadExt, AsyncWriteExt};

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let listener = TcpListener::bind("127.0.0.1:8080").await?;

    loop {
        let (mut socket, _) = listener.accept().await?;

        tokio::spawn(async move {
            let mut buf = [0; 1024];

            // In a loop, read data from the socket and write the data back.
            loop {
                let n = match socket.read(&mut buf).await {
                    Ok(n) if n == 0 => return,
                    Ok(n) => n,
                    Err(e) => {
                        eprintln!("failed to read from socket; err = {:?}", e);
                        return;
                    }
                };

                if let Err(e) = socket.write_all(&buf[0..n]).await {
                    eprintln!("failed to write to socket; err = {:?}", e);
                    return;
                }
            }
        });
    }
}`
  },
  {
    id: '5',
    title: 'Generic Debounce Function',
    description: 'A type-safe debounce utility function in TypeScript for optimizing performance.',
    category: 'General',
    tags: ['typescript', 'utility', 'performance'],
    likes: 45,
    code: `export function debounce<T extends (...args: any[]) => void>(
  func: T, 
  wait: number
): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout;

  return function(...args: Parameters<T>) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}`
  }
];

// --- Components ---

const CategoryBadge = ({ category, active }: { category: Category; active: boolean }) => {
  const icons = {
    'All': Layers,
    'Full Stack': Globe,
    'DevOps': Server,
    'Database': Database,
    'Rust': Zap,
    'General': Code2,
  };

  const Icon = icons[category];

  return (
    <div className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 cursor-pointer select-none
      ${active 
        ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/50 shadow-[0_0_15px_rgba(99,102,241,0.3)]' 
        : 'bg-slate-800/50 text-slate-400 border border-slate-700/50 hover:bg-slate-800 hover:text-slate-200 hover:border-slate-600'
      }`}
    >
      <Icon size={14} />
      <span>{category}</span>
    </div>
  );
};

const PromptCard = ({ prompt, onAnalyze }: { prompt: Prompt, onAnalyze: (prompt: Prompt, type: 'explain' | 'optimize') => void }) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(prompt.code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="group relative bg-slate-900 border border-slate-800 rounded-xl overflow-hidden hover:border-indigo-500/30 transition-all duration-300 hover:shadow-2xl hover:shadow-indigo-900/10 flex flex-col h-full">
      {/* Card Header */}
      <div className="p-5 pb-3">
        <div className="flex justify-between items-start mb-2">
          <span className={`text-xs font-bold px-2 py-1 rounded uppercase tracking-wider
            ${prompt.category === 'Rust' ? 'bg-orange-900/30 text-orange-400 border border-orange-800/50' :
              prompt.category === 'Database' ? 'bg-blue-900/30 text-blue-400 border border-blue-800/50' :
              prompt.category === 'DevOps' ? 'bg-purple-900/30 text-purple-400 border border-purple-800/50' :
              'bg-slate-800 text-slate-400 border border-slate-700'}
          `}>
            {prompt.category}
          </span>
          <div className="flex items-center text-slate-500 text-xs">
            <Hash size={12} className="mr-1" />
            {prompt.id}
          </div>
        </div>
        <h3 className="text-lg font-semibold text-slate-100 mb-1 group-hover:text-indigo-400 transition-colors">
          {prompt.title}
        </h3>
        <p className="text-slate-400 text-sm line-clamp-2 min-h-[40px]">
          {prompt.description}
        </p>
      </div>

      {/* Code Preview Block */}
      <div className="relative bg-slate-950/50 flex-grow border-y border-slate-800 group-hover:border-indigo-900/30 transition-colors">
        <div className="absolute top-2 right-2 z-10 flex gap-2">
          <button 
            onClick={handleCopy}
            aria-label="Copy code"
            className={`p-2 rounded-md transition-all duration-200 border ${
              copied 
                ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/50' 
                : 'bg-slate-800/80 text-slate-400 border-slate-700 hover:bg-indigo-600 hover:text-white hover:border-indigo-500'
            }`}
          >
            {copied ? <Check size={16} /> : <Copy size={16} />}
          </button>
        </div>
        <pre className="p-5 text-sm font-mono text-slate-300 overflow-x-auto h-48 custom-scrollbar">
          <code>{prompt.code}</code>
        </pre>
      </div>

      {/* Card Footer with AI Actions */}
      <div className="p-3 bg-slate-900 border-t border-slate-800">
        <div className="flex items-center justify-between mb-3">
          <div className="flex gap-2 flex-wrap">
            {prompt.tags.slice(0, 3).map(tag => (
              <span key={tag} className="text-xs text-slate-500">#{tag}</span>
            ))}
          </div>
        </div>
        
        <div className="grid grid-cols-2 gap-2">
          <button 
            onClick={() => onAnalyze(prompt, 'explain')}
            className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 text-slate-400 border border-slate-700 hover:bg-indigo-900/30 hover:text-indigo-300 hover:border-indigo-500/50 transition-all group/btn"
          >
            <Sparkles size={12} className="text-indigo-400 group-hover/btn:text-indigo-300" />
            <span>Explain</span>
          </button>
          <button 
            onClick={() => onAnalyze(prompt, 'optimize')}
            className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 text-slate-400 border border-slate-700 hover:bg-emerald-900/30 hover:text-emerald-300 hover:border-emerald-500/50 transition-all group/btn"
          >
            <Zap size={12} className="text-emerald-400 group-hover/btn:text-emerald-300" />
            <span>Optimize</span>
          </button>
        </div>
      </div>
    </div>
  );
};

// --- AI Result Modal ---
const AIResultModal = ({ 
  isOpen, 
  onClose, 
  title, 
  content, 
  loading 
}: { 
  isOpen: boolean; 
  onClose: () => void; 
  title: string; 
  content: string; 
  loading: boolean;
}) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-slate-900 border border-slate-800 rounded-xl w-full max-w-2xl shadow-2xl max-h-[80vh] overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
        <div className="flex justify-between items-center p-4 border-b border-slate-800 bg-slate-900">
          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
            <Sparkles size={18} className="text-indigo-500" />
            {title}
          </h2>
          <button 
            onClick={onClose} 
            aria-label="Close modal"
            className="text-slate-500 hover:text-white transition-colors"
          >
            <X size={20} />
          </button>
        </div>
        
        <div className="p-6 overflow-y-auto custom-scrollbar bg-slate-900">
          {loading ? (
            <div className="flex flex-col items-center justify-center py-12 space-y-4">
              <Loader2 size={32} className="text-indigo-500 animate-spin" />
              <p className="text-slate-400 animate-pulse">Consulting Gemini...</p>
            </div>
          ) : (
            <div className="prose prose-invert prose-sm max-w-none">
              <div className="whitespace-pre-wrap font-sans text-slate-300 leading-relaxed">
                {content}
              </div>
            </div>
          )}
        </div>

        <div className="p-4 border-t border-slate-800 bg-slate-900 flex justify-end">
          <button 
            onClick={onClose}
            className="px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition-colors text-sm"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};

// --- Main Application ---

export default function App() {
  const [prompts, setPrompts] = useState<Prompt[]>(INITIAL_DATA);
  const [activeCategory, setActiveCategory] = useState<Category>('All');
  const [searchQuery, setSearchQuery] = useState('');
  
  // Modal States
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  
  // AI Modal States
  const [isAIModalOpen, setIsAIModalOpen] = useState(false);
  const [aiModalTitle, setAiModalTitle] = useState('');
  const [aiModalContent, setAiModalContent] = useState('');
  const [aiLoading, setAiLoading] = useState(false);

  // New Prompt Form State
  const [newTitle, setNewTitle] = useState('');
  const [newDesc, setNewDesc] = useState('');
  const [newCode, setNewCode] = useState('');
  const [newCategory, setNewCategory] = useState<Category>('General');
  const [newTags, setNewTags] = useState('');
  const [autoFillLoading, setAutoFillLoading] = useState(false);

  const categories: Category[] = ['All', 'Full Stack', 'DevOps', 'Database', 'Rust', 'General'];

  // Filter Logic
  const filteredPrompts = useMemo(() => {
    return prompts.filter(p => {
      const matchesCategory = activeCategory === 'All' || p.category === activeCategory;
      const matchesSearch = 
        p.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
        p.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
        p.tags.some(t => t.toLowerCase().includes(searchQuery.toLowerCase()));
      
      return matchesCategory && matchesSearch;
    });
  }, [prompts, activeCategory, searchQuery]);

  const handleAddPrompt = (e: React.FormEvent) => {
    e.preventDefault();
    const newPrompt: Prompt = {
      id: (prompts.length + 1).toString(),
      title: newTitle,
      description: newDesc,
      code: newCode,
      category: newCategory,
      tags: newTags.split(',').map(t => t.trim()).filter(t => t),
      likes: 0
    };
    setPrompts([newPrompt, ...prompts]);
    setIsAddModalOpen(false);
    resetForm();
  };

  const resetForm = () => {
    setNewTitle('');
    setNewDesc('');
    setNewCode('');
    setNewCategory('General');
    setNewTags('');
  };

  // --- AI Handlers ---

  const handleAIAnalyze = async (prompt: Prompt, type: 'explain' | 'optimize') => {
    setIsAIModalOpen(true);
    setAiLoading(true);
    setAiModalTitle(type === 'explain' ? `Explanation: ${prompt.title}` : `Optimization: ${prompt.title}`);
    
    const query = type === 'explain' 
      ? `Explain the following code snippet simply and concisely for a developer audience. Focus on the core logic:\n\n${prompt.code}`
      : `Suggest optimizations, improvements, or best practices for the following code snippet. If it is already optimized, briefly explain why. Keep it concise:\n\n${prompt.code}`;

    const result = await generateGeminiContent(query, false);
    setAiModalContent(result);
    setAiLoading(false);
  };

  const handleAutoFill = async () => {
    if (!newCode.trim()) return;
    
    setAutoFillLoading(true);
    // Explicitly request JSON structure
    const query = `Analyze the following code snippet. Provide a concise Title, a brief Description, the best fitting Category from ['Full Stack', 'DevOps', 'Database', 'Rust', 'General'], and a list of 3-5 relevant Tags. \n\nCode:\n${newCode}\n\nRespond with valid JSON matching this schema: { "title": "string", "description": "string", "category": "string", "tags": ["string"] }`;
    
    try {
      // Pass true for jsonMode
      const result = await generateGeminiContent(query, true);
      const parsed = JSON.parse(result);
      
      setNewTitle(parsed.title || '');
      setNewDesc(parsed.description || '');
      if (categories.includes(parsed.category)) {
        setNewCategory(parsed.category);
      }
      setNewTags(parsed.tags ? parsed.tags.join(', ') : '');
    } catch (e) {
      console.error("Failed to parse auto-fill response", e);
      // Fallback: Just let the user fill it manually, or show a simple toast in production
    } finally {
      setAutoFillLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-indigo-500/30">
      
      {/* Navigation Bar */}
      <nav className="sticky top-0 z-40 w-full backdrop-blur-md bg-slate-950/80 border-b border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-3">
              <div className="bg-indigo-600 p-2 rounded-lg shadow-lg shadow-indigo-500/20">
                <Terminal size={20} className="text-white" />
              </div>
              <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">
                CodePrompt<span className="text-indigo-500">.pro</span>
              </span>
            </div>
            
            <div className="hidden md:flex items-center gap-6">
              <a href="#" className="text-sm font-medium hover:text-indigo-400 transition-colors">Documentation</a>
              <a href="#" className="text-sm font-medium hover:text-indigo-400 transition-colors">API</a>
              <button 
                onClick={() => setIsAddModalOpen(true)}
                className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all shadow-lg shadow-indigo-900/20 hover:shadow-indigo-500/20"
              >
                <Plus size={16} />
                Contribute
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/20 via-slate-950 to-slate-950 pointer-events-none"></div>
        <div className="max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8 relative z-10 text-center">
          <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-white">
            The Developer's <span className="text-indigo-500">Second Brain</span>
          </h1>
          <p className="max-w-2xl mx-auto text-lg text-slate-400 mb-8">
            Curated, high-performance code snippets for the modern full-stack ecosystem. 
            Stop rewriting boilerplate. Start shipping.
          </p>
          
          {/* Search Bar */}
          <div className="max-w-2xl mx-auto relative group">
            <div className="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl opacity-30 group-hover:opacity-50 blur transition duration-200"></div>
            <div className="relative flex items-center bg-slate-900 rounded-xl border border-slate-800 shadow-xl">
              <Search className="ml-4 text-slate-500" size={20} />
              <input 
                type="text" 
                placeholder="Search prompts, tags, or categories..." 
                className="w-full bg-transparent border-none focus:ring-0 text-slate-200 placeholder-slate-500 py-4 px-4"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <div className="hidden sm:flex mr-2">
                <span className="px-2 py-1 text-xs font-mono text-slate-500 border border-slate-700 rounded bg-slate-800">CMD+K</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content Area */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        {/* Category Tabs */}
        <div className="flex flex-wrap gap-3 mb-8 justify-center sm:justify-start">
          {categories.map((cat) => (
            <div key={cat} onClick={() => setActiveCategory(cat)}>
              <CategoryBadge category={cat} active={activeCategory === cat} />
            </div>
          ))}
        </div>

        {/* Results Info */}
        <div className="flex justify-between items-center mb-6 text-slate-400 text-sm">
          <p>Showing {filteredPrompts.length} results</p>
          <div className="flex items-center gap-2">
            <span>Sort by:</span>
            <select className="bg-slate-900 border border-slate-700 rounded px-2 py-1 text-slate-300 focus:outline-none focus:border-indigo-500">
              <option>Relevance</option>
              <option>Newest</option>
              <option>Most Liked</option>
            </select>
          </div>
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 pb-20">
          {filteredPrompts.length > 0 ? (
            filteredPrompts.map((prompt) => (
              <PromptCard key={prompt.id} prompt={prompt} onAnalyze={handleAIAnalyze} />
            ))
          ) : (
            <div className="col-span-full py-20 text-center text-slate-500">
              <Code2 size={48} className="mx-auto mb-4 opacity-50" />
              <p className="text-xl font-medium text-slate-400">No prompts found</p>
              <p>Try adjusting your search or category filters.</p>
              <button 
                onClick={() => {setSearchQuery(''); setActiveCategory('All');}}
                className="mt-4 text-indigo-400 hover:text-indigo-300 hover:underline"
              >
                Clear all filters
              </button>
            </div>
          )}
        </div>
      </main>

      {/* Add Prompt Modal */}
      {isAddModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm">
          <div className="bg-slate-900 border border-slate-800 rounded-xl w-full max-w-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-6 border-b border-slate-800">
              <h2 className="text-xl font-semibold text-white flex items-center gap-2">
                <Plus size={20} className="text-indigo-500" />
                Add New Prompt
              </h2>
              <button 
                onClick={() => setIsAddModalOpen(false)}
                aria-label="Close modal"
                className="text-slate-500 hover:text-white transition-colors"
              >
                <X size={20} />
              </button>
            </div>
            
            <form onSubmit={handleAddPrompt} className="p-6 space-y-4">
              
              {/* Code Snippet First for Auto-Fill flow */}
              <div>
                <div className="flex justify-between items-center mb-1">
                  <label className="block text-sm font-medium text-slate-400">Code Snippet</label>
                  <button
                    type="button"
                    onClick={handleAutoFill}
                    disabled={!newCode || autoFillLoading}
                    className={`flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-md border transition-all
                      ${autoFillLoading 
                        ? 'bg-slate-800 text-slate-500 border-slate-700 cursor-wait'
                        : 'bg-indigo-900/20 text-indigo-300 border-indigo-500/30 hover:bg-indigo-900/40 hover:border-indigo-500/50'
                      }`}
                  >
                    {autoFillLoading ? <Loader2 size={12} className="animate-spin" /> : <Wand2 size={12} />}
                    {autoFillLoading ? 'Analyzing...' : 'Magic Fill'}
                  </button>
                </div>
                <textarea 
                  required
                  value={newCode}
                  onChange={(e) => setNewCode(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 font-mono text-sm text-slate-300 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 h-48 custom-scrollbar placeholder:text-slate-600"
                  placeholder="// Paste your code here and click 'Magic Fill' to auto-generate details..."
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-400 mb-1">Title</label>
                  <input 
                    required
                    type="text" 
                    value={newTitle}
                    onChange={(e) => setNewTitle(e.target.value)}
                    className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
                    placeholder="e.g. Async Data Fetching"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-400 mb-1">Category</label>
                  <select 
                    value={newCategory}
                    onChange={(e) => setNewCategory(e.target.value as Category)}
                    className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
                  >
                    {categories.filter(c => c !== 'All').map(c => <option key={c} value={c}>{c}</option>)}
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-400 mb-1">Description</label>
                <textarea 
                  required
                  value={newDesc}
                  onChange={(e) => setNewDesc(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 h-20"
                  placeholder="Briefly explain what this code does..."
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-400 mb-1">Tags (comma separated)</label>
                <input 
                  type="text" 
                  value={newTags}
                  onChange={(e) => setNewTags(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
                  placeholder="react, hooks, performance"
                />
              </div>

              <div className="pt-4 flex justify-end gap-3">
                <button 
                  type="button"
                  onClick={() => setIsAddModalOpen(false)}
                  className="px-4 py-2 text-slate-400 hover:text-white font-medium transition-colors"
                >
                  Cancel
                </button>
                <button 
                  type="submit"
                  className="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-2 rounded-lg font-medium transition-all shadow-lg shadow-indigo-900/20"
                >
                  Submit Prompt
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* AI Result Modal */}
      <AIResultModal 
        isOpen={isAIModalOpen}
        onClose={() => setIsAIModalOpen(false)}
        title={aiModalTitle}
        content={aiModalContent}
        loading={aiLoading}
      />

      {/* Footer */}
      <footer className="border-t border-slate-800 bg-slate-950 py-12 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex items-center gap-2">
            <Cpu size={20} className="text-slate-600" />
            <span className="text-slate-500 font-medium">CodePrompt.pro &copy; 2024</span>
          </div>
          <div className="flex gap-8 text-sm text-slate-500">
            <a href="#" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400 transition-colors">Privacy</a>
            <a href="#" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400 transition-colors">Terms</a>
            <a href="#" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400 transition-colors">GitHub</a>
            <a href="#" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400 transition-colors">Twitter</a>
          </div>
        </div>
      </footer>

      {/* Custom Scrollbar Styles */}
      <style>{`
        .custom-scrollbar::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: #0f172a;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: #334155;
          border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background: #475569;
        }
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        .fade-in {
          animation: fadeIn 0.2s ease-out forwards;
        }
      `}</style>
    </div>
  );
}