"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { useRouter } from "next/navigation"
import {
  Search,
  Plus,
  Filter,
  MoreHorizontal,
  ChevronLeft,
  ChevronRight,
  ArrowUpDown,
  CheckSquare,
  Square,
  Download,
  Edit,
  Trash2,
  Copy,
  Eye,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"

import { getUsers } from "@/services/users/query"
import { getUserRoles } from "@/services/role_users/query"

export default function UsersPage() {
  const router = useRouter()
  const [users, setUsers] = useState<any[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [activeTab, setActiveTab] = useState("all")
  const [selectedUsers, setSelectedUsers] = useState<number[]>([])
  const [sortBy, setSortBy] = useState<string>("name")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const usersPerPage = 10

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setIsLoading(true)
        setError(null)

        console.log("[users][fetch] Starting to fetch users...")

        // Get users data
        const fetchedUsers = await getUsers()
        console.log("[users][fetch] Raw response:", fetchedUsers)

        // Handle different response formats
        let usersArray = []
        if (Array.isArray(fetchedUsers)) {
          usersArray = fetchedUsers
        } else if (fetchedUsers && Array.isArray(fetchedUsers.data)) {
          usersArray = fetchedUsers.data
        } else if (fetchedUsers && typeof fetchedUsers === "object") {
          // If it's an object, try to extract users array
          usersArray = Object.values(fetchedUsers).filter((item) => item && typeof item === "object" && item.id)
        } else {
          console.error("[users][fetch] Unexpected data format:", typeof fetchedUsers)
          throw new Error("Invalid data format received from users service")
        }

        console.log("[users][fetch] Users array:", usersArray)

        if (!Array.isArray(usersArray)) {
          throw new Error("Users data is not an array")
        }

        // Add roles to each user
        const usersWithRoles = usersArray.map((user) => {
          try {
            const roles = getUserRoles(user.id) || []
            return {
              ...user,
              roles,
            }
          } catch (roleError) {
            console.error(`[users][fetch] Error getting roles for user ${user.id}:`, roleError)
            return {
              ...user,
              roles: [],
            }
          }
        })

        setUsers(usersWithRoles)
        console.log("[users][data]", {
          count: usersWithRoles.length,
          first: usersWithRoles[0]?.id,
          sample: usersWithRoles[0],
        })
      } catch (error) {
        console.error("[users][fetch] Error fetching users:", error)
        setError(error instanceof Error ? error.message : "Failed to fetch users")
        setUsers([])
      } finally {
        setIsLoading(false)
      }
    }

    fetchUsers()
  }, [])

  const filteredUsers = users.filter((user) => {
    // Search filter
    const matchesSearch =
      searchQuery === "" ||
      (user.name && user.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
      (user.email && user.email.toLowerCase().includes(searchQuery.toLowerCase()))

    // Tab filter
    if (activeTab === "all") return matchesSearch
    if (activeTab === "admin") {
      return matchesSearch && user.roles && user.roles.some((role: any) => role.name === "admin")
    }
    if (activeTab === "instructor") {
      return matchesSearch && user.roles && user.roles.some((role: any) => role.name === "instructor")
    }
    if (activeTab === "student") {
      return matchesSearch && user.roles && user.roles.some((role: any) => role.name === "student")
    }
    if (activeTab === "active") {
      return matchesSearch && user.status === "active"
    }
    if (activeTab === "inactive") {
      return matchesSearch && user.status === "inactive"
    }
    return matchesSearch
  })

  const sortedUsers = [...filteredUsers].sort((a, b) => {
    if (sortBy === "name") {
      const nameA = a.name || ""
      const nameB = b.name || ""
      return sortOrder === "asc" ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA)
    } else if (sortBy === "email") {
      const emailA = a.email || ""
      const emailB = b.email || ""
      return sortOrder === "asc" ? emailA.localeCompare(emailB) : emailB.localeCompare(emailA)
    } else if (sortBy === "created_at") {
      const dateA = a.created_at ? new Date(a.created_at).getTime() : 0
      const dateB = b.created_at ? new Date(b.created_at).getTime() : 0
      return sortOrder === "asc" ? dateA - dateB : dateB - dateA
    }
    return 0
  })

  // Get current users for pagination
  const indexOfLastUser = currentPage * usersPerPage
  const indexOfFirstUser = indexOfLastUser - usersPerPage
  const currentUsers = sortedUsers.slice(indexOfFirstUser, indexOfLastUser)
  const totalPages = Math.ceil(sortedUsers.length / usersPerPage)

  const toggleSort = (field: string) => {
    if (sortBy === field) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc")
    } else {
      setSortBy(field)
      setSortOrder("asc")
    }
  }

  const toggleSelectAll = () => {
    if (selectedUsers.length === sortedUsers.length) {
      setSelectedUsers([])
    } else {
      setSelectedUsers(sortedUsers.map((user) => user.id))
    }
  }

  const toggleSelectUser = (id: number) => {
    if (selectedUsers.includes(id)) {
      setSelectedUsers(selectedUsers.filter((userId) => userId !== id))
    } else {
      setSelectedUsers([...selectedUsers, id])
    }
  }

  const handlePageChange = (pageNumber: number) => {
    setCurrentPage(pageNumber)
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return (
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
            Active
          </Badge>
        )
      case "inactive":
        return (
          <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">
            Inactive
          </Badge>
        )
      case "pending":
        return (
          <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
            Pending
          </Badge>
        )
      default:
        return (
          <Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
            Unknown
          </Badge>
        )
    }
  }

  const getRoleBadges = (userRoles: any[]) => {
    if (!Array.isArray(userRoles)) return null

    return userRoles.map((role, index) => {
      let badgeClass = ""

      switch (role.name) {
        case "admin":
          badgeClass = "bg-purple-50 text-purple-700 border-purple-200"
          break
        case "instructor":
          badgeClass = "bg-blue-50 text-blue-700 border-blue-200"
          break
        case "student":
          badgeClass = "bg-primary-light text-secondary border-primary-light"
          break
        default:
          badgeClass = "bg-gray-50 text-gray-700 border-gray-200"
      }

      return (
        <Badge key={index} variant="outline" className={`mr-1 ${badgeClass}`}>
          {role.display_name || role.name}
        </Badge>
      )
    })
  }

  const formatDate = (dateString: string) => {
    if (!dateString) return "N/A"
    try {
      const date = new Date(dateString)
      return new Intl.DateTimeFormat("en-US", {
        year: "numeric",
        month: "short",
        day: "numeric",
      }).format(date)
    } catch (error) {
      return "Invalid Date"
    }
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="flex flex-col items-center gap-2">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
          <p className="text-gray-500">Loading users...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="flex flex-col items-center gap-4">
          <div className="text-red-500 text-center">
            <h3 className="text-lg font-semibold mb-2">Error Loading Users</h3>
            <p className="text-sm">{error}</p>
          </div>
          <Button onClick={() => window.location.reload()} variant="outline">
            Try Again
          </Button>
        </div>
      </div>
    )
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold font-heading mb-2">User Management</h1>
          <p className="text-gray-600">Manage users and their roles across the platform</p>
        </div>
        <Link href="/admin/users/add">
          <Button className="bg-primary hover:bg-primary-dark">
            <Plus className="mr-2 h-4 w-4" />
            Add User
          </Button>
        </Link>
      </div>

      <Card className="border-0 bg-white mb-6">
        <CardContent className="p-6">
          <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
            <div className="relative w-full md:w-96">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <Input
                placeholder="Search users..."
                className="pl-10 bg-gray-50"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2 w-full md:w-auto">
              <Button variant="outline" className="flex-1 md:flex-none">
                <Filter className="mr-2 h-4 w-4" />
                Filter
              </Button>
              <Button variant="outline" className="flex-1 md:flex-none">
                <Download className="mr-2 h-4 w-4" />
                Export
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <Tabs defaultValue="all" className="mb-6" onValueChange={setActiveTab}>
        <TabsList className="bg-gray-100">
          <TabsTrigger value="all">All Users</TabsTrigger>
          <TabsTrigger value="admin">Administrators</TabsTrigger>
          <TabsTrigger value="instructor">Instructors</TabsTrigger>
          <TabsTrigger value="student">Students</TabsTrigger>
          <TabsTrigger value="active">Active</TabsTrigger>
          <TabsTrigger value="inactive">Inactive</TabsTrigger>
        </TabsList>
      </Tabs>

      {selectedUsers.length > 0 && (
        <div className="bg-secondary-light rounded-lg p-4 mb-6 flex items-center justify-between">
          <div className="flex items-center">
            <CheckSquare className="h-5 w-5 text-secondary mr-2" />
            <span className="font-medium">{selectedUsers.length} users selected</span>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" size="sm">
              <Copy className="mr-2 h-4 w-4" />
              Duplicate
            </Button>
            <Button variant="destructive" size="sm">
              <Trash2 className="mr-2 h-4 w-4" />
              Delete
            </Button>
          </div>
        </div>
      )}

      <Card className="border-0 bg-white">
        <CardHeader className="pb-0">
          <CardTitle className="text-xl font-heading">All Users</CardTitle>
          <CardDescription>{filteredUsers.length} users found</CardDescription>
        </CardHeader>
        <CardContent className="p-6">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-200">
                  <th className="text-left py-3 px-4 font-medium text-gray-600">
                    <div className="flex items-center">
                      <button onClick={toggleSelectAll} className="mr-3 focus:outline-none">
                        {selectedUsers.length === sortedUsers.length && sortedUsers.length > 0 ? (
                          <CheckSquare className="h-5 w-5 text-secondary" />
                        ) : (
                          <Square className="h-5 w-5 text-gray-400" />
                        )}
                      </button>
                      <button onClick={() => toggleSort("name")} className="flex items-center focus:outline-none">
                        User
                        <ArrowUpDown className="ml-1 h-4 w-4" />
                      </button>
                    </div>
                  </th>
                  <th className="text-center py-3 px-4 font-medium text-gray-600">Roles</th>
                  <th className="text-center py-3 px-4 font-medium text-gray-600">Status</th>
                  <th className="text-center py-3 px-4 font-medium text-gray-600">
                    <button
                      onClick={() => toggleSort("created_at")}
                      className="flex items-center justify-center mx-auto focus:outline-none"
                    >
                      Created
                      <ArrowUpDown className="ml-1 h-4 w-4" />
                    </button>
                  </th>
                  <th className="text-right py-3 px-4 font-medium text-gray-600">Actions</th>
                </tr>
              </thead>
              <tbody>
                {currentUsers.map((user, index) => (
                  <tr
                    key={user.id}
                    className={`border-b border-gray-100 ${index % 2 === 0 ? "bg-gray-50" : "bg-white"}`}
                  >
                    <td className="py-4 px-4">
                      <div className="flex items-center">
                        <button onClick={() => toggleSelectUser(user.id)} className="mr-3 focus:outline-none">
                          {selectedUsers.includes(user.id) ? (
                            <CheckSquare className="h-5 w-5 text-secondary" />
                          ) : (
                            <Square className="h-5 w-5 text-gray-400" />
                          )}
                        </button>
                        <div className="flex items-center gap-3">
                          <div className="relative h-12 w-12 rounded-md overflow-hidden flex-shrink-0">
                            <Image
                              src={user.avatar || "/placeholder.svg?height=48&width=48"}
                              alt={user.name || "User"}
                              fill
                              className="object-cover"
                            />
                          </div>
                          <div>
                            <h4 className="font-medium text-gray-900">{user.name || "Unknown User"}</h4>
                            <p className="text-sm text-gray-500">{user.email || "No email"}</p>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td className="text-center py-4 px-4">
                      <div className="flex justify-center flex-wrap gap-1">{getRoleBadges(user.roles)}</div>
                    </td>
                    <td className="text-center py-4 px-4">{getStatusBadge(user.status)}</td>
                    <td className="text-center py-4 px-4 text-gray-500">{formatDate(user.created_at)}</td>
                    <td className="text-right py-4 px-4">
                      <div className="flex items-center justify-end gap-2">
                        <Button variant="ghost" size="icon" asChild>
                          <Link href={`/admin/users/${user.id}`}>
                            <Eye className="h-4 w-4" />
                          </Link>
                        </Button>
                        <Button variant="ghost" size="icon" asChild>
                          <Link href={`/admin/users/${user.id}/edit`}>
                            <Edit className="h-4 w-4" />
                          </Link>
                        </Button>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem>
                              <Copy className="mr-2 h-4 w-4" />
                              Duplicate
                            </DropdownMenuItem>
                            <DropdownMenuItem className="text-red-600">
                              <Trash2 className="mr-2 h-4 w-4" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {filteredUsers.length === 0 && !isLoading && (
            <div className="text-center py-12">
              <p className="text-gray-500">No users found matching your search criteria.</p>
              <Button variant="link" onClick={() => setSearchQuery("")} className="mt-2">
                Clear search
              </Button>
            </div>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="flex items-center justify-between mt-4">
              <div className="text-sm text-gray-500">
                Showing {indexOfFirstUser + 1}-
                {indexOfLastUser > filteredUsers.length ? filteredUsers.length : indexOfLastUser} of{" "}
                {filteredUsers.length} users
              </div>
              <div className="flex items-center gap-1">
                <Button
                  variant="outline"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                  <Button
                    key={page}
                    variant={currentPage === page ? "default" : "outline"}
                    size="sm"
                    className={`h-8 w-8 ${currentPage === page ? "bg-primary text-white" : ""}`}
                    onClick={() => handlePageChange(page)}
                  >
                    {page}
                  </Button>
                ))}
                <Button
                  variant="outline"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === totalPages}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}