import { useEffect, useMemo, useState } from 'react';
import FeatureCard from '../../home/FeatureCard';
import '../../home/App.css';

function getOnboardingData() {
  return window.wowextOnboarding || {};
}

export default function ConfigurationStep({ strings: S }) {
  const data = getOnboardingData();
  const [extensions, setExtensions] = useState(data.extensions || []);
  const [notice, setNotice] = useState(null);

  const cardApi = useMemo(
    () => ({
      ajaxUrl: data.ajaxUrl,
      nonce: data.homeNonce,
      strings: S,
    }),
    [data.ajaxUrl, data.homeNonce, S]
  );

  useEffect(() => {
    if (!notice) return undefined;
    const t = setTimeout(() => setNotice(null), 8000);
    return () => clearTimeout(t);
  }, [notice]);

  function pushNotice(message, type) {
    if (!message) return;
    setNotice({ message, type: type === 'error' ? 'error' : 'success' });
  }

  function handleStatusChange(slug, newStatus) {
    setExtensions((prev) => {
      const next = prev.map((ext) => (ext.slug === slug ? { ...ext, status: newStatus } : ext));
      if (typeof window.wowextOnboarding !== 'undefined') {
        window.wowextOnboarding.extensions = next;
      }
      return next;
    });
  }

  return (
    <div className="wowext-onboarding-configure wowext-home-app">
      <div className="wowext-onboarding-configure__intro">
        <h1 className="wowext-onboarding-configure__title">{S.configureTitle}</h1>
        <p className="wowext-onboarding-configure__subtitle">{S.configureSubtitle}</p>
      </div>

      {notice && (
        <div className={`wowext-home-notice wowext-home-notice--${notice.type}`} role="alert">
          <p className="wowext-home-notice__text">{notice.message}</p>
          <button
            type="button"
            className="wowext-home-notice__dismiss"
            onClick={() => setNotice(null)}
            aria-label={S.noticeDismiss || 'Dismiss notice'}
          >
            ×
          </button>
        </div>
      )}

      <div className="wowext-grid">
        {extensions.map((ext) => (
          <FeatureCard
            key={ext.slug}
            extension={ext}
            apiConfig={cardApi}
            onboardingMode
            onStatusChange={handleStatusChange}
            onNotify={pushNotice}
          />
        ))}
      </div>

      {extensions.length === 0 && (
        <p className="wowext-home-empty">{S.configureEmpty || 'No extensions available yet.'}</p>
      )}
    </div>
  );
}