import { useState } from ‘react’;
import { Input } from “@/components/ui/input”;
import { Button } from “@/components/ui/button”;
import { Card, CardContent } from “@/components/ui/card”;
import { Loader } from “lucide-react”;

export default function ChotatsuTaro() {
const [question, setQuestion] = useState(“”);
const [answer, setAnswer] = useState(“”);
const [loading, setLoading] = useState(false);

const handleAsk = async () => {
if (!question.trim()) return;
setLoading(true);
setAnswer(“”);

try {
const res = await fetch(“/api/chat”, {
method: “POST”,
headers: { “Content-Type”: “application/json” },
body: JSON.stringify({ message: question })
});
const data = await res.json();
setAnswer(data.reply);
} catch (err) {
setAnswer(“エラーが発生しました。もう一度お試しください。🔧”);
} finally {
setLoading(false);
}
};

return (
<div className=”max-w-xl mx-auto mt-10 p-4″>
<h1 className=”text-2xl font-bold mb-4″>調達太郎 🤖 入札なんでも相談チャット</h1>
<p className=”mb-6 text-gray-700″>
官公庁の入札・契約・書類について分からないことがあったら、調達太郎に聞いてみてください。
やさしく・正確にお答えします！
</p>

<div className=”flex gap-2 mb-4″>
<Input
placeholder=”例：除草の案件に資格は必要ですか？”
value={question}
onChange={(e) => setQuestion(e.target.value)}
/>
<Button onClick={handleAsk} disabled={loading}>
{loading ? <Loader className=”animate-spin” /> : “質問する”}
</Button>
</div>

{answer && (
<Card>
<CardContent className=”p-4 whitespace-pre-wrap”>
{answer}
</CardContent>
</Card>
)}
</div>
);
}