"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { CheckCircle2, ChevronRight, Clock, Trash2, Loader2 } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useServerPagination } from "@/presentation/hooks/use-server-pagination";
import ServerDataTable, { type Column } from "@/presentation/components/shared/server-data-table";
import { Badge } from "@/presentation/components/ui/badge";
import { Button } from "@/presentation/components/ui/button";
import { PageNumbers } from "@/app/(dashboard)/help-center/components/page-numbers";
import type { HelpArticle } from "@/domain/entities/help-article";
import { toast } from "sonner";

const SECTION_LABELS: Record<string, string> = {
  "fleet-manager": "Gestionnaire de flotte",
  "mobile-app": "Application mobile",
  conducteur: "Conducteur",
  gestionnaire: "Gestionnaire",
};

export function ArticlesTab() {
  const router = useRouter();
  const { helpArticleRepository } = useRepositories();
  const pagination = useServerPagination({ perPage: 10, orderBy: "created_at", order: "DESC" });
  const [deletingId, setDeletingId] = useState<string | null>(null);

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

  const { data: categoryOptions } = useApiQuery(
    () => helpArticleRepository.getCategoryOptions(),
    { deps: [] },
  );

  const articles = response?.data ?? [];

  // Build a category id → label map from the loaded articles
  // (each article has its category relationship resolved by the backend).
  const categoryMap = new Map<string, string>();
  articles.forEach((article) => {
    const cat = article.category;
    if (cat) {
      const id = cat.id?.toString() ?? article.category_id?.toString();
      const label = cat.label || cat.label_fr || cat.name;
      if (id && label) categoryMap.set(id, label);
    }
  });

  const getCategoryName = (categoryId: unknown): string => {
    if (categoryId === undefined || categoryId === null || categoryId === "") return "";
    const idStr = String(categoryId);
    if (categoryMap.has(idStr)) return categoryMap.get(idStr)!;
    if (!categoryOptions || !Array.isArray(categoryOptions)) return idStr;
    const match = categoryOptions.find((item) => {
      if (typeof item === "string") return item === idStr;
      const id = item.id?.toString() ?? item.value?.toString() ?? item.name;
      return id === idStr;
    });
    if (!match) return idStr;
    if (typeof match === "string") return match;
    return match.label || match.label_fr || match.name || match.title || idStr;
  };

  const handleDelete = async (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    if (!confirm("Êtes-vous sûr de vouloir supprimer cet article ?")) return;
    setDeletingId(id);
    try {
      await helpArticleRepository.delete(id);
      toast.success("Article supprimé avec succès");
      refetch();
    } catch (error: any) {
      toast.error(error.response?.data?.message || "Erreur lors de la suppression");
    } finally {
      setDeletingId(null);
    }
  };

  const columns: Column<HelpArticle>[] = [
    {
      key: "title",
      label: "Titre",
      sortable: true,
      truncate: true,
      render: (row) => <span className="font-medium text-foreground">{row.title}</span>,
    },
    {
      key: "category",
      label: "Catégorie",
      render: (row) => {
        const catLabel =
          row.category?.label || row.category?.label_fr || row.category?.name;
        const rawCategory = row.category_id ?? row.category;
        const name = catLabel || getCategoryName(rawCategory);
        return (
          <Badge
            variant="outline"
            className="rounded-full border-border font-normal text-muted-foreground bg-background"
          >
            {name}
          </Badge>
        );
      },
    },
    {
      key: "audience",
      label: "Audience",
      render: (row) => {
        const raw = (row.section ?? (row as unknown as { audience?: unknown }).audience) as unknown;
        let audienceStr = "";
        if (typeof raw === "string") audienceStr = raw;
        else if (raw && typeof raw === "object") {
          const obj = raw as { name?: string; label?: string; id?: string | number };
          audienceStr = obj.name || obj.label || String(obj.id ?? "");
        }
        if (!audienceStr) return <span className="text-muted-foreground">—</span>;
        const label = SECTION_LABELS[audienceStr] || audienceStr;
        const cls =
          audienceStr.toLowerCase() === "mobile-app" || audienceStr.toLowerCase() === "conducteur"
            ? "bg-blue-100 text-blue-700"
            : audienceStr.toLowerCase() === "fleet-manager" || audienceStr.toLowerCase() === "gestionnaire"
              ? "bg-purple-100 text-purple-700"
              : "bg-gray-100 text-gray-700";
        return (
          <Badge variant="outline" className={`border-transparent font-medium ${cls}`}>
            {label}
          </Badge>
        );
      },
    },
    {
      key: "is_draft",
      label: "Statut",
      render: (row) => {
        const isDraft = row.is_draft ?? row.status === "Brouillon";
        return isDraft ? (
          <div className="flex items-center gap-1.5">
            <Clock className="w-4 h-4 text-amber-500" />
            <span className="text-amber-500 font-medium text-sm">Brouillon</span>
          </div>
        ) : (
          <div className="flex items-center gap-1.5">
            <CheckCircle2 className="w-4 h-4 text-emerald-500" />
            <span className="text-emerald-500 font-medium text-sm">Publié</span>
          </div>
        );
      },
    },
    {
      key: "views",
      label: "Vues",
      render: (row) => (
        <span className="text-muted-foreground">{row.views_count ?? row.views ?? 0}</span>
      ),
    },
    {
      key: "satisfaction",
      label: "Satisfaction",
      className: "text-right",
      render: (row) => {
        const value = row.satisfaction_score ? row.satisfaction_score * 20 : row.satisfaction;
        return <span className="font-bold text-emerald-600">{value ?? 0}%</span>;
      },
    },
    {
      key: "actions",
      label: "",
      className: "w-20",
      render: (row) => (
        <div className="flex items-center justify-end gap-1">
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
            onClick={(e) => handleDelete(e, String(row.id))}
            disabled={deletingId === String(row.id)}
          >
            {deletingId === String(row.id)
              ? <Loader2 className="w-4 h-4 animate-spin" />
              : <Trash2 className="w-4 h-4" />}
          </Button>
          <ChevronRight className="w-4 h-4 text-muted-foreground" />
        </div>
      ),
    },
  ];

  return (
    <div className="space-y-4">
      <ServerDataTable
        columns={columns}
        data={articles}
        total={response?.meta?.total ?? articles.length}
        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}
        onRowClick={(row) => router.push(`/help-center/${row.id}`)}
        emptyMessage="Aucun article trouvé"
      />

      {(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>
      )}
    </div>
  );
}