import React from 'react';
import { TicketInterval } from '@alga-psa/types';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';
import { formatDuration } from './utils';
import { Checkbox } from '@alga-psa/ui/components/Checkbox';
import { Badge } from '@alga-psa/ui/components/Badge';

interface IntervalItemProps {
  interval: TicketInterval;
  isSelected: boolean;
  onSelect: () => void;
}

/**
 * Component for displaying an individual time tracking interval
 */
export function IntervalItem({
  interval,
  isSelected,
  onSelect
}: IntervalItemProps) {
  const { t } = useTranslation('msp/time-entry');
  // Calculate duration if not provided
  const duration = interval.duration ?? (
    interval.endTime
      ? Math.floor((new Date(interval.endTime).getTime() - new Date(interval.startTime).getTime()) / 1000)
      : Math.floor((new Date().getTime() - new Date(interval.startTime).getTime()) / 1000)
  );
  
  // Format dates for display
  const startTime = new Date(interval.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  const endTime = interval.endTime 
    ? new Date(interval.endTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    : t('intervalItem.now', { defaultValue: 'Now' });
  const startDate = new Date(interval.startTime).toLocaleDateString([], { month: 'short', day: 'numeric' });
  
  return (
    <div 
      className={`border rounded p-2 flex items-center ${isSelected ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-700' : ''}`}
      id={`interval-item-${interval.id}`}
    >
      <Checkbox
        checked={isSelected}
        onChange={onSelect}
        className="mr-3"
        id={`interval-select-${interval.id}`}
      />
      
      <div className="flex-1">
        <div className="flex justify-between">
          <span className="font-medium">
            {startTime} - {endTime}
          </span>
          <span className="text-sm font-mono">
            {formatDuration(duration)}
          </span>
        </div>
        
        <div className="text-sm text-gray-500 dark:text-[rgb(var(--color-text-400))] flex items-center">
          <span>{startDate}</span>
          {interval.autoClosed && (
            <Badge variant="warning" size="sm" className="ml-2">
              {t('intervalItem.autoClosed', { defaultValue: 'Auto-closed' })}
            </Badge>
          )}
          {!interval.endTime && (
            <Badge variant="success" size="sm" className="ml-2">
              {t('intervalItem.active', { defaultValue: 'Active' })}
            </Badge>
          )}
        </div>
      </div>
    </div>
  );
}
