/*
 * Delivery Routes Map Component
 * Visualizes delivery routes and shipment status
 */

import React from 'react';
import { Card, CardContent } from '../ui/Card';
import { useTranslation } from 'react-i18next';

interface Route {
  route_id: string;
  route_number: string;
  status: string;
  total_distance_km: number;
  stops: any[]; // Simplified for now
  estimated_duration_minutes: number;
}

interface DeliveryRoutesMapProps {
  routes?: Route[];
  shipments?: Record<string, number>;
}

export const DeliveryRoutesMap: React.FC<DeliveryRoutesMapProps> = ({ routes, shipments }) => {
  const { t } = useTranslation('dashboard');

  // Calculate summary stats for display
  const totalRoutes = routes?.length || 0;
  const totalDistance = routes?.reduce((sum, route) => sum + (route.total_distance_km || 0), 0) || 0;
  
  // Calculate shipment status counts
  const pendingShipments = shipments?.pending || 0;
  const inTransitShipments = shipments?.in_transit || 0;
  const deliveredShipments = shipments?.delivered || 0;
  const totalShipments = pendingShipments + inTransitShipments + deliveredShipments;

  return (
    <div className="space-y-4">
      {/* Route Summary Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
        <div className="bg-blue-50 p-3 rounded-lg">
          <p className="text-sm text-blue-600">{t('enterprise.total_routes')}</p>
          <p className="text-xl font-bold text-blue-900">{totalRoutes}</p>
        </div>
        <div className="bg-green-50 p-3 rounded-lg">
          <p className="text-sm text-green-600">{t('enterprise.total_distance')}</p>
          <p className="text-xl font-bold text-green-900">{totalDistance.toFixed(1)} km</p>
        </div>
        <div className="bg-yellow-50 p-3 rounded-lg">
          <p className="text-sm text-yellow-600">{t('enterprise.total_shipments')}</p>
          <p className="text-xl font-bold text-yellow-900">{totalShipments}</p>
        </div>
        <div className="bg-purple-50 p-3 rounded-lg">
          <p className="text-sm text-purple-600">{t('enterprise.active_routes')}</p>
          <p className="text-xl font-bold text-purple-900">
            {routes?.filter(r => r.status === 'in_progress').length || 0}
          </p>
        </div>
      </div>

      {/* Route Status Legend */}
      <div className="flex flex-wrap gap-3 mb-4">
        <div className="flex items-center">
          <div className="w-3 h-3 bg-gray-300 rounded-full mr-2"></div>
          <span className="text-xs">{t('enterprise.planned')}</span>
        </div>
        <div className="flex items-center">
          <div className="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
          <span className="text-xs">{t('enterprise.pending')}</span>
        </div>
        <div className="flex items-center">
          <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
          <span className="text-xs">{t('enterprise.in_transit')}</span>
        </div>
        <div className="flex items-center">
          <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
          <span className="text-xs">{t('enterprise.delivered')}</span>
        </div>
        <div className="flex items-center">
          <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
          <span className="text-xs">{t('enterprise.failed')}</span>
        </div>
      </div>

      {/* Simplified Map Visualization */}
      <div className="border rounded-lg p-4 bg-gray-50 min-h-[400px] relative">
        <h3 className="text-lg font-semibold mb-4">{t('enterprise.distribution_routes')}</h3>
        
        {routes && routes.length > 0 ? (
          <div className="space-y-3">
            {/* For each route, show a simplified representation */}
            {routes.map((route, index) => {
              let statusColor = 'bg-gray-300'; // planned
              if (route.status === 'in_progress') statusColor = 'bg-yellow-500';
              else if (route.status === 'completed') statusColor = 'bg-green-500';
              else if (route.status === 'cancelled') statusColor = 'bg-red-500';
              
              return (
                <div key={route.route_id} className="border rounded p-3 bg-white">
                  <div className="flex justify-between items-center mb-2">
                    <h4 className="font-medium">{t('enterprise.route')} {route.route_number}</h4>
                    <span className={`px-2 py-1 rounded-full text-xs ${statusColor} text-white`}>
                      {t(`enterprise.route_status.${route.status}`) || route.status}
                    </span>
                  </div>
                  
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div>
                      <span className="text-gray-500">{t('enterprise.distance')}:</span> 
                      <span className="ml-1">{route.total_distance_km?.toFixed(1)} km</span>
                    </div>
                    <div>
                      <span className="text-gray-500">{t('enterprise.duration')}:</span> 
                      <span className="ml-1">{Math.round(route.estimated_duration_minutes || 0)} min</span>
                    </div>
                    <div>
                      <span className="text-gray-500">{t('enterprise.stops')}:</span> 
                      <span className="ml-1">{route.stops?.length || 0}</span>
                    </div>
                  </div>
                  
                  {/* Route stops visualization */}
                  <div className="mt-2 pt-2 border-t">
                    <div className="flex items-center space-x-2">
                      {route.stops && route.stops.length > 0 ? (
                        route.stops.map((stop, stopIndex) => (
                          <React.Fragment key={stopIndex}>
                            <div className="flex flex-col items-center">
                              <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs">
                                {stopIndex + 1}
                              </div>
                              <span className="text-xs mt-1 text-center max-w-[60px] truncate">
                                {stop.location?.name || `${t('enterprise.stop')} ${stopIndex + 1}`}
                              </span>
                            </div>
                            {stopIndex < route.stops.length - 1 && (
                              <div className="flex-1 h-0.5 bg-gray-300"></div>
                            )}
                          </React.Fragment>
                        ))
                      ) : (
                        <span className="text-gray-500 text-sm">{t('enterprise.no_stops')}</span>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="flex items-center justify-center h-64 text-gray-500">
            {t('enterprise.no_routes_available')}
          </div>
        )}
      </div>
    </div>
  );
};