import React, { useState, useContext } from "react";
import AdminLayout from "../../components/AdminLayout";
import { SettingsIcon, Upload, Trash } from "lucide-react";
import { AuthContext } from "../../auth/AuthContext";

export default function SystemSettings() {
  const { auth } = useContext(AuthContext) || { auth: null };
  const user = auth;

  const [username, setUsername] = useState(user?.username || "");
  const [profilePhoto, setProfilePhoto] = useState(null);
  const [showPasswordChange, setShowPasswordChange] = useState(false);

  const handlePhotoUpload = (e) => {
    if (e.target.files && e.target.files[0]) {
      setProfilePhoto(URL.createObjectURL(e.target.files[0]));
    }
  };

  return (
    <AdminLayout>
      <div className="p-6">
        <div className="flex items-center mb-6">
          <SettingsIcon className="w-7 h-7 text-blue-700 mr-2" />
          <h1 className="text-2xl font-bold text-blue-900">System Settings</h1>
        </div>

        {/* GENERAL SETTINGS CARD */}
        <div className="max-w-2xl mx-auto mb-6 bg-white rounded-lg shadow border border-gray-200 p-6">
          <h2 className="text-lg font-semibold text-blue-900 mb-4">
            General Settings
          </h2>

          {/* Profile Photo */}
          <div className="flex items-center gap-6 mb-4">
            <div className="relative w-20 h-20">
              <img
                src={
                  profilePhoto ||
                  user?.profile_photo ||
                  "https://via.placeholder.com/80"
                }
                alt="Profile"
                className="w-20 h-20 rounded-full object-cover border"
              />
              <label className="absolute bottom-0 right-0 bg-blue-600 text-white p-1 rounded-full cursor-pointer">
                <Upload className="w-4 h-4" />
                <input
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={handlePhotoUpload}
                />
              </label>
            </div>

            <div className="flex-1">
              <label className="block text-sm font-medium text-gray-700">
                Username
              </label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500"
              />
            </div>
          </div>

          {/* Email */}
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Email
            </label>
            <input
              type="email"
              value={user?.email || ""}
              disabled
              className="mt-1 block w-full border border-gray-200 bg-gray-100 rounded-lg px-3 py-2 text-sm text-gray-600"
            />
          </div>
        </div>

        {/* SECURITY SETTINGS CARD */}
        <div className="max-w-2xl mx-auto bg-white rounded-lg shadow border border-gray-200 p-6">
          <h2 className="text-lg font-semibold text-blue-900 mb-4">
            Security & Privacy
          </h2>

          {!showPasswordChange ? (
            <>
              {/* Masked Password */}
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700">
                  Password
                </label>
                <input
                  type="password"
                  value="********"
                  disabled
                  className="mt-1 block w-full border border-gray-200 bg-gray-100 rounded-lg px-3 py-2 text-sm text-gray-600"
                />
              </div>

              <button
                onClick={() => setShowPasswordChange(true)}
                className="bg-blue-600 text-white px-5 py-2 rounded-lg shadow hover:bg-blue-700"
              >
                Change Password
              </button>
            </>
          ) : (
            <>
              <div className="mb-3">
                <label className="block text-sm font-medium text-gray-700">
                  Old Password
                </label>
                <input
                  type="password"
                  placeholder="Enter old password"
                  className="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
                />
              </div>
              <div className="mb-3">
                <label className="block text-sm font-medium text-gray-700">
                  New Password
                </label>
                <input
                  type="password"
                  placeholder="Enter new password"
                  className="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
                />
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700">
                  Confirm Password
                </label>
                <input
                  type="password"
                  placeholder="Confirm new password"
                  className="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
                />
              </div>

              <div className="flex gap-3">
                <button className="bg-blue-600 text-white px-5 py-2 rounded-lg shadow hover:bg-blue-700">
                  Save Password
                </button>
                <button
                  onClick={() => setShowPasswordChange(false)}
                  className="bg-gray-300 text-gray-700 px-5 py-2 rounded-lg shadow hover:bg-gray-400"
                >
                  Cancel
                </button>
              </div>
            </>
          )}

          {/* Delete Account */}
          <div className="mt-6 pt-4 border-t">
            <button className="flex items-center gap-2 bg-red-600 text-white px-4 py-2 rounded-lg shadow hover:bg-red-700">
              <Trash className="w-4 h-4" /> Delete Account
            </button>
          </div>
        </div>
      </div>
    </AdminLayout>
  );
}
