'use client';

import { useEffect, useState, useCallback } from 'react';
import { useSearchParams } from 'next/navigation';
import toast from 'react-hot-toast';
import {
  Plus, Search, RefreshCw, Loader2, MoreHorizontal,
  ShieldCheck, UserCog, Trash2, ToggleLeft, ToggleRight, KeyRound
} from 'lucide-react';
import { usersApi } from '@/lib/api';
import { useAuth, usePermissions } from '@/lib/auth';
import { User, Role, Status } from '@/types';
import { clsx } from 'clsx';
import CreateUserModal from '@/components/forms/CreateUserModal';
import ResetPasswordModal from '@/components/forms/ResetPasswordModal';

export default function UsersPage() {
  const { user: me } = useAuth();
  const perms = usePermissions();
  const searchParams = useSearchParams();
  const roleFilter = searchParams.get('role') ?? '';

  const [users, setUsers] = useState<User[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [filterRole, setFilterRole] = useState(roleFilter);
  const [filterStatus, setFilterStatus] = useState('');
  const [showCreate, setShowCreate] = useState(false);
  const [resetTarget, setResetTarget] = useState<User | null>(null);
  const [activeMenu, setActiveMenu] = useState<number | null>(null);

  const fetchUsers = useCallback(async () => {
    setIsLoading(true);
    try {
      const res = await usersApi.list({
        page,
        per_page: 20,
        search: search || undefined,
        role: filterRole || undefined,
        status: filterStatus || undefined,
      });
      setUsers(res.data.data);
      setTotal(res.data.total);
    } catch (err: any) {
      toast.error('Failed to load users');
    } finally {
      setIsLoading(false);
    }
  }, [page, search, filterRole, filterStatus]);

  useEffect(() => { fetchUsers(); }, [fetchUsers]);

  // ----------------------------------------------------------------
  const handleStatusToggle = async (user: User) => {
    const newStatus: Status = user.status === 'active' ? 'disabled' : 'active';
    try {
      await usersApi.updateStatus(user.id, newStatus);
      toast.success(`${user.name} is now ${newStatus}`);
      fetchUsers();
    } catch {
      toast.error('Failed to update status');
    }
    setActiveMenu(null);
  };

  const handleDelete = async (user: User) => {
    if (!confirm(`Delete user "${user.username}"? This cannot be undone.`)) return;
    try {
      await usersApi.delete(user.id);
      toast.success('User deleted');
      fetchUsers();
    } catch {
      toast.error('Failed to delete user');
    }
    setActiveMenu(null);
  };

  // ----------------------------------------------------------------
  const roleChip = (role: Role) => {
    const map: Record<Role, { label: string; cls: string }> = {
      'master-admin': { label: 'Master Admin', cls: 'bg-purple-500/10 text-purple-400' },
      'admin':        { label: 'Admin',        cls: 'bg-ts-accent/10 text-ts-accent' },
      'operator':     { label: 'Operator',     cls: 'bg-green-500/10 text-green-400' },
    };
    const r = map[role];
    return (
      <span className={clsx('ts-badge-role', r.cls)}>{r.label}</span>
    );
  };

  const statusChip = (status: Status) =>
    status === 'active'
      ? <span className="ts-badge-active">Active</span>
      : <span className="ts-badge-disabled">Disabled</span>;

  // ----------------------------------------------------------------
  return (
    <div>
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-xl font-semibold text-ts-text">User Management</h1>
          <p className="text-sm text-ts-muted mt-0.5">{total} users total</p>
        </div>
        {perms.canManageUsers && (
          <button onClick={() => setShowCreate(true)} className="ts-btn-primary flex items-center gap-2">
            <Plus size={16} />
            Add User
          </button>
        )}
      </div>

      {/* Filters */}
      <div className="ts-card p-4 mb-5 flex flex-wrap gap-3">
        <div className="relative flex-1 min-w-48">
          <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-ts-muted" />
          <input
            className="ts-input pl-9"
            placeholder="Search by username, name, email…"
            value={search}
            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
          />
        </div>
        <select
          className="ts-input w-auto"
          value={filterRole}
          onChange={(e) => { setFilterRole(e.target.value); setPage(1); }}
        >
          <option value="">All roles</option>
          {me?.role === 'master-admin' && <option value="master-admin">Master Admin</option>}
          <option value="admin">Admin</option>
          <option value="operator">Operator</option>
        </select>
        <select
          className="ts-input w-auto"
          value={filterStatus}
          onChange={(e) => { setFilterStatus(e.target.value); setPage(1); }}
        >
          <option value="">All statuses</option>
          <option value="active">Active</option>
          <option value="disabled">Disabled</option>
        </select>
        <button onClick={fetchUsers} className="ts-btn-ghost flex items-center gap-2">
          <RefreshCw size={15} />
          Refresh
        </button>
      </div>

      {/* Table */}
      <div className="ts-card overflow-hidden">
        {isLoading ? (
          <div className="flex justify-center py-16">
            <Loader2 className="animate-spin text-ts-muted" size={28} />
          </div>
        ) : users.length === 0 ? (
          <div className="text-center py-16 text-ts-muted">
            <UserCog size={32} className="mx-auto mb-3 opacity-30" />
            <p className="text-sm">No users found</p>
          </div>
        ) : (
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-ts-border text-ts-muted text-xs uppercase tracking-wider">
                <th className="text-left px-5 py-3 font-medium">User</th>
                <th className="text-left px-4 py-3 font-medium">Role</th>
                <th className="text-left px-4 py-3 font-medium">Status</th>
                <th className="text-left px-4 py-3 font-medium">2FA</th>
                <th className="text-left px-4 py-3 font-medium">Created by</th>
                <th className="px-4 py-3" />
              </tr>
            </thead>
            <tbody>
              {users.map((u) => (
                <tr
                  key={u.id}
                  className="border-b border-ts-border/50 hover:bg-ts-border/30 transition-colors"
                >
                  <td className="px-5 py-4">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-full bg-ts-accent/10 flex items-center justify-center shrink-0">
                        <span className="text-xs font-semibold text-ts-accent">
                          {(u.display_name || u.name)?.[0]?.toUpperCase()}
                        </span>
                      </div>
                      <div>
                        <p className="font-medium text-ts-text">{u.display_name || u.name}</p>
                        <p className="text-xs text-ts-muted">@{u.username} · {u.email}</p>
                      </div>
                    </div>
                  </td>
                  <td className="px-4 py-4">{roleChip(u.role)}</td>
                  <td className="px-4 py-4">{statusChip(u.status)}</td>
                  <td className="px-4 py-4">
                    <span className={clsx(
                      'text-xs',
                      u.two_factor_devices > 0 ? 'text-green-400' : 'text-ts-muted'
                    )}>
                      {u.two_factor_devices}/2 devices
                    </span>
                  </td>
                  <td className="px-4 py-4 text-ts-muted text-xs">{u.created_by ?? '—'}</td>
                  <td className="px-4 py-4 relative">
                    {u.role !== 'master-admin' && perms.canManageUsers && (
                      <>
                        <button
                          onClick={() => setActiveMenu(activeMenu === u.id ? null : u.id)}
                          className="ts-btn-ghost p-1.5"
                        >
                          <MoreHorizontal size={16} />
                        </button>
                        {activeMenu === u.id && (
                          <div className="absolute right-4 top-10 z-10 w-44 bg-ts-surface border border-ts-border rounded-lg shadow-elevated py-1">
                            {/* Reset Password */}
                            <button
                              onClick={() => { setResetTarget(u); setActiveMenu(null); }}
                              className="flex items-center gap-2 w-full px-3 py-2 text-sm text-ts-text hover:bg-ts-border transition-colors"
                            >
                              <KeyRound size={14} />
                              Reset Password
                            </button>
                            {/* Toggle status (admin can for operators; master-admin can for all) */}
                            {(perms.isMasterAdmin || (perms.isAdmin && u.role === 'operator')) && (
                              <button
                                onClick={() => handleStatusToggle(u)}
                                className="flex items-center gap-2 w-full px-3 py-2 text-sm text-ts-text hover:bg-ts-border transition-colors"
                              >
                                {u.status === 'active'
                                  ? <><ToggleLeft size={14} /> Disable</>
                                  : <><ToggleRight size={14} /> Enable</>
                                }
                              </button>
                            )}
                            {/* Delete (master-admin only) */}
                            {perms.canDeleteUsers && (
                              <button
                                onClick={() => handleDelete(u)}
                                className="flex items-center gap-2 w-full px-3 py-2 text-sm text-red-400 hover:bg-red-400/5 transition-colors"
                              >
                                <Trash2 size={14} />
                                Delete User
                              </button>
                            )}
                          </div>
                        )}
                      </>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Pagination */}
      {total > 20 && (
        <div className="flex justify-end gap-2 mt-4">
          <button
            onClick={() => setPage(p => Math.max(1, p - 1))}
            disabled={page === 1}
            className="ts-btn-ghost text-sm disabled:opacity-40"
          >
            ← Prev
          </button>
          <span className="text-sm text-ts-muted self-center">Page {page}</span>
          <button
            onClick={() => setPage(p => p + 1)}
            disabled={users.length < 20}
            className="ts-btn-ghost text-sm disabled:opacity-40"
          >
            Next →
          </button>
        </div>
      )}

      {/* Modals */}
      {showCreate && (
        <CreateUserModal
          onClose={() => setShowCreate(false)}
          onCreated={() => { setShowCreate(false); fetchUsers(); }}
        />
      )}
      {resetTarget && (
        <ResetPasswordModal
          user={resetTarget}
          onClose={() => setResetTarget(null)}
          onReset={() => { setResetTarget(null); fetchUsers(); }}
        />
      )}
    </div>
  );
}