import { useState, useMemo, useEffect } from "react";
import SectionCard from "./SectionCard";
import Toggle from "./Toggle";
import SaveToast from "./SaveToast";
import useSettings from "../../hooks/useSettings";

const ALL_PROVIDER_OPTIONS = [
  { value: "pexels", label: "Pexels" },
  { value: "pixabay", label: "Pixabay" },
  { value: "unsplash", label: "Unsplash" },
  { value: "openverse", label: "Openverse" },
  { value: "wikimedia", label: "Wikimedia" },
  { value: "giphy", label: "Giphy" },
  { value: "openai", label: "OpenAI" },
  { value: "gemini", label: "Gemini" },
];

const config = typeof AI_IMAGE_AdminConfig !== "undefined" ? AI_IMAGE_AdminConfig : {};
const generatorUrl = config.generator_url || "";

/**
 * Keep an upload dimension inside the 1–9999 range the UI advertises.
 *
 * An empty string is preserved so the field can be cleared and retyped; the
 * server falls back to its default for a blank value.
 */
function clampDimension(raw) {
  if (raw === "") return "";
  const value = parseInt(raw, 10);
  if (Number.isNaN(value)) return "";
  return Math.min(9999, Math.max(1, value));
}

export default function GeneralSection() {
  const {
    generalSettings,
    setGeneralSetting,
    providerEnabled,
    saveSettings,
    saving,
    resetGeneralSettings,
  } = useSettings();
  const [saveMessage, setSaveMessage] = useState({ type: null, text: "" });

  // Filter provider options to only show enabled providers
  const availableProviders = useMemo(() => {
    return ALL_PROVIDER_OPTIONS.filter(opt => providerEnabled[opt.value] !== false);
  }, [providerEnabled]);

  // Auto-update default provider if current one becomes disabled
  useEffect(() => {
    const currentProvider = generalSettings.default_provider;
    const isCurrentProviderAvailable = availableProviders.some(p => p.value === currentProvider);
    
    if (!isCurrentProviderAvailable && availableProviders.length > 0) {
      setGeneralSetting("default_provider", availableProviders[0].value);
    }
  }, [availableProviders, generalSettings.default_provider, setGeneralSetting]);

  const handleReset = () => {
    if (confirm("Reset all general settings to default values? This will not save automatically.")) {
      resetGeneralSettings();
      setSaveMessage({ type: "success", text: "Settings reset to defaults. Click 'Save Settings' to apply." });
    }
  };

  const handleSave = async () => {
    setSaveMessage({ type: null, text: "" });
    const result = await saveSettings("general");
    setSaveMessage({
      type: result.success ? "success" : "error",
      text: result.message,
    });
  };

  // Toast handles auto-dismiss

  return (
    <SectionCard
      title="General Settings"
      description="Manage your Instant Image Generator plugin settings."
      onReset={handleReset}
    >
      <div className="space-y-6">
        <div className="space-y-6">
          {/* Max Upload Width */}
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <label htmlFor="max-upload-width" className="block text-sm font-semibold text-gray-700 mb-2">
                Max Image Upload Width
              </label>
              <p className="mt-1.5 text-xs text-gray-500 leading-relaxed">
                Maximum width in pixels for imported images (1–9999)
              </p>
            </div>
            <input
              id="max-upload-width"
              type="number"
              min={1}
              max={9999}
              value={generalSettings.max_upload_width ?? 1600}
              onChange={(e) => setGeneralSetting("max_upload_width", clampDimension(e.target.value))}
              className="block w-full sm:max-w-xs rounded-md border border-gray-200 px-4 py-2.5 text-sm transition-all outline-none focus:border-indigo-500 focus:ring-0"
            />
          </div>

          {/* Max Upload Height */}
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <label htmlFor="max-upload-height" className="block text-sm font-semibold text-gray-700 mb-2">
                Max Image Upload Height
              </label>
              <p className="mt-1.5 text-xs text-gray-500 leading-relaxed">
                Maximum height in pixels for imported images (1–9999)
              </p>
            </div>
            <input
              id="max-upload-height"
              type="number"
              min={1}
              max={9999}
              value={generalSettings.max_upload_height ?? 1200}
              onChange={(e) => setGeneralSetting("max_upload_height", clampDimension(e.target.value))}
              className="block w-full sm:max-w-xs rounded-md border border-gray-200 px-4 py-2.5 text-sm transition-all outline-none focus:border-indigo-500 focus:ring-0"
            />
          </div>

          {/* Default Provider */}
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <label htmlFor="default-provider" className="block text-sm font-semibold text-gray-700 mb-2">
                Default Provider
              </label>
              <p className="mt-1.5 text-xs text-gray-500 leading-relaxed">
                Pre-selected tab when opening the Image Generator.
              </p>
              {availableProviders.length === 0 && (
                <p className="mt-2 text-xs text-red-600 leading-relaxed">
                  Please enable at least one provider in Image sources settings.
                </p>
              )}
            </div>
            <select
              id="default-provider"
              value={generalSettings.default_provider || "pexels"}
              onChange={(e) => setGeneralSetting("default_provider", e.target.value)}
              className="block w-full sm:max-w-xs rounded-md border border-gray-200 px-4 py-2.5 text-sm transition-all outline-none focus:border-indigo-500 focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed"
              disabled={availableProviders.length === 0}
            >
              {availableProviders.length === 0 ? (
                <option value="">No providers enabled</option>
              ) : (
                availableProviders.map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))
              )}
            </select>
          </div>
        </div>

        {/* Image Metadata Section */}
        <div className="pt-6 border-t border-gray-100">
          <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3">Image Metadata on Import</p>

          <div className="flex items-center justify-between gap-4 py-3">
            <div className="flex-1">
              <p className="text-sm font-semibold text-gray-700">Alternative Text</p>
              <p className="text-xs text-gray-500 mt-1 leading-relaxed">
                Automatically set the image source title as Alternative Text when importing.
              </p>
            </div>
            <Toggle
              checked={generalSettings.auto_alt_text === true}
              onChange={(on) => setGeneralSetting("auto_alt_text", on)}
              id="auto-alt-text"
              ariaLabel="Alternative Text"
            />
          </div>

          <div className="flex items-center justify-between gap-4 py-3 border-t border-gray-50">
            <div className="flex-1">
              <p className="text-sm font-semibold text-gray-700">Image Title</p>
              <p className="text-xs text-gray-500 mt-1 leading-relaxed">
                Automatically set the image source title as WordPress Title when importing.
              </p>
            </div>
            <Toggle
              checked={generalSettings.auto_title === true}
              onChange={(on) => setGeneralSetting("auto_title", on)}
              id="auto-title"
              ariaLabel="Image Title"
            />
          </div>

          <div className="flex items-center justify-between gap-4 py-3 border-t border-gray-50">
            <div className="flex-1">
              <p className="text-sm font-semibold text-gray-700">Image Attribution</p>
              <p className="text-xs text-gray-500 mt-1 leading-relaxed">
                Automatically add author attribution as Caption (e.g. "Photo by Author Name") when importing.
              </p>
            </div>
            <Toggle
              checked={generalSettings.image_attribution === true}
              onChange={(on) => setGeneralSetting("image_attribution", on)}
              id="image-attribution"
              ariaLabel="Image Attribution"
            />
          </div>
        </div>

        <div className="flex items-center justify-between gap-4 py-4 border-t border-gray-100">
          <div className="flex-1">
            <p className="text-sm font-semibold text-gray-700">Media Modal</p>
            <p className="text-xs text-gray-500 mt-1 leading-relaxed">
              Remove the Instant Images tab in the Media Modal.
            </p>
          </div>
          <Toggle
            checked={generalSettings.hide_media_modal_tab === true}
            onChange={(on) => setGeneralSetting("hide_media_modal_tab", on)}
            id="hide-media-modal-tab"
            ariaLabel="Remove the Image Generator tab from the Media Modal"
          />
        </div>

        {generatorUrl && (
          <div className="pt-2">
            <a
              href={generatorUrl}
              className="inline-flex items-center gap-2 text-sm text-gray-800 hover:text-gray-900 font-medium transition-colors"
            >
              <span>Open Image Generator</span>
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
              </svg>
            </a>
          </div>
        )}

        <SaveToast
          message={saveMessage}
          onDismiss={() => setSaveMessage({ type: null, text: "" })}
        />
        <div className="flex items-center justify-end pt-6 border-t border-gray-100">
          <button
            type="button"
            onClick={handleSave}
            disabled={saving}
            className="inline-flex items-center gap-2 px-6 py-2.5 bg-gray-800 text-white text-sm font-medium rounded-md hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {saving ? "Saving..." : "Save Settings"}
          </button>
        </div>
      </div>
    </SectionCard>
  );
}