"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 Link from 'next/link';
import Image from 'next/image';
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 Subscriptions = () => {

    type Subscription = {
        id: string;
        category: string;
        email: string;
        status: "pending" | "processing" | "success" | "failed";
        purchased: string;
    };

    const subscriptionData: Subscription[] = [
        {
            id: "m5gr84i9",
            category: "Refund",
            status: "success",
            email: "ken99@yahoo.com",
            purchased: "Creator",
        },
        {
            id: "3u1reuv4",
            category: "Refund",
            status: "success",
            email: "Abe45@gmail.com",
            purchased: "Fan",
        },
        {
            id: "derv1ws0",
            category: "Refund",
            status: "processing",
            email: "Monserrat44@gmail.com",
            purchased: "Admin",
        },
        {
            id: "5kma53ae",
            category: "Refund",
            status: "success",
            email: "Silas22@gmail.com",
            purchased: "Creator",
        },
        {
            id: "bhqecj4p",
            category: "Refund",
            status: "failed",
            email: "carmella@hotmail.com",
            purchased: "Creator",
        },
        {
            id: "m5gr84i9",
            category: "Refund",
            status: "success",
            email: "ken99@yahoo.com",
            purchased: "Creator",
        },
        {
            id: "3u1reuv4",
            category: "Refund",
            status: "success",
            email: "Abe45@gmail.com",
            purchased: "Creator",
        },
        {
            id: "derv1ws0",
            category: "Refund",
            status: "processing",
            email: "Monserrat44@gmail.com",
            purchased: "Creator",
        },
        {
            id: "5kma53ae",
            category: "Refund",
            status: "success",
            email: "Silas22@gmail.com",
            purchased: "Creator",
        },
        {
            id: "bhqecj4p",
            category: "Refund",
            status: "failed",
            email: "carmella@hotmail.com",
            purchased: "Creator",
        },

        {
            id: "m5gr84i9",
            category: "Refund",
            status: "success",
            email: "ken99@yahoo.com",
            purchased: "Creator",
        },
        {
            id: "3u1reuv4",
            category: "Refund",
            status: "success",
            email: "Abe45@gmail.com",
            purchased: "Creator",
        },
        {
            id: "derv1ws0",
            category: "Refund",
            status: "processing",
            email: "Monserrat44@gmail.com",
            purchased: "Creator",
        },
        {
            id: "5kma53ae",
            category: "Refund",
            status: "success",
            email: "Silas22@gmail.com",
            purchased: "Creator",
        },
        {
            id: "bhqecj4p",
            category: "Refund",
            status: "failed",
            email: "carmella@hotmail.com",
            purchased: "Creator",
        },
        {
            id: "m5gr84i9",
            category: "Refund",
            status: "success",
            email: "ken99@yahoo.com",
            purchased: "Creator",
        },
        {
            id: "3u1reuv4",
            category: "Refund",
            status: "success",
            email: "Abe45@gmail.com",
            purchased: "Creator",
        },
        {
            id: "bhqecj4p",
            category: "Refund",
            status: "failed",
            email: "carmella@hotmail.com",
            purchased: "Creator",
        },
    ];

    const subscriptionColumns: ColumnDef<Subscription>[] = [
        {
            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: "id",
            header: "Ticket ID",
            cell: ({ row }) => (
                <Link href={`/dashboard/support-tickets/123`} className="uppercase underline">{row.getValue("id")}</Link>
            ),
        },
        {
            accessorKey: "email",
            header: ({ column }) => {
                return (
                    <Button
                        variant="ghost"
                        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                    >
                        Email
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                    </Button>
                );
            },
            cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
        },
        {
            accessorKey: "category",
            header: () => <div>Category</div>,
            cell: ({ row }) => (
                <div className="lowercase">{row.getValue("category")}</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: "purchased",
            header: () => <div>Purchased</div>,
            cell: ({ row }) => (
                <div className="lowercase">{row.getValue("purchased")}</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={Download} alt='' />
                        </Link>
                        <Link href={'#'}>
                            <Image className='size-8 cursor-pointer' src={Bin} alt='' />
                        </Link>
                    </div>
                );
            },
        }
    ];
    return (
        <TableComponent data={subscriptionData} columns={subscriptionColumns} />
    )
}

export default Subscriptions