import { useState } from "react";
import { RiQuestionnaireFill } from "react-icons/ri";
import { useSession } from "next-auth/react";
import { toast } from "react-toastify";

interface Question {
  id: number;
  question: string;
  profile: {
    full_name: string;
  };
}

interface FAQSectionProps {
  productId: string;
  initialQuestions?: Question[];
}

const FAQSection = ({ productId, initialQuestions = [] }: FAQSectionProps) => {
  const { data: session } = useSession();
  const [questions, setQuestions] = useState<Question[]>(initialQuestions);
  const [newQuestion, setNewQuestion] = useState("");

  const handleAskQuestion = async () => {
    if (!newQuestion.trim()) {
      toast.error("Please enter a question before submitting.");
      return;
    }
    
    try {
      const response = await fetch("/api/question", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          variant_id: productId,
          question: newQuestion,
        }),
      });

      if (response.status === 200) {
        const data = await response.json();
        setQuestions(current => [...current, data.question]);
        setNewQuestion("");
        toast.success("Your question has been submitted successfully.");
      } else {
        throw new Error("Failed to submit question");
      }
    } catch (error) {
      console.error('Error posting question:', error);
      toast.error("Failed to submit your question. Please try again later.");
    }
  };

  return (
    <div className="bg-white p-6 md:p-10 rounded-lg">
      <h2 className="text-2xl md:text-3xl font-bold text-gray-800 flex items-center gap-2 mb-4">
       Questions & Answers
      </h2>
      <div className="space-y-4">
        {questions.map((q, i) => (
          <div
            key={i}
            className="bg-slate-50 border border-slate-200 p-4 rounded-md shadow-sm"
          >
            <p className="font-semibold text-gray-800">
              {q.profile.full_name} asks:
            </p>
            <p className="text-gray-700">{q.question}</p>
          </div>
        ))}
        {session?.user ? (
          <div className="mt-6">
            <textarea
              value={newQuestion}
              onChange={(e) => setNewQuestion(e.target.value)}
              placeholder="Ask a question..."
              className="w-full border border-gray-300 focus:border-primary focus:ring focus:ring-blue-200 rounded-md p-3 resize-none transition"
              rows={3}
            />
            <button
              onClick={handleAskQuestion}
              className="mt-3 bg-primary hover:bg-secondary text-white font-medium px-6 py-3 rounded-md shadow-sm transition"
            >
              Submit Question
            </button>
          </div>
        ) : (
          <p className="mt-4 text-red-500 font-medium">
            Please login first to ask questions.
          </p>
        )}
      </div>
    </div>
  );
};

export default FAQSection;