"use client";
import React, { useState } from "react";
import { useLocale, useTranslations } from "next-intl";
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, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import {
    Dataset,
    DatasetAction,
    DatasetActionBar,
    DatasetTable,
    DatasetCol,
    DatasetToolbar,
    DatasetFilters
} from "@/components/ui/dataset";
import { ProfilePreview } from "@/components/dashboard/profile/profile-preview";
import { DeleteDialog } from "@/components/dashboard/delete-dialog";
import { SwitchControl } from "@/components/form/control/switch.control";
import { api } from "@/lib/trpc/client";
import type { AppRouterOutput } from "@/lib/trpc/router";
import { useQueryStates } from "@/lib/hooks/use-query-states";
import formatDate from "@/lib/utils/format-date";
import { ProfileListQuerySchema } from "@/server/modules/profile/profile.validators";
import { Routes } from "@/config/routes";

type Profile = AppRouterOutput["profile"]["list"][number];

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

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

    const utils = api.useUtils();
    const { data: count = 0 } = api.profile.count.useQuery({
        search: params.search || undefined,
        isPersonal: params.isPersonal || false
    });

    const { data: profiles = [] } = api.profile.list.useQuery({
        with: ["user"],
        search: params.search || undefined,
        isPersonal: params.isPersonal || false,
        offset: params.page * params.perPage,
        limit: params.perPage,
        orderBy: params.orderBy,
        orderDir: params.orderDir
    });

    const { data: canDeleteProfile } = api.gate.can.useQuery({
        resource: "profile",
        action: "delete-many"
    });

    const deleteManyMutation = api.profile.deleteMany.useMutation({
        async onSuccess() {
            await Promise.all([
                utils.profile.list.invalidate(),
                utils.profile.count.invalidate()
            ]);
            setToDelete([]);
        }
    });

    return (
        <Dataset<Profile>
          selection
          data={profiles}
          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}>
                    <SwitchControl
                      label={t("profile.filters.isPersonal.label")}
                      name="isPersonal" />
                </DatasetFilters>

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

            <DatasetTable>
                <DatasetCol<Profile, "name">
                  enableSorting
                  label={t("profile.fields.name.label")}
                  name="name"
                  render={(name, row) => (
                    <Link
                      className="hover:text-primary flex items-center gap-1 hover:underline"
                      href={Routes.AUTHOR_(row.slug)}>
                        <ProfilePreview
                          withoutLabel
                          size={32}
                          name={row.name}
                          avatar={row.avatar} />

                        {name}
                    </Link>
                  )} />

                <DatasetCol<Profile, "userId">
                  label={t("profile.fields.user.label")}
                  name="userId"
                  render={(_, profile) => {
                    const user = profile.user;

                    return (
                        <div className="flex items-center gap-2">
                            <ProfilePreview
                              withoutLabel
                              size={32}
                              name={user?.name || ""}
                              avatar={user?.avatar || {
                                alt: user?.name || "",
                                url: user?.image || ""
                              }} />

                            <span>{user?.name}</span>
                        </div>
                    );
                  }} />

                <DatasetCol<Profile, "slug">
                  enableSorting
                  label={t("profile.fields.slug.label")}
                  name="slug"
                  render={(slug) => (
                    <span className="text-muted-foreground text-xs">{slug}</span>
                  )} />

                <DatasetCol<Profile, "jobInfo">
                  enableSorting
                  label={t("profile.fields.jobInfo.label")}
                  name="jobInfo"
                  render={(jobInfo) => jobInfo || "-"} />

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

                <DatasetCol<Profile, "id">
                  label=""
                  name="id"
                  render={(id, profile) => (
                    <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.PROFILE_EDIT(id))}>
                                {t("general.actions.edit")}
                            </DropdownMenuItem>

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

            {canDeleteProfile && (
              <DatasetActionBar>
                <DatasetAction<Profile>
                  size="icon"
                  variant="destructive"
                  onClick={(rows) => setToDelete(rows.map(r => r.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>
    );
};