grocery-app/frontend/src/pages/Settings.jsx

import { useContext, useState } from "react";
import { SettingsContext } from "../context/SettingsContext";
import "../styles/pages/Settings.css";


export default function Settings() {
  const { settings, updateSettings, resetSettings } = useContext(SettingsContext);
  const [activeTab, setActiveTab] = useState("appearance");


  const handleThemeChange = (theme) => {
    updateSettings({ theme });
  };


  const handleToggle = (key) => {
    updateSettings({ [key]: !settings[key] });
  };


  const handleNumberChange = (key, value) => {
    updateSettings({ [key]: parseInt(value, 10) });
  };


  const handleSelectChange = (key, value) => {
    updateSettings({ [key]: value });
  };


  const handleReset = () => {
    if (window.confirm("Reset all settings to defaults?")) {
      resetSettings();
    }
  };


  return (
    <div className="settings-page">
      <div className="settings-container">
        <h1 className="settings-title">Settings</h1>

        <div className="settings-tabs">
          <button
            className={`settings-tab ${activeTab === "appearance" ? "active" : ""}`}
            onClick={() => setActiveTab("appearance")}
          >
            Appearance
          </button>
          <button
            className={`settings-tab ${activeTab === "list" ? "active" : ""}`}
            onClick={() => setActiveTab("list")}
          >
            List Display
          </button>
          <button
            className={`settings-tab ${activeTab === "behavior" ? "active" : ""}`}
            onClick={() => setActiveTab("behavior")}
          >
            Behavior
          </button>
        </div>

        <div className="settings-content">
          {/* Appearance Tab */}
          {activeTab === "appearance" && (
            <div className="settings-section">
              <h2 className="settings-section-title">Appearance</h2>

              <div className="settings-group">
                <label className="settings-label">Theme</label>
                <div className="settings-theme-options">
                  <button
                    className={`settings-theme-btn ${settings.theme === "light" ? "active" : ""}`}
                    onClick={() => handleThemeChange("light")}
                  >
                    ☀️ Light
                  </button>
                  <button
                    className={`settings-theme-btn ${settings.theme === "dark" ? "active" : ""}`}
                    onClick={() => handleThemeChange("dark")}
                  >
                    🌙 Dark
                  </button>
                  <button
                    className={`settings-theme-btn ${settings.theme === "auto" ? "active" : ""}`}
                    onClick={() => handleThemeChange("auto")}
                  >
                    🔄 Auto
                  </button>
                </div>
                <p className="settings-description">
                  Auto mode follows your system preferences
                </p>
              </div>

              <div className="settings-group">
                <label className="settings-label">
                  <input
                    type="checkbox"
                    checked={settings.compactView}
                    onChange={() => handleToggle("compactView")}
                  />
                  <span>Compact View</span>
                </label>
                <p className="settings-description">
                  Show more items on screen with reduced spacing
                </p>
              </div>
            </div>
          )}

          {/* List Display Tab */}
          {activeTab === "list" && (
            <div className="settings-section">
              <h2 className="settings-section-title">List Display</h2>

              <div className="settings-group">
                <label className="settings-label">Default Sort Mode</label>
                <select
                  value={settings.defaultSortMode}
                  onChange={(e) => handleSelectChange("defaultSortMode", e.target.value)}
                  className="settings-select"
                >
                  <option value="zone">By Zone</option>
                  <option value="az">A → Z</option>
                  <option value="za">Z → A</option>
                  <option value="qty-high">Quantity: High → Low</option>
                  <option value="qty-low">Quantity: Low → High</option>
                </select>
                <p className="settings-description">
                  Your preferred sorting method when opening the list
                </p>
              </div>

              <div className="settings-group">
                <label className="settings-label">
                  <input
                    type="checkbox"
                    checked={settings.showRecentlyBought}
                    onChange={() => handleToggle("showRecentlyBought")}
                  />
                  <span>Show Recently Bought Section</span>
                </label>
                <p className="settings-description">
                  Display items bought in the last 24 hours
                </p>
              </div>

              {settings.showRecentlyBought && (
                <>
                  <div className="settings-group">
                    <label className="settings-label">
                      Recently Bought Item Count: {settings.recentlyBoughtCount}
                    </label>
                    <input
                      type="range"
                      min="5"
                      max="50"
                      step="5"
                      value={settings.recentlyBoughtCount}
                      onChange={(e) => handleNumberChange("recentlyBoughtCount", e.target.value)}
                      className="settings-range"
                    />
                    <p className="settings-description">
                      Number of items to show initially (5-50)
                    </p>
                  </div>

                  <div className="settings-group">
                    <label className="settings-label">
                      <input
                        type="checkbox"
                        checked={settings.recentlyBoughtCollapsed}
                        onChange={() => handleToggle("recentlyBoughtCollapsed")}
                      />
                      <span>Collapse Recently Bought by Default</span>
                    </label>
                    <p className="settings-description">
                      Start with the section collapsed
                    </p>
                  </div>
                </>
              )}
            </div>
          )}

          {/* Behavior Tab */}
          {activeTab === "behavior" && (
            <div className="settings-section">
              <h2 className="settings-section-title">Behavior</h2>

              <div className="settings-group">
                <label className="settings-label">
                  <input
                    type="checkbox"
                    checked={settings.confirmBeforeBuy}
                    onChange={() => handleToggle("confirmBeforeBuy")}
                  />
                  <span>Confirm Before Buying</span>
                </label>
                <p className="settings-description">
                  Show confirmation modal when marking items as bought
                </p>
              </div>

              <div className="settings-group">
                <label className="settings-label">
                  Auto-reload Interval (minutes): {settings.autoReloadInterval || "Disabled"}
                </label>
                <input
                  type="range"
                  min="0"
                  max="30"
                  step="5"
                  value={settings.autoReloadInterval}
                  onChange={(e) => handleNumberChange("autoReloadInterval", e.target.value)}
                  className="settings-range"
                />
                <p className="settings-description">
                  Automatically refresh the list every X minutes (0 = disabled)
                </p>
              </div>

              <div className="settings-group">
                <label className="settings-label">
                  <input
                    type="checkbox"
                    checked={settings.hapticFeedback}
                    onChange={() => handleToggle("hapticFeedback")}
                  />
                  <span>Haptic Feedback (Mobile)</span>
                </label>
                <p className="settings-description">
                  Vibrate on long-press and other interactions
                </p>
              </div>
            </div>
          )}
        </div>

        <div className="settings-actions">
          <button onClick={handleReset} className="settings-btn-reset">
            Reset to Defaults
          </button>
        </div>
      </div>
    </div>
  );
}