import React from 'react';
import { useTranslation } from 'react-i18next';
import { 
  Clock, 
  Users, 
  MoreVertical, 
  Pencil, 
  Trash2, 
  GripVertical,
  DollarSign,
  AlertCircle
} from 'lucide-react';
import { Service } from '../../types';
import Badge from '../ui/Badge';
import Card from '../ui/Card';

interface ServiceListItemProps {
  service: Service;
  onEdit: (service: Service) => void;
  onDelete: (service: Service) => void;
  dragHandleProps?: any;
}

export const ServiceListItem: React.FC<ServiceListItemProps> = ({
  service,
  onEdit,
  onDelete,
  dragHandleProps
}) => {
  const { t } = useTranslation();

  const formatPrice = (price: number | string) => {
    const numPrice = typeof price === 'string' ? parseFloat(price) : price;
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(numPrice);
  };

  const formatDuration = (minutes: number) => {
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    if (hours > 0) {
      return `${hours}h ${mins > 0 ? `${mins}m` : ''}`;
    }
    return `${mins}m`;
  };

  return (
    <div className="group relative flex items-center gap-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-brand-300 dark:hover:border-brand-700 hover:shadow-md transition-all duration-200">
      {/* Drag Handle */}
      <div 
        {...dragHandleProps}
        className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-grab active:cursor-grabbing p-1"
      >
        <GripVertical size={20} />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0 grid grid-cols-1 sm:grid-cols-4 gap-4 items-center">
        {/* Name & Description */}
        <div className="sm:col-span-2">
          <div className="flex items-center gap-2 mb-1">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">
              {service.name}
            </h3>
            {service.category && (
              <Badge variant="default" size="sm" className="hidden sm:inline-flex">
                {service.category.name}
              </Badge>
            )}
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-400 line-clamp-1">
            {service.description || 'No description provided'}
          </p>
        </div>

        {/* Stats */}
        <div className="flex flex-wrap items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
          <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-700/50 px-2.5 py-1 rounded-md">
            <Clock size={16} className="text-brand-500" />
            <span className="font-medium">{formatDuration(service.durationMinutes)}</span>
          </div>
          <div className="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-700/50 px-2.5 py-1 rounded-md">
            <DollarSign size={16} className="text-green-500" />
            <span className="font-medium">
              {service.variable_pricing ? (
                <span className="italic">Variable</span>
              ) : (
                formatPrice(service.price)
              )}
            </span>
          </div>
        </div>

        {/* Meta */}
        <div className="hidden sm:flex items-center justify-end gap-3 text-xs text-gray-500">
          {service.all_resources ? (
            <span className="flex items-center gap-1" title="Available to all staff">
              <Users size={14} /> All Staff
            </span>
          ) : (
            <span className="flex items-center gap-1" title="Restricted to specific staff">
              <Users size={14} /> {service.resource_ids?.length || 0} Staff
            </span>
          )}
        </div>
      </div>

      {/* Actions */}
      <div className="flex items-center gap-2 pl-4 border-l border-gray-100 dark:border-gray-700">
        <button
          onClick={() => onEdit(service)}
          className="p-2 text-gray-400 hover:text-brand-600 hover:bg-brand-50 dark:hover:bg-brand-900/30 rounded-lg transition-colors"
          title={t('common.edit', 'Edit')}
        >
          <Pencil size={18} />
        </button>
        <button
          onClick={() => onDelete(service)}
          className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
          title={t('common.delete', 'Delete')}
        >
          <Trash2 size={18} />
        </button>
      </div>
    </div>
  );
};

export default ServiceListItem;
