import React, { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; export default function AIProblemManager() { const [problems, setProblems] = useState([]); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const addProblem = () => { if (!title) return; const newProblem = { id: Date.now(), title, description, status: "Pending", solution: "", }; setProblems([newProblem, ...problems]); setTitle(""); setDescription(""); }; const solveWithAI = async (id) => { const updated = problems.map((p) => { if (p.id === id) { return { ...p, solution: "AI is thinking...", }; } return p; }); setProblems(updated); // Fake AI response (replace with real API call) setTimeout(() => { const solved = problems.map((p) => { if (p.id === id) { return { ...p, status: "Solved", solution: "This is an AI-generated solution based on the problem description.", }; } return p; }); setProblems(solved); }, 1500); }; return ( <div className="p-6 max-w-3xl mx-auto"> <h1 className="text-2xl font-bold mb-4">AI Problem Solving System</h1> <Card className="mb-4"> <CardContent className="p-4 space-y-2"> <Input placeholder="Problem Title" value={title} onChange={(e) => setTitle(e.target.value)} /> <Textarea placeholder="Describe the problem" value={description} onChange={(e) => setDescription(e.target.value)} /> <Button onClick={addProblem}>Add Problem</Button> </CardContent> </Card> <div className="space-y-4"> {problems.map((p) => ( <Card key={p.id}> <CardContent className="p-4"> <h2 className="text-xl font-semibold">{p.title}</h2> <p className="text-sm text-gray-600">{p.description}</p> <p className="mt-2">Status: {p.status}</p> <p className="mt-2 text-green-600">{p.solution}</p> <Button className="mt-2" onClick={() => solveWithAI(p.id)}> Solve with AI </Button> </CardContent> </Card> ))} </div> </div> ); }