"use client"

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

type Props = {}

export const userData: any[] = [
    {
        id: "1",
        issueRef: "2024-AUD-008",
        issueTitle: "HR Policy Compliance",
        inherentRisk: "HIGH",
        controlEffect: "Moderate",
        residualRisk: "HIGH",
        status: "Complete",
        progress: "0%",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "2",
        issueRef: "2024-AUD-008",
        issueTitle: "Financial Reporting",
        inherentRisk: "MEDIUM",
        controlEffect: "Strong",
        residualRisk: "LOW",
        status: "Active",
        progress: "30%",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "3",
        issueRef: "2024-AUD-008",
        issueTitle: "Financial Reporting",
        inherentRisk: "LOW",
        controlEffect: "Weak",
        residualRisk: "MEDIUM",
        status: "Pending",
        progress: "80%",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "4",
        issueRef: "2024-AUD-008",
        issueTitle: "Financial Reporting",
        inherentRisk: "LOW",
        controlEffect: "Weak",
        residualRisk: "MEDIUM",
        status: "Draft",
        progress: "100%",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
];


function page({ }: Props) {
    const [page, setPage] = useState(1);
    const [limit, setLimit] = useState(10);
    const [filters, setFilters] = useState<any | null>(null);
    const STATUS_TABS = ["All", "Active", "Draft", "Completed"] as const;
    type StatusTab = typeof STATUS_TABS[number];

    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: "issueRef",
            header: "Issue Ref",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "issueTitle",
            header: "Issue Title",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "inherentRisk",
            header: "Inherent Risk",
            cell: (info) => {
                const value = info.getValue() as string;
                const statusClasses: Record<string, string> = {
                    HIGH: "text-red bg-red-50 border-red",
                    MEDIUM: "text-yellow bg-yellow-50 border-yellow",
                    LOW: "text-green bg-green-50 border-green-300",
                };


                return (
                    <span
                        className={`inline-block px-2 py-0.5 text-xs 2xl:text-sm font-medium rounded border
                            ${statusClasses[value] ?? "text-gray-600 bg-gray-50 border-gray-300"}
                        `}
                    >
                        {value}
                    </span>
                );
            },
        },
        {
            accessorKey: "controlEffect",
            header: "Control Effect.",
            cell: (info) => {
                const value = info.getValue() as string;
                const statusClasses: Record<string, string> = {
                    Weak: "text-red",
                    Moderate: "text-yellow",
                    Strong: "text-green",
                };
                return (
                    <span
                        className={`inline-flex items-center gap-1.5 text-sm 2xl:text-base font-medium
                        ${statusClasses[value] ?? "text-gray-600"}
                    `}
                    >
                        {/* <i className="icon icon-alert w-4 h-4 bg-red"></i> */}
                        {value}
                    </span>
                );
            },
        },
        {
            accessorKey: "residualRisk",
            header: "Residual Risk",
            cell: (info) => {
                const value = info.getValue() as string;
                const statusClasses: Record<string, string> = {
                    HIGH: "text-red bg-red-50 border-red",
                    MEDIUM: "text-yellow bg-yellow-50 border-yellow",
                    LOW: "text-green bg-green-50 border-green-300",
                };
                return (
                    <span
                        className={`inline-block px-2 py-0.5 text-xs 2xl:text-sm font-medium rounded border
                        ${statusClasses[value] ?? "text-gray-600 bg-gray-50 border-gray-300"}
                    `}
                    >
                        {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",
                    Active: "text-white bg-primary border-primary",
                    Complete: "text-white bg-green border-green",
                };
                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: "progress",
            header: "Progress",
            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",
                    Active: "text-white bg-primary border-primary",
                    Complete: "text-white bg-green border-green",
                };
                return (
                    <span className="flex items-center gap-2">
                        <span className="w-16 bg-grey-66 h-1.5 rounded-2xl relative overflow-hidden">
                            <span className="bg-primary h-full absolute left-0 top-0" style={{ width: `${value}` }}></span>
                        </span>
                        <span className=" min-w-9 text-end text-xs xl:text-sm leading-tight text-grey99 shrink-0">{value}</span>
                    </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={"Response Tracking"}
                description={"Track management responses to audit findings"}
            />

            <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-share 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>
                            Send Reminder
                        </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-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>
                            Mark Complete
                        </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">Actions</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-clock 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>
                            Pending
                        </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">View</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>
                    </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">Export</span>
                </div>
            </div>

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

export default page