"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2, Plus, Edit, Trash2, Eye, EyeOff } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useT } from "@/shared/i18n/client";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useCrudMutations } from "@/presentation/hooks/use-crud-mutations";
import { useDeleteTarget } from "@/presentation/hooks/use-delete-target";
import { useServerPagination } from "@/presentation/hooks/use-server-pagination";
import ServerDataTable, { type Column } from "@/presentation/components/shared/server-data-table";
import ConfirmationDialog from "@/presentation/components/shared/confirmation-dialog";
import { PageNumbers } from "@/app/(dashboard)/help-center/components/page-numbers";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/presentation/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/presentation/components/ui/form";
import { createHelpCategorySchema, type CreateHelpCategoryFormValues } from "@/shared/schemas/help-category.schema";
import type { HelpCategory } from "@/domain/entities/help-category";

export function CategoriesTab() {
  const t = useT();
  const container = useRepositories();
  const pagination = useServerPagination({ perPage: 10, orderBy: "created_at", order: "DESC" });
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingCategory, setEditingCategory] = useState<HelpCategory | null>(null);
  const deleteDialog = useDeleteTarget<HelpCategory>();

  const { data: response, loading, refetch } = useApiQuery(
    () => container.helpCategoryRepository.findAll(pagination.params),
    { deps: [pagination.params] }
  );

  const [togglingId, setTogglingId] = useState<string | number | null>(null);

  const toggleVisibility = async (category: HelpCategory) => {
    setTogglingId(category.id);
    try {
      await container.helpCategoryRepository.toggleVisibility(category.id);
      refetch();
    } finally {
      setTogglingId(null);
    }
  };

  const { create: createMutation, update: updateMutation, delete: deleteMutation } = useCrudMutations(
    container.helpCategoryRepository,
    {
      create: { successMessage: "Catégorie créée avec succès", onSuccess: () => { setDialogOpen(false); refetch(); } },
      update: { successMessage: "Catégorie mise à jour avec succès", onSuccess: () => { setDialogOpen(false); setEditingCategory(null); refetch(); } },
      delete: { successMessage: "Catégorie supprimée avec succès", onSuccess: () => { deleteDialog.close(); refetch(); } },
    }
  );

  const isEditing = !!editingCategory;
  const schema = createHelpCategorySchema(t);
  const form = useForm<CreateHelpCategoryFormValues>({
    resolver: zodResolver(schema) as any,
    defaultValues: { name: "", description: "", order: 0 },
  });

  const openCreate = () => {
    setEditingCategory(null);
    form.reset({ name: "", description: "", order: 0 });
    setDialogOpen(true);
  };

  const openEdit = (category: HelpCategory) => {
    setEditingCategory(category);
    form.reset({
      name: category.name,
      description: category.description || "",
      order: category.order || 0,
    });
    setDialogOpen(true);
  };

  const onSubmit = async (values: CreateHelpCategoryFormValues) => {
    if (isEditing && editingCategory) {
      await updateMutation.mutate({ id: Number(editingCategory.id), data: values });
    } else {
      await createMutation.mutate(values);
    }
  };

  const columns: Column<HelpCategory>[] = [
    { key: "name", label: "Nom", sortable: true },
    { key: "description", label: "Description", render: (row) => row.description || "—" },
    {
      key: "is_hidden",
      label: "Visibilité",
      className: "w-28 text-center",
      render: (row) => {
        const isToggling = togglingId === row.id;
        const visible = !row.is_hidden;
        return (
          <Button
            variant="ghost"
            size="icon"
            disabled={isToggling}
            title={visible ? "Visible — cliquer pour masquer" : "Masqué — cliquer pour afficher"}
            onClick={(e) => { e.stopPropagation(); toggleVisibility(row); }}
          >
            {isToggling
              ? <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
              : visible
                ? <Eye className="w-4 h-4 text-emerald-600" />
                : <EyeOff className="w-4 h-4 text-muted-foreground" />
            }
          </Button>
        );
      },
    },
    {
      key: "actions",
      label: "",
      className: "w-24 text-right",
      render: (row) => (
        <div className="flex items-center justify-end gap-2">
          <Button variant="ghost" size="icon" onClick={(e) => { e.stopPropagation(); openEdit(row); }}>
            <Edit className="w-4 h-4 text-blue-600" />
          </Button>
          <Button variant="ghost" size="icon" onClick={(e) => { e.stopPropagation(); deleteDialog.open(row); }}>
            <Trash2 className="w-4 h-4 text-red-600" />
          </Button>
        </div>
      ),
    },
  ];

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-semibold">Catégories</h3>
        <Button onClick={openCreate} size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
          <Plus className="w-4 h-4 mr-2" />
          Nouvelle Catégorie
        </Button>
      </div>

      <ServerDataTable
        columns={columns}
        data={response?.data ?? []}
        total={response?.meta?.total ?? response?.data?.length ?? 0}
        page={pagination.page}
        totalPages={1}
        loading={loading}
        search={pagination.search}
        onSearchChange={pagination.setSearch}
        onPageChange={pagination.setPage}
        onSortChange={pagination.setSort}
        sortBy={pagination.orderBy}
        sortOrder={pagination.order}
        emptyMessage="Aucune catégorie trouvée"
      />

      {(response?.meta?.last_page ?? 1) > 1 && (
        <div className="flex justify-end">
          <PageNumbers
            page={pagination.page}
            totalPages={response?.meta?.last_page ?? 1}
            onPageChange={pagination.setPage}
          />
        </div>
      )}

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{isEditing ? "Modifier la catégorie" : "Nouvelle catégorie"}</DialogTitle>
          </DialogHeader>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Nom</FormLabel>
                    <FormControl>
                      <Input placeholder="Nom de la catégorie" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Description</FormLabel>
                    <FormControl>
                      <Input placeholder="Description" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="flex justify-end pt-4">
                <Button type="submit" disabled={createMutation.loading || updateMutation.loading}>
                  {(createMutation.loading || updateMutation.loading) && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
                  {isEditing ? "Enregistrer" : "Créer"}
                </Button>
              </div>
            </form>
          </Form>
        </DialogContent>
      </Dialog>

      <ConfirmationDialog
        open={deleteDialog.isOpen}
        onOpenChange={(open) => { if (!open) deleteDialog.close(); }}
        title="Supprimer la catégorie"
        description={`Êtes-vous sûr de vouloir supprimer la catégorie "${deleteDialog.target?.name}" ? Cette action est irréversible.`}
        confirmLabel="Supprimer"
        cancelLabel="Annuler"
        onConfirm={() => deleteDialog.target && deleteMutation.mutate(Number(deleteDialog.target.id))}
        loading={deleteMutation.loading}
        variant="destructive"
      />
    </div>
  );
}