/**
 * Feedback Footer Component
 *
 * Fixed footer for gathering user feedback on admin pages.
 * Lightweight feedback prompt for admin pages.
 *
 * @since 0.1.0
 */

import React, { useState } from 'react';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';

const FeedbackFooter = ({ screenId = '' }) => {
  const [feedback, setFeedback] = useState(null);
  const [showThankYou, setShowThankYou] = useState(false);

  const handleFeedback = async (type) => {
    if (feedback !== null) {
      return; // Already submitted
    }

    try {
      // Send feedback via API
      await apiFetch({
        path: '/prorank-seo/v1/feedback',
        method: 'POST',
        data: {
          type,
          screen_id: screenId,
        },
      });

      setFeedback(type);

      if (type === 'positive') {
        setShowThankYou(true);
        setTimeout(() => setShowThankYou(false), 3000);
      }

    } catch (error) {
      // Silently fail - feedback is not critical
      // Error is already handled by the API
    }
  };

  const supportUrl = window?.proRankSEO?.urls?.support;

  return (
    <div className="pr:fixed pr:bottom-0 pr:right-0 pr:z-30 pr:p-4 pr:bg-white pr:border-t pr:border-gray-200 pr:shadow-xs pr:w-full pr:md:w-auto pr:md:rounded-tl-lg">
      <div className="pr:flex pr:items-center pr:space-x-4">
        <span className="pr:text-sm pr:text-gray-600">{__('Was this page helpful?', 'prorank-seo')}</span>

        <div className="pr:flex pr:items-center pr:space-x-2">
          <button
            onClick={() => handleFeedback('positive')}
            disabled={feedback !== null}
            className={`
                            pr:inline-flex pr:items-center pr:justify-center pr:w-8 pr:h-8 pr:rounded-full
                            pr:transition-all pr:duration-150 pr:ease-in-out
                            ${
                              feedback === 'positive'
                                ? 'pr:bg-green-100 pr:text-green-600'
                                : 'pr:hover:bg-gray-100 pr:text-gray-500 pr:hover:text-gray-700'
                            }
                            ${
                              feedback !== null ? 'pr:cursor-not-allowed pr:opacity-60' : 'pr:cursor-pointer'
                            }
                            pr:focus:outline-hidden pr:focus:ring-2 pr:focus:ring-offset-2 pr:focus:ring-indigo-500
                        `}
            aria-label={__('Yes, this page was helpful', 'prorank-seo')}
          >
            <svg
              className="pr:w-5 pr:h-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"
              />
            </svg>
          </button>

          <button
            onClick={() => handleFeedback('negative')}
            disabled={feedback !== null}
            className={`
                            pr:inline-flex pr:items-center pr:justify-center pr:w-8 pr:h-8 pr:rounded-full
                            pr:transition-all pr:duration-150 pr:ease-in-out
                            ${
                              feedback === 'negative'
                                ? 'pr:bg-red-100 pr:text-red-600'
                                : 'pr:hover:bg-gray-100 pr:text-gray-500 pr:hover:text-gray-700'
                            }
                            ${
                              feedback !== null ? 'pr:cursor-not-allowed pr:opacity-60' : 'pr:cursor-pointer'
                            }
                            pr:focus:outline-hidden pr:focus:ring-2 pr:focus:ring-offset-2 pr:focus:ring-indigo-500
                        `}
            aria-label={__('No, I have feedback', 'prorank-seo')}
          >
            <svg
              className="pr:w-5 pr:h-5 pr:transform pr:rotate-180"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"
              />
            </svg>
          </button>
        </div>

        {showThankYou && (
          <span className="pr:text-sm pr:text-green-600 pr:animate-fade-in">
            {__('Thanks!', 'prorank-seo')}
          </span>
        )}

        {feedback === 'negative' &&
          (typeof supportUrl === 'string' && supportUrl ? (
            <a
              href={supportUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="pr:text-sm pr:text-indigo-600 pr:hover:text-indigo-500 pr:underline pr:focus:outline-hidden pr:focus:ring-2 pr:focus:ring-offset-2 pr:focus:ring-indigo-500"
            >
              {__('Contact Support', 'prorank-seo')}
            </a>
          ) : (
            <button
              type="button"
              disabled
              className="pr:text-sm pr:text-indigo-600 pr:hover:text-indigo-500 pr:underline pr:focus:outline-hidden pr:focus:ring-2 pr:focus:ring-offset-2 pr:focus:ring-indigo-500 pr:opacity-60 pr:cursor-not-allowed"
              aria-disabled="true"
            >
              {__('Contact Support', 'prorank-seo')}
            </button>
          ))}
      </div>
    </div>
  );
};

export default FeedbackFooter;