"use client";
import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Ellipsis, Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { ResourceList } from "@/components/ui/resource-list/resource-list";
import { ResourceListToolbar } from "@/components/ui/resource-list/resource-list-toolbar";
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 { ResourceListFilters } from "@/components/ui/resource-list/resource-list-filters";
import { ResourceListActionBar } from "@/components/ui/resource-list/resource-list-action-bar";
import { ResourceListBulkAction } from "@/components/ui/resource-list/resource-list-bulk-action";
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 { Routes } from "@/config/routes";
import { JobStatus } from "@/server/modules/job/types/job-status.enum";
import { JobListQuerySchema } from "@/server/modules/job/validators/job.validators";
import { api } from "@/lib/trpc/client";
import type { AppRouterOutput } from "@/lib/trpc/router";
import { formatDate } from "@/lib/utils/format";
import { useQueryStates } from "@/lib/hooks/use-query-states";

type Job = NonNullable<AppRouterOutput["job"]["get"]>;

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

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

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

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

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

            setToDelete([]);
        }
    });

    return (
        <ResourceList<Job>
          selection
          data={jobs}
          total={count}
          page={params.page}
          perPage={params.perPage}
          onPageChange={(page) => setParams({ page })}
          onPerPageChange={(perPage) => setParams({ perPage })}>
            <ResourceListToolbar>
                <ResourceListFilters
                  filters={params}
                  onChange={setParams}>
                    <SelectControl
                      label="Status"
                      name="status">
                        <SelectTrigger className="w-full">
                            <SelectValue placeholder="Select a status" />
                        </SelectTrigger>

                        <SelectContent className="max-h-[300px]">
                            <SelectItem value={JobStatus.PUBLISHED}>Published</SelectItem>
                            <SelectItem value={JobStatus.DRAFT}>Draft</SelectItem>
                            <SelectItem value={JobStatus.ARCHIVED}>Archived</SelectItem>
                        </SelectContent>
                    </SelectControl>
                </ResourceListFilters>

                <div className="flex items-center gap-2">
                    <Button variant="outline" size="sm" asChild>
                        <Link href={Routes.DASHBOARD.JOB_CREATE}>
                            <Plus className="h-4 w-4" />
                            Add job
                        </Link>
                    </Button>
                </div>
            </ResourceListToolbar>

            <ResourceListTable>
                <ResourceListField<Job, "title">
                  enableSorting
                  label="Title"
                  name="title"
                  render={(title, job) => {
                    return (
                        <Link
                          className="hover:text-primary flex items-center gap-1 hover:underline"
                          href={Routes.DASHBOARD.JOB_EDIT(job.id)}>
                            {title}
                        </Link>
                    );
                  }} />

                <ResourceListField<Job, "status">
                  enableSorting
                  label="Status"
                  name="status"
                  render={(status) => {
                    if(!status) {
                        return null;
                    }

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

                <ResourceListField<Job, "order">
                  enableSorting
                  label="Order"
                  name="order"
                  render={o => o} />

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

                <ResourceListField<Job, "deadlineAt">
                  enableSorting
                  label="Deadline At"
                  name="deadlineAt"
                  render={(deadlineAt) => {
                    return formatDate(deadlineAt ?? undefined);
                  }} />

                <ResourceListField<Job, "id">
                  label=""
                  name="id"
                  render={(id, job) => {
                    return (
                        <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>
                                <DropdownMenuItem
                                  onClick={() => router.push(Routes.DASHBOARD.JOB_EDIT(id))}>
                                    Edit
                                </DropdownMenuItem>

                                <DropdownMenuItem
                                  variant="destructive"
                                  onClick={() => setToDelete([job])}>
                                   Delete
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    );
                  }} />
            </ResourceListTable>

            <ResourceListPagination />

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

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