"use client";

import { cva } from "class-variance-authority";
import { useState, ChangeEvent } from "react";
import { Eye, EyeOff, Trash2 } from "lucide-react";

import { AnimatedChevronIcon } from "@/components/ui/animated-chevron-icon";
import { Input } from "@/components/utility/input";
import { BaseSession } from "@/types/Session";
import { UserFile } from "@/types/UserFile";
import { cn } from "@/lib/utils";

type ConfigContentProps = {
    session: BaseSession<true>;
    files: UserFile[];
};

const tableHeadVariants = cva("cursor-pointer px-6 py-3 text-left text-sm font-semibold tracking-wider text-dark-3");
const tableCellVariants = cva("flex items-center align-middle gap-2");
const tableRowVariants = cva("px-6 py-4 whitespace-nowrap");

export function LogsContent({ session, files }: ConfigContentProps) {
    const [checkedItems, setCheckedItems] = useState<number[]>([]);
    const [isHeaderChecked, setIsHeaderChecked] = useState(false);

    const handleHeaderCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
        const isChecked = event.target.checked;

        setIsHeaderChecked(isChecked);

        if (isChecked) {
            setCheckedItems(files.map((file) => file.id));
        } else {
            setCheckedItems([]);
        }
    };

    const handleCheckboxChange = (fileId: number) => {
        setCheckedItems((prevCheckedItems) => {
            if (prevCheckedItems.includes(fileId)) {
                return prevCheckedItems.filter((id) => id !== fileId);
            } else {
                return [...prevCheckedItems, fileId];
            }
        });
    };

    if (!files.length) {
        return (
            <div className={cn("flex flex-1 items-center justify-center")}>
                <h4 className={cn("text-lg font-medium text-dark-3")}>You don't have any images or videos uploaded.</h4>
            </div>
        );
    }

    return (
        <div className={cn("flex flex-col space-y-2")}>
            <Input
                placeholder="Search for uploads..."
                className={cn(
                    "hover:border-brand focus-visible:border-brand focus-visible:ring-brand rounded-lg border border-slate-4 bg-dark-9 transition duration-200 ease-in-out placeholder:text-slate-11 focus-visible:ring-2"
                )}
            />

            <div className={cn("no-scrollbar overflow-x-auto rounded-lg border border-slate-4 bg-dark-9")}>
                <table className={cn("min-w-full divide-y divide-slate-4")}>
                    <thead className={cn("bg-dark-8")}>
                        <tr>
                            <th scope="col" className={cn(tableHeadVariants())}>
                                <input
                                    type="checkbox"
                                    className={cn("accent-brand h-3.5 w-3.5 align-middle")}
                                    checked={isHeaderChecked}
                                    onChange={handleHeaderCheckboxChange}
                                />
                            </th>
                            <th scope="col" className={cn(tableHeadVariants())}>
                                <div className={cn(tableCellVariants())}>
                                    Uploaded At
                                    <AnimatedChevronIcon isOpen={false} />
                                </div>
                            </th>
                            <th scope="col" className={cn(tableHeadVariants())}>
                                <div className={cn(tableCellVariants())}>
                                    Name
                                    <AnimatedChevronIcon isOpen={false} />
                                </div>
                            </th>
                            <th scope="col" className={cn(tableHeadVariants())}>
                                <div className={cn(tableCellVariants())}>
                                    Size
                                    <AnimatedChevronIcon isOpen={false} />
                                </div>
                            </th>
                            <th scope="col" className={cn(tableHeadVariants())}>
                                <div className={cn(tableCellVariants())}>
                                    Format
                                    <AnimatedChevronIcon isOpen={false} />
                                </div>
                            </th>
                            <th scope="col" className={cn(tableHeadVariants())}>
                                <div className={cn(tableCellVariants())}>Actions</div>
                            </th>
                        </tr>
                    </thead>

                    <tbody className={cn("bg-white divide-y divide-slate-4 text-sm text-dark-1")}>
                        {files.map((file) => (
                            <tr key={file.id} className={cn("transition-colors hover:bg-dark-8")}>
                                <td className={cn(tableRowVariants())}>
                                    <input
                                        type="checkbox"
                                        className={cn("accent-brand h-3.5 w-3.5 align-middle")}
                                        checked={checkedItems.includes(file.id)}
                                        onChange={() => handleCheckboxChange(file.id)}
                                    />
                                </td>
                                <td className={cn(tableRowVariants())}>{file.displayUploadedAt}</td>
                                <td className={cn(tableRowVariants())}>{file.name}</td>
                                <td className={cn(tableRowVariants())}>{file.size}</td>
                                <td className={cn(tableRowVariants(), "uppercase")}>{file.format}</td>
                                <td className={cn(tableRowVariants(), "flex items-center gap-3")}>
                                    {Math.random() > 0.5 ? (
                                        <Eye size={20} className="text-brand cursor-pointer transition-transform duration-200 hover:scale-110" />
                                    ) : (
                                        <EyeOff size={20} className="text-warning cursor-pointer transition-transform duration-200 hover:scale-110" />
                                    )}
                                    <Trash2 size={20} className="text-error cursor-pointer transition-transform duration-200 hover:scale-110" />
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}