'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';

export default function PharmacyProfileSettings() {
  const [darkMode, setDarkMode] = useState(false);
  const [profileImage, setProfileImage] = useState('/images/lab-avatar.jpg');
  const [passwords, setPasswords] = useState({
    current: '',
    new: '',
    confirm: '',
  });

  // Load dark mode preference from localStorage
  useEffect(() => {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'dark') {
      setDarkMode(true);
      document.documentElement.classList.add('dark');
    }
  }, []);

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setProfileImage(URL.createObjectURL(file));
    }
  };

  const handlePasswordChange = (e) => {
    setPasswords({ ...passwords, [e.target.name]: e.target.value });
  };

  const toggleDarkMode = () => {
    const isDark = !darkMode;
    setDarkMode(isDark);
    document.documentElement.classList.toggle('dark', isDark);
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // TODO: Replace with actual API logic
    console.log('Password update:', passwords);
  };

  return (
    <div className="bg-white white:bg-gray rounded-xl shadow p-6 max-w-3xl left mx">
      <h2 className="text-2xl font-bold mb-6 text-gray white:text-white">Settings</h2>

      {/* Profile Image */}
      <div className="mb-6">
        <label className="block text-gray white:text-gray mb-2">Profile Image</label>
        <div className="flex items-center gap-4">
          {profileImage && (
            <Image
              src={profileImage}
              alt="Profile"
              width={80}
              height={80}
              className="rounded-full object-cover"
            />
          )}
          <input type="file" accept="image/*" onChange={handleImageChange} />
        </div>
      </div>

      {/* Dark Mode Toggle */}
      <div className="mb-6">
        <label className="flex items-center cursor-pointer">
          <input type="checkbox" className="hidden" checked={darkMode} onChange={toggleDarkMode} />
          <div className="w-10 h-5 bg-gray-500 white:bg-gray-900 rounded-full relative">
            <div
              className={`absolute top-0.5 left-0.5 w-4 h-4 bg-dark dark:bg-gray-200 rounded-full shadow-md transform transition ${
                darkMode ? 'translate-x-5' : ''
              }`}
            />
          </div>
          <span className="ml-3 text-gray white:text-gray">
            {darkMode ? 'Dark Mode' : 'Light Mode'}
          </span>
        </label>
      </div>

      {/* Password Update */}
      <form onSubmit={handleSubmit}>
        <div className="mb-4">
          <label className="block text-gray white:text-gray mb-1">Current Password</label>
          <input
            type="password"
            name="current"
            value={passwords.current}
            onChange={handlePasswordChange}
            className="w-full px-3 py-2 rounded border white:bg-gray white:text-white"
            required
          />
        </div>

        <div className="mb-4">
          <label className="block text-gray white:text-gray mb-1">New Password</label>
          <input
            type="password"
            name="new"
            value={passwords.new}
            onChange={handlePasswordChange}
            className="w-full px-3 py-2 rounded border white:bg-gray white:text-white"
            required
          />
        </div>

        <div className="mb-6">
          <label className="block text-gray white:text-gray mb-1">Confirm New Password</label>
          <input
            type="password"
            name="confirm"
            value={passwords.confirm}
            onChange={handlePasswordChange}
            className="w-full px-3 py-2 rounded border white:bg-gray white:text-white"
            required
          />
        </div>

        <button
          type="submit"
          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"
        >
          Update Password
        </button>
      </form>
    </div>
  );
}
