'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 { ProjectDetail, ProjectStatus } from './types';
import { formatNumber as formatAmount } from '@/lib/utils/amount';

interface ProjectCardProps {
  project: ProjectDetail;
  isSelected?: boolean;
  onClick?: () => void;
}

const ProjectCard = memo(function ProjectCard({ project, isSelected, onClick }: ProjectCardProps) {
  // 상태 뱃지 색상
  const getStatusBadge = (status: ProjectStatus, hasUrgentIssue: boolean) => {
    if (hasUrgentIssue) {
      return <Badge variant="destructive" className="text-xs">긴급</Badge>;
    }
    switch (status) {
      case 'completed':
        return <Badge variant="secondary" className="text-xs">완료</Badge>;
      case 'in_progress':
        return <Badge className={`text-xs ${getPresetStyle('info')}`}>진행</Badge>;
      default:
        return <Badge variant="outline" className="text-xs">{status}</Badge>;
    }
  };

  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-start justify-between gap-2 mb-2">
        <h4 className="text-sm font-medium text-foreground line-clamp-1">
          {project.siteName}
        </h4>
        {getStatusBadge(project.status, project.hasUrgentIssue)}
      </div>

      {/* 진행률 */}
      <div className="mb-2">
        <div className="flex items-center justify-between text-xs text-muted-foreground mb-1">
          <span>진행률</span>
          <span className="font-medium text-foreground">{project.progressRate}%</span>
        </div>
        <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
          <div
            className={cn(
              'h-full rounded-full transition-all',
              project.status === 'completed' ? 'bg-gray-400' :
              project.hasUrgentIssue ? 'bg-red-500' : 'bg-blue-500'
            )}
            style={{ width: `${project.progressRate}%` }}
          />
        </div>
      </div>

      {/* 정보 */}
      <div className="space-y-1 text-xs text-muted-foreground">
        <div className="flex justify-between">
          <span>{project.partnerName}</span>
          <span className="font-medium text-foreground">{project.totalLocations}개소</span>
        </div>
        <div className="flex justify-between">
          <span>계약금</span>
          <span className="font-medium text-foreground">{formatAmount(project.contractAmount)}원</span>
        </div>
        <div className="flex justify-between">
          <span>기간</span>
          <span>{project.startDate.replace(/-/g, '.')} ~ {project.endDate.replace(/-/g, '.')}</span>
        </div>
      </div>
    </div>
  );
});

export default ProjectCard;