import React, { useState } from 'react';
import { Task } from '@/types/gantt';

type TaskBarProps = {
  task: Task;
  scale: number;
  taskHeight: number;
  isActive: boolean;
  onBarStart: (e: React.MouseEvent | React.TouchEvent, task: Task, type: string) => void;
};

// プロジェクトタイプごとの色設定
const PROJECT_COLORS = {
  'Spine': {
    bar: 'bg-gradient-to-r from-blue-500 to-blue-600',
    handle: 'bg-blue-700',
    hover: 'hover:from-blue-600 hover:to-blue-700',
    border: 'border-blue-400'
  },
  '3D': {
    bar: 'bg-gradient-to-r from-rose-500 to-rose-600',
    handle: 'bg-rose-700',
    hover: 'hover:from-rose-600 hover:to-rose-700',
    border: 'border-rose-400'
  },
  '2D': {
    bar: 'bg-gradient-to-r from-emerald-500 to-emerald-600',
    handle: 'bg-emerald-700',
    hover: 'hover:from-emerald-600 hover:to-emerald-700',
    border: 'border-emerald-400'
  },
  '研修': {
    bar: 'bg-gradient-to-r from-amber-500 to-amber-600',
    handle: 'bg-amber-700',
    hover: 'hover:from-amber-600 hover:to-amber-700',
    border: 'border-amber-400'
  }
} as const;

export const TaskBar: React.FC<TaskBarProps> = ({
  task,
  scale,
  taskHeight,
  isActive,
  onBarStart
}) => {
  const [isHovered, setIsHovered] = useState(false);
  const colors = PROJECT_COLORS[task.type as keyof typeof PROJECT_COLORS] || {
    bar: 'bg-gradient-to-r from-gray-500 to-gray-600',
    handle: 'bg-gray-700',
    hover: 'hover:from-gray-600 hover:to-gray-700',
    border: 'border-gray-400'
  };

  return (
    <div
      key={`bar-${task.id}`}
      className="absolute h-8 flex items-center group"
      style={{
        left: `${task.start * scale}px`,
        top: '4px',
        width: `${task.duration * scale}px`,
        height: `${taskHeight - 8}px`,
        transform: isActive || isHovered ? 'translateY(-2px)' : 'none',
        opacity: isActive ? 0.9 : 1,
        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
        zIndex: isActive || isHovered ? 10 : 1
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* 左のリサイズハンドル */}
      <div
        className={`absolute left-0 w-4 h-full ${colors.handle} cursor-ew-resize rounded-l-lg 
          transition-all duration-200 opacity-80 hover:opacity-100 shadow-sm
          ${isHovered ? 'scale-y-110' : ''}`}
        style={{ touchAction: 'none' }}
        onMouseDown={(e) => onBarStart(e, task, 'resize-start')}
        onTouchStart={(e) => {
          e.preventDefault();
          onBarStart(e, task, 'resize-start');
        }}
      />
      
      {/* メインのバー */}
      <div
        className={`flex-1 h-full cursor-move flex items-center justify-center px-2 
          text-white font-medium text-sm ${colors.bar} ${colors.hover}
          transition-all duration-200 border-t border-b ${colors.border}
          ${isHovered ? 'shadow-md' : 'shadow-sm'}`}
        style={{ touchAction: 'none' }}
        onMouseDown={(e) => onBarStart(e, task, 'move')}
        onTouchStart={(e) => {
          e.preventDefault();
          onBarStart(e, task, 'move');
        }}
      >
        <div className="truncate">
          {task.name}
        </div>
      </div>
      
      {/* 右のリサイズハンドル */}
      <div
        className={`absolute right-0 w-4 h-full ${colors.handle} cursor-ew-resize rounded-r-lg 
          transition-all duration-200 opacity-80 hover:opacity-100 shadow-sm
          ${isHovered ? 'scale-y-110' : ''}`}
        style={{ touchAction: 'none' }}
        onMouseDown={(e) => onBarStart(e, task, 'resize-end')}
        onTouchStart={(e) => {
          e.preventDefault();
          onBarStart(e, task, 'resize-end');
        }}
      />
    </div>
  );
}

export default TaskBar;