"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import {
  ArrowUpDown,
  ChevronDown,
  Download,
  Filter,
  MoreHorizontal,
  Search,
  UserPlus,
  FileSpreadsheet,
  Trash2,
  Mail,
  Edit,
  Eye,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

import { students } from "@/services/students/query"

export default function StudentsPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedStudents, setSelectedStudents] = useState<number[]>([])
  const [sortColumn, setSortColumn] = useState<string | null>(null)
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc")

  const [studentsData, setStudentsData] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchStudents = async () => {
      try {
        setLoading(true)
        const data = await students.getAll()
        console.log("Students data fetched:", data)
        setStudentsData(Array.isArray(data) ? data : [])
        setError(null)
      } catch (err) {
        console.error("Error fetching students:", err)
        setError("Failed to load students")
        setStudentsData([])
      } finally {
        setLoading(false)
      }
    }

    fetchStudents()
  }, [])

  // Filter students based on search query
  const filteredStudents = studentsData.filter(
    (student) =>
      student.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      student.email.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  // Sort students based on column and direction
  const sortedStudents = [...filteredStudents].sort((a, b) => {
    if (!sortColumn) return 0

    let valueA, valueB

    switch (sortColumn) {
      case "name":
        valueA = a.name.toLowerCase()
        valueB = b.name.toLowerCase()
        break
      case "email":
        valueA = a.email.toLowerCase()
        valueB = b.email.toLowerCase()
        break
      case "date":
        valueA = new Date(a.created_at).getTime()
        valueB = new Date(b.created_at).getTime()
        break
      default:
        return 0
    }

    if (valueA < valueB) return sortDirection === "asc" ? -1 : 1
    if (valueA > valueB) return sortDirection === "asc" ? 1 : -1
    return 0
  })

  const handleSort = (column: string) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortColumn(column)
      setSortDirection("asc")
    }
  }

  const toggleSelectAll = () => {
    if (selectedStudents.length === sortedStudents.length) {
      setSelectedStudents([])
    } else {
      setSelectedStudents(sortedStudents.map((student) => student.id))
    }
  }

  const toggleSelectStudent = (id: number, e: React.MouseEvent) => {
    e.stopPropagation()
    if (selectedStudents.includes(id)) {
      setSelectedStudents(selectedStudents.filter((studentId) => studentId !== id))
    } else {
      setSelectedStudents([...selectedStudents, id])
    }
  }

  return (
    <div className="flex flex-col gap-6 p-6">
      <div className="flex flex-col gap-2">
        <h1 className="text-3xl font-bold tracking-tight">Students</h1>
        <p className="text-muted-foreground">Manage student accounts, view enrollments, and track payments.</p>
      </div>

      <Card className="overflow-hidden border-none shadow-sm">
        <CardHeader className="bg-white px-6 py-5">
          <div className="flex items-center justify-between">
            <CardTitle>All Students</CardTitle>
            <Tabs defaultValue="all" className="w-[400px]">
              <TabsList>
                <TabsTrigger value="all">All Students</TabsTrigger>
                <TabsTrigger value="active">Active</TabsTrigger>
                <TabsTrigger value="inactive">Inactive</TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
          <CardDescription>View and manage all student accounts.</CardDescription>
        </CardHeader>
        <CardContent className="p-0">
          <div className="flex items-center justify-between border-b border-gray-100 bg-white px-6 py-3">
            <div className="flex items-center gap-2">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="Search students..."
                  className="w-[300px] pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Button variant="outline" size="sm" className="h-9">
                <Filter className="mr-2 h-4 w-4" />
                Filter
              </Button>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm" className="h-9">
                <Download className="mr-2 h-4 w-4" />
                Export
              </Button>
              <Button
                size="sm"
                className="h-9 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700"
              >
                <UserPlus className="mr-2 h-4 w-4" />
                Add Student
              </Button>
            </div>
          </div>

          {selectedStudents.length > 0 && (
            <div className="flex items-center justify-between border-b border-gray-100 bg-blue-50 px-6 py-3">
              <div className="text-sm font-medium text-blue-800">
                {selectedStudents.length} {selectedStudents.length === 1 ? "student" : "students"} selected
              </div>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  className="h-8 border-blue-300 bg-blue-50 text-blue-700 hover:bg-blue-100"
                >
                  <FileSpreadsheet className="mr-2 h-4 w-4" />
                  Export Selected
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="h-8 border-red-300 bg-red-50 text-red-700 hover:bg-red-100"
                >
                  <Trash2 className="mr-2 h-4 w-4" />
                  Delete Selected
                </Button>
              </div>
            </div>
          )}

          <div className="min-h-[300px]">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50 hover:bg-muted/50">
                  <TableHead className="w-[50px]">
                    <input
                      type="checkbox"
                      className="h-4 w-4 rounded border-gray-300"
                      checked={selectedStudents.length === sortedStudents.length && sortedStudents.length > 0}
                      onChange={toggleSelectAll}
                    />
                  </TableHead>
                  <TableHead className="w-[300px]">
                    <div className="flex cursor-pointer items-center" onClick={() => handleSort("name")}>
                      Student
                      {sortColumn === "name" && (
                        <ChevronDown
                          className={`ml-1 h-4 w-4 transition-transform ${
                            sortDirection === "desc" ? "rotate-180" : ""
                          }`}
                        />
                      )}
                      {sortColumn !== "name" && <ArrowUpDown className="ml-1 h-4 w-4 text-muted-foreground" />}
                    </div>
                  </TableHead>
                  <TableHead>
                    <div className="flex cursor-pointer items-center" onClick={() => handleSort("email")}>
                      Email
                      {sortColumn === "email" && (
                        <ChevronDown
                          className={`ml-1 h-4 w-4 transition-transform ${
                            sortDirection === "desc" ? "rotate-180" : ""
                          }`}
                        />
                      )}
                      {sortColumn !== "email" && <ArrowUpDown className="ml-1 h-4 w-4 text-muted-foreground" />}
                    </div>
                  </TableHead>
                  <TableHead>Contact</TableHead>
                  <TableHead>Enrollments</TableHead>
                  <TableHead>
                    <div className="flex cursor-pointer items-center" onClick={() => handleSort("date")}>
                      Joined
                      {sortColumn === "date" && (
                        <ChevronDown
                          className={`ml-1 h-4 w-4 transition-transform ${
                            sortDirection === "desc" ? "rotate-180" : ""
                          }`}
                        />
                      )}
                      {sortColumn !== "date" && <ArrowUpDown className="ml-1 h-4 w-4 text-muted-foreground" />}
                    </div>
                  </TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow>
                    <TableCell colSpan={7} className="h-[300px] text-center">
                      <div className="flex flex-col items-center justify-center gap-2">
                        <p className="text-lg font-medium">Loading students...</p>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : error ? (
                  <TableRow>
                    <TableCell colSpan={7} className="h-[300px] text-center">
                      <div className="flex flex-col items-center justify-center gap-2">
                        <p className="text-lg font-medium text-red-600">Error loading students</p>
                        <p className="text-sm text-muted-foreground">{error}</p>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : sortedStudents.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={7} className="h-[300px] text-center">
                      <div className="flex flex-col items-center justify-center gap-2">
                        <p className="text-lg font-medium">No students found</p>
                        <p className="text-sm text-muted-foreground">Try adjusting your search or filters</p>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : (
                  sortedStudents.map((student, index) => (
                    <TableRow
                      key={student.id}
                      className={index % 2 === 0 ? "bg-white" : "bg-muted/30"}
                      onClick={() => router.push(`/admin/students/${student.id}`)}
                      style={{ cursor: "pointer" }}
                    >
                      <TableCell className="w-[50px]">
                        <input
                          type="checkbox"
                          className="h-4 w-4 rounded border-gray-300"
                          checked={selectedStudents.includes(student.id)}
                          onChange={(e) => e.stopPropagation()}
                          onClick={(e) => toggleSelectStudent(student.id, e)}
                        />
                      </TableCell>
                      <TableCell className="w-[300px]">
                        <div className="flex items-center gap-3">
                          <div className="h-10 w-10 overflow-hidden rounded-full bg-primary/10">
                            {student.avatar ? (
                              <Image
                                src={student.avatar || "/placeholder.svg"}
                                alt={student.name}
                                width={40}
                                height={40}
                                className="h-full w-full object-cover"
                              />
                            ) : (
                              <div className="flex h-full w-full items-center justify-center text-primary font-medium">
                                {student.name.charAt(0)}
                              </div>
                            )}
                          </div>
                          <div>
                            <div className="font-medium">{student.name}</div>
                            <div className="text-xs text-muted-foreground">
                              ID: {student.id.toString().padStart(5, "0")}
                            </div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>{student.email}</TableCell>
                      <TableCell>{student.contact_number}</TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={`
                          ${
                            index % 3 === 0
                              ? "bg-blue-50 text-blue-700 border-blue-200"
                              : index % 3 === 1
                                ? "bg-green-50 text-green-700 border-green-200"
                                : "bg-amber-50 text-amber-700 border-amber-200"
                          }
                        `}
                        >
                          {Math.floor(Math.random() * 5)} courses
                        </Badge>
                      </TableCell>
                      <TableCell>{new Date(student.created_at).toLocaleDateString()}</TableCell>
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-2">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8"
                            onClick={(e) => {
                              e.stopPropagation()
                              router.push(`/admin/students/${student.id}`)
                            }}
                          >
                            <Eye className="h-4 w-4" />
                            <span className="sr-only">View</span>
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8"
                            onClick={(e) => {
                              e.stopPropagation()
                              router.push(`/admin/students/${student.id}/edit`)
                            }}
                          >
                            <Edit className="h-4 w-4" />
                            <span className="sr-only">Edit</span>
                          </Button>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <MoreHorizontal className="h-4 w-4" />
                                <span className="sr-only">More</span>
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem
                                onClick={(e) => {
                                  e.stopPropagation()
                                  router.push(`/admin/students/${student.id}`)
                                }}
                              >
                                <Eye className="mr-2 h-4 w-4" />
                                View Details
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={(e) => e.stopPropagation()}>
                                <Edit className="mr-2 h-4 w-4" />
                                Edit
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={(e) => e.stopPropagation()}>
                                <Mail className="mr-2 h-4 w-4" />
                                Contact
                              </DropdownMenuItem>
                              <DropdownMenuSeparator />
                              <DropdownMenuItem className="text-destructive" onClick={(e) => e.stopPropagation()}>
                                <Trash2 className="mr-2 h-4 w-4" />
                                Delete
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>

          <div className="flex items-center justify-between border-t border-gray-100 bg-white px-6 py-3">
            <div className="text-sm text-muted-foreground">
              Showing <span className="font-medium">{sortedStudents.length}</span> of{" "}
              <span className="font-medium">{studentsData.length}</span> students
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm" disabled>
                Previous
              </Button>
              <Button variant="outline" size="sm" className="bg-muted/50">
                1
              </Button>
              <Button variant="outline" size="sm">
                2
              </Button>
              <Button variant="outline" size="sm">
                3
              </Button>
              <Button variant="outline" size="sm">
                Next
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}