import React, { useState, useEffect } from "react";
import { postSeo, getSeo, putSeo } from "../../features/SEO/seo.js";
import { useDispatch } from "react-redux";
import { getConfigNames } from "../../features/configmasterPage/configmasterPage.js";
import { message } from 'antd';
import { RiSettings4Line } from 'react-icons/ri';
import "../Styles/SeoForm.scss"

const SeoForm = () => {
  const dispatch = useDispatch();
  const [showForm, setShowForm] = useState(true);
  const [detailSections, setDetailSections] = useState([{}]);

  const [formData, setFormData] = useState({
    pageName: "",
    metaTitle: "",
    metaDescription: "",
    keywords: "",
    imageAltText: "",
  });
  const [allpagesData, setAllpagesData] = useState([]);
  const [isExistingData, setIsExistingData] = useState(false);

  useEffect(() => {
    getPagesName();
  }, []);

  const getPagesName = async () => {
    let Res = await dispatch(getConfigNames({ TypeName: "SEO" })).unwrap();
    if (Res?.data?.statusCode == 1) {
      setAllpagesData(Res?.data?.data);
    }
  };
  const handleChange = async (e) => {
    const { name, value } = e.target;

    // If page is selected, fetch existing SEO data
    if (name === 'pageName') {
      console.log('Page selected:', value);
      if (value) {
        try {
          console.log('Fetching SEO data for PageId:', value);
          const response = await dispatch(getSeo({ PageId: value })).unwrap();
          console.log('SEO API Response:', response);

          if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
            const seoData = response.data.data[0];
            console.log('Found existing SEO data:', seoData);
            setFormData({
              pageName: value,
              metaTitle: seoData.MetaTitle || '',
              metaDescription: seoData.MetaDesc || '',
              keywords: seoData.Keywords || '',
              imageAltText: seoData.ImgAltText || '',
            });
            setIsExistingData(true);
          } else {
            console.log('No existing SEO data found');
            setFormData({
              pageName: value,
              metaTitle: '',
              metaDescription: '',
              keywords: '',
              imageAltText: '',
            });
            setIsExistingData(false);
          }
        } catch (error) {
          console.error('Error fetching SEO data:', error);
          setFormData({
            pageName: value,
            metaTitle: '',
            metaDescription: '',
            keywords: '',
            imageAltText: '',
          });
          setIsExistingData(false);
        }
      } else {
        setFormData({
          pageName: '',
          metaTitle: '',
          metaDescription: '',
          keywords: '',
          imageAltText: '',
        });
        setIsExistingData(false);
      }
    } else {
      setFormData({ ...formData, [name]: value });
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!formData.pageName) {
      message.error("Please select a page");
      return;
    }

    const postData = {
      PageId: formData.pageName,
      MetaTitle: formData.metaTitle,
      MetaDesc: formData.metaDescription,
      Keywords: formData.keywords,
      ImgAltText: formData.imageAltText,
      ImageUrl: "",
      ActiveStatus: "A",
      CreatedBy: 1,
    };

    try {
      if (isExistingData) {
        await dispatch(putSeo(postData)).unwrap();
        message.success("SEO Settings updated successfully!");
      } else {
        await dispatch(postSeo(postData)).unwrap();
        message.success("SEO Settings created successfully!");
        setIsExistingData(true);
      }
    } catch (error) {
      message.error("Failed to save SEO settings");
    }
  };

  return (
    <div className='seo-form-master'>
      <div className='seo-form-header'>
        <div className='seo-form-header-content'>
          <h2>SEO Management</h2>
          <p>Configure SEO settings for pages and content.</p>
        </div>
      </div>

      <div className='seo-form-layout'>
        <div className='seo-form-left'>
          <div className='seo-form-container'>
            <h3>SEO Configuration</h3>
            <form onSubmit={handleSubmit}>
              <div className='seo-form-field'>
                <label>Select Page *</label>
                <select
                  name="pageName"
                  value={formData.pageName}
                  onChange={handleChange}
                  required
                >
                  <option value="">Choose a page...</option>
                  {allpagesData?.map((item) => (
                    <option key={item.ConfigId} value={item.ConfigId}>
                      {item.ConfigName}
                    </option>
                  ))}
                </select>
              </div>

              <div className='seo-form-field'>
                <label>Meta Title</label>
                <input
                  type="text"
                  name="metaTitle"
                  value={formData.metaTitle}
                  onChange={handleChange}
                  placeholder="Enter meta title..."
                />
              </div>

              <div className='seo-form-field'>
                <label>Meta Description</label>
                <textarea
                  name="metaDescription"
                  value={formData.metaDescription}
                  onChange={handleChange}
                  rows="4"
                  placeholder="Enter meta description..."
                />
              </div>

              <div className='seo-form-field'>
                <label>Keywords</label>
                <input
                  type="text"
                  name="keywords"
                  value={formData.keywords}
                  onChange={handleChange}
                  placeholder="Enter keywords separated by commas..."
                />
              </div>

              <div className='seo-form-field'>
                <label>Image Alt Text</label>
                <input
                  type="text"
                  name="imageAltText"
                  value={formData.imageAltText}
                  onChange={handleChange}
                  placeholder="Enter image alt text..."
                />
              </div>

              <div className='seo-form-actions'>
                <button type="submit" className='seo-form-btn-primary'>
                  {isExistingData ? 'Update SEO Settings' : 'Create SEO Settings'}
                </button>
                <button type="button" className='seo-form-btn-secondary' onClick={() => setShowForm(false)}>
                  Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SeoForm;