"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { getInstructors } from "@/services/instructors/query"
import {
  ArrowUpDown,
  ChevronDown,
  Search,
  Filter,
  MoreHorizontal,
  Plus,
  FileDown,
  Trash2,
  Eye,
  Edit,
  Mail,
  Phone,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export default function InstructorsPage() {
  const [instructors, setInstructors] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedInstructors, setSelectedInstructors] = useState<number[]>([])
  const [sortColumn, setSortColumn] = useState<string | null>(null)
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc")

  useEffect(() => {
    async function fetchInstructors() {
      try {
        setLoading(true)
        const instructorsData = await getInstructors()
        const validInstructors = Array.isArray(instructorsData) ? instructorsData : []
        setInstructors(validInstructors)
        console.log("[brief][instructors]", {
          id: validInstructors[0]?.id,
          title: validInstructors[0]?.name,
        })
      } catch (error) {
        console.error("Failed to fetch instructors:", error)
        setInstructors([])
      } finally {
        setLoading(false)
      }
    }

    fetchInstructors()
  }, [])

  const filteredInstructors = instructors.filter(
    (instructor) =>
      instructor.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      instructor.email.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  // Sort instructors based on column and direction
  const sortedInstructors = [...filteredInstructors].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 (selectedInstructors.length === sortedInstructors.length) {
      setSelectedInstructors([])
    } else {
      setSelectedInstructors(sortedInstructors.map((instructor) => instructor.id))
    }
  }

  const toggleSelectInstructor = (id: number, e: React.MouseEvent) => {
    e.stopPropagation()
    if (selectedInstructors.includes(id)) {
      setSelectedInstructors(selectedInstructors.filter((instructorId) => instructorId !== id))
    } else {
      setSelectedInstructors([...selectedInstructors, id])
    }
  }

  return (
    <div className="p-6 space-y-6">
      <div className="flex flex-col gap-2">
        <h1 className="text-3xl font-bold tracking-tight">Instructors</h1>
        <p className="text-muted-foreground">Manage your instructors and their courses</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 Instructors</CardTitle>
            <Tabs defaultValue="all" className="w-[400px]">
              <TabsList>
                <TabsTrigger value="all">All Instructors</TabsTrigger>
                <TabsTrigger value="active">Active</TabsTrigger>
                <TabsTrigger value="inactive">Inactive</TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
          <CardDescription>View and manage all instructor 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 instructors..."
                  className="w-[300px] pl-8"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(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">
                <FileDown className="mr-2 h-4 w-4" />
                Export
              </Button>
              <Link href="/admin/instructors/add">
                <Button
                  size="sm"
                  className="h-9 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700"
                >
                  <Plus className="mr-2 h-4 w-4" />
                  Add Instructor
                </Button>
              </Link>
            </div>
          </div>

          {selectedInstructors.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">
                {selectedInstructors.length} {selectedInstructors.length === 1 ? "instructor" : "instructors"} 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"
                >
                  <FileDown 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={selectedInstructors.length === sortedInstructors.length && sortedInstructors.length > 0}
                      onChange={toggleSelectAll}
                    />
                  </TableHead>
                  <TableHead className="w-[300px]">
                    <div className="flex cursor-pointer items-center" onClick={() => handleSort("name")}>
                      Instructor
                      {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>Courses</TableHead>
                  <TableHead>Status</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>
                {sortedInstructors.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={8} className="h-[300px] text-center">
                      <div className="flex flex-col items-center justify-center gap-2">
                        {loading ? (
                          <>
                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                            <p className="text-lg font-medium">Loading instructors...</p>
                          </>
                        ) : (
                          <>
                            <p className="text-lg font-medium">No instructors found</p>
                            <p className="text-sm text-muted-foreground">Try adjusting your search or filters</p>
                          </>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ) : (
                  sortedInstructors.map((instructor, index) => (
                    <TableRow
                      key={instructor.id}
                      className={index % 2 === 0 ? "bg-white" : "bg-muted/30"}
                      onClick={() => (window.location.href = `/admin/instructors/${instructor.id}`)}
                      style={{ cursor: "pointer" }}
                    >
                      <TableCell className="w-[50px]">
                        <input
                          type="checkbox"
                          className="h-4 w-4 rounded border-gray-300"
                          checked={selectedInstructors.includes(instructor.id)}
                          onChange={(e) => e.stopPropagation()}
                          onClick={(e) => toggleSelectInstructor(instructor.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-muted">
                            <Image
                              src={instructor.avatar || "/placeholder.svg?height=40&width=40&query=instructor"}
                              alt={instructor.name}
                              width={40}
                              height={40}
                              className="h-full w-full object-cover"
                            />
                          </div>
                          <div>
                            <div className="font-medium">{instructor.name}</div>
                            <div className="text-xs text-muted-foreground line-clamp-1 max-w-[200px]">
                              {instructor.summary}
                            </div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>{instructor.email}</TableCell>
                      <TableCell>
                        <div className="flex flex-col space-y-1">
                          <div className="flex items-center text-xs">
                            <Phone className="mr-1 h-3 w-3 text-muted-foreground" />
                            <span>{instructor.phone}</span>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline" className="bg-blue-50 text-blue-700 hover:bg-blue-100 border-blue-200">
                          {Math.floor(Math.random() * 5) + 1} Courses
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {Math.random() > 0.3 ? (
                          <Badge className="bg-green-100 text-green-800 hover:bg-green-200 border-green-200">
                            Active
                          </Badge>
                        ) : (
                          <Badge
                            variant="outline"
                            className="bg-amber-50 text-amber-700 hover:bg-amber-100 border-amber-200"
                          >
                            Inactive
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell>{new Date(instructor.created_at).toLocaleDateString()}</TableCell>
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-2">
                          <Link href={`/admin/instructors/${instructor.id}`} onClick={(e) => e.stopPropagation()}>
                            <Button variant="ghost" size="icon" className="h-8 w-8">
                              <Eye className="h-4 w-4" />
                              <span className="sr-only">View</span>
                            </Button>
                          </Link>
                          <Link href={`/admin/instructors/${instructor.id}/edit`} onClick={(e) => e.stopPropagation()}>
                            <Button variant="ghost" size="icon" className="h-8 w-8">
                              <Edit className="h-4 w-4" />
                              <span className="sr-only">Edit</span>
                            </Button>
                          </Link>
                          <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">
                              <Link href={`/admin/instructors/${instructor.id}`}>
                                <DropdownMenuItem>
                                  <Eye className="mr-2 h-4 w-4" />
                                  View Details
                                </DropdownMenuItem>
                              </Link>
                              <Link href={`/admin/instructors/${instructor.id}/edit`}>
                                <DropdownMenuItem>
                                  <Edit className="mr-2 h-4 w-4" />
                                  Edit
                                </DropdownMenuItem>
                              </Link>
                              <DropdownMenuItem>
                                <Mail className="mr-2 h-4 w-4" />
                                Contact
                              </DropdownMenuItem>
                              <DropdownMenuItem className="text-red-600 hover:text-red-700 focus:text-red-700">
                                <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">{sortedInstructors.length}</span> of{" "}
              <span className="font-medium">{instructors.length}</span> instructors
            </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>
  )
}