'use client';

import React, { useState, useEffect } from 'react';
import { apiRequest } from '@/lib/api';
import { toast } from '@/context/ToastContext';
import {
  Users,
  Search,
  Filter,
  UserCheck,
  UserX,
  Mail,
  Calendar,
  CheckCircle,
  XCircle,
  RefreshCw,
  Eye,
  X,
  BookOpen,
  UserPlus,
  Plus,
  Lock,
  Phone,
  Loader2
} from 'lucide-react';

interface Student {
  _id: string;
  name: string;
  email: string;
  status: 'active' | 'deactivated';
  createdAt?: string;
  enrolledCourses?: string[];
}

export default function AdminStudentsPage() {
  const [students, setStudents] = useState<Student[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'deactivated'>('all');
  const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);

  // Registration Modal state
  const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
  const [registerLoading, setRegisterLoading] = useState(false);
  const [registerForm, setRegisterForm] = useState({
    name: '',
    email: '',
    password: '',
    phoneNumber: '',
    status: 'active',
  });


  const fetchStudents = async () => {
    setLoading(true);
    const params = new URLSearchParams();
    if (searchTerm.trim()) params.append('search', searchTerm.trim());
    if (statusFilter !== 'all') params.append('status', statusFilter);
    params.append('limit', '100');

    const queryString = params.toString() ? `?${params.toString()}` : '';
    const res = await apiRequest(`/students${queryString}`);
    if (res.success && res.students) {
      setStudents(res.students);
    }
    setLoading(false);
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      fetchStudents();
    }, 300);
    return () => clearTimeout(timer);
  }, [searchTerm, statusFilter]);

  const handleToggleStatus = async (studentId: string, currentStatus: string) => {
    const newStatus = currentStatus === 'active' ? 'deactivated' : 'active';
    const res = await apiRequest(`/students/${studentId}/status`, {
      method: 'PATCH',
      body: JSON.stringify({ status: newStatus }),
    });

    if (res.success) {
      toast.success(`Student status updated to ${newStatus}`);
      setStudents((prev) =>
        prev.map((s) => (s._id === studentId ? { ...s, status: newStatus as any } : s))
      );
      if (selectedStudent && selectedStudent._id === studentId) {
        setSelectedStudent({ ...selectedStudent, status: newStatus as any });
      }
    } else {
      toast.error(res.error || 'Failed to update student status');
    }
  };

  const handleRegisterStudent = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!registerForm.name.trim() || !registerForm.email.trim()) {
      toast.error('Please enter student name and email');
      return;
    }

    setRegisterLoading(true);
    const res = await apiRequest('/students', {
      method: 'POST',
      body: JSON.stringify(registerForm),
    });

    setRegisterLoading(false);

    if (res.success) {
      toast.success(res.message || 'Student registered successfully');
      setIsRegisterModalOpen(false);
      setRegisterForm({
        name: '',
        email: '',
        password: '',
        phoneNumber: '',
        status: 'active',
      });
      fetchStudents();
    } else {
      toast.error(res.error || 'Failed to register student');
    }
  };

  const activeCount = students.filter((s) => s.status === 'active').length;
  const deactivatedCount = students.filter((s) => s.status === 'deactivated').length;

  return (
    <div className="space-y-8 max-w-7xl mx-auto">
      {/* Header */}
      <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>Student Account Management</span>
          </h1>
        </div>
        <button
          onClick={() => setIsRegisterModalOpen(true)}
          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 self-start md:self-auto"
        >
          <UserPlus className="w-4 h-4 text-black" />
          <span>Register Student</span>
        </button>
      </div>


      {/* Summary KPI Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Total Enrolled Students</p>
            <p className="text-2xl font-black text-gray-900 mt-1">{loading ? '...' : students.length}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 border border-blue-100 flex items-center justify-center">
            <Users className="w-5 h-5" />
          </div>
        </div>

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

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Deactivated Accounts</p>
            <p className="text-2xl font-black text-gray-900 mt-1">{loading ? '...' : deactivatedCount}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-rose-50 text-rose-600 border border-rose-100 flex items-center justify-center">
            <UserX className="w-5 h-5" />
          </div>
        </div>
      </div>

      {/* Filter and Search Bar */}
      <div className="bg-white rounded-2xl border border-gray-200 shadow-xs overflow-hidden">
        <div className="p-4 border-b border-gray-200 bg-gray-50/50 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="relative w-full sm:w-80">
            <Search className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              placeholder="Search by student name or email..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none bg-white"
            />
          </div>

          <div className="flex items-center gap-2 w-full sm:w-auto justify-end">
            <Filter className="w-4 h-4 text-gray-500" />
            <span className="text-xs font-bold text-gray-600">Status:</span>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as any)}
              className="px-3 py-2 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none bg-white text-gray-800"
            >
              <option value="all">All Accounts ({students.length})</option>
              <option value="active">Active Only ({activeCount})</option>
              <option value="deactivated">Deactivated Only ({deactivatedCount})</option>
            </select>
          </div>
        </div>

        {/* Directory Table */}
        <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">Student Details</th>
                <th className="px-6 py-4">Email</th>
                <th className="px-6 py-4">Status</th>
                <th className="px-6 py-4">Registration Date</th>
                <th className="px-6 py-4 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {loading ? (
                <tr>
                  <td colSpan={5} className="px-6 py-8 text-center text-gray-500 text-xs font-semibold">
                    Fetching student accounts...
                  </td>
                </tr>
              ) : students.length === 0 ? (
                <tr>
                  <td colSpan={5} className="px-6 py-8 text-center text-gray-500 text-xs">
                    No matching student accounts found.
                  </td>
                </tr>
              ) : (
                students.map((student) => (
                  <tr key={student._id} 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-blue-50 text-blue-800 border border-blue-200 font-extrabold flex items-center justify-center text-xs shrink-0">
                          {student.name?.charAt(0) || 'S'}
                        </div>
                        <div>
                          <p className="font-bold text-gray-900">{student.name}</p>
                          {/* <p className="text-[11px] text-gray-400">ID: {student._id.slice(-6)}</p> */}
                        </div>
                      </div>
                    </td>

                    <td className="px-6 py-4 font-medium text-gray-600">
                      <div className="flex items-center gap-1.5">
                        <Mail className="w-3.5 h-3.5 text-gray-400" />
                        <span>{student.email}</span>
                      </div>
                    </td>

                    <td className="px-6 py-4">
                      <span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-bold border ${student.status === 'active'
                        ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
                        : 'bg-rose-50 text-rose-700 border-rose-200'
                        }`}>
                        {student.status === 'active' ? (
                          <CheckCircle className="w-3 h-3 text-emerald-600" />
                        ) : (
                          <XCircle className="w-3 h-3 text-rose-500" />
                        )}
                        <span className="capitalize">{student.status}</span>
                      </span>
                    </td>

                    <td className="px-6 py-4 text-xs text-gray-500">
                      <div className="flex items-center gap-1.5">
                        <Calendar className="w-3.5 h-3.5 text-gray-400" />
                        <span>{student.createdAt ? new Date(student.createdAt).toLocaleDateString() : 'N/A'}</span>
                      </div>
                    </td>

                    <td className="px-6 py-4 text-right">
                      <div className="flex items-center justify-end gap-2">
                        <button
                          onClick={() => setSelectedStudent(student)}
                          className="px-2.5 py-1.5 rounded-lg text-xs font-bold text-gray-700 hover:bg-gray-100 border border-gray-200 transition flex items-center gap-1"
                        >
                          <Eye className="w-3.5 h-3.5" />
                          <span>View Profile</span>
                        </button>
                        <button
                          onClick={() => handleToggleStatus(student._id, student.status)}
                          className={`px-3 py-1.5 rounded-lg text-xs font-bold transition border ${student.status === 'active'
                            ? 'bg-red-50 hover:bg-red-600 text-red-600 hover:text-white border-red-200'
                            : 'bg-emerald-50 hover:bg-emerald-600 text-emerald-700 hover:text-white border-emerald-200'
                            }`}
                        >
                          {student.status === 'active' ? 'Deactivate' : 'Activate'}
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Student Profile Drawer / Modal */}
      {selectedStudent && (
        <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 !m-0">
          <div className="bg-white max-w-md w-full rounded-2xl shadow-2xl border border-gray-200 p-6 space-y-6">
            <div className="flex items-center justify-between border-b border-gray-200 pb-4">
              <h3 className="text-lg font-extrabold text-gray-900">Student Profile</h3>
              <button
                onClick={() => setSelectedStudent(null)}
                className="p-1 rounded-lg text-gray-400 hover:text-gray-700 transition"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <div className="w-14 h-14 rounded-2xl bg-[#FECE00] text-black font-black text-2xl flex items-center justify-center border border-amber-300">
                  {selectedStudent.name?.charAt(0) || 'S'}
                </div>
                <div>
                  <h4 className="text-base font-bold text-gray-900">{selectedStudent.name}</h4>
                  <p className="text-xs text-gray-500">{selectedStudent.email}</p>
                </div>
              </div>

              <div className="p-4 rounded-xl bg-gray-50 border border-gray-200 space-y-2 text-xs">
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Account Status</span>
                  <span className={`font-bold capitalize ${selectedStudent.status === 'active' ? 'text-emerald-600' : 'text-red-600'}`}>
                    {selectedStudent.status}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500 font-bold uppercase">Registered On</span>
                  <span className="font-semibold text-gray-800">
                    {selectedStudent.createdAt ? new Date(selectedStudent.createdAt).toLocaleDateString() : 'N/A'}
                  </span>
                </div>
              </div>
            </div>

            <div className="pt-2">
              <button
                onClick={() => setSelectedStudent(null)}
                className="w-full py-2.5 rounded-xl bg-gray-900 hover:bg-black text-white font-extrabold text-xs transition"
              >
                Close Profile
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Register New Student Modal */}
      {isRegisterModalOpen && (
        <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 !m-0">
          <div className="bg-white max-w-md w-full rounded-2xl shadow-2xl border border-gray-200 p-6 space-y-6">
            <div className="flex items-center justify-between border-b border-gray-200 pb-4">
              <h3 className="text-lg font-extrabold text-gray-900 flex items-center gap-2">
                <UserPlus className="w-5 h-5 text-[#FECE00]" />
                <span>Register New Student</span>
              </h3>
              <button
                onClick={() => setIsRegisterModalOpen(false)}
                className="p-1 rounded-lg text-gray-400 hover:text-gray-700 transition"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleRegisterStudent} className="space-y-4">
              <div>
                <label className="block text-xs font-bold uppercase text-gray-600 mb-1">
                  Full Name <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  required
                  placeholder="e.g. John Doe"
                  value={registerForm.name}
                  onChange={(e) => setRegisterForm({ ...registerForm, name: e.target.value })}
                  className="w-full px-3.5 py-2.5 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase text-gray-600 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
                    placeholder="student@example.com"
                    value={registerForm.email}
                    onChange={(e) => setRegisterForm({ ...registerForm, email: e.target.value })}
                    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-600 mb-1">
                  Password <span className="text-gray-400 text-[10px] font-normal">(Default: Student@123456)</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="password"
                    placeholder="Enter password or leave blank for default"
                    value={registerForm.password}
                    onChange={(e) => setRegisterForm({ ...registerForm, password: e.target.value })}
                    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-600 mb-1">
                  Phone Number
                </label>
                <div className="relative">
                  <Phone className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
                  <input
                    type="tel"
                    placeholder="+1 234 567 890"
                    value={registerForm.phoneNumber}
                    onChange={(e) => setRegisterForm({ ...registerForm, phoneNumber: e.target.value })}
                    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-600 mb-1">
                  Initial Account Status
                </label>
                <select
                  value={registerForm.status}
                  onChange={(e) => setRegisterForm({ ...registerForm, status: e.target.value as any })}
                  className="w-full px-3 py-2.5 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none bg-white text-gray-800"
                >
                  <option value="active">Active</option>
                  <option value="deactivated">Deactivated</option>
                </select>
              </div>

              <div className="pt-4 flex items-center justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setIsRegisterModalOpen(false)}
                  className="px-4 py-2.5 rounded-xl text-xs font-bold text-gray-600 hover:bg-gray-100 border border-gray-200 transition"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={registerLoading}
                  className="px-5 py-2.5 rounded-xl bg-[#FECE00] hover:bg-[#e5b900] text-black font-extrabold text-xs shadow-sm transition flex items-center gap-2 disabled:opacity-50 cursor-pointer"
                >
                  {registerLoading ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      <span>Registering...</span>
                    </>
                  ) : (
                    <>
                      <UserPlus className="w-4 h-4" />
                      <span>Register Student</span>
                    </>
                  )}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}