'use client';

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

interface DayTabsProps {
  activeDay: 1 | 2;
  onDayChange: (day: 1 | 2) => void;
  day1Progress: { completed: number; total: number };
  day2Progress: { completed: number; total: number };
}

export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }: DayTabsProps) {
  // 전체 진행률 계산
  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="mb-3 md:mb-4 space-y-2 md:space-y-3">
      {/* 탭 버튼 - 모바일: 세로(아이콘→텍스트→숫자), 데스크탑: 가로 */}
      <div className="flex gap-2 md:gap-3">
        {/* 기준/매뉴얼 심사 탭 */}
        <button
          type="button"
          onClick={() => onDayChange(1)}
          className={cn(
            'flex-1 flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 py-2 sm:py-2 px-2 sm:px-3 rounded-lg border-2 transition-all',
            activeDay === 1
              ? 'bg-blue-600 border-blue-600 text-white shadow-lg'
              : 'bg-white border-gray-200 text-gray-700 hover:border-blue-300 hover:bg-blue-50'
          )}
        >
          <Calendar className="h-4 w-4 shrink-0" />
          <span className="font-medium text-xs sm:text-sm">기준/매뉴얼 심사</span>
          <span className={cn(
            'text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full shrink-0',
            activeDay === 1 ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'
          )}>
            {day1Progress.completed}/{day1Progress.total}
          </span>
        </button>

        {/* 로트 추적 심사 탭 */}
        <button
          type="button"
          onClick={() => onDayChange(2)}
          className={cn(
            'flex-1 flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 py-2 sm:py-2 px-2 sm:px-3 rounded-lg border-2 transition-all',
            activeDay === 2
              ? 'bg-blue-600 border-blue-600 text-white shadow-lg'
              : 'bg-white border-gray-200 text-gray-700 hover:border-blue-300 hover:bg-blue-50'
          )}
        >
          <Calendar className="h-4 w-4 shrink-0" />
          <span className="font-medium text-xs sm:text-sm">로트 추적 심사</span>
          <span className={cn(
            'text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full shrink-0',
            activeDay === 2 ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'
          )}>
            {day2Progress.completed}/{day2Progress.total}
          </span>
        </button>
      </div>

      {/* 진행률 - 3줄 표시 */}
      <div className="bg-white rounded-lg border border-gray-200 px-2 sm:px-4 py-2 sm:py-3 space-y-1.5 sm:space-y-2">
        {/* 전체 심사 진행률 */}
        <div className="flex items-center gap-2 sm:gap-3">
          <span className="text-xs sm:text-sm font-medium text-gray-700 w-14 sm:w-28 shrink-0">
            <span className="hidden sm:inline">전체 심사</span>
            <span className="sm:hidden">전체</span>
          </span>
          <div className="flex-1 h-2 sm:h-2.5 bg-gray-200 rounded-full overflow-hidden">
            <div
              className={cn(
                'h-full rounded-full transition-all duration-500',
                overallPercentage === 100 ? 'bg-green-500' : 'bg-blue-600'
              )}
              style={{ width: `${overallPercentage}%` }}
            />
          </div>
          <span className={cn(
            'text-xs sm:text-sm font-bold w-12 sm:w-16 text-right shrink-0',
            overallPercentage === 100 ? 'text-green-600' : 'text-blue-600'
          )}>
            {totalCompleted}/{totalItems}
          </span>
        </div>

        {/* 1일차 진행률 */}
        <div className="flex items-center gap-2 sm:gap-3">
          <span className="text-xs sm:text-sm text-gray-600 w-20 sm:w-28 shrink-0">기준/매뉴얼 심사</span>
          <div className="flex-1 h-1.5 sm: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>
          <span className={cn(
            'text-xs sm:text-sm font-medium w-12 sm:w-16 text-right shrink-0',
            day1Percentage === 100 ? 'text-green-600' : 'text-gray-600'
          )}>
            {day1Progress.completed}/{day1Progress.total}
          </span>
        </div>

        {/* 2일차 진행률 */}
        <div className="flex items-center gap-2 sm:gap-3">
          <span className="text-xs sm:text-sm text-gray-600 w-20 sm:w-28 shrink-0">로트 추적 심사</span>
          <div className="flex-1 h-1.5 sm: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>
          <span className={cn(
            'text-xs sm:text-sm font-medium w-12 sm:w-16 text-right shrink-0',
            day2Percentage === 100 ? 'text-green-600' : 'text-gray-600'
          )}>
            {day2Progress.completed}/{day2Progress.total}
          </span>
        </div>
      </div>
    </div>
  );
}
