import React from 'react';
import { Task } from '../types/task';

interface TaskCardProps {
  task: Task;
  onToggleComplete: (id: string) => void;
  onEdit: (task: Task) => void;
  onDelete: (id: string) => void;
  draggable?: boolean;
  onDragStart?: (e: React.DragEvent) => void;
}

const TaskCard: React.FC<TaskCardProps> = ({ 
  task, 
  onToggleComplete, 
  onEdit, 
  onDelete,
  draggable = false,
  onDragStart
}) => {
  const getPriorityColor = (priority?: string) => {
    switch (priority) {
      case 'high': return 'bg-red-100 text-red-800 border-red-300';
      case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-300';
      case 'low': return 'bg-green-100 text-green-800 border-green-300';
      default: return 'bg-gray-100 text-gray-800 border-gray-300';
    }
  };

  const getRecurringIcon = () => {
    if (!task.recurring) return null;
    
    const iconMap = {
      daily: '🔁',
      weekly: '📅',
      monthly: '🗓️'
    };
    
    return (
      <span className="ml-1 text-xs" title={`Recurring: ${task.recurring}`}>
        {iconMap[task.recurring]}
      </span>
    );
  };

  const getReminderBadge = () => {
    if (!task.reminder) return null;
    
    // Calculate time difference for display
    const now = new Date();
    const reminderDate = new Date(task.reminder);
    const diffInHours = Math.floor((reminderDate.getTime() - now.getTime()) / (1000 * 60 * 60));
    
    let badgeText = '';
    if (diffInHours < 0) {
      badgeText = 'Overdue';
    } else if (diffInHours < 24) {
      badgeText = `${diffInHours}h`;
    } else {
      badgeText = `${Math.floor(diffInHours / 24)}d`;
    }
    
    return (
      <span className="ml-1 bg-blue-100 text-blue-800 text-xs px-1.5 py-0.5 rounded-full">
        {badgeText}
      </span>
    );
  };

  return (
    <div 
      className="bg-white border border-gray-200 rounded-lg shadow-sm p-3 mb-2 hover:shadow-md transition-shadow cursor-pointer"
      draggable={draggable}
      onDragStart={onDragStart}
    >
      <div className="flex justify-between items-start">
        <div className="flex-1">
          <div className="flex items-center">
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => onToggleComplete(task.id)}
              className="mr-2 h-4 w-4 text-blue-600 rounded"
            />
            <h3 className={`font-medium ${task.completed ? 'line-through text-gray-500' : 'text-gray-900'}`}>
              {task.title}
            </h3>
            {getRecurringIcon()}
          </div>
          
          <p className="text-sm text-gray-600 mt-1">{task.description}</p>
          
          {task.tags && task.tags.length > 0 && (
            <div className="mt-2 flex flex-wrap gap-1">
              {task.tags.map((tag, index) => (
                <span key={index} className="bg-indigo-100 text-indigo-800 text-xs px-2 py-0.5 rounded">
                  {tag}
                </span>
              ))}
            </div>
          )}
          
          <div className="mt-2 flex items-center">
            <span className={`text-xs px-2 py-0.5 rounded-full border ${getPriorityColor(task.priority)}`}>
              {task.priority || 'normal'}
            </span>
            {getReminderBadge()}
          </div>
          
          <div className="mt-2 text-xs text-gray-500">
            Due: {task.date.toLocaleDateString()}
          </div>
        </div>
        
        <div className="flex space-x-1 ml-2">
          <button
            onClick={() => onEdit(task)}
            className="text-gray-500 hover:text-blue-600 text-sm"
            aria-label="Edit task"
          >
            ✏️
          </button>
          <button
            onClick={() => onDelete(task.id)}
            className="text-gray-500 hover:text-red-600 text-sm"
            aria-label="Delete task"
          >
            🗑️
          </button>
        </div>
      </div>
    </div>
  );
};

export default TaskCard;