import React, { useEffect, useRef } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAddressBook, faArrowsLeftRight, faArrowsRotate, faAward, faBarsStaggered, faBell, faBolt, faBowlFood, faBoxesStacked, faBrain, faBullhorn, faBurger, faCamera, faCartShopping, faCashRegister, faChalkboardUser, faChartColumn, faChartLine, faChartPie, faChartSimple, faCircleCheck, faCirclePlay, faCircleQuestion, faClockRotateLeft, faClone, faCloud, faCloudArrowUp, faCode, faCodeBranch, faCommentSms, faComments, faCreditCard, faCrop, faCrown, faDoorOpen, faEnvelope, faEnvelopeCircleCheck, faEnvelopeOpenText, faEnvelopesBulk, faEye, faFaceSmile, faFileExcel, faFileInvoice, faFilePdf, faFilePen, faFloppyDisk, faFolderOpen, faGauge, faGlobe, faHandHoldingHeart, faHandshake, faHotel, faHourglassHalf, faHouseChimney, faIdCard, faImage, faImages, faKey, faLanguage, faLayerGroup, faLightbulb, faLink, faListCheck, faListUl, faLock, faMagnifyingGlass, faMapLocationDot, faMedal, faMicrophone, faMugSaucer, faMusic, faNewspaper, faPalette, faPaperPlane, faPenNib, faPenToSquare, faPercent, faPersonRunning, faPills, faPlaneDeparture, faPlug, faPuzzlePiece, faRankingStar, faRepeat, faRightLeft, faRightToBracket, faRing, faRocket, faRotate, faRoute, faSchool, faShareNodes, faShieldHalved, faShirt, faSignature, faSliders, faSquarePollVertical, faStamp, faStethoscope, faStore, faSwatchbook, faTable, faTableCells, faTableCellsLarge, faTableColumns, faTableList, faTags, faThumbsUp, faTicket, faTrophy, faTruck, faUserClock, faUserGear, faUserPen, faUserPlus, faUserShield, faUserTie, faUsers, faUsersGear, faWallet, faWandMagicSparkles, faWifi } from '@fortawesome/free-solid-svg-icons';
import { __ } from '@wordpress/i18n';
import Header from '../components/Header';
import { applyFilters } from '../extend';

/**
 * Page shell for add-on admin pages (Payments, Reports, Views …). The page slug picks the component an
 * add-on registered with the `formglut.adminPages` filter: { 'formglut-payments': { title, component } }.
 */
const PRO_ICONS = { faAddressBook, faArrowsLeftRight, faArrowsRotate, faAward, faBarsStaggered, faBell, faBolt, faBowlFood, faBoxesStacked, faBrain, faBullhorn, faBurger, faCamera, faCartShopping, faCashRegister, faChalkboardUser, faChartColumn, faChartLine, faChartPie, faChartSimple, faCircleCheck, faCirclePlay, faCircleQuestion, faClockRotateLeft, faClone, faCloud, faCloudArrowUp, faCode, faCodeBranch, faCommentSms, faComments, faCreditCard, faCrop, faCrown, faDoorOpen, faEnvelope, faEnvelopeCircleCheck, faEnvelopeOpenText, faEnvelopesBulk, faEye, faFaceSmile, faFileExcel, faFileInvoice, faFilePdf, faFilePen, faFloppyDisk, faFolderOpen, faGauge, faGlobe, faHandHoldingHeart, faHandshake, faHotel, faHourglassHalf, faHouseChimney, faIdCard, faImage, faImages, faKey, faLanguage, faLayerGroup, faLightbulb, faLink, faListCheck, faListUl, faLock, faMagnifyingGlass, faMapLocationDot, faMedal, faMicrophone, faMugSaucer, faMusic, faNewspaper, faPalette, faPaperPlane, faPenNib, faPenToSquare, faPercent, faPersonRunning, faPills, faPlaneDeparture, faPlug, faPuzzlePiece, faRankingStar, faRepeat, faRightLeft, faRightToBracket, faRing, faRocket, faRotate, faRoute, faSchool, faShareNodes, faShieldHalved, faShirt, faSignature, faSliders, faSquarePollVertical, faStamp, faStethoscope, faStore, faSwatchbook, faTable, faTableCells, faTableCellsLarge, faTableColumns, faTableList, faTags, faThumbsUp, faTicket, faTrophy, faTruck, faUserClock, faUserGear, faUserPen, faUserPlus, faUserShield, faUserTie, faUsers, faUsersGear, faWallet, faWandMagicSparkles, faWifi };

/** Pro Features overview: the page body is printed by PHP (#fg-pro-source) and shown under the FormGlut header. */
function ProFeaturesPage() {
  const html = (document.getElementById('fg-pro-source') || {}).innerHTML || '';
  const ref = useRef(null);
  // The PHP markup has <… data-icon="faName">; draw the Font Awesome icon into each.
  useEffect(() => {
    if (!ref.current) return;
    const want = (window.location.hash || '').replace('#', '');
    const tab = want && ref.current.querySelector('.fg-pro-tab[data-tab="' + want + '"]');
    if (tab) tab.click();
    ref.current.querySelectorAll('[data-icon]').forEach((el) => {
      const icon = PRO_ICONS[el.dataset.icon];
      if (icon) el.innerHTML = renderToStaticMarkup(<FontAwesomeIcon icon={icon} />);
    });
  }, []);

  const onClick = (e) => {
    const btn = e.target.closest('.fg-pro-tab');
    if (!btn) return;
    const root = e.currentTarget;
    root.querySelectorAll('.fg-pro-tab').forEach((el) => el.classList.toggle('active', el === btn));
    root.querySelectorAll('.fg-pro-pane').forEach((el) => el.classList.toggle('active', el.dataset.pane === btn.dataset.tab));
  };
  return (
    <div className="fg-fs-page" style={{ background: '#f5f6f8' }}>
      <Header activePage="Pro Features" />
      <div className="fg-pro-wrap" ref={ref} onClick={onClick} dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}

export default function AddonPage() {
  const slug = new URLSearchParams(window.location.search).get('page') || '';
  if (slug === 'formglut-pro-features') return <ProFeaturesPage />;
  const pages = applyFilters('formglut.adminPages', {});
  const page = pages[slug];

  if (!page || !page.component) {
    return (
      <div className="fg-fs-page">
        <Header activePage="" />
        <div className="fg-fs-body" style={{ paddingTop: 60, textAlign: 'center' }}>
          {__( 'This page belongs to an add-on that is not active.', 'formglut' )}
        </div>
      </div>
    );
  }
  const Page = page.component;
  return <Page slug={slug} Header={Header} />;
}