"use client";

import React from 'react';
import { Package } from 'lucide-react';
import { InspectionReport } from '../types';

interface ReportListProps {
  reports: InspectionReport[];
  selectedId: string | null;
  onSelect: (report: InspectionReport) => void;
  isMock?: boolean;
}

export const ReportList = ({ reports, selectedId, onSelect, isMock }: ReportListProps) => {
  return (
    <div className="bg-white rounded-lg p-3 sm:p-4 shadow-sm h-full flex flex-col">
      <div className="flex items-center justify-between mb-3 sm:mb-4">
        <div className="flex items-center gap-2">
          <h2 className="font-bold text-sm sm:text-lg text-gray-800">품질관리서 목록</h2>
          {isMock && (
            <span className="bg-amber-100 text-amber-700 text-[9px] sm:text-[10px] font-semibold px-1.5 py-0.5 rounded border border-amber-200">
              Mock
            </span>
          )}
        </div>
        <span className="bg-blue-100 text-blue-800 text-[10px] sm:text-xs font-bold px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full">
          {reports.length}건
        </span>
      </div>

      <div className="space-y-2 sm:space-y-3 overflow-y-auto flex-1">
        {reports.length === 0 ? (
          <div className="flex items-center justify-center h-32 text-gray-400 text-sm">
            해당 조건의 품질관리서가 없습니다.
          </div>
        ) : (
          reports.map((report) => {
            const isSelected = selectedId === report.id;
            return (
              <div
                key={report.id}
                onClick={() => onSelect(report)}
                className={`rounded-lg p-3 sm:p-4 cursor-pointer hover:shadow-md transition-all ${
                  isSelected
                    ? 'border-2 border-blue-500 bg-blue-50'
                    : 'border border-gray-200 bg-white hover:border-blue-300'
                }`}
              >
                <div className="flex items-center justify-between gap-2 mb-1">
                  <h3 className={`font-bold text-sm sm:text-lg ${isSelected ? 'text-blue-900' : 'text-gray-800'}`}>
                    {report.code}
                  </h3>
                  <span className="text-[10px] sm:text-xs text-gray-400 bg-gray-100 px-1.5 sm:px-2 py-0.5 sm:py-1 rounded whitespace-nowrap">
                    {report.quarter}
                  </span>
                </div>
                <p className="text-xs sm:text-base text-gray-700 font-medium mb-1">{report.siteName}</p>
                <p className="text-xs sm:text-sm text-gray-500 mb-2 sm:mb-3">인정품목: {report.item}</p>

                <div className={`flex items-center gap-1.5 sm:gap-2 p-1.5 sm:p-2 rounded text-xs sm:text-sm font-medium ${
                  isSelected ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'
                }`}>
                  <Package size={16} />
                  <span>수주로트 {report.totalRoutes}건</span>
                  <span className="text-gray-400 text-xs ml-1">(확인 {report.routeCount}/{report.totalRoutes})</span>
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};