'use client';

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import type { MotivatorCard as MotivatorCardType } from '@/lib/types';
import { MOTIVATOR_BY_TYPE } from '@/lib/types';

interface MotivatorCardProps {
  card: MotivatorCardType;
  onInfluenceChange?: (influence: number) => void;
  disabled?: boolean;
  showInfluence?: boolean;
}

export function MotivatorCard({
  card,
  disabled = false,
  showInfluence = false,
}: MotivatorCardProps) {
  const config = MOTIVATOR_BY_TYPE[card.type];

  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: card.id,
    disabled,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`
        relative flex flex-col items-center justify-center
        w-28 h-36 rounded-xl border-2 shrink-0
        bg-card shadow-md
        cursor-grab active:cursor-grabbing
        transition-all duration-200
        ${isDragging ? 'opacity-50 scale-105 shadow-xl z-50' : 'hover:shadow-lg hover:-translate-y-1'}
        ${disabled ? 'cursor-default opacity-60' : ''}
      `}
      {...attributes}
      {...listeners}
    >
      {/* Color accent bar */}
      <div
        className="absolute top-0 left-0 right-0 h-2 rounded-t-lg"
        style={{ backgroundColor: config.color }}
      />

      {/* Icon */}
      <div className="text-3xl mb-1 mt-2">{config.icon}</div>

      {/* Name */}
      <div className="font-semibold text-sm text-center px-2" style={{ color: config.color }}>
        {config.name}
      </div>

      {/* Description */}
      <p className="text-[10px] text-muted text-center px-2 mt-1 line-clamp-2">
        {config.description}
      </p>

      {/* Influence indicator */}
      {showInfluence && card.influence !== 0 && (
        <div
          className={`
            absolute -top-2 -right-2 w-6 h-6 rounded-full
            flex items-center justify-center text-xs font-bold text-white
            ${card.influence > 0 ? 'bg-green-500' : 'bg-red-500'}
          `}
        >
          {card.influence > 0 ? `+${card.influence}` : card.influence}
        </div>
      )}

      {/* Rank badge */}
      <div
        className="absolute -bottom-2 left-1/2 -translate-x-1/2 
          bg-foreground text-background text-xs font-bold 
          w-5 h-5 rounded-full flex items-center justify-center"
      >
        {card.orderIndex}
      </div>
    </div>
  );
}

// Non-draggable version for summary
export function MotivatorCardStatic({
  card,
  size = 'normal',
}: {
  card: MotivatorCardType;
  size?: 'small' | 'normal';
}) {
  const config = MOTIVATOR_BY_TYPE[card.type];

  const sizeClasses = {
    small: 'w-20 h-24 text-2xl',
    normal: 'w-28 h-36 text-3xl',
  };

  return (
    <div
      className={`
        relative flex flex-col items-center justify-center
        rounded-xl border-2 bg-card shadow-md
        ${sizeClasses[size]}
      `}
    >
      {/* Color accent bar */}
      <div
        className="absolute top-0 left-0 right-0 h-2 rounded-t-lg"
        style={{ backgroundColor: config.color }}
      />

      {/* Icon */}
      <div className={`mb-1 mt-2 ${size === 'small' ? 'text-xl' : 'text-3xl'}`}>{config.icon}</div>

      {/* Name */}
      <div
        className={`font-semibold text-center px-2 ${size === 'small' ? 'text-xs' : 'text-sm'}`}
        style={{ color: config.color }}
      >
        {config.name}
      </div>

      {/* Influence indicator */}
      {card.influence !== 0 && (
        <div
          className={`
            absolute -top-2 -right-2 rounded-full
            flex items-center justify-center font-bold text-white
            ${card.influence > 0 ? 'bg-green-500' : 'bg-red-500'}
            ${size === 'small' ? 'w-5 h-5 text-[10px]' : 'w-6 h-6 text-xs'}
          `}
        >
          {card.influence > 0 ? `+${card.influence}` : card.influence}
        </div>
      )}

      {/* Rank badge */}
      <div
        className={`
          absolute -bottom-2 left-1/2 -translate-x-1/2 
          bg-foreground text-background font-bold 
          rounded-full flex items-center justify-center
          ${size === 'small' ? 'w-4 h-4 text-[10px]' : 'w-5 h-5 text-xs'}
        `}
      >
        {card.orderIndex}
      </div>
    </div>
  );
}