"use client"
import React from 'react'
import { ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import TableComponent from '@/components/shared/table'
import { Button } from '@/components/ui/button'
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ArrowUpDown, MoreHorizontal } from 'lucide-react'
import Image from 'next/image';
import Link from 'next/link';
import Eye from '@/assets/icons/creatorDashboard/view-eye.svg'
import Bin from '@/assets/icons/creatorDashboard/bin.svg'
import Download from '@/assets/icons/creatorDashboard/download.svg'
import Edit from '@/assets/icons/creatorDashboard/editIcon.svg'

const SubscriptionPlans = () => {

    type SubscriptionPlan = {
        title: string;
        features: number;
        status: "pending" | "processing" | "success" | "failed";
        created: string;
    };

    const subscriptionPlanData: SubscriptionPlan[] = [
        {
            title: "m5gr84i9",
            features: 4,
            status: "success",
            created: "Creator",
        },
        {
            title: "3u1reuv4",
            features: 4,
            status: "success",
            created: "Fan",
        },
        {
            title: "derv1ws0",
            features: 4,
            status: "processing",
            created: "Admin",
        },
    ];

    const subscriptionPlanColumns: ColumnDef<SubscriptionPlan>[] = [
        {
            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: "title",
            header: "Title",
            cell: ({ row }) => (
                <Link href={`/dashboard/support-tickets/123`} className="uppercase underline">{row.getValue("title")}</Link>
            ),
        },
        {
            accessorKey: "features",
            header: () => <div>Features</div>,
            cell: ({ row }) => (
                <div className="lowercase">{row.getValue("features")}</div>
            ),
        },
        {
            accessorKey: "status",
            header: "Status",
            cell: ({ row }) => (
                <div className="capitalize text-xs"><span className="bg-green-100 rounded-full p-2 text-green-800">{row.getValue("status")}</span></div>
            ),
        },
        {
            accessorKey: "created",
            header: () => <div>Created</div>,
            cell: ({ row }) => (
                <div className="lowercase">{row.getValue("created")}</div>
            ),
        },
        {
            id: "actions",
            header: () => <div>ACTIONS</div>,
            enableHiding: false,
            cell: ({ row }) => {
                return (
                    <div className=' flex flex-row gap-3'>
                        <Link href={'#'}>
                            <Image className='size-8 cursor-pointer' src={Eye} alt='' />
                        </Link>
                        <Link href={'#'}>
                            <Image className='size-8 cursor-pointer' src={Edit} alt='' />
                        </Link>
                        <Link href={'#'}>
                            <Image className='size-8 cursor-pointer' src={Bin} alt='' />
                        </Link>
                    </div>
                );
            },
        }
    ];
    return (
        <TableComponent data={subscriptionPlanData} columns={subscriptionPlanColumns} />
    )
}

export default SubscriptionPlans