import React, { useState, useEffect } from "react";
import { Box, TextField, Typography, Collapse, CircularProgress } from "@mui/material";
import axios from "axios";


const Faq = ({ showFAQ }) => {
  const [faqSearch, setFaqSearch] = useState("");
  const [filteredFaqs, setFilteredFaqs] = useState([]);
  const [faqs, setFaqs] = useState([]);
  const [loading, setLoading] = useState(true); // Ajout d'un état de chargement
  const [error, setError] = useState(null); // Ajout d'un état d'erreur

  useEffect(() => {
    const fetchFaqs = async () => {
      try {
        // Requête pour récupérer les FAQs depuis l'API WordPress
        const response = await axios.get(
          "https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/116?_fields=acf.faq.faq_list"
        );

        const faqList = response.data.acf?.faq?.faq_list; // Chemin vers le répéteur dans l'API
        if (faqList && Array.isArray(faqList)) {
          const formattedFaqs = faqList.map((item) => ({
            question: item.question || "Question non définie",
            answer: item.answer || "Réponse non définie",
          }));

          setFaqs(formattedFaqs);
          setFilteredFaqs(formattedFaqs); // Initialiser la liste filtrée
        } else {
          console.warn("Aucune FAQ trouvée dans le champ répéteur.");
          setError("Aucune FAQ disponible pour le moment.");
        }
      } catch (error) {
        console.error("Erreur lors de la récupération des FAQs :", error);
        setError("Impossible de récupérer les FAQs. Veuillez réessayer plus tard.");
      } finally {
        setLoading(false); // Désactiver le chargement
      }
    };

    fetchFaqs();
  }, []);

  const handleSearch = (e) => {
    const searchTerm = e.target.value.toLowerCase();
    setFaqSearch(searchTerm);

    const filtered = faqs.filter((faq) =>
      faq.question.toLowerCase().includes(searchTerm)
    );
    setFilteredFaqs(filtered);
  };

  return (
    <Collapse in={showFAQ}>
      <Box
        sx={{
          padding: "40px 20px",
          backgroundColor: "#f9f9f9",
          borderRadius: 2,
          boxShadow: 2,
          mt: 4,
        }}
      >
        <Typography
          variant="h3"
          sx={{
            fontWeight: "bold",
            mb: 4,
            textAlign: "center",
            color: "#0e467f",
          }}
        >
          FAQ
        </Typography>

        {loading ? (
          <Box sx={{ textAlign: "center", py: 4 }}>
            <CircularProgress />
          </Box>
        ) : error ? (
          <Typography variant="body1" sx={{ color: "red", textAlign: "center" }}>
            {error}
          </Typography>
        ) : (
          <>
            {/* Barre de recherche */}
            <TextField
              placeholder="Rechercher dans la FAQ..."
              fullWidth
              variant="outlined"
              value={faqSearch}
              onChange={handleSearch}
              sx={{
                mb: 4,
              }}
            />

            {/* Liste des FAQs */}
            <Box>
              {filteredFaqs.length > 0 ? (
                filteredFaqs.map((faq, index) => (
                  <Box key={index} sx={{ mb: 3 }}>
                    <Typography variant="h4" sx={{ fontWeight: "bold" }}>
                      {faq.question}
                    </Typography>
                    <Typography
                      variant="body1"
                      sx={{ color: "#666" }}
                      dangerouslySetInnerHTML={{ __html: faq.answer }} // Si la réponse contient du HTML
                    />
                  </Box>
                ))
              ) : (
                <Typography
                  variant="body1"
                  sx={{ color: "#999", textAlign: "center" }}
                >
                  Aucun résultat trouvé. Essayez un autre mot-clé.
                </Typography>
              )}
            </Box>
          </>
        )}
      </Box>
    </Collapse>
  );
};

export default Faq;