'use client';

import React from 'react';
import { cn } from '@/lib/utils';

interface AuditProgressBarProps {
  day1Progress: { completed: number; total: number };
  day2Progress: { completed: number; total: number };
  activeDay: 1 | 2;
}

export function AuditProgressBar({
  day1Progress,
  day2Progress,
  activeDay,
}: AuditProgressBarProps) {
  const totalCompleted = day1Progress.completed + day2Progress.completed;
  const totalItems = day1Progress.total + day2Progress.total;
  const overallPercentage = totalItems > 0 ? Math.round((totalCompleted / totalItems) * 100) : 0;

  const day1Percentage = day1Progress.total > 0
    ? Math.round((day1Progress.completed / day1Progress.total) * 100)
    : 0;
  const day2Percentage = day2Progress.total > 0
    ? Math.round((day2Progress.completed / day2Progress.total) * 100)
    : 0;

  return (
    <div className="bg-white rounded-lg border border-gray-200 px-4 py-3">
      <div className="flex items-center justify-between mb-2">
        <h4 className="text-sm font-medium text-gray-700">전체 심사 진행률</h4>
        <span className="text-sm font-bold text-blue-600">{overallPercentage}%</span>
      </div>

      {/* 전체 진행률 바 */}
      <div className="h-3 bg-gray-200 rounded-full overflow-hidden mb-4">
        <div
          className="h-full bg-blue-600 rounded-full transition-all duration-500"
          style={{ width: `${overallPercentage}%` }}
        />
      </div>

      {/* 1일차/2일차 상세 진행률 */}
      <div className="grid grid-cols-2 gap-4">
        {/* 1일차 */}
        <div className={cn(
          'p-3 rounded-lg border transition-colors',
          activeDay === 1 ? 'bg-blue-50 border-blue-200' : 'bg-gray-50 border-gray-200'
        )}>
          <div className="flex items-center justify-between mb-1">
            <span className="text-xs font-medium text-gray-600">기준/매뉴얼 심사</span>
            <span className={cn(
              'text-xs font-bold',
              day1Percentage === 100 ? 'text-green-600' : 'text-gray-600'
            )}>
              {day1Progress.completed}/{day1Progress.total}
            </span>
          </div>
          <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
            <div
              className={cn(
                'h-full rounded-full transition-all duration-500',
                day1Percentage === 100 ? 'bg-green-500' : 'bg-blue-500'
              )}
              style={{ width: `${day1Percentage}%` }}
            />
          </div>
        </div>

        {/* 2일차 */}
        <div className={cn(
          'p-3 rounded-lg border transition-colors',
          activeDay === 2 ? 'bg-blue-50 border-blue-200' : 'bg-gray-50 border-gray-200'
        )}>
          <div className="flex items-center justify-between mb-1">
            <span className="text-xs font-medium text-gray-600">로트 추적 심사</span>
            <span className={cn(
              'text-xs font-bold',
              day2Percentage === 100 ? 'text-green-600' : 'text-gray-600'
            )}>
              {day2Progress.completed}/{day2Progress.total}
            </span>
          </div>
          <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
            <div
              className={cn(
                'h-full rounded-full transition-all duration-500',
                day2Percentage === 100 ? 'bg-green-500' : 'bg-blue-500'
              )}
              style={{ width: `${day2Percentage}%` }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}