import { LuPencil, LuTrash2, LuUser, LuCalendar, LuFileText } from "react-icons/lu";
import { Employee } from "@/hooks/useEmployees";

interface MobileEmployeeCardProps {
    employee: Employee;
    onEdit: (employee: Employee) => void;
    onDelete: (employee: Employee) => void;
    onViewDocuments: (employee: Employee) => void;
    currentUserId?: string;
}

export default function MobileEmployeeCard({
    employee,
    onEdit,
    onDelete,
    onViewDocuments,
    currentUserId
}: MobileEmployeeCardProps) {
    return (
        <div className="bg-background p-4 rounded-xl border border-border shadow-sm space-y-4">
            {/* Header with Avatar and Basic Info */}
            <div className="flex items-start justify-between gap-3">
                <div className="flex items-center gap-3">
                    <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-semibold shrink-0">
                        {employee.name?.charAt(0).toUpperCase() || employee.username.charAt(0).toUpperCase()}
                    </div>
                    <div>
                        <h3 className="font-semibold text-text leading-tight">
                            {employee.name || "Sin nombre"}
                        </h3>
                        <p className="text-sm text-text-muted">@{employee.username}</p>
                    </div>
                </div>

                {/* Role Badge */}
                <span
                    className={`px-2 py-1 text-xs font-semibold rounded-full ${employee.role === "ADMIN"
                        ? "bg-purple-500/10 text-purple-600 dark:text-purple-400"
                        : "bg-green-500/10 text-green-600 dark:text-green-400"
                        }`}
                >
                    {employee.role}
                </span>
            </div>

            {/* Stats / Details */}
            <div className="grid grid-cols-2 gap-3 text-sm border-t border-border pt-3">
                <div className="flex flex-col">
                    <span className="text-xs text-text-muted flex items-center gap-1">
                        <LuFileText className="h-3 w-3" /> Documentos
                    </span>
                    <button
                        onClick={() => onViewDocuments(employee)}
                        className="text-left font-medium text-primary truncate"
                    >
                        {employee._count.documents} documento(s)
                    </button>
                </div>
                <div className="flex flex-col">
                    <span className="text-xs text-text-muted flex items-center gap-1">
                        <LuCalendar className="h-3 w-3" /> Registrado
                    </span>
                    <span className="font-medium text-text truncate">
                        {new Date(employee.createdAt).toLocaleDateString("es-ES")}
                    </span>
                </div>
            </div>

            {/* Actions */}
            <div className="flex items-center gap-2 pt-1">
                <button
                    onClick={() => onEdit(employee)}
                    className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors text-sm font-medium"
                >
                    <LuPencil className="h-4 w-4" />
                    Editar
                </button>
                <button
                    onClick={() => onDelete(employee)}
                    disabled={employee.id === currentUserId}
                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm font-medium ${employee.id === currentUserId
                            ? "bg-background-alt text-text-muted cursor-not-allowed border border-border"
                            : "bg-destructive/10 text-destructive hover:bg-destructive/20"
                        }`}
                >
                    <LuTrash2 className="h-4 w-4" />
                    Eliminar
                </button>
            </div>
        </div>
    );
}