// components/PDFItem.jsx
import React from 'react';
import { FileText, Eye, Copy, Calendar, HardDrive } from 'lucide-react';
import { formatFileSize } from '../utils/format';

const PDFItem = ({ pdf, view, onOpenModal, onQuickView }) => {

    return (
        <div
            onClick={() => onOpenModal(pdf)}
            className="group relative bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer overflow-hidden flex flex-col h-full"
        >
            {/* Preview Area */}
            <div className="relative h-48 bg-slate-50 flex items-center justify-center border-b border-slate-100 group-hover:bg-indigo-50/30 transition-colors">
                {pdf.thumbnail ? (
                    <img
                        src={pdf.thumbnail}
                        alt={pdf.title || pdf.name}
                        className="absolute inset-0 w-full h-full object-cover"
                    />
                ) : (
                    <>
                        <div className="relative z-10 p-6 rounded-lg border border-slate-100 group-hover:scale-110 transition-transform duration-300">
                            <svg width="70" height="94" viewBox="0 0 70 94" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M43.6815 0V27.5391H69.9125L70 27.6309V81.8828C70 88.5749 64.5994 94 57.9373 94H12.0627C5.40064 94 0 88.5749 0 81.8828V12.1172C0 5.42505 5.40064 0 12.0627 0H43.6815Z" fill="#E5252A" />
                                <path d="M43.6815 0L70 27.5391H43.6815V0Z" fill="#FF8383" />
                                <path d="M46.0737 69.7656V53.2088H57.6628V56.8306H50.5484V59.6763H56.9546V63.2981H50.5484V69.7656H46.0737Z" fill="white" />
                                <path d="M35.3411 69.7656H28.9993V53.2088H35.2767C36.9722 53.2088 38.4369 53.5403 39.6709 54.2032C40.9103 54.8607 41.8654 55.8093 42.536 57.0489C43.2121 58.2831 43.5501 59.7625 43.5501 61.4872C43.5501 63.2119 43.2147 64.694 42.5441 65.9336C41.8734 67.1678 40.9237 68.1164 39.6951 68.7793C38.4664 69.4369 37.0151 69.7656 35.3411 69.7656ZM33.474 65.9498H35.1802C35.9957 65.9498 36.6905 65.8177 37.2646 65.5537C37.844 65.2896 38.284 64.8342 38.5845 64.1874C38.8903 63.5407 39.0432 62.6406 39.0432 61.4872C39.0432 60.3338 38.8876 59.4338 38.5764 58.787C38.2706 58.1403 37.8199 57.6849 37.2243 57.4208C36.6342 57.1567 35.9098 57.0246 35.0514 57.0246H33.474V65.9498Z" fill="white" />
                                <path d="M13.6733 69.7656V53.2088H20.7877C22.011 53.2088 23.0814 53.4513 23.9989 53.9364C24.9164 54.4215 25.63 55.1032 26.1397 55.9818C26.6494 56.8603 26.9042 57.887 26.9042 59.0619C26.9042 60.2476 26.6413 61.2743 26.1155 62.1421C25.5951 63.0098 24.8627 63.6781 23.9184 64.147C22.9795 64.6159 21.8823 64.8503 20.6268 64.8503H16.3774V61.3579H19.7254C20.2512 61.3579 20.6992 61.2662 21.0694 61.083C21.445 60.8944 21.732 60.6276 21.9306 60.2826C22.1344 59.9377 22.2364 59.5308 22.2364 59.0619C22.2364 58.5876 22.1344 58.1834 21.9306 57.8492C21.732 57.5097 21.445 57.251 21.0694 57.0731C20.6992 56.8899 20.2512 56.7983 19.7254 56.7983H18.148V69.7656H13.6733Z" fill="white" />
                            </svg>
                        </div>
                        {/* Decorative Pattern */}
                        <div className="absolute inset-0 opacity-[0.03] bg-[radial-gradient(#4f46e5_1px,transparent_1px)] [background-size:16px_16px]"></div>
                    </>
                )}

                {/* Overlay Actions (Visible on Hover) */}
                <div className="absolute inset-0 bg-slate-900/0 group-hover:bg-slate-900/5 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100 backdrop-blur-[1px] z-10">
                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            onQuickView(pdf);
                        }}
                        className="bg-white text-indigo-600 px-4 py-2 rounded-full font-medium shadow-lg transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 flex items-center gap-2"
                    >
                        <Eye className="size-4" />
                        Quick View
                    </button>
                </div>
            </div>

            {/* Content Area */}
            <div className="p-4 flex flex-col flex-1">
                <div className="mb-auto">
                    <h3 className="font-semibold text-slate-900 truncate text-base mb-1" title={pdf.title || pdf.name}>
                        {pdf.title || pdf.name}
                    </h3>
                    <p className="text-xs text-slate-500 truncate" title={pdf.name}>
                        {pdf.name}
                    </p>

                    {/* Categories and Tags Display */}
                    <div className="mt-3 flex flex-wrap gap-1.5">
                        {pdf.categories && pdf.categories.length > 0 && (
                            <span className="px-2 py-0.5 bg-indigo-50 text-indigo-600 rounded text-[10px] font-bold uppercase tracking-wider border border-indigo-100/50">
                                {pdf.categories[0].name}
                            </span>
                        )}
                        {pdf.tags && pdf.tags.slice(0, 2).map(tag => (
                            <span key={tag.id} className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-[10px] font-medium border border-slate-200/50">
                                #{tag.name}
                            </span>
                        ))}
                        {pdf.tags && pdf.tags.length > 2 && (
                            <span className="text-[10px] text-slate-400 font-medium self-center">
                                +{pdf.tags.length - 2} more
                            </span>
                        )}
                    </div>
                </div>

                <div className="mt-4 pt-4 border-t border-slate-50 flex items-center justify-between text-xs text-slate-500">
                    <div className="flex items-center gap-1.5" title="Date Uploaded">
                        <Calendar className="size-3.5" />
                        {new Date(pdf.uploaded).toLocaleDateString()}
                    </div>
                    <div className="flex items-center gap-1.5" title="File Size">
                        <HardDrive className="size-3.5" />
                        {formatFileSize(pdf.filesize)}
                    </div>
                </div>

                {/* Footer Actions */}
                <div className="mt-3 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            navigator.clipboard.writeText(`[pdf-rack id="${pdf.id}"]`);
                        }}
                        className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-xs font-medium bg-slate-50 text-slate-700 hover:bg-indigo-50 hover:text-indigo-700 border border-slate-200 transition-colors"
                    >
                        <Copy className="size-3" />
                        Shortcode
                    </button>
                </div>
            </div>
        </div>
    );
};

export default PDFItem;