"use client";

import { useState, useEffect } from "react";
import Link from "next/link";

interface WebinarRegistration {
  id: string;
  status: string;
  webinar: {
    id: string;
    title: string;
    startAt: string;
  };
}

interface User {
  id: string;
  email: string;
  firstName: string;
  lastName: string;
  role: string;
  isActive: boolean;
  emailVerified: boolean;
  createdAt: string;
  gender?: string;
  dob?: string;
  address?: string;
  image?: string;
  _count: {
    webinarRegistrations: number;
  };
  registeredWebinars: WebinarRegistration[];
}

interface PaginationInfo {
  page: number;
  pageSize: number;
  total: number;
  pages: number;
  hasMore: boolean;
}

export default function AdminUsersPage() {
  const [users, setUsers] = useState<User[]>([]);
  const [pagination, setPagination] = useState<PaginationInfo>({
    page: 1,
    pageSize: 10,
    total: 0,
    pages: 1,
    hasMore: false,
  });
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [message, setMessage] = useState("");
  const [updatingUserId, setUpdatingUserId] = useState<string | null>(null);

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

  const fetchUsers = async (page: number) => {
    setLoading(true);
    try {
      const params = new URLSearchParams({ page: String(page) });
      if (searchQuery) params.append("search", searchQuery);

      const response = await fetch(`/api/admin/users?${params}`);
      if (response.ok) {
        const data = await response.json();
        if (data.ok) {
          setUsers(data.users);
          setPagination(data.pagination);
        }
      }
    } catch (error) {
      console.error("Failed to fetch users:", error);
      setMessage("❌ Failed to load users");
    } finally {
      setLoading(false);
    }
  };

  const handleBlockUnblock = async (userId: string, currentlyActive: boolean) => {
    setUpdatingUserId(userId);
    try {
      const response = await fetch("/api/admin/users", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userId,
          isActive: !currentlyActive,
        }),
      });

      const data = await response.json();
      if (data.ok) {
        setMessage(`✅ ${data.message}`);
        fetchUsers(pagination.page);
        setTimeout(() => setMessage(""), 3000);
      } else {
        setMessage(`❌ ${data.message}`);
      }
    } catch (error) {
      setMessage("❌ Failed to update user");
    } finally {
      setUpdatingUserId(null);
    }
  };

  const handleRoleChange = async (userId: string, newRole: "USER" | "ADMIN") => {
    setUpdatingUserId(userId);
    try {
      const response = await fetch("/api/admin/users", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userId,
          role: newRole,
        }),
      });

      const data = await response.json();
      if (data.ok) {
        setMessage(`✅ ${data.message}`);
        fetchUsers(pagination.page);
        setTimeout(() => setMessage(""), 3000);
      } else {
        setMessage(`❌ ${data.message}`);
      }
    } catch (error) {
      setMessage("❌ Failed to update user role");
    } finally {
      setUpdatingUserId(null);
    }
  };

  return (
    <main className="max-w-7xl mx-auto px-6 py-16">
      <div className="mb-8">
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-semibold mb-4">
          👥 User Management
        </div>
        <h1 className="text-4xl font-bold text-slate-900 dark:text-white">
          Users
        </h1>
        <p className="text-lg text-gray-600 dark:text-gray-400">
          Manage user accounts, roles, and permissions ({pagination.total} total)
        </p>
      </div>

      {message && (
        <div
          className={`mb-4 px-4 py-3 rounded-lg font-semibold ${
            message.includes("✅")
              ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
              : "bg-red-500/10 text-red-600 dark:text-red-400"
          }`}
        >
          {message}
        </div>
      )}

      <div className="card p-6 mb-6">
        <input
          type="text"
          placeholder="🔍 Search by name or email..."
          className="input-field"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
      </div>

      {loading ? (
        <div className="text-center py-12">
          <div className="inline-block w-8 h-8 border-4 border-primary border-r-transparent rounded-full animate-spin"></div>
          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading users...</p>
        </div>
      ) : users.length === 0 ? (
        <div className="card p-12 text-center">
          <p className="text-gray-500 dark:text-gray-400">No users found</p>
        </div>
      ) : (
        <>
          <div className="space-y-4">
            {users.map((user) => (
              <div
                key={user.id}
                className="card p-6 border border-slate-200/60 dark:border-slate-700/60 hover:border-primary/50 transition-colors"
              >
                <div className="flex items-start justify-between mb-4">
                  <div className="flex items-start gap-4">
                    {user.image ? (
                      <img
                        src={user.image}
                        alt={user.firstName}
                        className="w-12 h-12 rounded-full object-cover"
                      />
                    ) : (
                      <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold">
                        {user.firstName[0]}{user.lastName[0]}
                      </div>
                    )}
                    <div>
                      <h3 className="font-bold text-lg text-gray-900 dark:text-white">
                        {user.firstName} {user.lastName}
                      </h3>
                      <p className="text-sm text-gray-600 dark:text-gray-400">
                        {user.email}
                      </p>
                      <div className="flex gap-2 mt-2">
                        {!user.isActive && (
                          <span className="px-2 py-1 bg-red-500/10 text-red-600 dark:text-red-400 text-xs font-semibold rounded">
                            🚫 BLOCKED
                          </span>
                        )}
                        {user.emailVerified && (
                          <span className="px-2 py-1 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-xs font-semibold rounded">
                            ✅ Verified
                          </span>
                        )}
                        {user.role === "ADMIN" && (
                          <span className="px-2 py-1 bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs font-semibold rounded">
                            👑 Admin
                          </span>
                        )}
                      </div>
                    </div>
                  </div>
                  <div className="text-right text-sm text-gray-500 dark:text-gray-400">
                    <p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>
                    <p>Registrations: {user._count.webinarRegistrations}</p>
                  </div>
                </div>

                {/* Registered Webinars */}
                {user.registeredWebinars.length > 0 && (
                  <div className="mb-4 pb-4 border-b border-slate-200 dark:border-slate-700">
                    <p className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                      📚 Recent Webinars ({user.registeredWebinars.length})
                    </p>
                    <div className="space-y-1">
                      {user.registeredWebinars.map((reg) => (
                        <div
                          key={reg.id}
                          className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-2"
                        >
                          <span className="w-2 h-2 rounded-full bg-primary"></span>
                          <Link
                            href={`/admin/webinars#${reg.webinar.id}`}
                            className="hover:text-primary hover:underline"
                          >
                            {reg.webinar.title}
                          </Link>
                          <span className="text-xs">
                            ({new Date(reg.webinar.startAt).toLocaleDateString()})
                          </span>
                          <span
                            className={`px-2 py-0.5 text-xs font-semibold rounded ${
                              reg.status === "CONFIRMED"
                                ? "bg-emerald-500/10 text-emerald-600"
                                : reg.status === "PAID"
                                  ? "bg-blue-500/10 text-blue-600"
                                  : "bg-yellow-500/10 text-yellow-600"
                            }`}
                          >
                            {reg.status}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Actions */}
                <div className="flex items-center justify-between">
                  <div className="flex gap-2">
                    <select
                      value={user.role}
                      onChange={(e) => handleRoleChange(user.id, e.target.value as "USER" | "ADMIN")}
                      disabled={updatingUserId === user.id}
                      className="px-3 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm font-semibold text-gray-900 dark:text-white disabled:opacity-50"
                    >
                      <option value="USER">👤 User</option>
                      <option value="ADMIN">👑 Admin</option>
                    </select>
                  </div>
                  <button
                    onClick={() => handleBlockUnblock(user.id, user.isActive)}
                    disabled={updatingUserId === user.id}
                    className={`px-4 py-2 rounded-lg font-semibold text-sm transition-colors disabled:opacity-50 ${
                      user.isActive
                        ? "bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20"
                        : "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20"
                    }`}
                  >
                    {updatingUserId === user.id
                      ? "⏳"
                      : user.isActive
                        ? "🚫 Block"
                        : "✅ Unblock"}
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* Pagination */}
          {pagination.pages > 1 && (
            <div className="mt-8 flex items-center justify-center gap-2">
              <button
                onClick={() => fetchUsers(pagination.page - 1)}
                disabled={pagination.page === 1}
                className="px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-gray-900 dark:text-white font-semibold disabled:opacity-50"
              >
                ← Previous
              </button>
              <div className="flex gap-1">
                {Array.from({ length: pagination.pages }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => fetchUsers(page)}
                    className={`w-10 h-10 rounded-lg font-semibold transition-colors ${
                      pagination.page === page
                        ? "bg-primary text-white"
                        : "bg-slate-100 dark:bg-slate-800 text-gray-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-700"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => fetchUsers(pagination.page + 1)}
                disabled={!pagination.hasMore}
                className="px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-gray-900 dark:text-white font-semibold disabled:opacity-50"
              >
                Next →
              </button>
            </div>
          )}
        </>
      )}
    </main>
  );
}