"use client";
import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTranslations, useLocale } from "next-intl";
import { Ellipsis, Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem
} from "@/components/ui/dropdown-menu";
import {
    Dataset,
    DatasetActionBar,
    DatasetAction,
    DatasetTable,
    DatasetFilters,
    DatasetCol,
    DatasetToolbar
} from "@/components/ui/dataset";
import { Badge } from "@/components/ui/badge";
import { DeleteDialog } from "@/components/dashboard/delete-dialog";
import { SelectControl } from "@/components/form/control/select.control";
import {
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue
} from "@/components/ui/select";
import { PageStatus } from "@/server/modules/page/types/page-status.enum";
import { api } from "@/lib/trpc/client";
import type { AppRouterOutput } from "@/lib/trpc/router";
import formatDate from "@/lib/utils/format-date";
import { useQueryStates } from "@/lib/hooks/use-query-states";
import { PageListQuerySchema } from "@/server/modules/page/page.validators";
import { Routes } from "@/config/routes";

type Page = NonNullable<AppRouterOutput["page"]["get"]>;

export const PageList: React.FC = () => {
    const t = useTranslations("dashboard");
    const locale = useLocale();
    const router = useRouter();
    const [toDelete, setToDelete] = useState<Page[]>([]);

    const [params, setParams] = useQueryStates(PageListQuerySchema, {
        history: "replace",
        scroll: false,
        shallow: true,
        clearOnDefault: true
    });

    const { data: count = 0, refetch: refetchCount } = api.page.count.useQuery({
        access: "dashboard",
        search: params.search || undefined,
        status: params.status || undefined
    });

    const {
        data: pages = [],
        refetch: refetchList
    } = api.page.list.useQuery({
        access: "dashboard",
        search: params.search || undefined,
        status: params.status || undefined,
        offset: params.page * params.perPage,
        limit: params.perPage,
        orderBy: params.orderBy,
        orderDir: params.orderDir
    });

    const deleteManyMutation = api.page.deleteMany.useMutation({
        async onSuccess() {
            await Promise.all([refetchCount(), refetchList()]);

            setToDelete([]);
        }
    });

    return (
        <Dataset<Page>
          selection
          data={pages}
          total={count}
          page={params.page}
          perPage={params.perPage}
          orderBy={params.orderBy}
          orderDir={params.orderDir}
          onOrderByChange={(orderBy) => setParams({ orderBy })}
          onOrderDirChange={(orderDir) => setParams({ orderDir })}
          onPageChange={(page) => setParams({ page })}
          onPerPageChange={(perPage) => setParams({ perPage })}>
            <DatasetToolbar>
                <DatasetFilters search filters={params} onChange={setParams}>
                    <SelectControl name="status">
                        <SelectTrigger className="w-full">
                            <SelectValue placeholder={t("page.fields.status.placeholder")} />
                        </SelectTrigger>

                        <SelectContent className="max-h-[300px]">
                            <SelectItem value={PageStatus.PUBLISHED}>Publushed</SelectItem>
                            <SelectItem value={PageStatus.DRAFT}>Draft</SelectItem>
                        </SelectContent>
                    </SelectControl>
                </DatasetFilters>

                <div className="flex items-center gap-2">
                    <Button variant="outline" size="sm" asChild>
                        <Link href={Routes.DASHBOARD.PAGE_CREATE}>
                            <Plus className="h-4 w-4" />
                            {t("page.actions.create")}
                        </Link>
                    </Button>
                </div>
            </DatasetToolbar>

            <DatasetTable>
                <DatasetCol<Page, "title">
                  enableSorting
                  label={t("page.fields.title.label")}
                  name="title"
                  render={(title, page) => {
                    return (
                      <Link
                        className="hover:text-primary flex items-center gap-1 hover:underline"
                        href={Routes.DASHBOARD.PAGE_EDIT(page.slug)}>
                          {title}
                      </Link>
                    );
                  }} />

                <DatasetCol<Page, "status">
                  enableSorting
                  label={t("page.fields.status.label")}
                  name="status"
                  render={(status) => {
                    if (!status) {
                        return null;
                    }

                    return (
                        <Badge className="py-1 [&>svg]:size-3.5" variant="outline">
                            <span className="capitalize">{status}</span>
                        </Badge>
                    );
                  }} />

                <DatasetCol<Page, "createdAt">
                  enableSorting
                  label={t("page.fields.createdAt.label")}
                  name="createdAt"
                  render={(createdAt) => {
                    return formatDate(createdAt, {
                        locale,
                        day: "numeric",
                        month: "long",
                        year: "numeric"
                    });
                  }} />

                <DatasetCol<Page, "slug">
                  label=""
                  name="slug"
                  render={(_slug, page) => {
                    return (
                      <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                              <Button
                                className="data-[state=open]:bg-muted flex size-8 p-0"
                                variant="ghost"
                                aria-label={t("general.actions.openMenu")}>
                                  <Ellipsis className="size-4" aria-hidden="true" />
                              </Button>
                          </DropdownMenuTrigger>

                          <DropdownMenuContent>
                              <DropdownMenuItem
                                onClick={() => router.push(Routes.DASHBOARD.PAGE_EDIT(page.slug))}>
                                  {t("general.actions.edit")}
                              </DropdownMenuItem>

                              <DropdownMenuItem
                                variant="destructive"
                                onClick={() => setToDelete([page])}>
                                  {t("general.actions.delete")}
                              </DropdownMenuItem>
                          </DropdownMenuContent>
                      </DropdownMenu>
                    );
                  }} />
            </DatasetTable>

            <DatasetActionBar>
                <DatasetAction<Page>
                  size="icon"
                  variant="destructive"
                  onClick={(rows) => {
                    setToDelete(rows.map((row) => row.original));
                  }}>
                    <Trash2 />
                </DatasetAction>
            </DatasetActionBar>

            <DeleteDialog
              open={toDelete.length > 0}
              pending={deleteManyMutation.isPending}
              onConfirm={async () => {
                await deleteManyMutation.mutateAsync({
                    ids: toDelete.map((p) => p.id)
                });
              }}
              onCancel={() => setToDelete([])} />
        </Dataset>
    );
};