import { useEffect, useMemo, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { Alert, Button, Card, Spinner } from '../../../components/ui';
import { useNotification } from '../../../contexts/NotificationContext';
import {
  ArrowUpIcon,
  ArrowDownIcon,
  ArrowPathIcon,
} from '@heroicons/react/24/outline';

const SearchPrioritySettings = () => {
  const { showNotification } = useNotification();
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [order, setOrder] = useState([]);
  const [defaultOrder, setDefaultOrder] = useState([]);
  const [availableTypes, setAvailableTypes] = useState([]);

  useEffect(() => {
    let cancelled = false;

    const load = async () => {
      try {
        const [settingsResp, typesResp] = await Promise.all([
          apiFetch({ path: '/prorank-seo/v1/settings/search-priority' }),
          apiFetch({ path: '/prorank-seo/v1/settings/search-priority/post-types' }),
        ]);

        if (cancelled) return;

        const storedOrder = Array.isArray(settingsResp?.data?.order) ? settingsResp.data.order : [];
        const fallback = Array.isArray(settingsResp?.data?.default) ? settingsResp.data.default : [];
        const types = Array.isArray(typesResp?.data) ? typesResp.data : [];

        setDefaultOrder(fallback);
        setAvailableTypes(types);

        const known = types.map((t) => t.slug);
        const validStored = storedOrder.filter((slug) => known.includes(slug));
        const missingTypes = known.filter((slug) => !validStored.includes(slug));
        setOrder([...validStored, ...missingTypes]);
      } catch (err) {
        showNotification(
          __('Failed to load search priority settings.', 'prorank-seo'),
          'error'
        );
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };

    load();
    return () => {
      cancelled = true;
    };
  }, [showNotification]);

  const labelMap = useMemo(() => {
    const map = {};
    availableTypes.forEach((t) => {
      map[t.slug] = t.label || t.slug;
    });
    return map;
  }, [availableTypes]);

  const move = (index, direction) => {
    const target = index + direction;
    if (target < 0 || target >= order.length) return;
    const next = order.slice();
    const tmp = next[index];
    next[index] = next[target];
    next[target] = tmp;
    setOrder(next);
  };

  const resetToDefault = () => {
    const known = availableTypes.map((t) => t.slug);
    const baseline = defaultOrder.filter((slug) => known.includes(slug));
    const rest = known.filter((slug) => !baseline.includes(slug));
    setOrder([...baseline, ...rest]);
  };

  const save = async () => {
    setSaving(true);
    try {
      await apiFetch({
        path: '/prorank-seo/v1/settings/search-priority',
        method: 'POST',
        data: { order },
      });
      showNotification(
        __('Search priority order saved.', 'prorank-seo'),
        'success'
      );
    } catch (err) {
      showNotification(
        __('Could not save search priority order.', 'prorank-seo'),
        'error'
      );
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="pr:p-8 pr:flex pr:items-center pr:justify-center">
        <Spinner />
      </div>
    );
  }

  return (
    <div className="prorank-search-priority-settings">
      <Card>
        <div className="pr:p-6 pr:space-y-4">
          <div>
            <h3 className="pr:text-lg pr:font-semibold pr:m-0">
              {__('Search result order', 'prorank-seo')}
            </h3>
            <p className="pr:text-sm pr:text-gray-600 pr:mt-1">
              {__(
                'When a visitor uses your site search, results are grouped by post type using the order below. Top of the list ranks first. Post types not listed appear after all listed types.',
                'prorank-seo'
              )}
            </p>
          </div>

          <Alert variant="info">
            {__(
              'This affects the WordPress site search only. It does not change admin search, REST queries, or Google rankings.',
              'prorank-seo'
            )}
          </Alert>

          <ol className="pr:list-none pr:p-0 pr:m-0 pr:space-y-2">
            {order.map((slug, idx) => (
              <li
                key={slug}
                className="pr:flex pr:items-center pr:gap-3 pr:p-3 pr:border pr:border-gray-200 pr:rounded-md pr:bg-white"
              >
                <span className="pr:font-semibold pr:text-gray-500 pr:w-6 pr:text-center">
                  {idx + 1}
                </span>
                <span className="pr:flex-1 pr:font-medium">{labelMap[slug] || slug}</span>
                <span className="pr:text-xs pr:text-gray-400 pr:font-mono">{slug}</span>
                <Button
                  variant="secondary"
                  size="sm"
                  onClick={() => move(idx, -1)}
                  disabled={idx === 0 || saving}
                  aria-label={__('Move up', 'prorank-seo')}
                >
                  <ArrowUpIcon className="pr:w-4 pr:h-4" />
                </Button>
                <Button
                  variant="secondary"
                  size="sm"
                  onClick={() => move(idx, 1)}
                  disabled={idx === order.length - 1 || saving}
                  aria-label={__('Move down', 'prorank-seo')}
                >
                  <ArrowDownIcon className="pr:w-4 pr:h-4" />
                </Button>
              </li>
            ))}
          </ol>

          <div className="pr:flex pr:items-center pr:gap-3 pr:pt-4 pr:border-t pr:border-gray-200">
            <Button variant="primary" onClick={save} disabled={saving}>
              {saving
                ? __('Saving...', 'prorank-seo')
                : __('Save order', 'prorank-seo')}
            </Button>
            <Button variant="secondary" onClick={resetToDefault} disabled={saving}>
              <ArrowPathIcon className="pr:w-4 pr:h-4 pr:mr-1" />
              {__('Reset to default', 'prorank-seo')}
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default SearchPrioritySettings;