"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",
        reportTitle: "Q3 Financial Controls Audit Report",
        project: "2024-AUD-010",
        type: "Final",
        status: "Complete",
        author: "David Kim",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "2",
        reportTitle: "IT Security Assessment - Draft",
        project: "2024-AUD-010",
        type: "Final",
        status: "Active",
        author: "David Kim",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "3",
        reportTitle: "HR Compliance Review Report",
        project: "2024-AUD-010",
        type: "Draft",
        status: "Pending",
        author: "David Kim",
        lastAssessed: "2025-01-10",
        nextReview: "2025-01-10",
    },
    {
        id: "4",
        reportTitle: "Financial Controls Q4 - Draft",
        project: "2024-AUD-010",
        type: "Draft",
        status: "Draft",
        author: "David Kim",
        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 [activeStatus, setActiveStatus] = useState<StatusTab>("All");

    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: "reportTitle",
            header: "Report Title",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "project",
            header: "Project",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "type",
            header: "Type",
            cell: (info) => info.getValue(),
        },
        {
            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: "author",
            header: "Author",
            cell: (info) => info.getValue(),
        },
        {
            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={"Audit Reports"}
                description={"Generate and manage audit reports"}
            />

            <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>
                            Create
                        </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-report 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>
                            Template
                        </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">Report</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-eye 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>
                            Preview
                        </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>
                            Distribute
                        </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-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 reports..."
                columns={userColumns as any}
                data={userData || []}
                currentPage={page}
                onPageChange={(page) => setPage(page)}
                rowsPerPage={limit}
                onRowsPerPageChange={(rows) => setLimit(rows)}
                getfilter={setFilters}
            />
        </>
    )
}

export default page