'use client';

import React, { useState, useEffect } from 'react';
import { apiRequest } from '@/lib/api';
import { useAuth } from '@/context/AuthContext';
import { toast } from '@/context/ToastContext';
import {
  ShieldCheck,
  UserPlus,
  Edit3,
  Trash2,
  CheckCircle,
  XCircle,
  RefreshCw,
  Search,
  Lock,
  User,
  Mail,
  Shield,
  X,
  Eye,
  EyeOff,
} from 'lucide-react';
import ConfirmDeleteModal from '@/components/admin/ConfirmDeleteModal';

interface AdminUser {
  _id: string;
  id?: string;
  name: string;
  email: string;
  role: 'super_admin' | 'admin';
  isActive: boolean;
  createdAt?: string;
}

export default function AdminManagementPage() {
  const { user: currentUser } = useAuth();
  const [admins, setAdmins] = useState<AdminUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');

  // Modal State
  const [showModal, setShowModal] = useState(false);
  const [editingAdmin, setEditingAdmin] = useState<AdminUser | null>(null);

  // Form State
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [role, setRole] = useState<'admin' | 'super_admin'>('admin');
  const [isActive, setIsActive] = useState(true);
  const [formError, setFormError] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const fetchAdmins = async () => {
    setLoading(true);
    const params = new URLSearchParams();
    if (searchQuery.trim()) params.append('search', searchQuery.trim());
    const queryString = params.toString() ? `?${params.toString()}` : '';

    const res = await apiRequest(`/admins${queryString}`);
    if (res.success && res.admins) {
      setAdmins(res.admins);
    }
    setLoading(false);
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      fetchAdmins();
    }, 300);
    return () => clearTimeout(timer);
  }, [searchQuery]);

  const openCreateModal = () => {
    setEditingAdmin(null);
    setName('');
    setEmail('');
    setPassword('');
    setRole('admin');
    setIsActive(true);
    setFormError('');
    setShowModal(true);
  };

  const openEditModal = (admin: AdminUser) => {
    setEditingAdmin(admin);
    setName(admin.name);
    setEmail(admin.email);
    setPassword(''); // leave blank unless updating
    setRole(admin.role);
    setIsActive(admin.isActive);
    setFormError('');
    setShowModal(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormError('');

    if (!name.trim() || !email.trim()) {
      setFormError('Name and email are required');
      return;
    }

    if (!editingAdmin && (!password || password.length < 8)) {
      setFormError('Password must be at least 8 characters long');
      return;
    }

    setSubmitting(true);
    let res;

    if (editingAdmin) {
      const adminId = editingAdmin._id || editingAdmin.id;
      const payload: any = { name, role, isActive };
      if (password.trim()) {
        payload.password = password.trim();
      }

      res = await apiRequest(`/admins/${adminId}`, {
        method: 'PUT',
        body: JSON.stringify(payload),
      });
    } else {
      res = await apiRequest('/admins', {
        method: 'POST',
        body: JSON.stringify({
          name,
          email,
          password,
          role,
          isActive,
        }),
      });
    }

    setSubmitting(false);

    if (res.success) {
      toast.success(editingAdmin ? 'Admin updated successfully!' : 'Admin created successfully!');
      setShowModal(false);
      fetchAdmins();
    } else {
      setFormError(res.error || 'Failed to save admin account');
      toast.error(res.error || 'Failed to save admin account');
    }
  };

  const handleToggleStatus = async (admin: AdminUser) => {
    const adminId = admin._id || admin.id;
    const res = await apiRequest(`/admins/${adminId}`, {
      method: 'PUT',
      body: JSON.stringify({ isActive: !admin.isActive }),
    });

    if (res.success) {
      toast.success(`Admin status updated to ${!admin.isActive ? 'Active' : 'Deactivated'}`);
      fetchAdmins();
    } else {
      toast.error(res.error || 'Failed to update admin status');
    }
  };

  // Delete confirmation state
  const [deletingAdminTarget, setDeletingAdminTarget] = useState<AdminUser | null>(null);
  const [deleting, setDeleting] = useState(false);

  const requestDeleteAdmin = (admin: AdminUser) => {
    const adminId = admin._id || admin.id;
    if (currentUser?.id === adminId || currentUser?.email === admin.email) {
      toast.warning('You cannot delete your own super admin account!');
      return;
    }
    setDeletingAdminTarget(admin);
  };

  const handleConfirmDeleteAdmin = async () => {
    if (!deletingAdminTarget) return;
    const adminId = deletingAdminTarget._id || deletingAdminTarget.id;
    setDeleting(true);

    const res = await apiRequest(`/admins/${adminId}`, { method: 'DELETE' });
    setDeleting(false);

    if (res.success) {
      toast.success('Admin account deleted successfully');
      setDeletingAdminTarget(null);
      fetchAdmins();
    } else {
      toast.error(res.error || 'Failed to delete admin');
    }
  };

  const superAdminsCount = admins.filter((a) => a.role === 'super_admin').length;
  const standardAdminsCount = admins.filter((a) => a.role === 'admin').length;
  const activeAdminsCount = admins.filter((a) => a.isActive).length;

  return (
    <div className="space-y-8 max-w-7xl mx-auto">
      {/* Header & Create Action */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight flex items-center gap-3">
            <span>Admin Account Management</span>
          </h1>
        </div>

        <div className="flex items-center gap-3 self-start md:self-auto">
          <button
            onClick={fetchAdmins}
            className="p-2.5 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 transition"
            title="Refresh List"
          >
            <RefreshCw className="w-4 h-4" />
          </button>
          <button
            onClick={openCreateModal}
            className="px-4 py-2 bg-[#FECE00] hover:bg-[#e5b800] text-black text-sm font-medium rounded-lg shadow-sm transition-colors flex items-center gap-2 cursor-pointer"
          >
            <UserPlus className="w-4 h-4 text-black" />
            <span>Create Admin</span>
          </button>
        </div>
      </div>

      {/* Overview Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs">
          <div className="flex items-center justify-between">
            <span className="text-xs font-bold uppercase tracking-wider text-gray-500">Total Admins</span>
            <div className="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 border border-blue-100 flex items-center justify-center">
              <ShieldCheck className="w-5 h-5" />
            </div>
          </div>
          <p className="text-3xl font-extrabold text-gray-900 mt-2">{loading ? '...' : admins.length}</p>
        </div>

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs">
          <div className="flex items-center justify-between">
            <span className="text-xs font-bold uppercase tracking-wider text-gray-500">Super Admins</span>
            <div className="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 border border-amber-100 flex items-center justify-center">
              <Shield className="w-5 h-5" />
            </div>
          </div>
          <p className="text-3xl font-extrabold text-gray-900 mt-2">{loading ? '...' : superAdminsCount}</p>
        </div>

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs">
          <div className="flex items-center justify-between">
            <span className="text-xs font-bold uppercase tracking-wider text-gray-500">Standard Admins</span>
            <div className="w-10 h-10 rounded-xl bg-indigo-50 text-indigo-600 border border-indigo-100 flex items-center justify-center">
              <User className="w-5 h-5" />
            </div>
          </div>
          <p className="text-3xl font-extrabold text-gray-900 mt-2">{loading ? '...' : standardAdminsCount}</p>
        </div>

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs">
          <div className="flex items-center justify-between">
            <span className="text-xs font-bold uppercase tracking-wider text-gray-500">Active Accounts</span>
            <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100 flex items-center justify-center">
              <CheckCircle className="w-5 h-5" />
            </div>
          </div>
          <p className="text-3xl font-extrabold text-gray-900 mt-2">{loading ? '...' : activeAdminsCount}</p>
        </div>
      </div>

      {/* Table Section */}
      <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden shadow-xs">
        {/* Search Bar */}
        <div className="p-4 border-b border-gray-200 bg-gray-50/50 flex items-center justify-between gap-4">
          <div className="relative flex-1 max-w-md">
            <Search className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search admin by name or email..."
              className="w-full pl-9 pr-4 py-2 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none"
            />
          </div>
          <span className="text-xs font-semibold text-gray-500">
            Showing {admins.length} Admin{admins.length !== 1 ? 's' : ''}
          </span>
        </div>

        {loading ? (
          <div className="p-12 text-center text-gray-500 text-sm font-semibold">
            Loading admin users...
          </div>
        ) : admins.length === 0 ? (
          <div className="p-12 text-center text-gray-500 text-sm">
            {admins.length === 0 ? 'No admin accounts configured.' : 'No admins match your search query.'}
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm text-gray-700">
              <thead className="bg-gray-50 text-xs uppercase font-bold text-gray-500 border-b border-gray-200">
                <tr>
                  <th className="px-6 py-4">Admin Name</th>
                  <th className="px-6 py-4">Email Address</th>
                  <th className="px-6 py-4">Role</th>
                  <th className="px-6 py-4">Status</th>
                  <th className="px-6 py-4 text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                {admins.map((admin) => {
                  const adminId = admin._id || admin.id;
                  const isCurrent = currentUser?.id === adminId || currentUser?.email === admin.email;

                  return (
                    <tr key={adminId} className="hover:bg-gray-50/80 transition">
                      <td className="px-6 py-4">
                        <div className="flex items-center gap-3">
                          <div className="w-9 h-9 rounded-full bg-amber-100 text-amber-900 border border-amber-200 font-extrabold flex items-center justify-center text-xs shrink-0">
                            {admin.name ? admin.name.charAt(0).toUpperCase() : 'A'}
                          </div>
                          <div>
                            <span className="font-bold text-gray-900 block">{admin.name}</span>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 text-gray-600 font-medium">{admin.email}</td>
                      <td className="px-6 py-4">
                        {admin.role === 'super_admin' ? (
                          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-amber-50 text-amber-800 border border-amber-200">
                            <Shield className="w-3 h-3 text-amber-600" /> Super Admin
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-50 text-blue-700 border border-blue-200">
                            <User className="w-3 h-3 text-blue-500" /> Admin
                          </span>
                        )}
                      </td>
                      <td className="px-6 py-4">
                        <button
                          onClick={() => handleToggleStatus(admin)}
                          className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold border transition ${admin.isActive
                            ? 'bg-emerald-50 text-emerald-800 border-emerald-200 hover:bg-emerald-100'
                            : 'bg-rose-50 text-rose-700 border-rose-200 hover:bg-rose-100'
                            }`}
                        >
                          {admin.isActive ? (
                            <>
                              <CheckCircle className="w-3 h-3 text-emerald-600" /> Active
                            </>
                          ) : (
                            <>
                              <XCircle className="w-3 h-3 text-rose-500" /> Deactivated
                            </>
                          )}
                        </button>
                      </td>
                      <td className="px-6 py-4 text-right">
                        <div className="flex items-center justify-end gap-2">
                          <button
                            onClick={() => openEditModal(admin)}
                            className="p-1.5 rounded-lg text-gray-600 hover:text-black hover:bg-gray-100 border border-gray-200 transition"
                            title="Edit Admin Account"
                          >
                            <Edit3 className="w-4 h-4" />
                          </button>
                          <button
                            onClick={() => requestDeleteAdmin(admin)}
                            disabled={isCurrent}
                            className={`p-1.5 rounded-lg border transition ${isCurrent
                              ? 'text-gray-300 border-gray-200 cursor-not-allowed'
                              : 'text-red-600 border-red-200 hover:bg-red-50'
                              }`}
                            title={isCurrent ? "You cannot delete yourself" : "Delete Admin Account"}
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* CREATE / EDIT ADMIN MODAL */}
      {showModal && (
        <div className="fixed inset-0 z-[100] bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 overflow-y-auto !m-0">
          <div className="bg-white max-w-md w-full rounded-2xl shadow-2xl border border-gray-200 overflow-hidden my-8">
            <div className="p-6 border-b border-gray-200 flex items-center justify-between bg-gray-50">
              <h2 className="text-lg font-extrabold text-gray-900 flex items-center gap-2">
                <ShieldCheck className="w-5 h-5 text-amber-600" />
                <span>{editingAdmin ? 'Edit Admin Account' : 'Create New Admin Account'}</span>
              </h2>
              <button
                onClick={() => setShowModal(false)}
                className="p-1 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-200 transition"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleSubmit} className="p-6 space-y-4">
              {formError && (
                <div className="p-3 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-semibold">
                  ⚠️ {formError}
                </div>
              )}

              <div>
                <label className="block text-xs font-bold uppercase text-gray-700 mb-1">
                  Full Name <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <User className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
                  <input
                    type="text"
                    required
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="e.g. Super Admin"
                    className="w-full pl-9 pr-3.5 py-2.5 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold uppercase text-gray-700 mb-1">
                  Email Address <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <Mail className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
                  <input
                    type="email"
                    required
                    disabled={Boolean(editingAdmin)}
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="admin@apkagermanschool.com"
                    className={`w-full pl-9 pr-3.5 py-2.5 rounded-xl border text-xs font-semibold outline-none ${editingAdmin
                      ? 'bg-gray-100 text-gray-500 border-gray-200 cursor-not-allowed'
                      : 'border-gray-300 focus:border-[#FECE00]'
                      }`}
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold uppercase text-gray-700 mb-1">
                  {editingAdmin ? 'New Password (Leave blank to keep existing)' : <>Password <span className="text-red-500">*</span></>}
                </label>
                <div className="relative">
                  <Lock className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
                  <input
                    type={showPassword ? 'text' : 'password'}
                    required={!editingAdmin}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder={editingAdmin ? '••••••••' : 'At least 8 characters'}
                    className="w-full pl-9 pr-9 py-2.5 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 transition focus:outline-none"
                    title={showPassword ? 'Hide password' : 'Show password'}
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-1">
                <div>
                  <label className="block text-xs font-bold uppercase text-gray-700 mb-1">
                    Role *
                  </label>
                  <select
                    value={role}
                    onChange={(e) => setRole(e.target.value as any)}
                    className="w-full px-3 py-2.5 rounded-xl border border-gray-300 text-xs font-semibold bg-white outline-none focus:border-[#FECE00]"
                  >
                    <option value="admin">Admin</option>
                    <option value="super_admin">Super Admin</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-bold uppercase text-gray-700 mb-1">
                    Account Status
                  </label>
                  <select
                    value={isActive ? 'active' : 'inactive'}
                    onChange={(e) => setIsActive(e.target.value === 'active')}
                    className="w-full px-3 py-2.5 rounded-xl border border-gray-300 text-xs font-semibold bg-white outline-none focus:border-[#FECE00]"
                  >
                    <option value="active">Active</option>
                    <option value="inactive">Deactivated</option>
                  </select>
                </div>
              </div>

              <div className="flex items-center justify-end gap-3 pt-3 border-t border-gray-200">
                <button
                  type="button"
                  onClick={() => setShowModal(false)}
                  disabled={submitting}
                  className="px-4 py-2 rounded-xl text-xs font-bold text-gray-600 hover:bg-gray-100 transition"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={submitting}
                  className="px-6 py-2.5 rounded-xl bg-[#FECE00] hover:bg-[#D8A404] text-black font-extrabold text-xs shadow-xs transition"
                >
                  {submitting ? 'Saving...' : editingAdmin ? 'Save Changes' : 'Create Admin'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Confirm Delete Admin Modal */}
      <ConfirmDeleteModal
        isOpen={Boolean(deletingAdminTarget)}
        onClose={() => setDeletingAdminTarget(null)}
        onConfirm={handleConfirmDeleteAdmin}
        loading={deleting}
        title="Delete Admin Account"
        description={`Are you sure you want to delete admin account "${deletingAdminTarget?.name}" (${deletingAdminTarget?.email})? This action cannot be undone.`}
      />
    </div>
  );
}