"use client"

import { Pencil, Filter, Trash2, Search, Calendar, X } from "lucide-react"
import { useMigrants } from "@/hooks/useMigrants"
import { useState } from "react"
import DeleteDialog from "./migrant/Modal/DeleteDialog"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Dialog,
  DialogContent,
  DialogHeader, 
  DialogTitle,
  DialogTrigger,
  DialogDescription,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { useNavigate } from "react-router-dom"
import { formatDate } from "@/utils/date"

const MigrantsTable = () => {
  const navigate = useNavigate()
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [deleteDialogIds, setDeleteDialogIds] = useState<string[]>([])
  const [isBulkDelete, setIsBulkDelete] = useState(false)
  const [isModalOpen, setIsModalOpen] = useState(false)

  const applyAdvancedFilters = () => {
    setIsModalOpen(false)
    handleSearch() // Trigger the search with the current filters
  }

  const handleEdit = (id: number) => {
    navigate(`/admin/migrants/edit/${id}?mode=edit`)
  }

  const [showAllActive, setShowAllActive] = useState(false)
  
  const {
    migrants,
    loading,
    currentPage,
    totalPages,
    searchFullName,
    searchOccupation,
    filters,
    selectedMigrants,
    setCurrentPage,
    setSearchFullName,
    setSearchOccupation,
    setFilters,
    handleSearch,
    resetFilters,
    toggleSelectMigrant,
    toggleSelectAll,
    isAllSelected,
    handleBulkDelete,
    refetchMigrants
  } = useMigrants(showAllActive ? 1000 : 10)

  return (
    <div className="space-y-6">
      {/* Filters */}
      <Card className="border border-gray-800 bg-gray-900 shadow-2xl overflow-hidden">
        <CardHeader className="pb-3 border-b border-gray-800">
          <CardTitle className="text-md font-medium flex justify-between items-center text-white">
            Search & Filters
            <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
              <DialogTrigger asChild>
                <Button
                  size="icon"
                  className="border-gray-700 text-gray-300 hover:bg-gray-900 hover:text-white bg-gray-800"
                >
                  <Filter className="h-4 w-4" />
                  <span className="sr-only">Advanced filters</span>
                </Button>
              </DialogTrigger>

              <DialogContent className="sm:max-w-[425px] bg-gray-900 border-gray-800">
                <DialogHeader>
                  <DialogTitle className="text-white">Advanced Filters</DialogTitle>
                  <DialogDescription className="text-gray-400">
                    Set sorting options and filters for the migrants list.
                  </DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <div className="grid gap-2">
                    <Label htmlFor="sort-by" className="text-gray-300">
                      Sort By
                    </Label>
                    <Select
                      value={filters.sort_by}
                      onValueChange={(value) => setFilters({ ...filters, sort_by: value })}
                    >
                      <SelectTrigger id="sort-by" className="bg-gray-800 border-gray-700 text-white">
                        <SelectValue placeholder="Select field" />
                      </SelectTrigger>
                      <SelectContent className="bg-gray-800 border-gray-700">
                        <SelectItem value="full_name" className="text-white hover:bg-gray-700">
                          Full Name
                        </SelectItem>
                        <SelectItem value="occupation" className="text-white hover:bg-gray-700">
                          Occupation
                        </SelectItem>
                        <SelectItem value="arrival_date" className="text-white hover:bg-gray-700">
                          Arrival Date
                        </SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="grid gap-2">
                    <Label className="text-gray-300">Alphabetical Order</Label>
                    <RadioGroup
                      value={filters.alphabetical_order}
                      onValueChange={(value) => setFilters({ ...filters, alphabetical_order: value })}
                      className="flex gap-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="asc" id="asc" className="border-gray-600 text-[#9B2335]" />
                        <Label htmlFor="asc" className="text-gray-300">
                          A-Z
                        </Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="desc" id="desc" className="border-gray-600 text-[#9B2335]" />
                        <Label htmlFor="desc" className="text-gray-300">
                          Z-A
                        </Label>
                      </div>
                    </RadioGroup>
                  </div>

                  {/* Arrival Date Sorting Options */}
                  {filters.sort_by === "arrival_date" && (
                    <div className="grid gap-2">
                      <Label className="text-gray-300">Arrival Date Order</Label>
                      <RadioGroup
                        value={filters.arrival_order === "desc" ? "newest" : "oldest"}
                        onValueChange={(value) =>
                          setFilters((prev) => ({
                            ...prev,
                            sort_by: "arrival_date",
                            arrival_order: value === "newest" ? "desc" : "asc",
                          }))
                        }
                        className="flex gap-4"
                      >
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="newest" id="newest" className="border-gray-600 text-[#9B2335]" />
                          <Label htmlFor="newest" className="text-gray-300">
                            Newest First
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="oldest" id="oldest" className="border-gray-600 text-[#9B2335]" />
                          <Label htmlFor="oldest" className="text-gray-300">
                            Oldest First
                          </Label>
                        </div>
                      </RadioGroup>
                    </div>
                  )}

                  <div className="grid gap-2">
                    <Label htmlFor="arrival-from" className="text-gray-300">
                      Arrival Date Range
                    </Label>
                    <div className="flex gap-2 items-center">
                      <div className="relative flex-1">
                        <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input
                          id="arrival-from"
                          type="date"
                          placeholder="From"
                          value={filters.arrival_from}
                          onChange={(e) => setFilters({ ...filters, arrival_from: e.target.value })}
                          className="pl-8 bg-gray-800 border-gray-700 text-white focus:border-[#9B2335]"
                        />
                      </div>
                      <span className="text-gray-400">to</span>
                      <div className="relative flex-1">
                        <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                        <Input
                          type="date"
                          placeholder="To"
                          value={filters.arrival_to}
                          onChange={(e) => setFilters({ ...filters, arrival_to: e.target.value })}
                          className="pl-8 bg-gray-800 border-gray-700 text-white focus:border-[#9B2335]"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="flex justify-end gap-2">
                  <Button
                    variant="outline"
                    onClick={() => setIsModalOpen(false)}
                    className="border-gray-700 text-gray-300 hover:bg-gray-800 bg-gray-800"
                  >
                    Cancel
                  </Button>
                  <Button onClick={applyAdvancedFilters} className="bg-[#9B2335] hover:bg-[#9B2335]/80">
                    Apply Filters
                  </Button>
                </div>
              </DialogContent>
            </Dialog>
          </CardTitle>
        </CardHeader>
        <CardContent className="p-6">
          <div className="flex flex-wrap gap-4">
            <div className="relative flex-1 min-w-[200px]">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
              <Input
                type="text"
                placeholder="Search Full Name"
                value={searchFullName}
                onChange={(e) => setSearchFullName(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
                className="pl-8 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus:border-[#9B2335]"
              />
            </div>
            <div className="relative flex-1 min-w-[200px]">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
              <Input
                type="text"
                placeholder="Search Occupation"
                value={searchOccupation}
                onChange={(e) => setSearchOccupation(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
                onBlur={() => searchOccupation.trim() !== "" && handleSearch()}
                className="pl-8 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 focus:border-[#9B2335]"
              />
            </div>
            <div className="relative flex-1 min-w-[200px]">
              <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
              <Input
                type="date"
                placeholder="Arrival From"
                value={filters.arrival_from || ""}
                onChange={(e) => setFilters({ ...filters, arrival_from: e.target.value })}
                className="pl-8 bg-gray-800 border-gray-700 text-white focus:border-[#9B2335]"
              />
            </div>
            <div className="relative flex-1 min-w-[200px]">
              <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
              <Input
                type="date"
                placeholder="Arrival To"
                value={filters.arrival_to || ""}
                onChange={(e) => setFilters({ ...filters, arrival_to: e.target.value })}
                className="pl-8 bg-gray-800 border-gray-700 text-white focus:border-[#9B2335]"
              />
            </div>
            <div className="flex gap-2">
              <Button onClick={handleSearch} className="whitespace-nowrap bg-[#9B2335] hover:bg-[#9B2335]/90">
                Apply Filters
              </Button>
              <Button
                variant="outline"
                onClick={resetFilters}
                className="whitespace-nowrap border-gray-700 text-gray-300 hover:bg-gray-800 bg-gray-900"
              >
                <X className="mr-1 h-4 w-4" /> Reset
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Bulk Actions */}
      {selectedMigrants.length > 0 && (
        <div className="flex items-center gap-2 mb-4">
          <span className="text-sm font-medium text-gray-400">{selectedMigrants.length} migrants selected</span>
          <Button
            variant="destructive"
            size="sm"
            className="ml-auto bg-red-600 hover:bg-red-700"
            onClick={() => {
              setIsBulkDelete(true)
              setDeleteDialogIds(selectedMigrants.map((id) => id.toString()))
              setDeleteDialogOpen(true)
            }}
          >
            <Trash2 className="mr-1 h-4 w-4" /> Delete Selected
          </Button>
        </div>
      )}

      {/* Table */}
      <Card className="border border-gray-800 bg-gray-900 shadow-2xl py-0">
        <CardContent className="p-0">
          {loading ? (
            <div className="flex justify-center items-center h-64">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#9B2335]"></div>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow className="bg-gray-800/50 hover:bg-gray-800/50 border-b border-gray-800">
                    <TableHead className="w-[50px] text-center text-gray-300">
                      <Checkbox
                        checked={isAllSelected}
                        onCheckedChange={toggleSelectAll}
                        className="border-gray-600 data-[state=checked]:bg-[#9B2335] data-[state=checked]:border-[#9B2335]"
                      />
                    </TableHead>
                    <TableHead className="text-gray-300">ID</TableHead>
                    <TableHead className="text-gray-300">Full Name</TableHead>
                    <TableHead className="text-gray-300">Date of Birth</TableHead>
                    <TableHead className="text-gray-300">Place of Birth</TableHead>
                    <TableHead className="text-gray-300">Occupation</TableHead>
                    <TableHead className="text-gray-300">Date of Arrival NT</TableHead>
                    <TableHead className="text-right text-gray-300">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {migrants.map((migrant) => {
                    const isSelected =
                      migrant.person_id !== undefined &&
                      typeof migrant.person_id === "number" &&
                      selectedMigrants.includes(migrant.person_id)

                    const hasValidId =
                      migrant.person_id !== undefined &&
                      typeof migrant.person_id === "number" &&
                      !isNaN(migrant.person_id)

                    return (
                      <TableRow
                        key={migrant.person_id}
                        className={`border-b border-gray-800 hover:bg-gray-800/30 ${
                          isSelected ? "bg-[#9B2335]/10" : ""
                        }`}
                      >
                        <TableCell className="text-center">
                          <Checkbox
                            checked={isSelected}
                            onCheckedChange={() => toggleSelectMigrant(migrant.person_id)}
                            disabled={!hasValidId}
                            className="border-gray-600 data-[state=checked]:bg-[#9B2335] data-[state=checked]:border-[#9B2335]"
                          />
                        </TableCell>
                        <TableCell className="font-medium text-white">{migrant.person_id ?? "—"}</TableCell>
                        <TableCell className="text-gray-300">{migrant.full_name ?? "—"}</TableCell>
                        <TableCell className="text-gray-300">{formatDate(migrant.date_of_birth ?? "—")}</TableCell>
                        <TableCell className="text-gray-300">{migrant.place_of_birth ?? "—"}</TableCell>
                        <TableCell className="text-gray-300">{migrant.occupation ?? "—"}</TableCell>
                        <TableCell className="text-gray-300">
                          {formatDate(migrant.migration?.date_of_arrival_nt ?? "—")}
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button
                              variant="ghost"
                              size="sm"
                              className="h-8 px-2 text-blue-400 hover:text-blue-300 hover:bg-blue-900/20"
                              onClick={() => handleEdit(migrant.person_id as number)}
                            >
                              <Pencil className="w-4 h-4 mr-1" /> Edit
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              className="h-8 px-2 text-red-400 hover:text-red-300 hover:bg-red-900/20"
                              onClick={() => {
                                if (migrant.person_id) {
                                  setIsBulkDelete(false)
                                  setDeleteDialogIds([migrant.person_id.toString()])
                                  setDeleteDialogOpen(true)
                                }
                              }}
                            >
                              <Trash2 className="w-4 h-4 mr-1" /> Delete
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    )
                  })}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Pagination */}
      <div className="flex justify-center items-center gap-3 py-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
          disabled={currentPage === 1 || showAllActive}
          className="border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-50 bg-gray-900"
        >
          Previous
        </Button>
        <span className="text-sm font-medium text-white">
          {showAllActive ? "Showing all records" : `Page ${currentPage} of ${totalPages}`}
        </span>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
          disabled={currentPage === totalPages || showAllActive}
          className="border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-50 bg-gray-900"
        >
          Next
        </Button>
        <Button
          variant={showAllActive ? "default" : "outline"}
          size="sm"
          onClick={() => {
            setShowAllActive(!showAllActive);
            if (!showAllActive) {
              // When activating show all
              setCurrentPage(1);
            }
            // Trigger refetch with new page size
            refetchMigrants();
          }}
          className={`${showAllActive ? "bg-[#9B2335] hover:bg-[#9B2335]/90" : "border-gray-700 bg-gray-900"} text-white hover:bg-gray-800 hover:text-white shadow-sm`}
        >
          {showAllActive ? "Show Paged" : "Show All"}
        </Button>
      </div>

      {/* Delete Confirmation Dialog */}
      <DeleteDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        bulkDelete={isBulkDelete}
        selectedCount={deleteDialogIds.length}
        ids={deleteDialogIds}
        onDeleteSuccess={handleBulkDelete}
      />
    </div>
  )
}

export default MigrantsTable