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

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

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

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

  // Toast handles auto-dismiss

  return (
    <SectionCard
      title="Display Settings"
      description="Customize how images are displayed in the Image Generator"
      onReset={handleReset}
    >
      <div className="space-y-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
          {/* Default View Mode */}
          <div className="sm:col-span-2 flex items-center justify-between gap-4">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Default View Mode
              </label>
              <p className="mt-1.5 text-xs text-gray-500 leading-relaxed">
                Pre-selected view mode when opening the Image Generator.
              </p>
            </div>
            <div className="inline-flex p-1 rounded-lg border border-gray-200 bg-white">
              <button
                type="button"
                onClick={() => setGeneralSetting("default_view_mode", "grid")}
                className={`flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium outline-none focus:ring-0 border-2 transition-colors ${
                  generalSettings.default_view_mode !== "list"
                    ? "bg-gray-800 text-white border-gray-800"
                    : "text-gray-600 hover:text-gray-800 border-transparent"
                }`}
              >
                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                </svg>
                Grid
              </button>
              <button
                type="button"
                onClick={() => setGeneralSetting("default_view_mode", "list")}
                className={`flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium outline-none focus:ring-0 border-2 transition-colors ${
                  generalSettings.default_view_mode === "list"
                    ? "bg-gray-800 text-white border-gray-800"
                    : "text-gray-600 hover:text-gray-800 border-transparent"
                }`}
              >
                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                </svg>
                List
              </button>
            </div>

          </div>

          {/* Items Per Page */}
          <div className="sm:col-span-2 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
            <div className="min-w-0">
              <label htmlFor="items-per-page" className="block text-sm font-semibold text-gray-700 mb-2">
                Items Per Page
              </label>
              <p className="mt-1.5 text-xs text-gray-500 leading-relaxed">
                Number of images to show per page (20–100)
              </p>
            </div>
            <div className="flex flex-wrap items-center gap-4 min-w-0 lg:flex-1 lg:max-w-md">
              <input
                id="items-per-page"
                type="range"
                min={20}
                max={100}
                step={5}
                value={generalSettings.items_per_page || 30}
                onChange={(e) => setGeneralSetting("items_per_page", parseInt(e.target.value, 10))}
                className="flex-1 min-w-0 h-2.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-gray-800 hover:bg-gray-300 transition-colors"
              />
              <div className="flex items-center gap-2 shrink-0">
                <input
                  type="number"
                  min={20}
                  max={100}
                  step={5}
                  value={generalSettings.items_per_page || 30}
                  onChange={(e) => {
                    const val = parseInt(e.target.value, 10);
                    if (!isNaN(val)) setGeneralSetting("items_per_page", Math.min(100, Math.max(20, val)));
                  }}
                  className="w-16 rounded-md border border-gray-200 px-3 py-2 text-sm text-center transition-all outline-none focus:border-gray-500 focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                />
                <span className="text-sm text-gray-500 whitespace-nowrap">per page</span>
              </div>
            </div>
          </div>

          {/* Thumbnail Size */}
          <div className="sm:col-span-2 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <label htmlFor="thumbnail-size" className="block text-sm font-semibold text-gray-700 mb-2">
                Thumbnail Size (Grid View)
              </label>
              <p className="mt-1.5 text-xs text-gray-500 leading-relaxed">
                Size of image thumbnails in grid view
              </p>
            </div>
            <select
              id="thumbnail-size"
              value={generalSettings.thumbnail_size || "medium"}
              onChange={(e) => setGeneralSetting("thumbnail_size", e.target.value)}
              className="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"
            >
              <option value="small">Small (200px)</option>
              <option value="medium">Medium (300px)</option>
              <option value="large">Large (400px)</option>
            </select>
          </div>

          {/* Load More Mode */}
          <div className="sm:col-span-2 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <label htmlFor="load-more-mode" className="block text-sm font-semibold text-gray-700 mb-2">
                Load More Mode
              </label>
              <p className="mt-1.5 text-xs text-gray-500 leading-relaxed">
                Choose how additional images are loaded when scrolling
              </p>
            </div>
            <select
              id="load-more-mode"
              value={generalSettings.load_more_mode || "auto"}
              onChange={(e) => setGeneralSetting("load_more_mode", e.target.value)}
              className="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"
            >
              <option value="auto">Auto Load (Infinite Scroll)</option>
              <option value="manual">Manual Load (Load More Button)</option>
            </select>
          </div>
        </div>

        {/* Save Button and Messages */}
        <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>
  );
}