import { ChevronDown, ChevronRight } from 'lucide-react';
import type { InventoryStatisticsSectionProps } from './types';

type InventoryMobileListProps = Pick<
  InventoryStatisticsSectionProps,
  | 'inventoryTab'
  | 'inventoryByRegion'
  | 'expandedInventoryRegions'
  | 'toggleInventoryRegion'
  | 'inventoryByModel'
  | 'expandedInventoryTypes'
  | 'toggleInventoryType'
  | 'setVehicleSelection'
>;

export function InventoryMobileList({
  inventoryTab,
  inventoryByRegion,
  expandedInventoryRegions,
  toggleInventoryRegion,
  inventoryByModel,
  expandedInventoryTypes,
  toggleInventoryType,
  setVehicleSelection: setShowPlateNumbers,
}: InventoryMobileListProps) {
  return (
    <div className="lg:hidden p-3 space-y-3">
      {inventoryTab === 'region' ? (
        Object.entries(inventoryByRegion).map(([region, cities]) => (
          <div key={region} className="border border-slate-100 rounded overflow-hidden">
            <div
              className="bg-slate-50 p-3 flex justify-between items-center cursor-pointer"
              onClick={() => toggleInventoryRegion(region)}
            >
              <div className="flex items-center gap-2">
                {expandedInventoryRegions.has(region) ? <ChevronDown size={14} className="text-slate-400" /> : <ChevronRight size={14} className="text-slate-400" />}
                <span className="text-xs font-bold text-slate-700">{region}</span>
              </div>
              <span className="text-[10px] font-bold text-blue-600">
                {Object.values(cities).flat().reduce((acc, s) => acc + s.quantity, 0)} 台
              </span>
            </div>

            {expandedInventoryRegions.has(region) && (
              <div className="p-2 space-y-2 bg-white">
                {Object.entries(cities).map(([city, stats]) => (
                  <div key={city} className="border-l-2 border-slate-200 pl-3 py-1">
                    <div className="text-[10px] font-bold text-slate-500 mb-2">{city}</div>
                    <div className="space-y-2">
                      {stats.map((stat, idx) => (
                        <div key={idx} className="flex justify-between items-center text-[11px] bg-slate-50/50 p-2 rounded">
                          <div className="flex flex-col">
                            <span className="text-slate-400 text-[9px]">{stat.brand}</span>
                            <span className="text-slate-700 font-medium">{stat.model}</span>
                          </div>
                          <button
                            onClick={() => setShowPlateNumbers({ batch: 'All', model: stat.model, location: stat.city, category: 'Inventory', source: 'asset', title: `库存统计 - ${stat.model} - ${stat.city}` })}
                            className="font-bold text-blue-600 hover:underline"
                          >
                            {stat.quantity} 台
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))
      ) : (
        Object.entries(inventoryByModel).map(([type, models]) => (
          <div key={type} className="border border-slate-100 rounded overflow-hidden">
            <div
              className="bg-slate-50 p-3 flex justify-between items-center cursor-pointer"
              onClick={() => toggleInventoryType(type)}
            >
              <div className="flex items-center gap-2">
                {expandedInventoryTypes.has(type) ? <ChevronDown size={14} className="text-slate-400" /> : <ChevronRight size={14} className="text-slate-400" />}
                <span className="text-xs font-bold text-slate-700">{type}</span>
              </div>
              <span className="text-[10px] font-bold text-blue-600">
                {Object.values(models).flat().reduce((acc, s) => acc + s.quantity, 0)} 台
              </span>
            </div>

            {expandedInventoryTypes.has(type) && (
              <div className="p-2 space-y-2 bg-white">
                {Object.entries(models).map(([model, stats]) => (
                  <div key={model} className="border-l-2 border-slate-200 pl-3 py-1">
                    <div className="text-[10px] font-bold text-slate-500 mb-2">{model}</div>
                    <div className="space-y-2">
                      {stats.map((stat, idx) => (
                        <div key={idx} className="flex justify-between items-center text-[11px] bg-slate-50/50 p-2 rounded">
                          <div className="flex flex-col">
                            <span className="text-slate-400 text-[9px]">{stat.brand}</span>
                            <span className="text-slate-700 font-medium">{stat.region} / {stat.city}</span>
                          </div>
                          <button
                            onClick={() => setShowPlateNumbers({ batch: 'All', model: stat.model, location: stat.city, category: 'Inventory', source: 'asset', title: `库存统计 - ${stat.model} - ${stat.city}` })}
                            className="font-bold text-blue-600 hover:underline"
                          >
                            {stat.quantity} 台
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))
      )}
    </div>
  );
}