"use client"

import { useState, useCallback } from "react"
import { EyeIcon, MoreHorizontalIcon, PencilIcon, PlusIcon, Trash2Icon, Loader2Icon, SearchIcon } from "lucide-react"
import { debounce } from "lodash"

import { Button } from "@/src/components/ui/button"
import { Input } from "@/src/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/src/components/ui/dropdown-menu"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/src/components/ui/table"
import { useFetchCategoriesQuery } from "@/src/state/menu"
import type { MenuCategory } from "@/src/state/menu"
import { formatDate } from "../utils"
import { MenuPagination } from "../menu-pagination"
import { CategoryDialog } from "./category-dialog"
import { DeleteCategoryDialog } from "./delete-category-dialog"
import { CategoryPreviewDialog } from "./category-preview-dialog"

export default function CategoriesComponent() {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
  const [debouncedSearch, setDebouncedSearch] = useState("")

  const [createOpen, setCreateOpen] = useState(false)
  const [editingCategory, setEditingCategory] = useState<MenuCategory | null>(null)
  const [deletingCategory, setDeletingCategory] = useState<MenuCategory | null>(null)
  const [previewCategory, setPreviewCategory] = useState<MenuCategory | null>(null)

  const { data, isLoading } = useFetchCategoriesQuery({
    page,
    limit: 16,
    search: debouncedSearch || undefined,
  })

  const categories = data?.data?.categories ?? []
  const pagination = data?.data?.pagination

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const applySearch = useCallback(
    debounce((value: string) => {
      setDebouncedSearch(value)
      setPage(1)
    }, 400),
    []
  )

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value)
    applySearch(e.target.value)
  }

  return (
    <div className="max-w-5xl mx-auto px-4 py-8 space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-xl font-semibold">Catégories du menu</h1>
          <p className="text-sm text-muted-foreground mt-0.5">
            Organisez vos plats par catégories
          </p>
        </div>
        <Button onClick={() => setCreateOpen(true)} className="shrink-0">
          <PlusIcon />
          Nouvelle catégorie
        </Button>
      </div>

      <div className="relative max-w-sm">
        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
        <Input
          value={search}
          onChange={handleSearchChange}
          placeholder="Rechercher une catégorie…"
          className="pl-9"
        />
      </div>

      <section className="rounded-xl border bg-white overflow-hidden">
        {isLoading ? (
          <div className="flex items-center justify-center py-20">
            <Loader2Icon className="animate-spin text-muted-foreground" />
          </div>
        ) : categories.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-20 text-center gap-2">
            <p className="text-sm font-medium">Aucune catégorie</p>
            <p className="text-sm text-muted-foreground">
              {debouncedSearch
                ? "Aucun résultat pour cette recherche."
                : "Créez votre première catégorie pour organiser votre menu."}
            </p>
          </div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nom</TableHead>
                <TableHead>Date de création</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {categories.map((category) => (
                <TableRow key={category.id}>
                  <TableCell className="font-medium">{category.name}</TableCell>
                  <TableCell className="text-muted-foreground">
                    {formatDate(category.createdAt)}
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu modal={false}>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="size-8">
                          <MoreHorizontalIcon className="size-4" />
                          <span className="sr-only">Actions</span>
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end" className="w-44">
                        <DropdownMenuItem onClick={() => setPreviewCategory(category)}>
                          <div className="rounded-full bg-muted p-1.5">
                            <EyeIcon className="size-3.5" />
                          </div>
                          Aperçu
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => setEditingCategory(category)}>
                          <div className="rounded-full bg-muted p-1.5">
                            <PencilIcon className="size-3.5" />
                          </div>
                          Modifier
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          className="text-destructive focus:text-destructive"
                          onClick={() => setDeletingCategory(category)}
                        >
                          <div className="rounded-full bg-muted p-1.5">
                            <Trash2Icon className="size-3.5" />
                          </div>
                          Supprimer
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </section>

      {pagination && (
        <MenuPagination pagination={pagination} onPageChange={setPage} />
      )}

      <CategoryDialog
        open={createOpen || editingCategory !== null}
        onOpenChange={(open) => {
          if (!open) {
            setCreateOpen(false)
            setEditingCategory(null)
          }
        }}
        editing={editingCategory}
      />

      <DeleteCategoryDialog
        open={deletingCategory !== null}
        onOpenChange={(open: boolean) => {
          if (!open) setDeletingCategory(null)
        }}
        category={deletingCategory}
      />

      <CategoryPreviewDialog
        open={previewCategory !== null}
        onOpenChange={(open: boolean) => {
          if (!open) setPreviewCategory(null)
        }}
        category={previewCategory}
      />
    </div>
  )
}