"use client";

import { useState, useEffect } from "react";
import { UserGrid } from "@/components/users/UserGrid";
// import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useUser } from "@clerk/nextjs";
import { getGymIdFromUser } from "@/lib/error-helpers";
import log from "@/lib/logger";
import { toast } from "@/lib/toast";
import { CreateUserModal } from "./CreateUserModal";

interface User {
  id: string;
  email: string;
  firstName: string;
  lastName: string;
  role: string;
  phone?: string;
  gymId?: string;
  createdAt: Date;
  isCheckedIn?: boolean;
  checkInTime?: Date;
  lastCheckInTime?: Date;
  checkInsThisWeek?: number;
  checkInsThisMonth?: number;
  client?: {
    id: string;
    membershipType: string;
    membershipStatus: string;
    joinDate: Date;
    lastVisit?: Date;
  };
}

export function UserManagement() {
  const { user } = useUser();
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<string>("all");
  const [selectedUser, setSelectedUser] = useState<User | null>(null);
  const [isEditing, setIsEditing] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [editForm, setEditForm] = useState<{
    firstName: string;
    lastName: string;
    email: string;
    role: string;
    phone: string;
    gymId: string;
  } | null>(null);

  // Active gyms for dropdown
  const [gyms, setGyms] = useState<Array<{ id: string; name: string }>>([]);

  // Load gyms when modal opens or refreshes
  useEffect(() => {
    if (isEditing) {
      (async () => {
        try {
          const res = await fetch("/api/gyms");
          const data = await res.json();
          if (Array.isArray(data)) {
            // map down to id and name to avoid extra payload use here
            setGyms(data.map((g: any) => ({ id: g.id, name: g.name })));
          } else {
            setGyms([]);
          }
        } catch {
          setGyms([]);
        }
      })();
    }
  }, [isEditing]);

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

  const fetchUsers = async () => {
    setLoading(true);
    try {
      const ts = Date.now();
      const url =
        filter === "all"
          ? `/api/users?ts=${ts}`
          : `/api/users?role=${filter}&ts=${ts}`;

      log.debug("Fetching users", { url });
      const response = await fetch(url, { cache: "no-store" });
      log.debug("Users fetch response", {
        ok: response.ok,
        status: response.status,
      });
      const responseData = await response.json();
      const data = responseData.data || responseData; // Handle both old and new API response formats
      log.debug("Received users data", {
        count: Array.isArray(data.users) ? data.users.length : 0,
        sample:
          data.users && data.users[0]
            ? {
                id: data.users[0].id,
                gymId: data.users[0].gymId,
                role: data.users[0].role,
              }
            : null,
      });
      setUsers(data.users || []);
    } catch (error) {
      log.error("Failed to fetch users", error);
    } finally {
      setLoading(false);
    }
  };

  const handleUserSelect = (user: User | null) => {
    setSelectedUser(user);
  };

  const handleEditUser = (user: User) => {
    setSelectedUser(user);
    setEditForm({
      firstName: user.firstName,
      lastName: user.lastName,
      email: user.email,
      role: user.role,
      phone: user.phone || "",
      gymId: user.gymId || "",
    });
    setIsEditing(true);
  };

  const handleDeleteUser = (user: User) => {
    setSelectedUser(user);
    setIsDeleting(true);
  };

  const handleBulkDelete = async (users: User[]) => {
    if (users.length === 0) return;

    if (!confirm(`Are you sure you want to delete ${users.length} users?`))
      return;

    try {
      const response = await fetch("/api/users", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ids: users.map((u) => u.id) }),
      });
      if (response.ok) {
        fetchUsers();
        toast.success("Users deleted successfully");
      } else {
        toast.error("Error deleting users");
      }
    } catch (error) {
      log.error("Failed to delete users", error);
    }
  };

  const handleExport = () => {
    const csvContent = [
      [
        "Name",
        "Email",
        "Role",
        "Phone",
        "Membership",
        "Status",
        "Join Date",
        "Last Visit",
      ],
      ...users.map((user) => [
        `${user.firstName} ${user.lastName}`,
        user.email,
        user.role,
        user.phone || "",
        user.client?.membershipType || "",
        user.client?.membershipStatus || "",
        user.client?.joinDate || user.createdAt,
        user.client?.lastVisit || "",
      ]),
    ]
      .map((row) => row.join(","))
      .join("\n");

    const blob = new Blob([csvContent], { type: "text/csv" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `users_${new Date().toISOString().split("T")[0]}.csv`;
    a.click();
    window.URL.revokeObjectURL(url);
  };

  const handleRefresh = () => {
    fetchUsers();
  };

  const handleSaveEdit = async () => {
    if (!editForm) return;

    try {
      if (selectedUser) {
        // Update existing user
        const payload = {
          id: selectedUser.id,
          email: editForm.email,
          firstName: editForm.firstName,
          lastName: editForm.lastName,
          role: editForm.role,
          phone: editForm.phone,
          gymId: editForm.gymId === "" ? null : editForm.gymId,
        };
        log.debug("Updating user", payload);
        const response = await fetch("/api/users", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });
        log.debug("User update response", {
          ok: response.ok,
          status: response.status,
        });
        if (response.ok) {
          // Optimistically update local state so grid reflects changes immediately
          setUsers((prev) =>
            prev.map((u) =>
              u.id === selectedUser.id
                ? {
                    ...u,
                    email: editForm.email,
                    firstName: editForm.firstName,
                    lastName: editForm.lastName,
                    role: editForm.role,
                    phone: editForm.phone || undefined,
                    gymId: editForm.gymId === "" ? undefined : editForm.gymId,
                  }
                : u,
            ),
          );
          setSelectedUser((prev) =>
            prev
              ? {
                  ...prev,
                  email: editForm.email,
                  firstName: editForm.firstName,
                  lastName: editForm.lastName,
                  role: editForm.role,
                  phone: editForm.phone || undefined,
                  gymId: editForm.gymId === "" ? undefined : editForm.gymId,
                }
              : prev,
          );
          setIsEditing(false);
          setEditForm(null);
          // Still re-fetch from server to ensure consistency
          log.debug("Re-fetching users after successful edit");
          fetchUsers();
          toast.success("User updated successfully");
        } else {
          const errText = await response.text().catch(() => "");
          log.error("User update failed", new Error(errText), {
            status: response.status,
          });
          toast.error("Error updating user");
        }
      } else {
        // Create (Invite) new user
        const response = await fetch("/api/invitations", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            inviteeEmail: editForm.email,
            roleAssigned: editForm.role,
            gymId: editForm.gymId || undefined,
          }),
        });

        if (response.ok) {
          setIsEditing(false);
          setEditForm(null);
          fetchUsers();
          toast.success("Invitation sent successfully!");
        } else {
          const errorData = await response.json();
          toast.error(`Error sending invitation: ${errorData.error}`);
        }
      }
    } catch (error) {
      console.error(error);
      toast.error("An unexpected error occurred");
    }
  };

  const handleDeleteConfirm = async () => {
    if (!selectedUser) return;

    try {
      const response = await fetch(`/api/users?id=${selectedUser.id}`, {
        method: "DELETE",
      });
      if (response.ok) {
        setIsDeleting(false);
        setSelectedUser(null);
        fetchUsers();
        toast.success("User deleted successfully");
      } else {
        toast.error("Error deleting user");
      }
    } catch (error) {
      log.error("Failed to delete user", error);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">User Management</h2>
        <div className="flex gap-2">
          <Button
            variant={filter === "all" ? "default" : "outline"}
            onClick={() => setFilter("all")}
          >
            All Users
          </Button>
          <Button
            variant={filter === "client" ? "default" : "outline"}
            onClick={() => selectedUser && handleEditUser(selectedUser)}
            disabled={!selectedUser}
          >
            Edit User
          </Button>
          <Button variant="default" onClick={() => setCreateModalOpen(true)}>
            Create User
          </Button>
          <Button
            variant={filter === "client" ? "default" : "outline"}
            onClick={() => selectedUser && handleDeleteUser(selectedUser)}
            disabled={!selectedUser}
          >
            Delete User
          </Button>
          <Button
            variant={filter === "client" ? "default" : "outline"}
            onClick={() => setFilter("client")}
          >
            Clientsa
          </Button>
          <Button
            variant={filter === "trainer" ? "default" : "outline"}
            onClick={() => setFilter("trainer")}
          >
            Trainers
          </Button>
          <Button
            variant={filter === "admin" ? "default" : "outline"}
            onClick={() => setFilter("admin")}
          >
            Admins
          </Button>
          <Button
            variant={filter === "superAdmin" ? "default" : "outline"}
            onClick={() => setFilter("superAdmin")}
          >
            Super Admins
          </Button>
        </div>
      </div>

      <div className="flex justify-between items-center">
        <div className="text-sm text-gray-600">
          Showing {users.length} users
          {selectedUser && (
            <span className="ml-4 text-blue-600">
              Selected: {selectedUser.firstName} {selectedUser.lastName}
            </span>
          )}
        </div>
        <div className="flex gap-2">
          <Button variant="default" onClick={handleRefresh}>
            Refresh
          </Button>
          <Button variant="default" onClick={handleExport}>
            Export CSV
          </Button>
        </div>
      </div>

      <Card>
        <CardContent className="p-0">
          <UserGrid
            users={users}
            onUserSelect={(user) => handleUserSelect(user)}
            onEditUser={handleEditUser}
            onDeleteUser={handleDeleteUser}
            onBulkDelete={handleBulkDelete}
            loading={loading}
          />
        </CardContent>
      </Card>

      {isEditing && editForm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
            <h3 className="text-lg font-semibold mb-4">
              {selectedUser ? "Edit User" : "Invite New User"}
            </h3>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                handleSaveEdit();
              }}
            >
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">
                  First Name
                </label>
                <input
                  type="text"
                  value={editForm.firstName}
                  onChange={(e) =>
                    setEditForm({ ...editForm, firstName: e.target.value })
                  }
                  className="w-full border border-gray-300 rounded px-3 py-2"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">
                  Last Name
                </label>
                <input
                  type="text"
                  value={editForm.lastName}
                  onChange={(e) =>
                    setEditForm({ ...editForm, lastName: e.target.value })
                  }
                  className="w-full border border-gray-300 rounded px-3 py-2"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">Email</label>
                <input
                  type="email"
                  value={editForm.email}
                  onChange={(e) =>
                    setEditForm({ ...editForm, email: e.target.value })
                  }
                  className="w-full border border-gray-300 rounded px-3 py-2"
                  required
                  disabled={!!selectedUser} // Disable email edit for existing users if desired, or keep enabled
                />
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">Role</label>
                <select
                  value={editForm.role}
                  onChange={(e) =>
                    setEditForm({ ...editForm, role: e.target.value })
                  }
                  className="w-full border border-gray-300 rounded px-3 py-2"
                  required
                >
                  {/* Ideally we fetch current user role to filter these.
                      For now, we show all but the API will enforce it.
                      We can add a visual indicator or fetch "me" to filter. */}
                  <option value="client">Client</option>
                  <option value="trainer">Trainer</option>
                  <option value="admin">Admin</option>
                  <option value="superAdmin">Super Admin</option>
                </select>
                <p className="text-xs text-gray-500 mt-1">
                  Note: You can only assign roles lower than your own.
                </p>
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">Phone</label>
                <input
                  type="tel"
                  value={editForm.phone}
                  onChange={(e) =>
                    setEditForm({ ...editForm, phone: e.target.value })
                  }
                  className="w-full border border-gray-300 rounded px-3 py-2"
                />
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">Gym</label>
                <select
                  value={editForm.gymId}
                  onChange={(e) =>
                    setEditForm({ ...editForm, gymId: e.target.value })
                  }
                  className="w-full border border-gray-300 rounded px-3 py-2"
                >
                  <option value="">Proceed without gym</option>
                  {gyms.map((g) => (
                    <option key={g.id} value={g.id}>
                      {g.name}
                    </option>
                  ))}
                </select>
                <p className="text-xs text-gray-500 mt-1">
                  Select an active gym or proceed without a gym.
                </p>
              </div>
              <div className="flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => {
                    setIsEditing(false);
                    setEditForm(null);
                  }}
                  className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                >
                  {selectedUser ? "Save Changes" : "Send Invitation"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {isDeleting && selectedUser && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
            <h3 className="text-lg font-semibold mb-4">Delete User</h3>
            <p className="mb-4">
              Are you sure you want to delete {selectedUser.firstName}{" "}
              {selectedUser.lastName}? This action cannot be undone.
            </p>
            <div className="flex justify-end gap-2">
              <button
                onClick={() => setIsDeleting(false)}
                className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
              >
                Cancel
              </button>
              <button
                onClick={handleDeleteConfirm}
                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}

      {selectedUser && (
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <h3 className="text-lg font-semibold">User Details</h3>
            <a
              href={`/users/${selectedUser.id}`}
              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm font-medium"
            >
              View Full Profile & Recommendations
            </a>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-3 gap-4">
              <div>
                <h4 className="font-medium mb-2">Basic Information</h4>
                <div className="space-y-1 text-sm">
                  <p>
                    <span className="font-medium">Name:</span>{" "}
                    {selectedUser.firstName} {selectedUser.lastName}
                  </p>
                  <p>
                    <span className="font-medium">Email:</span>{" "}
                    {selectedUser.email}
                  </p>
                  <p>
                    <span className="font-medium">Phone:</span>{" "}
                    {selectedUser.phone || "N/A"}
                  </p>
                  <p>
                    <span className="font-medium">Role:</span>{" "}
                    {selectedUser.role}
                  </p>
                  <p>
                    <span className="font-medium">Joined:</span>{" "}
                    {new Date(selectedUser.createdAt).toLocaleDateString()}
                  </p>
                </div>
              </div>

              {selectedUser.client && (
                <div>
                  <h4 className="font-medium mb-2">Client Information</h4>
                  <div className="space-y-1 text-sm">
                    <p>
                      <span className="font-medium">Membership:</span>{" "}
                      {selectedUser.client.membershipType}
                    </p>
                    <p>
                      <span className="font-medium">Status:</span>{" "}
                      {selectedUser.client.membershipStatus}
                    </p>
                    <p>
                      <span className="font-medium">Member Since:</span>{" "}
                      {new Date(
                        selectedUser.client.joinDate,
                      ).toLocaleDateString()}
                    </p>
                    <p>
                      <span className="font-medium">Last Visit:</span>{" "}
                      {selectedUser.client.lastVisit
                        ? new Date(
                            selectedUser.client.lastVisit,
                          ).toLocaleDateString()
                        : "Never"}
                    </p>
                  </div>
                </div>
              )}

              <div>
                <h4 className="font-medium mb-2">Check-In Statistics</h4>
                <div className="space-y-1 text-sm">
                  <p>
                    <span className="font-medium">Last Check-In:</span>{" "}
                    {selectedUser.lastCheckInTime
                      ? new Date(selectedUser.lastCheckInTime).toLocaleString()
                      : "Never"}
                  </p>
                  <p>
                    <span className="font-medium">This Week:</span>{" "}
                    {selectedUser.checkInsThisWeek || 0} check-ins
                  </p>
                  <p>
                    <span className="font-medium">This Month:</span>{" "}
                    {selectedUser.checkInsThisMonth || 0} check-ins
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      <CreateUserModal
        open={createModalOpen}
        onOpenChange={setCreateModalOpen}
        onSuccess={() => fetchUsers()}
      />
    </div>
  );
}