"use client";

import React, { useState } from 'react';
import { ChevronDown, ChevronUp, MapPin } from 'lucide-react';
import { RouteItem } from '../types';

interface RouteListProps {
  routes: RouteItem[];
  selectedId: string | null;
  onSelect: (route: RouteItem) => void;
  reportCode: string | null;
}

export const RouteList = ({ routes, selectedId, onSelect, reportCode }: RouteListProps) => {
  const [expandedId, setExpandedId] = useState<string | null>(null);

  const handleClick = (route: RouteItem) => {
    onSelect(route);
    setExpandedId(expandedId === route.id ? null : route.id);
  };

  return (
    <div className="bg-white rounded-lg p-4 shadow-sm h-full flex flex-col overflow-hidden">
      <h2 className="font-bold text-gray-800 text-sm mb-4">
        수주루트 목록{' '}
        {reportCode && (
          <span className="text-gray-400 font-normal ml-1">({reportCode})</span>
        )}
      </h2>

      <div className="space-y-3 overflow-y-auto flex-1">
        {routes.length === 0 ? (
          <div className="flex items-center justify-center h-32 text-gray-400 text-sm">
            {reportCode ? '수주루트가 없습니다.' : '품질관리서를 선택해주세요.'}
          </div>
        ) : (
          routes.map((route) => {
            const isSelected = selectedId === route.id;
            const isExpanded = expandedId === route.id;

            return (
              <div key={route.id} className="border border-gray-200 rounded-lg overflow-hidden">
                <div
                  onClick={() => handleClick(route)}
                  className={`p-4 cursor-pointer flex justify-between items-start transition-colors ${
                    isSelected ? 'bg-green-50 border-b border-green-100' : 'bg-white hover:bg-gray-50'
                  }`}
                >
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      {isSelected && <div className="w-1 h-4 bg-green-500 rounded-full" />}
                      <h3 className={`font-bold ${isSelected ? 'text-green-700' : 'text-gray-700'}`}>
                        {route.code}
                      </h3>
                    </div>
                    <p className="text-xs text-gray-500 mb-1">수주일: {route.date}</p>
                    <p className="text-xs text-gray-500 mb-2">현장: {route.site}</p>
                    <div className="inline-flex items-center gap-1 bg-gray-100 px-2 py-0.5 rounded text-xs text-gray-600">
                      <MapPin size={10} />
                      <span>{route.locationCount}개소</span>
                    </div>
                  </div>
                  {isExpanded ? (
                    <ChevronUp size={16} className="text-gray-400" />
                  ) : (
                    <ChevronDown size={16} className="text-gray-400" />
                  )}
                </div>

                {isExpanded && route.subItems.length > 0 && (
                  <div className="bg-white p-3 space-y-2">
                    <div className="text-xs font-bold text-gray-600 mb-2 flex items-center gap-1">
                      <MapPin size={10} /> 개소별 제품로트
                    </div>
                    {route.subItems.map((item) => (
                      <div
                        key={item.id}
                        className="flex items-center justify-between border border-gray-100 p-2 rounded hover:bg-gray-50"
                      >
                        <div>
                          <div className="text-xs font-bold text-green-700">{item.name}</div>
                          <div className="text-xs text-gray-500">{item.location}</div>
                        </div>
                        <span
                          className={`text-[10px] font-bold px-1.5 py-0.5 rounded border ${
                            item.status === '합격'
                              ? 'text-green-600 border-green-200 bg-green-50'
                              : item.status === '불합격'
                              ? 'text-red-600 border-red-200 bg-red-50'
                              : 'text-yellow-600 border-yellow-200 bg-yellow-50'
                          }`}
                        >
                          {item.status}
                        </span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};