import React from "react";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { MoreVertical, Paperclip, MessageSquare, Calendar } from "lucide-react";
import { format } from "date-fns";

const priorityConfig = {
  high: { bg: "bg-blue-100", text: "text-blue-700", label: "High" },
  normal: { bg: "bg-teal-100", text: "text-teal-700", label: "Normal" },
  low: { bg: "bg-orange-100", text: "text-orange-700", label: "Low" }
};

const progressColor = (progress) => {
  if (progress >= 75) return "bg-teal-500";
  if (progress >= 50) return "bg-blue-500";
  if (progress >= 25) return "bg-amber-500";
  return "bg-slate-400";
};

export default function TaskCard({ task, provided, onClick, itemHeight = "normal", conditionalColoring = true }) {
  const heightClasses = {
    compact: "p-2",
    normal: "p-4",
    comfortable: "p-5"
  };
  
  const cardHeight = heightClasses[itemHeight] || heightClasses.normal;
  const priority = priorityConfig[task.priority] || priorityConfig.normal;
  
  const priorityBorder = conditionalColoring && task.priority === 'high' ? 'border-l-4 border-l-red-500' : '';
  const priorityBg = conditionalColoring && task.priority === 'high' ? 'bg-red-50/50' : 'bg-white';
  
  return (
    <Card
      ref={provided?.innerRef}
      {...provided?.draggableProps}
      {...provided?.dragHandleProps}
      onClick={onClick}
      className={`${priorityBg} border border-slate-200 ${priorityBorder} hover:shadow-md transition-all cursor-pointer mb-3`}
    >
      <div className={cardHeight}>
        {/* Header */}
        <div className="flex items-start justify-between mb-3">
          <h4 className="font-semibold text-slate-900 text-sm flex-1">{task.task_name}</h4>
          <button className="text-slate-400 hover:text-slate-600">
            <MoreVertical className="w-4 h-4" />
          </button>
        </div>

        {/* Priority & Date */}
        <div className="flex items-center justify-between mb-3">
          <Badge className={`${priority.bg} ${priority.text} text-xs font-semibold`}>
            {priority.label}
          </Badge>
          {task.due_date && (
            <div className="flex items-center gap-1 text-xs text-slate-500">
              <Calendar className="w-3 h-3" />
              {format(new Date(task.due_date), 'd MMM')}
            </div>
          )}
        </div>

        {/* Progress Bar */}
        <div className="mb-4">
          <div className="flex items-center justify-between mb-1.5">
            <div className="flex-1 h-1.5 bg-slate-100 rounded-full overflow-hidden">
              <div 
                className={`h-full ${progressColor(task.progress || 0)} transition-all`}
                style={{ width: `${task.progress || 0}%` }}
              />
            </div>
            <span className="text-xs font-semibold text-slate-600 ml-3">{task.progress || 0}%</span>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between">
          {/* Assigned Members */}
          <div className="flex -space-x-2">
            {(task.assigned_members || []).slice(0, 3).map((member, idx) => (
              <Avatar key={idx} className="w-7 h-7 border-2 border-white">
                <img 
                  src={member.avatar_url || `https://i.pravatar.cc/150?u=${encodeURIComponent(member.member_name)}`}
                  alt={member.member_name}
                  className="w-full h-full object-cover"
                />
              </Avatar>
            ))}
            {(task.assigned_members?.length || 0) > 3 && (
              <div className="w-7 h-7 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-xs font-semibold text-slate-600">
                +{task.assigned_members.length - 3}
              </div>
            )}
          </div>

          {/* Stats */}
          <div className="flex items-center gap-3 text-slate-500">
            {(task.attachment_count || 0) > 0 && (
              <div className="flex items-center gap-1 text-xs">
                <Paperclip className="w-3.5 h-3.5" />
                <span>{task.attachment_count}</span>
              </div>
            )}
            {(task.comment_count || 0) > 0 && (
              <div className="flex items-center gap-1 text-xs">
                <MessageSquare className="w-3.5 h-3.5" />
                <span>{task.comment_count}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </Card>
  );
}