/* eslint-disable react-hooks/rules-of-hooks */
"use client";
import React, { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Checkbox } from "@radix-ui/react-checkbox";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { Eye, Pencil, PlusCircle, SearchIcon, Table } from 'lucide-react'

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

import { DotsHorizontalIcon } from "@radix-ui/react-icons";
import DataTable from "@/components/Table";
import Modal from "@/components/modal";
import Loading from "@/app/(dashoard)/components/loading";
import { ErrorMessage } from "@/components/ui/error-message";

import Image from "next/image"
import { ViewStandingDialog } from "./component/view-standing-popover";
import { UpdateStandingFormDialog } from "./component/update-standing-form";
import { StandingFormDialog } from "./component/standing-form-popover";
import { getStandings } from "@/lib/features/admin/standing/service";
import { StandingProps } from "@/lib/features/admin/standing/type";

const StandingPage = () => {


  // merge branches
  const [selectedId, setSelectedId] = useState<number | null>(null);


  /////////////////view user modal
  const [isViewModalOpen, setViewModalOpen] = useState(false);

  const openViewModal = (id: number) => {
    setSelectedId(id);
    setViewModalOpen(true);
  };

  const closeViewModal = () => {
    setViewModalOpen(false);
    setSelectedId(null);
  };



  /////////////////update user modal
  const [isUpdateModalOpen, setUpdateModalOpen] = useState(false);

  const openUpdateModal = (id: number) => {
    setSelectedId(id);
    setUpdateModalOpen(true);
  };

  const closeUpdateModal = () => {
    setUpdateModalOpen(false);
    setSelectedId(null);
  };

  /////////////////create course modal
  const [isAddModalOpen, setAddModalOpen] = useState(false);

  const openAddModal = () => {
    setAddModalOpen(true);
  };

  const closeAddModal = () => {
    setAddModalOpen(false);
  };



  // standings
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["standing-list"],
    queryFn: () => getStandings(),
  });


  // handle refresh
  const handleRefresh = () => {
    refetch();
  };

  if (isLoading) {
    return <Loading />;
  }


  //error
  if (error) {
    return <ErrorMessage error={error} fallback="Dashboard error" />
  }

  const rowData: StandingProps[] = data?.data || [];

  //columns
  const columns: ColumnDef<StandingProps>[] = [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={
            table.getIsAllPageRowsSelected() ||
            (table.getIsSomePageRowsSelected() && "indeterminate")
          }
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="Select all"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="Select row"
        />
      ),
      enableSorting: false,
      enableHiding: false,
    },

    {
      accessorKey: "club",
      header: () => <div className="text-left table-size">Club</div>,
      cell: ({ row }) => {
        return (
          <div className="text-left font-normal table-size flex gap-2" onClick={() => openViewModal(row?.original?.id)}>
            <Image
              src={`${row?.original?.image}`}
              alt={row?.original?.club}
              width={40}
              height={40}
              className="rounded-2xl shadow-2xl"
            />
            <span className="mt-4">{row.getValue("club")}</span>

          </div>
        );
      },
    },


    {
      accessorKey: "season",
      header: () => <div className="text-left table-size">Season</div>,
      cell: ({ row }) => {
        return (
          <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
            {row.getValue("season")}
          </div>
        );
      },
    },


    {
      accessorKey: "gp",
      header: () => <div className="text-left table-size">GP</div>,
      cell: ({ row }) => {
        return (
          <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
            {row.getValue("gp")}
          </div>
        );
      },
    },


    {
      accessorKey: "gd",
      header: () => <div className="text-left table-size">GD</div>,
      cell: ({ row }) => {
        return (
          <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
            {row.getValue("gd")}
          </div>
        );
      },
    },


    {
      accessorKey: "pts",
      header: () => <div className="text-left table-size">PTS</div>,
      cell: ({ row }) => {
        return (
          <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
            {row.getValue("pts")}
          </div>
        );
      },
    },


    {
      accessorKey: "date",
      header: () => <div className="text-left table-size">Date</div>,
      cell: ({ row }) => {
        return (
          <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
            {row.getValue("date")}
          </div>
        );
      },
    },


    {
      id: "actions",
      enableHiding: false,
      header: "Actions",
      cell: ({ row }) => {

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="h-8 w-8 p-0">
                <span className="sr-only">Open menu</span>
                <DotsHorizontalIcon className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuSeparator />

              <DropdownMenuItem onClick={() => openViewModal(row?.original?.id)}>
                <Eye />
                View
              </DropdownMenuItem>


              <>
                <DropdownMenuItem onClick={() => openUpdateModal(row?.original?.id)}>
                  <Pencil className="text-blue-500" />
                  Update
                </DropdownMenuItem>
              </>



            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
    },
  ];

  return (
    <>

      {/**************** Add standing modal */}
      <Modal isOpen={isAddModalOpen} onClose={closeAddModal} >
        <StandingFormDialog onCloseModal={closeAddModal} refreshNow={handleRefresh} />
      </Modal>

      {/**************** standing details modal ******/}
      <Modal isOpen={isViewModalOpen} onClose={closeViewModal} size="md">
        <ViewStandingDialog dataId={Number(selectedId)} />
      </Modal>

      {/**************** Update standing modal ******/}
      <Modal isOpen={isUpdateModalOpen} onClose={closeUpdateModal} size="md" >
        <UpdateStandingFormDialog dataId={Number(selectedId)} onCloseModal={closeUpdateModal} refreshNow={handleRefresh} />
      </Modal>



      <div className="flex flex-row">
        <div className="flex items-center justify-between">
          <div className="space-y-1">
            <h4 className="text-2xl font-semibold tracking-tight flex gap-2">
              <Table />
              Standing
            </h4>
          </div>
        </div>

        <div className="ml-auto mr-4 flex items-center space-x-3">
          <Input type="" placeholder="Search" />
          <Button className="px-4 py-2 button">
            <SearchIcon />
          </Button>
        </div>

        <div className="ml-auto mr-4">

          <Button className="button" type="button" onClick={() => openAddModal()}>
            <PlusCircle className="mr-0 h-4 w-4" />
          </Button>

        </div>
      </div>

      <Separator className="my-0" />
      <div>
        <DataTable size={16} columns={columns} data={rowData} />
      </div>
    </>
  );
};

export default StandingPage;