"use client"

import TitleCard from "@/components/TitleCard/TitleCard";
import Table, { CustomColumnDef } from "@/components/ui/Table"
import { useAuthStore } from "@/zustand/auth/useAuthStore";
import { useState } from "react";

type Props = {}

export const userData: any[] = [
    {
        id: "1",
        reference: "2024-AUD-008",
        issueTitle: "Inadequate segregation of duties in accounts payable",
        project: "2024-AUD-008",
        controlEffect: "Moderate",
        status: "Closed",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "2",
        reference: "2024-AUD-008",
        issueTitle: "Inadequate segregation of duties in accounts payable",
        project: "2024-AUD-008",
        controlEffect: "Strong",
        status: "Overdue",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "3",
        reference: "2024-AUD-008",
        issueTitle: "Inadequate segregation of duties in accounts payable",
        project: "2024-AUD-008",
        controlEffect: "Weak",
        status: "Pending",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "4",
        reference: "2024-AUD-008",
        issueTitle: "Inadequate segregation of duties in accounts payable",
        project: "2024-AUD-008",
        controlEffect: "Weak",
        status: "Draft",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "5",
        reference: "2024-AUD-008",
        issueTitle: "Inadequate segregation of duties in accounts payable",
        project: "2024-AUD-008",
        controlEffect: "Weak",
        status: "Open",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
];


function page({ }: Props) {
    const { language } = useAuthStore();
    const [page, setPage] = useState(1);
    const [limit, setLimit] = useState(10);
    const [filters, setFilters] = useState<any | null>(null);
    const STATUS_TABS = ["Open", "Pending Response", "Overdue", "Closed", "All Issues"] as const;
    type StatusTab = typeof STATUS_TABS[number];

    const [activeStatus, setActiveStatus] = useState<StatusTab>("Open");

    const userColumns: CustomColumnDef<any>[] = [
        {
            accessorKey: "checkbox",
            isSorting: false, // ❌ disable sorting for this column
            header: () => (
                <input type="checkbox" className="cursor-pointer w-5 h-5 accent-primary" />
            ),

            cell: ({ row }) => (
                <>
                    <input type="checkbox" className="cursor-pointer w-5 h-5 accent-primary" />

                </>
            ),
        },
        {
            accessorKey: "reference",
            header: "Reference",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "issueTitle",
            header: "Issue Title",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "project",
            header: "Project",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "controlEffect",
            header: "Control Effect.",
            cell: (info) => {
                const value = info.getValue() as string;

                const statusClasses: Record<string, { text: string; icon: string }> = {
                    Weak: { text: "text-red", icon: "bg-red" },
                    Moderate: { text: "text-yellow", icon: "bg-yellow" },
                    Strong: { text: "text-green", icon: "bg-green" },
                };

                const styles = statusClasses[value] ?? {
                    text: "text-gray-600",
                    icon: "bg-gray-400",
                };

                return (
                    <span
                        className={`inline-flex items-center gap-1.5 text-sm 2xl:text-base font-medium ${styles.text}`}
                    >
                        <i className={`icon icon-caution w-4 h-4 ${styles.icon}`}></i>
                        {value}
                    </span>
                );
            },
        },
        {
            accessorKey: "status",
            header: "Status",
            cell: (info) => {
                const value = info.getValue() as string;
                const statusClasses: Record<string, string> = {
                    Draft: "text-yellow bg-yellow-50 border-yellow",
                    Pending: "text-white bg-blue border-blue",
                    Open: "text-white bg-blue border-blue",
                    InProgress: "text-white bg-primary border-primary",
                    Closed: "text-white bg-green border-green",
                    Overdue: "text-white bg-red border-red",
                };
                return (
                    <span
                        className={`inline-block px-2 py-0.5 text-xs 2xl:text-sm font-medium rounded-2xl border
                        ${statusClasses[value] ?? "text-gray-600 bg-gray-50 border-gray-300"}
                    `}
                    >
                        {value}
                    </span>
                );
            },
        },
        {
            accessorKey: "lastAssessed",
            header: "Last Assessed",
            isSorting: false, // ❌ disable sorting for this column
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "nextReview",
            header: "Next Review",
            isSorting: false, // ❌ disable sorting for this column
            cell: (info) => info.getValue(),
        },
    ];

    return (
        <>
            <TitleCard
                title={"Issue Tracking"}
                description={"Track and manage audit findings and recommendations"}
            />

            <div className="mb-5 p-3 border border-grey2b rounded-md bg-theme-bg flex items-center flex-wrap gap-3">
                <div>
                    <div className="flex items-stretch gap-1.5">
                        <button type="button" className="text-white text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-primary rounded-md cursor-pointer duration-300 ease-in-out hover:bg-primary-c5">
                            <i className="icon icon-add w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-white duration-300 ease-in-out group group-hover:bg-white"></i>
                            New Issue
                        </button>
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-share w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Release
                        </button>
                    </div>
                    <span className="text-xs font-normal text-light leading-tight block text-center opacity-50 border-t border-light/30 pt-1 mt-1.5">Issue</span>
                </div>
                <div>
                    <div className="flex items-stretch gap-1.5">
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-check-rounded w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Close
                        </button>
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-reject w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Reject
                        </button>
                    </div>
                    <span className="text-xs font-normal text-light leading-tight block text-center opacity-50 border-t border-light/30 pt-1 mt-1.5">Status</span>
                </div>
                <div>
                    <div className="flex items-stretch gap-1.5">
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-download w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Export
                        </button>
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-refresh w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Refresh
                        </button>
                    </div>
                    <span className="text-xs font-normal text-light leading-tight block text-center opacity-50 border-t border-light/30 pt-1 mt-1.5">Data</span>
                </div>
            </div>

            <ul className="mb-5 p-3 bg-secondary border border-grey2b rounded-md flex items-center flex-wrap gap-y-2 gap-x-6">
                <li className={`relative text-sm xl:text-base leading-tight before:content-[''] before:absolute before:w-1.5 before:h-1.5 xl:before:w-2 xl:before:h-2 before:rounded-full before:top-1.5 before:bg-blue ${language === "en" ? "pl-3 xl:pl-4 before:left-0" : "pr-3 xl:pr-4 before:right-0"}`}>
                    <span className="text-light opacity-70">Open Issues: </span>
                    <span className="text-light font-medium">3</span>
                </li>
                <li className={`relative text-sm xl:text-base leading-tight before:content-[''] before:absolute before:w-1.5 before:h-1.5 xl:before:w-2 xl:before:h-2 before:rounded-full before:top-1.5 before:bg-red ${language === "en" ? "pl-3 xl:pl-4 before:left-0" : "pr-3 xl:pr-4 before:right-0"}`}>
                    <span className="text-light opacity-70">Overdue: </span>
                    <span className="text-red font-medium">1</span>
                </li>
                <li className={`relative text-sm xl:text-base leading-tight before:content-[''] before:absolute before:w-1.5 before:h-1.5 xl:before:w-2 xl:before:h-2 before:rounded-full  before:top-1.5 before:bg-green ${language === "en" ? "pl-3 xl:pl-4 before:left-0" : "pr-3 xl:pr-4 before:right-0"}`}>
                    <span className="text-light opacity-70">Closed This Month: </span>
                    <span className="text-light font-medium">8</span>
                </li>
            </ul>

            <div className="mb-5 overflow-x-auto pb-1">
                <ul className="inline-flex items-center gap-1 rounded-sm bg-secondary p-1.5">
                    {STATUS_TABS.map((status) => (
                        <li
                            key={status}
                            onClick={() => setActiveStatus(status)}
                            className={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm xl:text-base cursor-pointer duration-300 ease-in-out
                        ${activeStatus === status
                                    ? "bg-primary text-white"
                                    : "hover:bg-secondary27"
                                }`}
                        >
                            {status === "Open" ? "Open" : status}
                        </li>
                    ))}
                </ul>
            </div>


            {activeStatus === "Open" && (
                <Table
                    searchPlaceHolder="Search issues..."
                    columns={userColumns as any}
                    data={(userData || []).filter((row) => row.status === "Open")}
                    currentPage={page}
                    onPageChange={(page) => setPage(page)}
                    rowsPerPage={limit}
                    onRowsPerPageChange={(rows) => setLimit(rows)}
                    getfilter={setFilters}
                />
            )}

            {activeStatus === "Pending Response" && (
                <Table
                    searchPlaceHolder="Search issues..."
                    columns={userColumns as any}
                    data={(userData || []).filter((row) => row.status === "Pending")}
                    currentPage={page}
                    onPageChange={(page) => setPage(page)}
                    rowsPerPage={limit}
                    onRowsPerPageChange={(rows) => setLimit(rows)}
                    getfilter={setFilters}
                />
            )}

            {activeStatus === "Overdue" && (
                <Table
                    searchPlaceHolder="Search issues..."
                    columns={userColumns as any}
                    data={(userData || []).filter((row) => row.status === "Overdue")}
                    currentPage={page}
                    onPageChange={(page) => setPage(page)}
                    rowsPerPage={limit}
                    onRowsPerPageChange={(rows) => setLimit(rows)}
                    getfilter={setFilters}
                />
            )}

            {activeStatus === "Closed" && (
                <Table
                    searchPlaceHolder="Search issues..."
                    columns={userColumns as any}
                    data={(userData || []).filter((row) => row.status === "Closed")}
                    currentPage={page}
                    onPageChange={(page) => setPage(page)}
                    rowsPerPage={limit}
                    onRowsPerPageChange={(rows) => setLimit(rows)}
                    getfilter={setFilters}
                />
            )}

            {activeStatus === "All Issues" && (
                <Table
                    searchPlaceHolder="Search issues..."
                    columns={userColumns as any}
                    data={userData || []}
                    currentPage={page}
                    onPageChange={(page) => setPage(page)}
                    rowsPerPage={limit}
                    onRowsPerPageChange={(rows) => setLimit(rows)}
                    getfilter={setFilters}
                />
            )}
        </>
    )
}

export default page