/**
 * Sitemaps Module Card Component
 *
 * Module card for display on Technical SEO section overview page
 *
 * @package
 * @since   0.1.0
 */

import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ArchiveBoxIcon } from '@heroicons/react/24/outline';
import apiFetch from '@wordpress/api-fetch';
import { Button, Toggle, Card } from '../../../components/ui';

/**
 * Sitemaps Module Card
 *
 * @param {Object  } props             Component props
 * @param {Function} props.onConfigure Callback when configure button is clicked
 * @param {boolean } props.isActive    Whether the module is currently active
 * @param {Function} props.onToggle    Callback when module is toggled
 * @return {JSX.Element} Module card component
 */
const SitemapsModuleCard = ({ onConfigure, isActive = false, onToggle }) => {
  const [isToggling, setIsToggling] = useState(false);

  const handleToggle = async (checked) => {
    setIsToggling(true);

    try {
      await apiFetch({
        path: '/prorank-seo/v1/modules/sitemaps/toggle',
        method: 'POST',
        data: { enabled: checked },
      });

      if (onToggle) {
        onToggle(checked);
      }
    } catch (error) {
    } finally {
      setIsToggling(false);
    }
  };

  return (
    <Card className="prorank-module-card prorank-module-card--sitemaps" size="small">
      <div className="pr:border-b pr:border-gray-200 pr:p-4 pr:transition-all pr:duration-300">
        <div className="pr:flex pr:items-center pr:transition-all pr:duration-300">
          <div>
            <ArchiveBoxIcon className="pr:w-6 pr:h-6 pr:transition-all pr:duration-300" />
          </div>
          <div className="pr:flex-1 pr:ml-3 pr:transition-all pr:duration-300">
            <h3 className="prorank-module-card__title">{__('XML Sitemaps', 'prorank-seo')}</h3>
          </div>
          <div>
            <div className="prorank-module-card__badges">
              <span className="prorank-tier-badge prorank-tier-badge--free">
                {__('Free', 'prorank-seo')}
              </span>
            </div>
          </div>
        </div>
      </div>

      <div className="pr:p-4 pr:transition-all pr:duration-300">
        <p className="prorank-module-card__description">
          {__(
            'Automatic XML sitemap generation for better search engine discovery and crawling.',
            'prorank-seo'
          )}
        </p>

        <div className="prorank-module-card__features">
          <h4>{__('Features:', 'prorank-seo')}</h4>
          <ul>
            <li>{__('Post & page sitemaps', 'prorank-seo')}</li>
            <li>{__('Category & tag sitemaps', 'prorank-seo')}</li>
            <li>{__('Image sitemaps', 'prorank-seo')}</li>
          </ul>
        </div>

        <div className="pr:flex pr:transition-all pr:duration-300" justify="space-between" align="center" className="prorank-module-card__actions">
          <div>
            <Toggle
              label={__('Enable module', 'prorank-seo')}
              checked={isActive === true}
              onChange={(checked) => handleToggle(checked)}
              disabled={isToggling === true}
            />
          </div>
          <div>
            <Button
              variant="secondary"
              onClick={onConfigure}
              disabled={!isActive}
            >
              {__('Configure', 'prorank-seo')}
            </Button>
          </div>
        </div>

        {isActive === true && (
          <div className="prorank-module-card__status pr:flex pr:items-center pr:gap-2 pr:transition-all pr:duration-300">
            <span className="pr:text-green-600">✓</span>
            <span>{__('Module is active', 'prorank-seo')}</span>
          </div>
        )}
      </div>
    </Card>
  );
};

export default SitemapsModuleCard;