import React, { useState, useEffect } from 'react';
import { getItemById } from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/UniversalCrudHelpers';
import defaultSVG from '../../assets/SharedSVG/AI.svg';
import { useAuthUser } from 'react-auth-kit';
import { FaClock , FaTrash } from 'react-icons/fa'; 
import ViewLibraryItem from '../../Library/ViewLibraryItem';  // Make sure you have this component or adapt accordingly
import useIsOwner from '../../helpers/useIsOwner';
import {friendlyTime} from "../../helpers/friendlyTime"
import {AtomSpinner} from "react-epic-spinners"
import { deleteItem } from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/UniversalCrudHelpers';
import ToggleStatus from '../../helpers/LMS-WildCard-Helpers/UniversalCrud/ToggleStatus';
const LibraryItemCard = ({ model, setMode, svg = '' }) => {
    const [details, setDetails] = useState(null);
    const auth = useAuthUser();
    const [isLoading, setIsLoading] = useState(false);
    const [isPublished, setIsPublished] = useState(details?.public);
    const isOwner = useIsOwner(details?.owner);

    const handleToggleChange = (newStatus) => {
        setIsPublished(newStatus);
    };

    const handleDeleteClick = async (e) => {
        e.stopPropagation();
        const isConfirmed = window.confirm('Are you sure you want to delete this item?');
        if (isConfirmed) {
            handleDelete(e);
        }
    };

    const handleDelete = async (e) => {
        e.stopPropagation();
        setIsLoading(true);
        try {
            await deleteItem('LibraryItem', model._id, 'LeumasAPI', auth().token);
        } catch (error) {
            console.error("Failed to delete the library item:", error);
        } finally {
            setIsLoading(false);
        }
    };
    useEffect(() => {
        if (model) {
            getItemById("LibraryItem", model, "LeumasAPI", auth()?.token) // Changed from "Category" to "LibraryItem"
                .then(data => {
                    setDetails(data);
                    setIsPublished(data?.public)
                })
                .catch(error => {
                    console.error("Error fetching library item details:", error); // Updated the error message accordingly
                });
        }
    }, [model]);

    const glowColor = model?.public ? 'border-blue-500' : 'border-red-500';  // assuming model has a property 'public'

    const handleClick = () => {
        console.log("clicking a library item, so now we need to go to the library item's details") // Updated the console log message
        setMode(<ViewLibraryItem model={model} setMode={setMode} />);  // Updated to ViewLibraryItem
    };


    return (
        <>
        {isLoading ? (
            <div className="flex justify-center items-center h-full w-full absolute z-60">
                <AtomSpinner color="blue" />
            </div>
        ) : (
            <div 
                onClick={handleClick} 
                className={`h-full relative flex flex-col w-200 border-2 p-4 rounded-xl backdrop-blur-md hover:${glowColor} shadow-lg transition-transform transform hover:scale-105 cursor-pointer`}
                style={{
                    backgroundImage: `url(${details?.image || svg})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center'
                }}
            >
    <div className="absolute inset-0 bg-black bg-opacity-40 rounded-lg"></div>

<div className="flex flex-col justify-start mb-2 flex-grow z-10">
    <h2 className="font-bold text-lg hover:text-blue-500 cursor-pointer">{details?.name}</h2>
    <p className="text-sm mt-2 line-clamp-2">{details?.description}</p>  {/* Assuming library item has a description */}
</div>

<div className="absolute bottom-2 right-2 flex items-center text-xs z-10">
    <FaClock size={12} className="mr-1" />
    Updated: {friendlyTime(details?.updatedAt)} 
</div>

                {auth()?.id && isOwner && (  
                    <>
                        <div className="absolute bottom-2 left-2 flex items-center z-50">
                            <ToggleStatus 
                                isPublished={isPublished} 
                                model="LibraryItem"
                                endpoint="LeumasAPI" 
                                itemId={model} 
                                token={auth().token} 
                                onToggleChange={handleToggleChange}
                            />
                        </div>
                        <div className="absolute top-2 right-2 flex items-center z-50">
                            <button onClick={handleDeleteClick} className="p-1 bg-red-500 rounded hover:bg-red-600">
                                <FaTrash />
                            </button>
                        </div>
                    </>
                )}
            </div>
        )}
        </>
    )
}

export default LibraryItemCard;