pages/api/generate.js

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { prompt } = req.body;

  const responses = [
    {
      code: `import React, { useState } from 'react';\n\nexport default function TodoApp() {\n  const [todos, setTodos] = useState([]);\n  const [input, setInput] = useState('');\n\n  const addTodo = () => {\n    if (input.trim()) {\n      setTodos([...todos, { id: Date.now(), text: input, done: false }]);\n      setInput('');\n    }\n  };\n\n  return (\n    <div className="max-w-md mx-auto p-6">\n      <h1 className="text-2xl font-bold mb-4">Todo App</h1>\n      <div className="flex gap-2 mb-4">\n        <input\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          className="flex-1 px-3 py-2 border rounded"\n          placeholder="Add a task..."\n        />\n        <button onClick={addTodo} className="px-4 py-2 bg-blue-500 text-white rounded">\n          Add\n        </button>\n      </div>\n      {todos.map(todo => (\n        <div key={todo.id} className="flex items-center gap-2 p-2 border-b">\n          <input type="checkbox" checked={todo.done} />\n          <span>{todo.text}</span>\n        </div>\n      ))}\n    </div>\n  );\n}`,
      explanation: "I've created a Todo application with add functionality, state management, and a clean UI. The app uses React hooks for state and includes input validation."
    },
    {
      code: `import React, { useState, useEffect } from 'react';\n\nexport default function WeatherDashboard() {\n  const [city, setCity] = useState('San Francisco');\n  const [weather, setWeather] = useState(null);\n\n  useEffect(() => {\n    // Simulated weather data\n    setWeather({\n      temp: 72,\n      condition: 'Sunny',\n      humidity: 45,\n      wind: 12\n    });\n  }, [city]);\n\n  return (\n    <div className="max-w-lg mx-auto p-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl text-white">\n      <h1 className="text-xl font-semibold mb-4">Weather Dashboard</h1>\n      <div className="text-6xl font-light mb-2">{weather?.temp}°</div>\n      <div className="text-lg opacity-90">{weather?.condition}</div>\n      <div className="flex gap-6 mt-6 text-sm opacity-80">\n        <span>💧 {weather?.humidity}%</span>\n        <span>💨 {weather?.wind} mph</span>\n      </div>\n    </div>\n  );\n}`,
      explanation: "Built a weather dashboard with a gradient design, simulated data fetching, and responsive layout. Features temperature display, conditions, and atmospheric data."
    },
    {
      code: `import React, { useState } from 'react';\n\nexport default function Dashboard() {\n  const [activeTab, setActiveTab] = useState('overview');\n  const stats = [\n    { label: 'Revenue', value: '$48,200', change: '+12.5%' },\n    { label: 'Users', value: '2,847', change: '+8.2%' },\n    { label: 'Orders', value: '1,423', change: '+23.1%' },\n  ];\n\n  return (\n    <div className="min-h-screen bg-gray-50 p-8">\n      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>\n      <div className="grid grid-cols-3 gap-4 mb-8">\n        {stats.map(stat => (\n          <div key={stat.label} className="bg-white p-6 rounded-xl shadow-sm">\n            <div className="text-sm text-gray-500">{stat.label}</div>\n            <div className="text-2xl font-bold mt-1">{stat.value}</div>\n            <div className="text-green-500 text-sm mt-1">{stat.change}</div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}`,
      explanation: "Created an analytics dashboard with stat cards, tab navigation, and a clean layout. Features KPI tracking with percentage changes and responsive grid."
    }
  ];

  const randomResponse = responses[Math.floor(Math.random() * responses.length)];

  // Simulate AI processing delay
  await new Promise(resolve => setTimeout(resolve, 1500));

  res.status(200).json({
    success: true,
    prompt,
    ...randomResponse
  });
}