"use client"

import { useState, useCallback } from "react"
import Link from "next/link"
import { PlusIcon, Loader2Icon, SearchIcon } from "lucide-react"
import { debounce } from "lodash"
import { toast } from "sonner"

import { Button } from "@/src/components/ui/button"
import { Input } from "@/src/components/ui/input"
import { useFetchMenuQuery, useUpdateMenuStatusMutation } from "@/src/state/menu"
import type { MenuItem } from "@/src/state/menu"
import { extractErrorMessage } from "../utils"
import { MenuPagination } from "../menu-pagination"
import { ItemCard } from "./item-card"
import { DeleteItemDialog } from "./delete-item-dialog"
import { ItemPreviewDialog } from "./item-preview-dialog"

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

  const [previewItem, setPreviewItem] = useState<MenuItem | null>(null)
  const [deletingItem, setDeletingItem] = useState<MenuItem | null>(null)

  const { data, isLoading } = useFetchMenuQuery({
    page,
    limit: 12,
    search: debouncedSearch || undefined,
  })
  const [updateMenuStatus, { isLoading: isUpdatingStatus }] = useUpdateMenuStatusMutation()

  const menu = data?.data
  const items = menu?.items ?? []
  const pagination = menu?.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)
  }

  const handleToggleMenuStatus = async () => {
    if (!menu) return
    const newStatus = menu.status === "ACTIVE" ? "INACTIVE" : "ACTIVE"
    try {
      await updateMenuStatus(newStatus).unwrap()
      toast.success(newStatus === "ACTIVE" ? "Menu activé" : "Menu désactivé")
    } catch (err) {
      toast.error(extractErrorMessage(err, "Erreur lors de la mise à jour"))
    }
  }

  return (
    <div className="px-4 py-8 space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-xl font-semibold">Articles du menu</h1>
          <p className="text-sm text-muted-foreground mt-0.5">
            Gérez les plats proposés à vos clients
          </p>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          {menu && (
            <button
              type="button"
              disabled={isUpdatingStatus}
              onClick={handleToggleMenuStatus}
              className={`inline-flex items-center gap-1.5 text-xs font-medium rounded-full px-3 py-1.5 border transition-colors ${
                menu.status === "ACTIVE"
                  ? "border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100"
                  : "border-muted bg-muted text-muted-foreground hover:bg-muted/80"
              }`}
            >
              {isUpdatingStatus ? (
                <Loader2Icon className="size-3 animate-spin" />
              ) : (
                <span
                  className={`size-1.5 rounded-full ${menu.status === "ACTIVE" ? "bg-emerald-500" : "bg-muted-foreground"}`}
                />
              )}
              {menu.status === "ACTIVE" ? "Menu actif" : "Menu inactif"}
            </button>
          )}
          <Button asChild>
            <Link href="/menu/items/create">
              <PlusIcon />
              Nouvel article
            </Link>
          </Button>
        </div>
      </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 un article…"
          className="pl-9"
        />
      </div>

      {isLoading ? (
        <div className="flex items-center justify-center py-20">
          <Loader2Icon className="animate-spin text-muted-foreground" />
        </div>
      ) : items.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-xl border bg-white py-20 text-center gap-2">
          <p className="text-sm font-medium">Aucun article</p>
          <p className="text-sm text-muted-foreground">
            {debouncedSearch
              ? "Aucun résultat pour cette recherche."
              : "Ajoutez votre premier plat pour commencer."}
          </p>
          {!debouncedSearch && (
            <Button asChild className="mt-2">
              <Link href="/menu/items/create">
                <PlusIcon />
                Ajouter un article
              </Link>
            </Button>
          )}
        </div>
      ) : (
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {items.map((item) => (
            <ItemCard
              key={item.id}
              item={item}
              onPreview={setPreviewItem}
              onDelete={setDeletingItem}
            />
          ))}
        </div>
      )}

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

      <ItemPreviewDialog
        open={previewItem !== null}
        onOpenChange={(open: boolean) => {
          if (!open) setPreviewItem(null)
        }}
        item={previewItem}
      />

      <DeleteItemDialog
        open={deletingItem !== null}
        onOpenChange={(open: boolean) => {
          if (!open) setDeletingItem(null)
        }}
        item={deletingItem}
      />
    </div>
  )
}