trello_fake/components/dashboard/project-list-item.tsx

"use client";

import Link from 'next/link';
import { Calendar, DollarSign, TrendingUp } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Project, ProjectStatus } from '@/types/project';

interface ProjectListItemProps {
  project: Project;
}

// Función para generar iniciales
function getInitials(name: string): string {
  return name
    .split(' ')
    .map(word => word[0])
    .join('')
    .toUpperCase()
    .slice(0, 2);
}

// Componente para el badge de estado con estilos directos
function StatusBadge({ status }: { status: ProjectStatus }) {
  if (status === '0') {
    return (
      <Badge variant="outline" className="border bg-gray-100 text-gray-800 border-gray-200">
        Borrador
      </Badge>
    );
  }
  
  if (status === '1') {
    return (
      <Badge variant="outline" className="border bg-blue-100 text-blue-800 border-blue-200">
        Abierto
      </Badge>
    );
  }
  
  if (status === '2') {
    return (
      <Badge variant="outline" className="border bg-red-100 text-red-800 border-red-200">
        Cerrado
      </Badge>
    );
  }
  
  // Fallback
  return (
    <Badge variant="outline" className="border bg-gray-100 text-gray-800 border-gray-200">
      Desconocido
    </Badge>
  );
}

/**
 * Componente de fila de proyecto para vista de lista
 * Diseño horizontal y compacto
 */
export default function ProjectListItem({ project }: ProjectListItemProps) {
  const initials = getInitials(project.name);
  
  return (
    <Link href={`/proyectos/${project.id}`}>
      <div className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all duration-300 cursor-pointer">
        <div className="flex items-center gap-4">
          {/* Avatar */}
          <Avatar className="w-12 h-12 flex-shrink-0">
            <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white font-semibold">
              {initials}
            </AvatarFallback>
          </Avatar>

          {/* Info Principal */}
          <div className="flex-1 min-w-0">
            <div className="flex items-start justify-between gap-4">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-base font-semibold text-gray-900 truncate">
                    {project.name}
                  </h3>
                  <span className="text-xs text-gray-500 flex-shrink-0">{project.ref}</span>
                </div>
                {project.client !== 'Sin cliente' && (
                  <p className="text-sm text-gray-600 truncate">{project.client}</p>
                )}
              </div>
              
              {/* Estado */}
              <StatusBadge status={project.status} />
            </div>
          </div>

          {/* Progreso */}
          <div className="hidden md:flex items-center gap-2 flex-shrink-0 w-32">
            <TrendingUp className="w-4 h-4 text-gray-400" />
            <div className="flex-1">
              <div className="flex items-center justify-between mb-1">
                <span className="text-xs text-gray-600">Progreso</span>
                <span className="text-xs font-semibold text-gray-900">{project.progress}%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-1.5">
                <div
                  className="bg-gradient-to-r from-blue-500 to-purple-600 h-1.5 rounded-full transition-all duration-500"
                  style={{ width: `${project.progress}%` }}
                />
              </div>
            </div>
          </div>

          {/* Presupuesto */}
          <div className="hidden lg:flex items-center gap-2 flex-shrink-0">
            <DollarSign className="w-4 h-4 text-green-500" />
            <div className="text-right">
              <div className="text-sm font-semibold text-gray-900">
                €{project.budget.toLocaleString('es-ES', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
              </div>
              <div className="text-xs text-gray-500">Presupuesto</div>
            </div>
          </div>

          {/* Fechas */}
          <div className="hidden xl:flex items-center gap-2 flex-shrink-0">
            <Calendar className="w-4 h-4 text-gray-400" />
            <div className="text-right">
              <div className="text-sm text-gray-900">
                {new Date(project.startDate).toLocaleDateString('es-ES', { day: '2-digit', month: 'short' })}
              </div>
              <div className="text-xs text-gray-500">Inicio</div>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}