"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import {
  Search,
  Plus,
  Filter,
  Trash2,
  Copy,
  ArrowUpDown,
  CheckSquare,
  Square,
  Download,
  Calendar,
  Clock,
  MapPin,
  Video,
  Users,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { getClassSessions, type ClassSession } from "@/services/admin_page/query"

export default function AttendancePage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedSessions, setSelectedSessions] = useState<number[]>([])
  const [sortBy, setSortBy] = useState<string>("scheduled_at")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")

  const [sessions, setSessions] = useState<ClassSession[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const fetchSessions = async () => {
      try {
        setIsLoading(true)
        const response = await getClassSessions()
        console.log("[attendance][sessions]", {
          status: response?.status,
          count: response?.class_sessions?.length,
          first: response?.class_sessions?.[0]?.id,
          firstSession: response?.class_sessions?.[0],
        })

        if (response.status === "OK" && response.class_sessions) {
          setSessions(response.class_sessions)
        } else {
          console.error("Invalid response format:", response)
          setSessions([])
        }
      } catch (error) {
        console.error("Error fetching class sessions:", error)
        setSessions([])
      } finally {
        setIsLoading(false)
      }
    }

    fetchSessions()
  }, [])

  const filteredSessions = sessions.filter(
    (session) =>
      session.package_class?.course_package?.course?.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      session.package_class?.course_package?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      session.package_class?.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      session.instructor?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      session.status?.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const sortedSessions = [...filteredSessions].sort((a, b) => {
    if (sortBy === "scheduled_at") {
      return sortOrder === "asc"
        ? new Date(a.scheduled_at).getTime() - new Date(b.scheduled_at).getTime()
        : new Date(b.scheduled_at).getTime() - new Date(a.scheduled_at).getTime()
    } else if (sortBy === "course_title") {
      const titleA = a.package_class?.course_package?.course?.title || ""
      const titleB = b.package_class?.course_package?.course?.title || ""
      return sortOrder === "asc" ? titleA.localeCompare(titleB) : titleB.localeCompare(titleA)
    } else if (sortBy === "status") {
      const statusA = a.status || ""
      const statusB = b.status || ""
      return sortOrder === "asc" ? statusA.localeCompare(statusB) : statusB.localeCompare(statusA)
    }
    return 0
  })

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

  const toggleSelectAll = () => {
    if (selectedSessions.length === sortedSessions.length) {
      setSelectedSessions([])
    } else {
      setSelectedSessions(sortedSessions.map((session) => session.id))
    }
  }

  const toggleSelectSession = (id: number) => {
    if (selectedSessions.includes(id)) {
      setSelectedSessions(selectedSessions.filter((sessionId) => sessionId !== id))
    } else {
      setSelectedSessions([...selectedSessions, id])
    }
  }

  const formatDateTime = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date)
  }

  const formatDuration = (minutes: number | null) => {
    if (!minutes) return "N/A"
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60
    if (hours > 0) {
      return `${hours}h ${mins}m`
    }
    return `${mins}m`
  }

  const getStatusBadge = (status: string | null) => {
    switch (status?.toLowerCase()) {
      case "completed":
        return <Badge className="bg-green-100 text-green-800 border-green-200">Completed</Badge>
      case "in_progress":
        return <Badge className="bg-blue-100 text-blue-800 border-blue-200">In Progress</Badge>
      case "scheduled":
        return <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200">Scheduled</Badge>
      case "upcoming":
        return <Badge className="bg-blue-100 text-blue-800 border-blue-200">Upcoming</Badge>
      case "cancelled":
        return <Badge className="bg-red-100 text-red-800 border-red-200">Cancelled</Badge>
      default:
        return <Badge variant="outline">Unknown</Badge>
    }
  }

  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 attendance...</p>
        </div>
      </div>
    )
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold font-heading mb-2">Attendance</h1>
          <p className="text-gray-600">Manage class sessions and attendance records</p>
        </div>
        <Link href="/admin/sessions/new">
          <Button className="bg-primary hover:bg-primary-dark">
            <Plus className="mr-2 h-4 w-4" />
            New Session
          </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 sessions..."
                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>

      {selectedSessions.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">{selectedSessions.length} sessions selected</span>
          </div>
          <div className="flex gap-2">
            { false && (<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" />
              Cancel
            </Button>
          </div>
        </div>
      )}

      <Card className="border-0 bg-white">
        <CardHeader className="pb-0">
          <CardTitle className="text-xl font-heading">Class Sessions</CardTitle>
          <CardDescription>{filteredSessions.length} sessions 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">
                        {selectedSessions.length === sortedSessions.length && sortedSessions.length > 0 ? (
                          <CheckSquare className="h-5 w-5 text-secondary" />
                        ) : (
                          <Square className="h-5 w-5 text-gray-400" />
                        )}
                      </button>
                      <button
                        onClick={() => toggleSort("course_title")}
                        className="flex items-center focus:outline-none"
                      >
                        Session
                        <ArrowUpDown className="ml-1 h-4 w-4" />
                      </button>
                    </div>
                  </th>
                  <th className="text-center py-3 px-4 font-medium text-gray-600">
                    <button
                      onClick={() => toggleSort("scheduled_at")}
                      className="flex items-center justify-center mx-auto focus:outline-none"
                    >
                      Date & Time
                      <ArrowUpDown className="ml-1 h-4 w-4" />
                    </button>
                  </th>
                  <th className="text-center py-3 px-4 font-medium text-gray-600">Duration</th>
                  <th className="text-center py-3 px-4 font-medium text-gray-600">Location</th>
                </tr>
              </thead>
              <tbody>
                {sortedSessions.map((session, index) => (
                  <tr
                    key={session.id}
                    className={`border-b border-gray-100 ${index % 2 === 0 ? "bg-gray-50" : "bg-white"} cursor-pointer hover:bg-gray-100`}
                    onClick={() => (window.location.href = `/admin/attendance/${session.id}/students`)}
                  >
                    <td className="py-4 px-4">
                      <div className="flex items-center">
                        <button
                          onClick={(e) => {
                            e.stopPropagation()
                            toggleSelectSession(session.id)
                          }}
                          className="mr-3 focus:outline-none"
                        >
                          {selectedSessions.includes(session.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="flex items-center justify-center h-12 w-12 rounded-md bg-primary-light flex-shrink-0">
                            <Calendar className="h-6 w-6 text-secondary" />
                          </div>
                          <div>
                            <h4 className="font-medium text-gray-900">
                              {session.package_class?.course_package?.course?.title || "Unknown Course"}
                            </h4>
                            <p className="text-sm text-gray-600">
                              {session.package_class?.course_package?.name || "No package"}
                            </p>
                            <p className="text-xs text-gray-500">{session.package_class?.title || "No class title"}</p>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td className="text-center py-4 px-4">
                      <div className="flex flex-col items-center">
                        <span className="font-medium">{formatDateTime(session.scheduled_at)}</span>
                        {getStatusBadge(session.status)}
                      </div>
                    </td>
                    <td className="text-center py-4 px-4">
                      <div className="flex items-center justify-center gap-1">
                        <Clock className="h-4 w-4 text-gray-400" />
                        <span className="text-sm">{formatDuration(session.duration)}</span>
                      </div>
                    </td>
                    <td className="text-center py-4 px-4">
                      <div className="flex items-center justify-center gap-1">
                        {session.online_meeting_link ? (
                          <>
                            <Video className="h-4 w-4 text-blue-500" />
                            <span className="text-sm text-blue-600">Online</span>
                          </>
                        ) : session.offline_location ? (
                          <>
                            <MapPin className="h-4 w-4 text-green-500" />
                            <span className="text-sm text-green-600">Offline</span>
                          </>
                        ) : (
                          <span className="text-sm text-gray-400">TBD</span>
                        )}
                      </div>
                    </td>
                    { false && (
                      <td className="text-center py-4 px-4">
                      <div className="flex items-center justify-center">
                        <Badge variant="outline" className="bg-gray-50">
                          <Users className="h-3 w-3 mr-1" />
                          {/* Placeholder for attendance count - would be replaced with actual data */}
                          0/0
                        </Badge>
                      </div>
                    </td>
                    )}
                    
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

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