import { useState, useEffect } from 'react';
import api from '../store/auth';
import { Modal, ModalBody } from '../components/ui/Modal';
import { Avatar } from '../components/Avatar';
import { 
  UserPlus, Edit2, Trash2, Search, X, 
  ChevronRight, Download, Filter, Sparkles,
  Users, BookOpen, GraduationCap, Building2,
  TrendingUp, Mail, Phone, Key, ShieldCheck,
  CheckCircle2, AlertCircle, MoreHorizontal,
  Briefcase, Award, Clock
} from 'lucide-react';

type Gender = 'male' | 'female' | 'other';

interface Teacher {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  phone?: string;
  gender?: Gender | null;
  created_at: string;
  department_id?: number | null;
  department_name?: string;
  subject_count?: number;
  experience_years?: number;
  status?: 'active' | 'on_leave';
}

export default function Teachers() {
  const [teachers, setTeachers] = useState<Teacher[]>([]);
  const [filteredTeachers, setFilteredTeachers] = useState<Teacher[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [departmentFilter, setDepartmentFilter] = useState<number | 'all' | null>('all');
  const [editingTeacher, setEditingTeacher] = useState<Teacher | null>(null);
  
  const [form, setForm] = useState({ 
    email: '', 
    password: '', 
    first_name: '', 
    last_name: '', 
    phone: '',
    gender: '' as Gender | '',
    department_id: ''
  });

  const [departments, setDepartments] = useState<any[]>([]);

  useEffect(() => {
    loadData();
    loadDepartments();
  }, []);

  const departmentName = (id?: number | null) => {
    if (id == null) return 'General Faculty';
    return departments.find(d => d.id === id)?.name || 'General Faculty';
  };

  useEffect(() => {
    const q = searchQuery.toLowerCase();
    const filtered = teachers.filter(t => {
      if (departmentFilter !== 'all') {
        if (departmentFilter === null && t.department_id != null) return false;
        if (departmentFilter !== null && t.department_id !== departmentFilter) return false;
      }
      if (!q) return true;
      const fullName = `${t.first_name} ${t.last_name}`.toLowerCase();
      return (
        fullName.includes(q) ||
        t.email.toLowerCase().includes(q) ||
        departmentName(t.department_id).toLowerCase().includes(q)
      );
    });
    setFilteredTeachers(filtered);
  }, [searchQuery, teachers, departmentFilter, departments]);

  const loadData = async () => {
    setLoading(true);
    try {
      const res = await api.get('/users?role=teacher');
      setTeachers(res.data.map((t: any) => ({
        ...t,
        subject_count: t.subject_count,
        experience_years: t.experience_years,
        status: t.status || 'active'
      })));
    } catch (err) {
      console.error('Failed to load staff records');
    } finally {
      setLoading(false);
    }
  };

  const loadDepartments = async () => {
    try {
        const res = await api.get('/departments');
        setDepartments(res.data);
    } catch (err) {
        console.error('Failed to load departmental records');
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      if (editingTeacher) {
        await api.put(`/users/${editingTeacher.id}`, { ...form, role: 'teacher' });
      } else {
        await api.post('/users', { ...form, role: 'teacher' });
      }
      setShowModal(false);
      resetForm();
      loadData();
    } catch (err: any) {
      alert(err.response?.data?.error || 'Error recording faculty entry');
    }
  };

  const handleEdit = (teacher: Teacher) => {
    setEditingTeacher(teacher);
    setForm({
      first_name: teacher.first_name,
      last_name: teacher.last_name,
      email: teacher.email,
      phone: teacher.phone || '',
      gender: teacher.gender || '',
      password: '', // Don't pre-fill password
      department_id: '' // In real app, this would be set
    });
    setShowModal(true);
  };

  const resetForm = () => {
    setEditingTeacher(null);
    setForm({ email: '', password: '', first_name: '', last_name: '', phone: '', gender: '', department_id: '' });
  };

  const deleteTeacher = async (id: number) => {
    if (!confirm('Archive this faculty record? This action will restrict their system access.')) return;
    try {
        await api.delete(`/users/${id}`);
        loadData();
    } catch (err) {
        alert('Failed to archive record');
    }
  };

  const handleExport = () => {
    if (filteredTeachers.length === 0) return;
    const headers = ['ID', 'Name', 'Email', 'Department', 'Subjects', 'Join Date', 'Gender'];
    const csvContent = "data:text/csv;charset=utf-8," 
      + headers.join(",") + "\n"
      + filteredTeachers.map(t => [t.id, `${t.first_name} ${t.last_name}`, t.email, departmentName(t.department_id), t.subject_count, new Date(t.created_at).toLocaleDateString(), t.gender || ''].join(",")).join("\n");
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "nextgen_faculty_directory.csv");
    document.body.appendChild(link);
    link.click();
  };

  const stats = [
    { label: 'Total Faculty', value: teachers.length, icon: Briefcase, color: 'blue', trend: 'Records' },
    { label: 'Subject Leads', value: teachers.filter(t => (t.subject_count || 0) > 3).length, icon: Award, color: 'emerald', trend: 'Verified' },
    { label: 'Academic Units', value: departments.length, icon: Building2, color: 'orange', trend: 'Assigned' },
    { label: 'Avg. Experience', value: '8.4y', icon: Clock, color: 'purple', trend: 'Steady' },
  ];

  return (
    <div className="space-y-10 animate-in fade-in duration-700 pb-10">
      {/* Header Section */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
        <div>
          <h2 className="text-3xl font-black text-text tracking-tight text-capitalize">Faculty Directory</h2>
          <nav className="flex text-[0.65rem] font-black uppercase tracking-[2px] text-text-muted gap-2 items-center mt-1">
            <span>Administration</span>
            <ChevronRight size={12} className="text-text-muted/30" />
            <span className="text-primary">Staff</span>
          </nav>
        </div>
        <div className="flex gap-3">
          <button 
            onClick={handleExport}
            className="flex items-center gap-2 px-5 py-2.5 bg-card border border-border text-text rounded-xl font-bold text-sm hover:bg-muted transition-all shadow-sm active:scale-95"
          >
            <Download size={18} />
            Export Records
          </button>
          <button 
            className="flex items-center gap-2 px-6 py-2.5 bg-primary text-white rounded-xl font-bold text-sm hover:bg-primary/90 transition-all shadow-lg shadow-blue-900/10 active:scale-95"
            onClick={() => { resetForm(); setShowModal(true); }}
          >
            <UserPlus size={18} />
            Onboard Faculty
          </button>
        </div>
      </div>

      {/* Stats Bento Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {stats.map((stat) => (
          <div key={stat.label} className="bg-card border border-border p-5 rounded-2xl flex items-center gap-4 hover:shadow-md transition-all group cursor-default">
            <div className={`w-12 h-12 rounded-2xl flex items-center justify-center border group-hover:scale-110 transition-transform
              ${stat.color === 'blue' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-blue-100 dark:border-blue-900/30' : 
                stat.color === 'emerald' ? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 border-emerald-100 dark:border-emerald-900/30' : 
                stat.color === 'orange' ? 'bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400 border-orange-100 dark:border-orange-900/30' : 
                'bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 border-purple-100 dark:border-purple-900/30'}`}>
              <stat.icon size={22} />
            </div>
            <div>
              <p className="text-[0.65rem] font-black uppercase tracking-wider text-text-muted">{stat.label}</p>
              <div className="flex items-baseline gap-2">
                <p className="text-2xl font-black text-text">{stat.value}</p>
                <span className="text-[0.6rem] font-bold text-text-muted">{stat.trend}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Directory Control Bar */}
      <div className="bg-card border border-border rounded-[2rem] p-2 shadow-sm flex flex-col lg:flex-row items-stretch lg:items-center gap-4">
        <div className="relative group flex-1">
          <Search size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted group-focus-within:text-primary transition-colors" />
          <input
            type="text"
            className="w-full bg-muted/50 border border-border rounded-2xl pl-11 pr-4 py-3.5 text-sm font-medium focus:outline-none focus:ring-4 focus:ring-primary/5 focus:bg-card focus:border-primary transition-all dark:bg-background/50"
            placeholder="Search by faculty name, email or department..."
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
          />
          {searchQuery && (
            <button onClick={() => setSearchQuery('')} className="absolute right-4 top-1/2 -translate-y-1/2 text-text-muted hover:text-rose-500">
              <X size={16} />
            </button>
          )}
        </div>

        <div className="relative group min-w-[16rem]">
          <Filter size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted group-focus-within:text-primary transition-colors pointer-events-none" />
          <select
            value={departmentFilter === null ? 'none' : departmentFilter === 'all' ? 'all' : departmentFilter}
            onChange={e => {
              const v = e.target.value;
              if (v === 'all') setDepartmentFilter('all');
              else if (v === 'none') setDepartmentFilter(null);
              else setDepartmentFilter(Number(v));
            }}
            className="w-full appearance-none bg-muted/50 border border-border rounded-2xl pl-11 pr-10 py-3.5 text-sm font-medium focus:outline-none focus:ring-4 focus:ring-primary/5 focus:bg-card focus:border-primary transition-all text-text cursor-pointer dark:bg-background/50"
          >
            <option value="all">All Departments</option>
            <option value="none">General Faculty</option>
            {departments.map(d => (
              <option key={d.id} value={d.id}>{d.name}</option>
            ))}
          </select>
          <ChevronRight size={14} className="absolute right-4 top-1/2 -translate-y-1/2 text-text-muted rotate-90 pointer-events-none" />
        </div>
      </div>

      {/* Faculty Ledger Table */}
      <div className="bg-card border border-border rounded-[2.5rem] shadow-sm overflow-hidden border-collapse">
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="bg-muted/50 border-b border-border">
                <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest">Faculty Member</th>
                <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest">Gender</th>
                <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest">Academic Assignment</th>
                <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest">Experience Pulse</th>
                <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest">System Status</th>
                <th className="px-8 py-5 text-[0.65rem] font-black text-primary uppercase tracking-widest text-right">Management</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {loading ? (
                <tr>
                  <td colSpan={6} className="py-20 text-center">
                    <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                    <p className="text-text-muted font-bold uppercase tracking-widest text-[0.65rem]">Loading...</p>
                  </td>
                </tr>
              ) : filteredTeachers.length === 0 ? (
                <tr>
                  <td colSpan={6} className="py-24 text-center">
                    <Users size={48} className="mx-auto text-muted mb-4" />
                    <p className="text-text-muted font-bold uppercase tracking-widest text-[0.65rem]">No matching faculty records</p>
                  </td>
                </tr>
              ) : filteredTeachers.map((teacher) => (
                <tr key={teacher.id} className="hover:bg-muted/30 transition-colors group cursor-default">
                  <td className="px-8 py-5">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 rounded-2xl bg-muted overflow-hidden flex-shrink-0 border border-border shadow-inner group-hover:scale-105 transition-transform flex items-center justify-center">
                        <Avatar 
                          src={`https://api.dicebear.com/9.x/initials/svg?seed=${teacher.id}`} 
                          firstName={teacher.first_name} 
                          lastName={teacher.last_name} 
                        />
                      </div>
                      <div>
                        <div className="text-[0.95rem] font-bold text-text group-hover:text-primary transition-colors">{teacher.first_name} {teacher.last_name}</div>
                        <div className="text-[0.6rem] text-text-muted font-black tracking-tighter uppercase mt-0.5">UID-2024-FAC-{teacher.id.toString().padStart(3, '0')}</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-8 py-5">
                    <span className="text-[0.65rem] font-black uppercase tracking-widest text-text-secondary">
                      {teacher.gender || 'Not specified'}
                    </span>
                  </td>
                  <td className="px-8 py-5">
                    <div className="space-y-1.5">
                        <span className="px-3 py-1.5 rounded-xl bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-900/30 text-[0.65rem] font-black uppercase tracking-widest">
                            {departmentName(teacher.department_id)}
                        </span>
                        <div className="flex items-center gap-2 text-[0.65rem] text-text-muted font-bold px-1">
                            <BookOpen size={10} />
                            {teacher.subject_count} Assigned Subjects
                        </div>
                    </div>
                  </td>
                  <td className="px-8 py-5">
                    <div className="space-y-2">
                        <div className="flex justify-between items-center text-[0.6rem] font-black uppercase">
                          <span className="text-text-muted">Institutional Seniority</span>
                          <span className="text-primary">{teacher.experience_years} Years</span>
                        </div>
                        <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden p-0.5 shadow-inner">
                          <div 
                            className="h-full bg-primary rounded-full transition-all duration-1000"
                            style={{ width: `${Math.min(100, (teacher.experience_years || 0) * 10)}%` }}
                          />
                        </div>
                    </div>
                  </td>
                  <td className="px-8 py-5">
                    <div className="flex items-center gap-2">
                      <div className={`w-2 h-2 rounded-full ${teacher.status === 'active' ? 'bg-emerald-500' : 'bg-amber-500'} animate-pulse`} />
                      <span className={`text-[0.6rem] font-black uppercase tracking-widest ${teacher.status === 'active' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400'}`}>
                        {teacher.status?.replace('_', ' ')}
                      </span>
                    </div>
                  </td>
                  <td className="px-8 py-5 text-right">
                    <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                      <button 
                        onClick={() => handleEdit(teacher)}
                        className="p-2.5 bg-card border border-border text-text-muted hover:text-primary hover:border-primary rounded-xl transition-all shadow-sm"
                        title="Edit Record"
                      >
                        <Edit2 size={16} />
                      </button>
                      <button
                        onClick={async () => {
                            const newPassword = window.prompt(`Reset password for ${teacher.first_name} ${teacher.last_name}`);
                            if (newPassword === null) return;
                            const value = newPassword.trim();
                            if (!value) {
                                alert('Password cannot be empty — enter a value or cancel.');
                                return;
                            }
                            try {
                                await api.put(`/users/${teacher.id}/reset-password`, { password: value });
                                alert('Password updated.');
                            } catch (err) {
                                console.error('Reset credentials failed', err);
                                alert(err.response?.data?.error || 'Failed to reset credentials');
                            }
                        }}
                        className="p-2.5 bg-card border border-border text-text-muted hover:text-primary hover:border-primary rounded-xl transition-all shadow-sm"
                        title="Reset Credentials"
                      >
                        <Key size={16} />
                      </button>
                      <button 
                        onClick={() => deleteTeacher(teacher.id)}
                        className="p-2.5 bg-card border border-border text-text-muted hover:text-rose-500 hover:border-rose-300 dark:hover:border-rose-900/30 rounded-xl transition-all shadow-sm"
                        title="Archive Member"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Creation Modal */}
      {showModal && (
        <Modal
          open={true}
          onClose={() => setShowModal(false)}
          title={editingTeacher ? 'Update Faculty Profile' : 'New Faculty Onboarding'}
          icon={ShieldCheck}
          subtitle="Configure institutional access"
          maxWidth="max-w-xl"
          zIndex={150}
        >
          <ModalBody className="p-0 overflow-y-auto custom-scrollbar">
            <form id="teachers-create-form" onSubmit={handleSubmit} className="p-10 space-y-6">
              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-1.5">
                  <label className="text-[0.6rem] font-black uppercase tracking-[2px] text-text-muted px-1">First Name</label>
                  <input className="form-input" value={form.first_name} onChange={e => setForm({...form, first_name: e.target.value})} placeholder="Legal first name" required />
                </div>
                <div className="space-y-1.5">
                  <label className="text-[0.6rem] font-black uppercase tracking-[2px] text-text-muted px-1">Last Name</label>
                  <input className="form-input" value={form.last_name} onChange={e => setForm({...form, last_name: e.target.value})} placeholder="Legal last name" required />
                </div>
              </div>

              <div className="space-y-1.5">
                <label className="text-[0.6rem] font-black uppercase tracking-[2px] text-text-muted px-1">Institutional Email</label>
                <div className="relative">
                    <Mail size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted/50" />
                    <input className="form-input pl-11" type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="faculty@nextgen.edu" required />
                </div>
              </div>

              <div className="space-y-1.5">
                <label className="text-[0.6rem] font-black uppercase tracking-[2px] text-text-muted px-1">Gender</label>
                <select className="form-input appearance-none cursor-pointer" value={form.gender} onChange={e => setForm({...form, gender: e.target.value as Gender | ''})}>
                  <option value="">Not specified</option>
                  <option value="male">Male</option>
                  <option value="female">Female</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-1.5">
                    <label className="text-[0.6rem] font-black uppercase tracking-[2px] text-text-muted px-1">Assigned Unit</label>
                    <select className="form-input appearance-none cursor-pointer" value={form.department_id} onChange={e => setForm({...form, department_id: e.target.value})}>
                        <option value="">Select department...</option>
                        {departments.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
                    </select>
                </div>
                <div className="space-y-1.5">
                    <label className="text-[0.6rem] font-black uppercase tracking-[2px] text-text-muted px-1">Contact Link</label>
                    <div className="relative">
                        <Phone size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted/50" />
                        <input className="form-input pl-11" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="+1 234 567 890" />
                    </div>
                </div>
              </div>

              {!editingTeacher && (
                <div className="space-y-1.5">
                  <label className="text-[0.6rem] font-black uppercase tracking-[2px] text-text-muted px-1">Access Protocol (Password)</label>
                  <div className="relative">
                    <Key size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted/50" />
                    <input className="form-input pl-11" type="password" value={form.password} onChange={e => setForm({...form, password: e.target.value})} placeholder="Minimum 8 characters" required />
                  </div>
                </div>
              )}

              <div className="flex items-center gap-3 p-4 bg-blue-50/10 dark:bg-blue-900/10 rounded-2xl border border-blue-100/20 dark:border-blue-900/20">
                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary shadow-sm"><GraduationCap size={20} /></div>
                <div className="flex-1">
                    <p className="text-[0.65rem] font-black uppercase text-primary tracking-widest">Faculty Credentials</p>
                    <p className="text-[0.6rem] font-bold text-text-muted">Account will be initialized with full SMS access.</p>
                </div>
              </div>

              <button 
                type="submit" 
                className={`w-full py-5 text-white font-black uppercase tracking-widest text-xs rounded-2xl transition-all shadow-xl active:scale-95 flex items-center justify-center gap-3 ${editingTeacher ? 'bg-slate-900 dark:bg-slate-800 hover:bg-black shadow-blue-900/10' : 'bg-primary hover:bg-primary/90 shadow-primary/20'}`}
              >
                {editingTeacher ? <CheckCircle2 size={18} /> : <Sparkles size={18} />}
                {editingTeacher ? 'Commit Profile Updates' : 'Finalize Faculty Onboarding'}
              </button>
            </form>
          </ModalBody>
        </Modal>
      )}

      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 71, 171, 0.1); border-radius: 10px; }
      `}</style>
    </div>
  );
}
