
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Pencil, Trash2, Globe, Bot, Monitor, ArrowUp, ArrowDown } from "lucide-react";

interface Project {
  id: string;
  title: string;
  category: 'website' | 'ai' | 'webapp';
  description: string;
  image: string;
  tags: string[];
  delivery_time: string;
  display_order: number;
  project_url: string | null;
  created_at: string;
}

interface ProjectCardProps {
  project: Project;
  index: number;
  totalProjects: number;
  onEdit: (project: Project) => void;
  onDelete: (id: string) => void;
  onMoveUp: (project: Project) => void;
  onMoveDown: (project: Project) => void;
}

const ProjectCard = ({
  project,
  index,
  totalProjects,
  onEdit,
  onDelete,
  onMoveUp,
  onMoveDown
}: ProjectCardProps) => {
  const getCategoryIcon = (category: string) => {
    switch (category) {
      case 'website':
        return <Globe className="h-4 w-4 text-blue-600" />;
      case 'webapp':
        return <Monitor className="h-4 w-4 text-green-600" />;
      case 'ai':
        return <Bot className="h-4 w-4 text-purple-600" />;
      default:
        return <Globe className="h-4 w-4 text-blue-600" />;
    }
  };

  const getCategoryLabel = (category: string) => {
    switch (category) {
      case 'website':
        return 'Site Web';
      case 'webapp':
        return 'Web App';
      case 'ai':
        return 'Agent IA';
      default:
        return 'Site Web';
    }
  };

  const getCategoryBadgeVariant = (category: string) => {
    switch (category) {
      case 'website':
        return 'default';
      case 'webapp':
        return 'outline';
      case 'ai':
        return 'secondary';
      default:
        return 'default';
    }
  };

  return (
    <Card className="overflow-hidden">
      <div className="aspect-video overflow-hidden">
        <img
          src={project.image}
          alt={project.title}
          className="w-full h-full object-cover"
        />
      </div>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg">{project.title}</CardTitle>
          <div className="flex items-center space-x-1">
            {getCategoryIcon(project.category)}
            <Badge variant={getCategoryBadgeVariant(project.category)}>
              {getCategoryLabel(project.category)}
            </Badge>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-gray-600 mb-3 line-clamp-2">
          {project.description}
        </p>
        <div className="flex flex-wrap gap-1 mb-3">
          {project.tags.slice(0, 3).map((tag, tagIndex) => (
            <Badge key={tagIndex} variant="outline" className="text-xs">
              {tag}
            </Badge>
          ))}
          {project.tags.length > 3 && (
            <Badge variant="outline" className="text-xs">
              +{project.tags.length - 3}
            </Badge>
          )}
        </div>
        <div className="flex items-center justify-between mb-3">
          <Badge className="bg-green-100 text-green-800">
            ⚡ {project.delivery_time}
          </Badge>
          {project.project_url && (
            <Badge variant="outline" className="text-xs bg-blue-50 text-blue-600">
              🔗 Lien disponible
            </Badge>
          )}
        </div>
        <div className="flex items-center justify-between">
          <div className="flex space-x-1">
            <Button
              size="sm"
              variant="outline"
              onClick={() => onMoveUp(project)}
              disabled={index === 0}
              className="p-1"
            >
              <ArrowUp className="h-3 w-3" />
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => onMoveDown(project)}
              disabled={index === totalProjects - 1}
              className="p-1"
            >
              <ArrowDown className="h-3 w-3" />
            </Button>
          </div>
          <div className="flex space-x-2">
            <Button
              size="sm"
              variant="outline"
              onClick={() => onEdit(project)}
            >
              <Pencil className="h-3 w-3" />
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => onDelete(project.id)}
              className="text-red-600 hover:text-red-700"
            >
              <Trash2 className="h-3 w-3" />
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default ProjectCard;
