aerbim-ht-monitor/frontend/components/navigation/Monitoring.tsx

import React, { useEffect, useCallback } from 'react';
import Image from 'next/image';
import useNavigationStore from '@/app/store/navigationStore';
import type { Zone } from '@/app/types';

// Безопасный резолвер src изображения, чтобы избежать ошибок Invalid URL в next/image
const resolveImageSrc = (src?: string | null): string => {
  if (!src || typeof src !== 'string') return '/images/test_image.png';
  let s = src.trim();
  if (!s) return '/images/test_image.png';
  s = s.replace(/\\/g, '/');
  const lower = s.toLowerCase();
  // Явный плейсхолдер test_image.png маппим на наш статический ресурс
  if (lower === 'test_image.png' || lower.endsWith('/test_image.png') || lower.includes('/public/images/test_image.png')) {
    return '/images/test_image.png';
  }
  // Если путь содержит public/images (даже абсолютный путь ФС), переводим в относительный путь сайта
  if (/\/public\/images\//i.test(s)) {
    const parts = s.split(/\/public\/images\//i);
    const rel = parts[1] || '';
    return `/images/${rel}`;
  }
  // Абсолютные URL и пути, относительные к сайту
  if (s.startsWith('http://') || s.startsWith('https://')) return s;
  if (s.startsWith('/')) return s;
  // Нормализуем относительные имена ресурсов до путей сайта под /images
  // Убираем ведущий 'public/', если он присутствует
  s = s.replace(/^public\//i, '');
  return s.startsWith('images/') ? `/${s}` : `/images/${s}`;
}

interface MonitoringProps {
  onClose?: () => void;
  onSelectModel?: (modelPath: string) => void;
}

const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
  const { currentObject, currentZones, zonesLoading, zonesError, loadZones } = useNavigationStore();

  const handleSelectModel = useCallback((modelPath: string) => { 
    console.log(`[NavigationPage] Model selected: ${modelPath}`);
    onSelectModel?.(modelPath);
  }, [onSelectModel]);
 
  // Загрузка зон при изменении объекта
  useEffect(() => {
    const objId = currentObject?.id;
    if (!objId) return;
    loadZones(objId);
  }, [currentObject?.id, loadZones]);

  // Автоматический выбор первой зоны при загрузке
  useEffect(() => {
    const sortedZones: Zone[] = (currentZones || []).slice().sort((a: Zone, b: Zone) => {
      const oa = typeof a.order === 'number' ? a.order : 0;
      const ob = typeof b.order === 'number' ? b.order : 0;
      if (oa !== ob) return oa - ob;
      return (a.name || '').localeCompare(b.name || '');
    });

    if (sortedZones.length > 0 && sortedZones[0].model_path && !zonesLoading) {
      handleSelectModel(sortedZones[0].model_path);
    }
  }, [currentZones, zonesLoading, handleSelectModel]);

  const sortedZones: Zone[] = React.useMemo(() => {
    return (currentZones || []).slice().sort((a: Zone, b: Zone) => {
      const oa = typeof a.order === 'number' ? a.order : 0;
      const ob = typeof b.order === 'number' ? b.order : 0;
      if (oa !== ob) return oa - ob;
      return (a.name || '').localeCompare(b.name || '');
    });
  }, [currentZones]);

  return (
    <div className="w-full"> 
      <div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4"> 
        <div className="flex items-center justify-between">
          <h2 className="text-white text-2xl font-semibold">Зоны мониторинга</h2>
          {onClose && (
            <button 
              onClick={onClose}
              className="text-white hover:text-gray-300 transition-colors"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          )}
        </div>
        {/* UI зон */}
        {zonesError && (
          <div className="rounded-lg bg-red-600/20 border border-red-600/40 text-red-200 text-xs px-3 py-2">
            Ошибка загрузки зон: {zonesError}
          </div>
        )}
        {zonesLoading && (
          <div className="rounded-lg bg-gray-200 text-gray-700 text-xs px-3 py-2 border border-gray-300">
            Загрузка зон...
          </div>
        )}
        {sortedZones.length > 0 && (
          <>
            {sortedZones[0] && (
              <button
                key={`zone-${sortedZones[0].id}-panorama`}
                type="button"
                onClick={() => sortedZones[0].model_path ? handleSelectModel(sortedZones[0].model_path) : null}
                className="w-full bg-gray-300 rounded-lg h-[200px] flex items-center justify-center hover:bg-gray-400 transition-colors mb-4"
                title={sortedZones[0].model_path ? `Открыть 3D модель зоны: ${sortedZones[0].name}` : 'Модель зоны отсутствует'}
                disabled={!sortedZones[0].model_path}
              >
                <div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
                  {/* Всегда рендерим с разрешённой заглушкой */}
                  <Image 
                    src={resolveImageSrc(sortedZones[0].image_path)}
                    alt={sortedZones[0].name || 'Зона'}
                    width={200}
                    height={200}
                    className="max-w-full max-h-full object-contain opacity-50"
                    style={{ height: 'auto' }}
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      target.src = '/images/test_image.png';
                    }}
                  />
                  <div className="absolute bottom-2 left-2 right-2 text-sm text-gray-700 bg-white/80 rounded px-3 py-1 truncate">
                    {sortedZones[0].name}
                  </div>
                </div>
              </button>
            )}
            {sortedZones.length > 1 && (
              <div className="grid grid-cols-2 gap-3">
                {sortedZones.slice(1).map((zone: Zone, idx: number) => (
                  <button
                    key={`zone-${zone.id}-${idx}`}
                    type="button"
                    onClick={() => zone.model_path ? handleSelectModel(zone.model_path) : null}
                    className="relative flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center hover:bg-gray-400 transition-colors"
                    title={zone.model_path ? `Открыть 3D модель зоны: ${zone.name}` : 'Модель зоны отсутствует'}
                    disabled={!zone.model_path}
                  >
                    <div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
                      <Image 
                        src={resolveImageSrc(zone.image_path)}
                        alt={zone.name || 'Зона'}
                        width={120}
                        height={120}
                        className="max-w-full max-h-full object-contain opacity-50"
                        style={{ height: 'auto' }}
                        onError={(e) => {
                          const target = e.target as HTMLImageElement;
                          target.src = '/images/test_image.png';
                        }}
                      />
                      <div className="absolute bottom-1 left-1 right-1 text-[10px] text-gray-700 bg-white/70 rounded px-2 py-0.5 truncate">
                        {zone.name}
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </>
        )}
        {sortedZones.length === 0 && !zonesError && !zonesLoading && (
          <div className="col-span-2">
            <div className="rounded-lg bg-gray-200 text-gray-700 text-xs px-3 py-2 border border-gray-300">
              Зоны не найдены для выбранного объекта. Проверьте параметр objectId в API /api/get-zones.
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Monitoring;