// components/PDFTableRow.jsx
import React from 'react';
import { TableRow, TableCell } from './Table';
import { formatFileSize } from '../utils/format';
import { FileText, Eye, Copy, MoreHorizontal } from 'lucide-react';

const PDFTableRow = ({ pdf, onOpenModal, selected, onSelect }) => {
    return (
        <TableRow
            onClick={() => onOpenModal(pdf)}
            className={`
                group transition-colors duration-200 cursor-pointer
                ${selected ? 'bg-indigo-50/60 hover:bg-indigo-50' : 'hover:bg-slate-50'}
            `}
        >
            <TableCell className="w-[40px] px-4 py-3 text-center">
                <input
                    type="checkbox"
                    checked={selected}
                    onChange={(e) => {
                        e.stopPropagation();
                        onSelect(pdf.id);
                    }}
                    className="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer"
                />
            </TableCell>

            <TableCell className="w-[400px] px-4 py-3">
                <div className="flex items-center gap-4">
                    <div className="size-10 rounded-lg bg-indigo-50 border border-indigo-100 flex items-center justify-center text-indigo-500 group-hover:scale-105 transition-transform">
                        <FileText className="size-5" />
                    </div>
                    <div className="flex flex-col max-w-[300px]">
                        <span className="font-medium text-slate-900 truncate" title={pdf.title || pdf.name}>
                            {pdf.title || pdf.name}
                        </span>
                        <div className="flex items-center gap-2 mt-1 flex-wrap">
                            <span className="text-xs text-slate-400 truncate">
                                {pdf.name}
                            </span>
                            {pdf.categories && pdf.categories.length > 0 && (
                                <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-indigo-50 text-indigo-600 border border-indigo-100 uppercase tracking-tighter">
                                    {pdf.categories[0].name}
                                </span>
                            )}
                            {pdf.tags && pdf.tags.map(tag => (
                                <span key={tag.id} className="text-[10px] text-slate-400 font-medium">
                                    #{tag.name}
                                </span>
                            ))}
                        </div>
                    </div>
                </div>
            </TableCell>

            <TableCell className="w-[120px] px-4 py-3 text-slate-600 text-sm">
                {formatFileSize(pdf.filesize)}
            </TableCell>

            <TableCell className="w-[150px] px-4 py-3 text-slate-600 text-sm">
                {new Date(pdf.uploaded).toLocaleDateString()}
            </TableCell>

            <TableCell className="w-[200px] px-4 py-3">
                <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            window.open(pdf.url, '_blank');
                        }}
                        className="p-1.5 text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
                        title="View PDF"
                    >
                        <Eye className="size-4" />
                    </button>

                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            navigator.clipboard.writeText(`[pdf-rack id="${pdf.id}"]`);
                        }}
                        className="p-1.5 text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
                        title="Copy Shortcode"
                    >
                        <Copy className="size-4" />
                    </button>

                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            onOpenModal(pdf);
                        }}
                        className="p-1.5 text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
                        title="More Details"
                    >
                        <MoreHorizontal className="size-4" />
                    </button>
                </div>
            </TableCell>
        </TableRow>
    );
};

export default PDFTableRow;