'use client';

import { memo } from 'react';
import { Badge } from '@/components/ui/badge';
import { getPresetStyle } from '@/lib/utils/status-config';
import { cn } from '@/lib/utils';
import type { Stage, StageCardStatus } from './types';
import { STAGE_LABELS } from './types';
import { formatNumber as formatAmount } from '@/lib/utils/amount';

interface StageCardProps {
  stage: Stage;
  isSelected?: boolean;
  onClick?: () => void;
}

const StageCard = memo(function StageCard({ stage, isSelected, onClick }: StageCardProps) {
  // 상태 뱃지 색상
  const getStatusBadge = (status: StageCardStatus) => {
    switch (status) {
      case 'completed':
        return <Badge variant="secondary" className="text-xs">완료</Badge>;
      case 'in_progress':
        return <Badge className={`text-xs ${getPresetStyle('warning')}`}>진행중</Badge>;
      case 'waiting':
        return <Badge variant="outline" className="text-xs">대기</Badge>;
      default:
        return null;
    }
  };

  return (
    <div
      className={cn(
        'p-3 bg-card rounded-lg border cursor-pointer transition-all hover:shadow-md',
        isSelected && 'ring-2 ring-primary border-primary'
      )}
      onClick={onClick}
    >
      {/* 헤더: 단계명 + 상태 뱃지 */}
      <div className="flex items-center justify-between gap-2 mb-2">
        <span className="text-xs font-medium text-muted-foreground">
          {STAGE_LABELS[stage.type]}
        </span>
        {getStatusBadge(stage.status)}
      </div>

      {/* 현장명 */}
      <h4 className="text-sm font-medium text-foreground mb-2 line-clamp-1">
        {stage.siteName}
      </h4>

      {/* 세부 정보 */}
      <div className="space-y-1 text-xs text-muted-foreground">
        {stage.date && (
          <div className="flex justify-between">
            <span>날짜</span>
            <span>{stage.date.replace(/-/g, '.')}</span>
          </div>
        )}
        {stage.amount && (
          <div className="flex justify-between">
            <span>금액</span>
            <span className="font-medium text-foreground">{formatAmount(stage.amount)}원</span>
          </div>
        )}
        {stage.count && (
          <div className="flex justify-between">
            <span>개소</span>
            <span>{stage.count}개소</span>
          </div>
        )}
        {stage.pm && (
          <div className="flex justify-between">
            <span>담당PM</span>
            <span>{stage.pm}</span>
          </div>
        )}
      </div>
    </div>
  );
});

export default StageCard;
