"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",
        auditName: "Cybersecurity Assessment",
        entity: "Corporate Finance",
        quarter: "Q1 2026",
        type: "Financial",
        risk: "High",
        status: "Pending",
        team: "Team Alpha",
        estHours: "320h",
    },
    {
        id: "2",
        auditName: "Cybersecurity Assessment",
        entity: "Corporate Finance",
        quarter: "Q1 2026",
        type: "Financial",
        risk: "High",
        status: "Active",
        team: "Team Alpha",
        estHours: "320h",
    },
    {
        id: "3",
        auditName: "Cybersecurity Assessment",
        entity: "Corporate Finance",
        quarter: "Q1 2026",
        type: "Financial",
        risk: "Medium",
        status: "Pending",
        team: "Team Alpha",
        estHours: "320h",
    },
    {
        id: "4",
        auditName: "Cybersecurity Assessment",
        entity: "Corporate Finance",
        quarter: "Q1 2026",
        type: "Financial",
        risk: "Low",
        status: "Draft",
        team: "Team Alpha",
        estHours: "320h",
    },
];


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

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

    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: "auditName",
            header: "Audit Name",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "entity",
            header: "Entity",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "quarter",
            header: "Quarter",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "type",
            header: "Type",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "risk",
            header: "Risk",
            cell: (info) => {
                const value = info.getValue() as string;

                const statusClasses: Record<string, { text: string; icon: string }> = {
                    High: { text: "text-red", icon: "bg-red" },
                    Medium: { text: "text-yellow", icon: "bg-yellow" },
                    Low: { text: "text-grey66", 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}`}
                    >
                        {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",
                    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: "team",
            header: "Team",
            cell: (info) => info.getValue(),
        },
        {
            accessorKey: "estHours",
            header: "Est. Hours",
            cell: (info) => info.getValue(),
        },
    ];

    return (
        <>
            <TitleCard
                title={"Audit Plan Area"}
                description={"Strategic planning and resource allocation for 2026"}
            />

            <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>
                            Add Audit
                        </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-calendar 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>
                            Schedule
                        </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">Plan</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-team 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>
                            Allocate
                        </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-graph 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>
                            Capacity
                        </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">Resources</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>

            <div className="mb-5 grid xs:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
                <div className="border border-grey2b rounded-xl lg:rounded-2xl overflow-hidden">
                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 lg:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Total Planned</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>
                    <div className="p-4 text-center">
                        <span className="text-base md:text-2xl 2xl:text-3xl leading-tight font-bold text-light mb-1">24</span>
                        <p className="block text-xs xl:text-sm text-grey99 leading-tight">Audits for 2026</p>
                    </div>
                </div>
                <div className="border border-grey2b rounded-xl lg:rounded-2xl overflow-hidden">
                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 lg:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Estimated Hours</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>
                    <div className="p-4 text-center">
                        <span className="text-base md:text-2xl 2xl:text-3xl leading-tight font-bold text-light mb-1">4,280</span>
                        <p className="block text-xs xl:text-sm text-grey99 leading-tight">Total resource hours</p>
                    </div>
                </div>
                <div className="border border-grey2b rounded-xl lg:rounded-2xl overflow-hidden">
                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 lg:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">High Risk</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>
                    <div className="p-4 text-center">
                        <span className="text-base md:text-2xl 2xl:text-3xl leading-tight font-bold text-red mb-1">8</span>
                        <p className="block text-xs xl:text-sm text-grey99 leading-tight">Priority audits</p>
                    </div>
                </div>
                <div className="border border-grey2b rounded-xl lg:rounded-2xl overflow-hidden">
                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 lg:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Coverage</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>
                    <div className="p-4 text-center">
                        <span className="text-base md:text-2xl 2xl:text-3xl leading-tight font-bold mb-1 text-green">92%</span>
                        <p className="block text-xs xl:text-sm text-grey99 leading-tight">Risk universe covered</p>
                    </div>
                </div>
            </div>

            <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 === "List View" ? "List View" : status}
                        </li>
                    ))}
                </ul>
            </div>


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

            {activeStatus === "Timeline" && (

                <div className="border border-grey2b rounded-xl lg:rounded-2xl overflow-hidden">
                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 md:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">2026 Audit Timeline</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>
                    <div className="p-4 grid overflow-x-auto [grid-template-columns:repeat(4,minmax(160px,1fr))] md:[grid-template-columns:repeat(4,minmax(200px,1fr))] gap-4">
                        <div className="space-y-2">
                            <h3 className="text-sm xl:text-base font-medium leading-tight text-light border-b border-grey2b pb-2">Q1 2026</h3>

                            <div className="p-2.5 rounded bg-secondary border border-grey2b text-xs xl:text-sm cursor-pointer hover:bg-secondary27 duration-300 ease-in-out">
                                <p className="font-medium">Q1 Financial Review</p>
                                <p className="text-grey99">Team Alpha</p>
                            </div>
                            <div className="p-2.5 rounded bg-secondary border border-grey2b text-xs xl:text-sm cursor-pointer hover:bg-secondary27 duration-300 ease-in-out">
                                <p className="font-medium">Financial Review</p>
                                <p className="text-grey99">Team Alpha</p>
                            </div>
                        </div>
                        <div className="space-y-2">
                            <h3 className="text-sm xl:text-base font-medium leading-tight text-light border-b border-grey2b pb-2">Q2 2026</h3>

                            <div className="p-2.5 rounded bg-secondary border border-grey2b text-xs xl:text-sm cursor-pointer hover:bg-secondary27 duration-300 ease-in-out">
                                <p className="font-medium">Vendor Compliance Review</p>
                                <p className="text-grey99">Team Gamma</p>
                            </div>
                            <div className="p-2.5 rounded bg-secondary border border-grey2b text-xs xl:text-sm cursor-pointer hover:bg-secondary27 duration-300 ease-in-out">
                                <p className="font-medium">Vendor Compliance Review</p>
                                <p className="text-grey99">Team Gamma</p>
                            </div>
                            <div className="p-2.5 rounded bg-secondary border border-grey2b text-xs xl:text-sm cursor-pointer hover:bg-secondary27 duration-300 ease-in-out">
                                <p className="font-medium">Vendor Compliance Review</p>
                                <p className="text-grey99">Team Gamma</p>
                            </div>
                        </div>
                        <div className="space-y-2">
                            <h3 className="text-sm xl:text-base font-medium leading-tight text-light border-b border-grey2b pb-2">Q3 2026</h3>

                            <div className="p-2.5 rounded bg-secondary border border-grey2b text-xs xl:text-sm cursor-pointer hover:bg-secondary27 duration-300 ease-in-out">
                                <p className="font-medium">Cybersecurity Assessment</p>
                                <p className="text-grey99">Team Beta</p>
                            </div>
                        </div>

                        <div className="space-y-2">
                            <h3 className="text-sm xl:text-base font-medium leading-tight text-light border-b border-grey2b pb-2">Q4 2026</h3>
                        </div>
                    </div>
                </div>
            )}

            {activeStatus === "Resource View" && (
                <div className="border border-grey2b rounded-xl lg:rounded-2xl overflow-hidden">
                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 md:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Team Resource Allocation</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>
                    <div className="p-4">
                        <div className="space-y-4">
                            <div>
                                <div className="flex justify-between gap-2 items-center mb-2">
                                    <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Team Alpha</h3>
                                    <p className="text-sm xl:text-base leading-tight text-grey99 shrink-0">440h / 1600h (28%)</p>
                                </div>
                                <span className="block w-full bg-grey-f3 h-2 md:h-2.5 xl:h-3 rounded-2xl relative overflow-hidden">
                                    <span className="bg-primary h-full absolute left-0 top-0" style={{ width: '28%' }}></span>
                                </span>
                            </div>
                            <div>
                                <div className="flex justify-between gap-2 items-center mb-2">
                                    <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Team Beta</h3>
                                    <p className="text-sm xl:text-base leading-tight text-grey99 shrink-0">920h / 1600h (57%)</p>
                                </div>
                                <span className="block w-full bg-grey-f3 h-2 md:h-2.5 xl:h-3 rounded-2xl relative overflow-hidden">
                                    <span className="bg-primary h-full absolute left-0 top-0" style={{ width: '57%' }}></span>
                                </span>
                            </div>
                            <div>
                                <div className="flex justify-between gap-2 items-center mb-2">
                                    <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Team Gamma</h3>
                                    <p className="text-sm xl:text-base leading-tight text-grey99 shrink-0">160h / 1600h (10%)</p>
                                </div>
                                <span className="block w-full bg-grey-f3 h-2 md:h-2.5 xl:h-3 rounded-2xl relative overflow-hidden">
                                    <span className="bg-primary h-full absolute left-0 top-0" style={{ width: '10%' }}></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    )
}

export default page