"use client";
import React from "react";
import { useTranslations, useLocale } from "next-intl";
import { UAParser } from "ua-parser-js";
import {
    Dataset,
    DatasetTable,
    DatasetCol,
    DatasetToolbar,
    DatasetFilters
} from "@/components/ui/dataset";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
import type { AppRouterOutput } from "@/lib/trpc/router";
import { api } from "@/lib/trpc/client";
import { useQueryStates } from "@/lib/hooks/use-query-states";
import formatDate from "@/lib/utils/format-date";
import { SessionOrderBy } from "@/server/modules/auth/types/session-order-by.enum";
import { SessionListQueryValidator } from "@/server/modules/auth/validators/session-list-query.validator";

type Session = AppRouterOutput["auth"]["session"]["list"][number];

export const SessionList = () => {
    const t = useTranslations("dashboard");
    const locale = useLocale();
    const [params, setParams] = useQueryStates(SessionListQueryValidator, {
        history: "replace",
        scroll: false,
        shallow: true,
        clearOnDefault: true
    });

    const { data: count = 0 } = api.auth.session.count.useQuery({
        userId: params.userId || undefined,
        search: params.search || undefined
    });

    const { data: sessions = [] } = api.auth.session.list.useQuery({
        with: ["user", "impersonator"],
        userId: params.userId || undefined,
        offset: params.page * params.perPage,
        limit: params.perPage,
        orderBy: params.orderBy,
        orderDir: params.orderDir,
        search: params.search || undefined
    });

    return (
        <Dataset
          data={sessions}
          total={count}
          page={params.page}
          perPage={params.perPage}
          orderBy={params.orderBy}
          orderDir={params.orderDir}
          onOrderByChange={(orderBy) => setParams({ orderBy: orderBy as SessionOrderBy })}
          onOrderDirChange={(orderDir) => setParams({ orderDir })}
          onPageChange={(page) => setParams({ page })}
          onPerPageChange={(perPage) => setParams({ perPage })}>
            <DatasetToolbar>
                <DatasetFilters search filters={params} onChange={setParams} />
            </DatasetToolbar>

            <DatasetTable>
                <DatasetCol<Session, "user">
                  label={t("session.fields.user.label")}
                  name="user"
                  render={(user) => {
                    return (
                        <div className="flex flex-col">
                            <span className="font-medium">{user.name}</span>
                            <span className="text-muted-foreground text-xs">{user.email}</span>
                        </div>
                    );
                  }} />

                <DatasetCol<Session, "ipAddress">
                  label={t("session.fields.ipAddress.label")}
                  name="ipAddress"
                  render={(ipAddress) => ipAddress || "-"} />

                <DatasetCol<Session, "userAgent">
                  label={t("session.fields.userAgent.label")}
                  name="userAgent"
                  render={(userAgent) => {
                    if(!userAgent) {
                        return null;
                    }

                    const parser = new UAParser(userAgent);

                    const {
                        browser,
                        device,
                        os,
                        cpu,
                        engine
                    } = parser.getResult();

                    const ua = `${browser.name} (${browser.version})`;

                    return (
                        <Tooltip>
                            <TooltipTrigger>
                                <span className="block max-w-[200px] truncate text-xs">{ua}</span>
                            </TooltipTrigger>

                            <TooltipContent>
                                <div className="space-y-1 text-sm leading-relaxed">
                                    <div>
                                        <div className="text-xs uppercase tracking-wide text-zinc-400">{t("session.fields.device.label")}</div>
                                        <div className="font-medium break-words">{device.type || "desctop"}</div>
                                    </div>

                                    <div>
                                        <div className="text-xs uppercase tracking-wide text-zinc-400">{t("session.fields.browser.label")}</div>
                                        <div className="font-medium break-words">{ua}</div>
                                    </div>

                                    <div>
                                        <div className="text-xs uppercase tracking-wide text-zinc-400">{t("session.fields.os.label")}</div>
                                        <div className="font-medium break-words">
                                            {os.name || "-"} {os.version && `(${os.version})`}
                                        </div>
                                    </div>

                                    <div>
                                        <div className="text-xs uppercase tracking-wide text-zinc-400">{t("session.fields.cpu.label")}</div>
                                        <div className="font-medium break-words">{cpu.architecture || "-"}</div>
                                    </div>

                                    <div>
                                        <div className="text-xs uppercase tracking-wide text-zinc-400">{t("session.fields.engine.label")}</div>
                                        <div className="font-medium break-words">
                                            {engine.name || "-"} {engine.version && `(${engine.version})`}
                                        </div>
                                    </div>
                                </div>
                            </TooltipContent>
                        </Tooltip>
                    );
                  }} />

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

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