"use client";
import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Ellipsis, Trash2, ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { ResourceList } from "@/components/ui/resource-list/resource-list";
import { ResourceListTable } from "@/components/ui/resource-list/resource-list-table";
import { ResourceListField } from "@/components/ui/resource-list/resource-list-field";
import { ResourceListPagination } from "@/components/ui/resource-list/resource-list-pagination";
import { ResourceListActionBar } from "@/components/ui/resource-list/resource-list-action-bar";
import { ResourceListBulkAction } from "@/components/ui/resource-list/resource-list-bulk-action";
import { DeleteDialog } from "@/components/dashboard/delete-dialog";
import { api } from "@/lib/trpc/client";
import type { AppRouterOutput } from "@/lib/trpc/router";
import { useQueryStates } from "@/lib/hooks/use-query-states";
import { PaywallBypassTokenListQuerySchema } from "@/server/modules/paywall-bypass/paywall-bypass-token.validators";
import { formatDate } from "@/lib/utils/format";

type PaywallBypassToken = NonNullable<AppRouterOutput["paywallBypassToken"]["list"]>[number];

export const PaywallBypassTokenList: React.FC = () => {
    const router = useRouter();
    const [toDelete, setToDelete] = useState<PaywallBypassToken[]>([]);

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

    const { data: count = 0, refetch: refetchCount } = api.paywallBypassToken.count.useQuery({
        search: params.search || undefined,
        postId: params.postId || undefined
    });

    const {
        data: items = [],
        refetch: refetchList
    } = api.paywallBypassToken.list.useQuery({
        with: ["post"],
        search: params.search || undefined,
        postId: params.postId || undefined,
        offset: params.page * params.perPage,
        limit: params.perPage,
        orderBy: params.orderBy,
        orderDir: params.orderDir
    });

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

            setToDelete([]);
        }
    });

    const getBypassUrl = (row: PaywallBypassToken) => {
        if(!row.post || !row.post.slug) {
            return "#";
        }

        return `/${row.post.topic}/${row.post.slug}?token=${row.id}`;
    };

    return (
        <ResourceList<PaywallBypassToken>
          selection
          data={items}
          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 })}>
            <ResourceListTable>
                <ResourceListField<PaywallBypassToken, "postId">
                  enableSorting
                  label="Post"
                  name="postId"
                  render={(_, row) => (
                    <div className="flex flex-col gap-1">
                        {row.post && (
                            <span className="text-xs text-muted-foreground">
                                Post: {row.post.title}
                            </span>
                        )}
                    </div>
                  )} />

                <ResourceListField<PaywallBypassToken, "expiresAt">
                  enableSorting
                  label="Expires At"
                  name="expiresAt"
                  render={(expiresAt) => expiresAt ? formatDate(expiresAt) : "Never"} />

                <ResourceListField<PaywallBypassToken, "createdAt">
                  enableSorting
                  label="Created At"
                  name="createdAt"
                  render={(createdAt) => formatDate(createdAt)} />

                <ResourceListField<PaywallBypassToken, "id">
                  label=""
                  name="id"
                  render={(id, item) => (
                    <div className="flex items-center gap-2">
                        <Button variant="ghost" size="icon" asChild title="View post with bypass">
                            <Link href={getBypassUrl(item)} target="_blank">
                                <ExternalLink className="size-4" />
                            </Link>
                        </Button>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button
                                  className="data-[state=open]:bg-muted flex size-8 p-0"
                                  variant="ghost"
                                  aria-label="Open menu">
                                    <Ellipsis className="size-4" aria-hidden="true" />
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                                <DropdownMenuItem onClick={() => router.push(`/dashboard/paywall-bypass/tokens/${id}`)}>
                                    Edit
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                  className="text-destructive focus:text-destructive"
                                  onClick={() => setToDelete([item])}>
                                    Delete
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                  )} />
            </ResourceListTable>

            <ResourceListPagination />

            <ResourceListActionBar>
                <ResourceListBulkAction<PaywallBypassToken>
                  size="icon"
                  variant="destructive"
                  onClick={(rows) => setToDelete(rows.map(r => r.original))}>
                    <Trash2 />
                </ResourceListBulkAction>
            </ResourceListActionBar>

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