"use client";

import { Plus, Pencil, Trash2, ListTree, PanelsTopLeft } from "lucide-react";
import {
  DataTable,
  StatusCell,
  type DataTableColumn,
  type DataTableAction,
  type DataTablePaginationType,
} from "@/components/ui/data-table";
import { Badge } from "@/components/ui/badge";
import { toast } from "@/components/ui/toast-notification";
import { useRouter } from "next/navigation";
import { useState, useEffect, useCallback, useMemo } from "react";
import { useTranslations } from "next-intl";
import { useConfirmation } from "@/components/ui/confirmation-dialog";
import { buildAdminCommerceTableHeader } from "@/components/admin/admin-commerce-table-header";

interface Menu {
  _id: string;
  name: string;
  handle: string;
  location: string;
  isActive: boolean;
  items: { length?: number }[] | unknown[];
  updatedAt: string;
}

interface HeaderCmsRow {
  _id: "__header-cms__";
  type: "header-cms";
  name: "Headers";
  handle: "headers";
  location: "header-cms";
  isActive: true;
  items: [];
  updatedAt: string;
}

interface FooterCmsRow {
  _id: "__footer-cms__";
  type: "footer-cms";
  name: "Footer";
  handle: "footer";
  location: "footer-cms";
  isActive: true;
  items: [];
  updatedAt: string;
}

type MenuRow = Menu | HeaderCmsRow | FooterCmsRow;

const HEADER_CMS_ROW: HeaderCmsRow = {
  _id: "__header-cms__",
  type: "header-cms",
  name: "Headers",
  handle: "headers",
  location: "header-cms",
  isActive: true,
  items: [],
  updatedAt: "",
};

const FOOTER_CMS_ROW: FooterCmsRow = {
  _id: "__footer-cms__",
  type: "footer-cms",
  name: "Footer",
  handle: "footer",
  location: "footer-cms",
  isActive: true,
  items: [],
  updatedAt: "",
};

const LOCATION_LABEL_KEYS: Record<string, string> = {
  "header-cms": "headerCms",
  "footer-cms": "footerCms",
  header: "header",
  "header-mega": "headerMega",
  footer: "footer",
  mobile: "mobile",
  sidebar: "sidebar",
  custom: "custom",
};

function isHeaderCmsRow(row: MenuRow): row is HeaderCmsRow {
  return row._id === HEADER_CMS_ROW._id;
}

function isFooterCmsRow(row: MenuRow): row is FooterCmsRow {
  return row._id === FOOTER_CMS_ROW._id;
}

function isMainHeaderMenu(row: Menu) {
  return row.handle === "main-header";
}

// System menu wired into the storefront header — editable but not deletable.
function isMegaMenu(row: Menu) {
  return row.handle === "main-mega-menu";
}

function getMenuEditorHref(locale: string, row: Menu) {
  return `/${locale}/admin/online-store/menus/${encodeURIComponent(
    row.handle || row._id,
  )}/edit`;
}

export function MenusDataTable({ locale }: { locale: string }) {
  const t = useTranslations("admin.menusPage");
  const router = useRouter();
  const { confirm } = useConfirmation();
  const [isLoading, setIsLoading] = useState(true);
  const [items, setItems] = useState<MenuRow[]>([]);
  const [pagination, setPagination] = useState<DataTablePaginationType>({
    page: 1,
    pageSize: 20,
    total: 0,
    totalPages: 1,
  });

  const fetchItems = useCallback(async () => {
    setIsLoading(true);
    try {
      const params = new URLSearchParams({
        page: String(pagination.page),
        limit: String(pagination.pageSize),
      });
      const res = await fetch(`/api/menus?${params.toString()}`);
      const data = await res.json();
      if (data.success) {
        const menuItems = (data.data.data as Menu[]).filter(
          (menu) => !isMainHeaderMenu(menu),
        );
        setItems(
          pagination.page === 1
            ? [HEADER_CMS_ROW, FOOTER_CMS_ROW, ...menuItems]
            : menuItems,
        );
        setPagination((p) => ({
          ...p,
          total: data.data.pagination.total,
          totalPages: data.data.pagination.totalPages,
        }));
      }
    } catch {
      toast.error(t("toast.loadFailed"));
    } finally {
      setIsLoading(false);
    }
  }, [pagination.page, pagination.pageSize, t]);

  useEffect(() => {
    const timer = window.setTimeout(() => {
      void fetchItems();
    }, 0);
    return () => window.clearTimeout(timer);
  }, [fetchItems]);

  const handleDelete = useCallback(
    async (m: Menu) => {
      const ok = await confirm({
        title: t("confirm.deleteTitle"),
        description: t("confirm.deleteDescription", { name: m.name }),
        confirmText: t("actions.delete"),
        cancelText: t("actions.cancel"),
        variant: "destructive",
      });
      if (!ok) return;
      const res = await fetch(`/api/menus/${m._id}`, { method: "DELETE" });
      if (res.ok) {
        toast.success(t("toast.deleted"));
        fetchItems();
      } else {
        const json = await res.json().catch(() => null);
        toast.error(json?.message || t("toast.deleteFailed"));
      }
    },
    [confirm, fetchItems, t],
  );

  const columns = useMemo<DataTableColumn<MenuRow>[]>(
    () => [
      {
        id: "name",
        header: t("table.name"),
        cell: (row) => (
          <div className="flex items-center gap-3">
            <span className="grid h-8 w-8 place-items-center rounded-md bg-primary/10 text-primary">
              {isHeaderCmsRow(row) || isFooterCmsRow(row) ? (
                <PanelsTopLeft className="h-4 w-4" />
              ) : (
                <ListTree className="h-4 w-4" />
              )}
            </span>
            <div>
              <p className="font-medium">
                {isHeaderCmsRow(row)
                  ? t("systemRows.headers")
                  : isFooterCmsRow(row)
                    ? t("systemRows.footer")
                    : row.name}
              </p>
              <p className="text-xs text-muted-foreground">{row.handle}</p>
            </div>
          </div>
        ),
        className: "w-[280px]",
      },
      {
        id: "location",
        header: t("table.location"),
        cell: (row) => (
          <Badge variant="outline" className="capitalize">
            {LOCATION_LABEL_KEYS[row.location]
              ? t(`locations.${LOCATION_LABEL_KEYS[row.location]}`)
              : row.location}
          </Badge>
        ),
        className: "w-[200px]",
      },
      {
        id: "items",
        header: t("table.items"),
        cell: (row) => (
          <span className="text-sm">
            {isHeaderCmsRow(row) || isFooterCmsRow(row)
              ? t("cms")
              : row.items?.length || 0}
          </span>
        ),
        className: "w-[80px]",
      },
      {
        id: "status",
        header: t("table.status"),
        cell: (row) => <StatusCell status={row.isActive ? "active" : "inactive"} />,
        className: "w-[120px]",
      },
    ],
    [t],
  );

  const tableHeader = useMemo(
    () =>
      buildAdminCommerceTableHeader({
        title: t("title"),
        addAction: {
          id: "add",
          label: t("actions.add"),
          href: `/${locale}/admin/online-store/menus/new`,
          icon: <Plus className="h-4 w-4" />,
          variant: "default",
        },
      }),
    [locale, t],
  );

  const rowActions = useCallback(
    (row: MenuRow): DataTableAction[] => {
      if (isHeaderCmsRow(row)) {
        return [
          {
            id: "customize-header",
            label: t("actions.customize"),
            icon: <Pencil className="h-4 w-4" />,
            href: `/${locale}/admin/online-store/menus/header`,
          },
        ];
      }

      if (isFooterCmsRow(row)) {
        return [
          {
            id: "customize-footer",
            label: t("actions.customize"),
            icon: <Pencil className="h-4 w-4" />,
            href: `/${locale}/admin/online-store/menus/footer`,
          },
        ];
      }

      const editAction: DataTableAction = {
        id: "edit",
        label: t("actions.edit"),
        icon: <Pencil className="h-4 w-4" />,
        href: getMenuEditorHref(locale, row),
      };

      // Mega Menu is a protected system menu — editable, but not deletable, so
      // it shows only the edit action (matching the Headers/Footer CMS rows).
      if (isMegaMenu(row)) {
        return [editAction];
      }

      return [
        editAction,
        {
          id: "delete",
          label: t("actions.delete"),
          icon: <Trash2 className="h-4 w-4" />,
          variant: "destructive",
          onClick: () => handleDelete(row),
        },
      ];
    },
    [locale, handleDelete, t],
  );

  return (
    <DataTable
      data={items}
      columns={columns}
      keyField="_id"
      isLoading={isLoading}
      loadingMode="rows"
      title={tableHeader.title}
      actions={tableHeader.actions}
      toolbarActions={tableHeader.toolbarActions}
      toolbarLayout={tableHeader.toolbarLayout}
      tabsVariant={tableHeader.tabsVariant}
      filtersVariant={tableHeader.filtersVariant}
      appearance={tableHeader.appearance}
      stackedTopControls={tableHeader.stackedTopControls}
      showToolbarSortButton={tableHeader.showToolbarSortButton}
      pagination={pagination}
      onPageChange={(page) => setPagination((p) => ({ ...p, page }))}
      onPageSizeChange={(pageSize) =>
        setPagination((p) => ({ ...p, page: 1, pageSize }))
      }
      rowActions={rowActions}
      rowActionsHeader={t("table.actions")}
      rowActionsVariant="inline"
      onRowClick={(row) => {
        if (isHeaderCmsRow(row)) {
          router.push(`/${locale}/admin/online-store/menus/header`);
          return;
        }
        if (isFooterCmsRow(row)) {
          router.push(`/${locale}/admin/online-store/menus/footer`);
          return;
        }
        router.push(getMenuEditorHref(locale, row));
      }}
      emptyMessage={t("empty")}
      emptyIcon={<ListTree className="h-8 w-8" />}
    />
  );
}