"use client";

import { ColumnDef } from "@tanstack/react-table";
import { MoreHorizontal } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { generateShareToken } from "@/app/(sharing)/[token]/token";
import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
import { chuni_score_best } from "@/prisma/schemas/artemis/generated/artemis";
import { getDifficultyText, getGrade } from "@/lib/helpers";
import { Skeleton } from "../ui/skeleton";
import ActionsCell from "./moreAction";
type chunithm = chuni_score_playlog &
  chuni_static_music & { playCount: number };

export const columns: ColumnDef<chunithm>[] = [
  {
    accessorKey: "title",
    header: "Title",

    cell: ({ row }) => {
      const jacketPath = row.original.jacketPath?.replace(".dds", ".png");

      return (
        <div className="flex w-[300px] items-center truncate font-medium">
          {!jacketPath ? (
            <Skeleton className="mr-2 inline-block h-8 w-8" />
          ) : (
            <img
              src={`/jacketArts/${jacketPath}`}
              alt="Jacket"
              className="mr-2 inline-block h-[70px] w-[70px]"
            />
          )}
          <span className="truncate">{row.original.title}</span>
        </div>
      );
    },
  },

  {
    accessorKey: "score",
    header: ({ column }) => {
      return (
        <Button variant="ghost">
          Score
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    },
    cell: ({ row }) => {
      // for the love of all that is holy redo this later or be forced to drink from the calice
      const skillId = row.original.skillId;
      const isClear = row.original.isClear;
      let isSuccessText = "";
      if (isClear === 1 && skillId === 100010) {
        isSuccessText = "Limit Break";
      } else if (isClear === 1 && skillId === 100011) {
        isSuccessText = "Limit Break++";
      } else if (isClear === 1 && skillId === 100012) {
        isSuccessText = "Limit Break+++";
      } else if (isClear === 1 && skillId === 100013) {
        isSuccessText = "Campaign";
      } else if (isClear === 1 && skillId === 101000) {
        isSuccessText = "Guard 【SUN】";
      } else if (isClear === 1 && skillId === 101001) {
        isSuccessText = "Boost 【SUN】";
      } else if (isClear === 1 && skillId === 101002) {
        isSuccessText = "Combo 【SUN】";
      } else if (isClear === 1 && skillId === 101003) {
        isSuccessText = "A-Guilty 【SUN】";
      } else if (isClear === 1 && skillId === 101004) {
        isSuccessText = "Judge 【SUN】";
      } else if (isClear === 1 && skillId === 101005) {
        isSuccessText = "Judge++ 【SUN】";
      } else if (isClear === 1 && skillId === 101006) {
        isSuccessText = "Emblem 【SUN】";
      } else if (isClear === 1 && skillId === 101007) {
        isSuccessText = "Emblem++ 【SUN】";
      } else if (isClear === 1 && skillId === 101008) {
        isSuccessText = "Absolute++【SUN】";
      } else if (isClear === 1 && skillId === 102000) {
        isSuccessText = "Guard【LMN】";
      } else if (isClear === 1 && skillId === 102001) {
        isSuccessText = "Boost 【LMN】";
      } else if (isClear === 1 && skillId === 102002) {
        isSuccessText = "Combo【LMN】";
      } else if (isClear === 1 && skillId === 102003) {
        isSuccessText = "A-Guilty【LMN】";
      } else if (isClear === 1 && skillId === 102004) {
        isSuccessText = "Judge 【LMN】";
      } else if (isClear === 1 && skillId === 102005) {
        isSuccessText = "Judge++【LMN】";
      } else if (isClear === 1 && skillId === 102006) {
        isSuccessText = "Emblem【LMN】";
      } else if (isClear === 1 && skillId === 102007) {
        isSuccessText = "Emblem++【LMN】";
      } else if (isClear === 1 && skillId === 102008) {
        isSuccessText = "Absolute++ 【LMN】";
      } else if (isClear === 1 && skillId === 102009) {
        isSuccessText = "Catastropy【LMN】";
      } else if (isClear === 1 && skillId === 800003) {
        isSuccessText = "Clear";
      } else if (isClear === 0) {
        isSuccessText = "Failed";
      } else if (isClear === 1) {
        isSuccessText = "Clear";
      } else {
        isSuccessText = isClear?.toString() ?? "";
      }

      return (
        <div>
          {row.original.score?.toLocaleString()}
          <div className="mt-2 w-40 rounded-sm bg-primary pl-2 text-primary-foreground">
            {isSuccessText}
          </div>
          <div
            className={`mt-2 w-40 rounded-sm pl-2 ${
              row.original.isNewRecord
                ? "bg-primary text-primary-foreground"
                : "invisible"
            }`}
          >
            <span>New!!</span>
          </div>
        </div>
      );
    },
  },

  {
    accessorKey: "grade",
    header: "Grade",
    cell: ({ row }) => (
      <div className="font-medium"> {getGrade(row.original.score ?? 0)}</div>
    ),
  },
  {
    accessorKey: "userPlayDate",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Date
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    },
  },
  {
    accessorKey: "difficulty",
    header: "Difficulty",
    cell: ({ row }) => (
      <div className="font-medium">
        {row.original.level}
        <br />
        {getDifficultyText(row.original.chartId)}
      </div>
    ),
  },
  {
    accessorKey: "FC / AJ",
    header: "FC / AJ",
    cell: ({ row }) => (
      <div className="font-medium">
        {!row.original.isAllJustice && row.original.isFullCombo && (
          <span>Full Combo</span>
        )}
        {row.original.isAllJustice && <span>All Justice</span>}
      </div>
    ),
  },

  {
    accessorKey: "Attempts",
    header: "Attempts",

    cell: ({ row }) => (
      <div className="font-medium">{row.original.playCount}</div>
    ),
  },
  // for fixing react-hooks/rules-of-hooks
  {
    id: "actions",
    header: () => <div className="pl-2 text-left">More</div>,
    cell: ({ row }) => <ActionsCell row={row} />,
  },
];