Develop AI Problem Solving System - 30/07/2026 09:02 EDT

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>
);
}