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

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

const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
  const [models, setModels] = useState<{ title: string; path: string }[]>([]);
  const [loadError, setLoadError] = useState<string | null>(null);
  const PREFERRED_MODEL = useNavigationStore((state) => state.PREFERRED_MODEL);

  const handleSelectModel = useCallback((modelPath: string) => { 
    console.log(`[NavigationPage] Model selected: ${modelPath}`);
    onSelectModel?.(modelPath);
  }, [onSelectModel]);

  useEffect(() => {
    const fetchModels = async () => {
      try {
        setLoadError(null);
        const res = await fetch('/api/big-models/list');
        if (!res.ok) {
          const text = await res.text();
          throw new Error(text || 'Failed to fetch models list');
        }
        const data = await res.json();
        const items: { name: string; path: string }[] = Array.isArray(data?.models) ? data.models : [];

        const preferredModelName = PREFERRED_MODEL.split('/').pop()?.split('.').slice(0, -1).join('.') || '';

        const formatted = items
          .map((it) => ({ title: it.name, path: it.path }))
          .sort((a, b) => {
            const aName = a.path.split('/').pop()?.split('.').slice(0, -1).join('.') || '';
            const bName = b.path.split('/').pop()?.split('.').slice(0, -1).join('.') || '';
            if (aName === preferredModelName) return -1;
            if (bName === preferredModelName) return 1;
            return a.title.localeCompare(b.title);
          });

        setModels(formatted);
      } catch (error) {
        console.error('[Monitoring] Error loading models list:', error);
        setLoadError(error instanceof Error ? error.message : String(error));
        setModels([]);
      }
    };

    fetchModels();
  }, [PREFERRED_MODEL]);

  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>
 
        {loadError && (
          <div className="rounded-lg bg-red-600/20 border border-red-600/40 text-red-200 text-xs px-3 py-2">
            Ошибка загрузки списка моделей: {loadError}
          </div>
        )}

        {models.length > 0 && (
          <>
            {/* Большая панорамная карточка для приоритетной модели */}
            {models[0] && (
              <button
                key={`${models[0].path}-panorama`}
                type="button"
                onClick={() => handleSelectModel(models[0].path)}
                className="w-full bg-gray-300 rounded-lg h-[200px] flex items-center justify-center hover:bg-gray-400 transition-colors mb-4"
                title={`Загрузить модель: ${models[0].title}`}
              >
                <div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
                  <Image 
                    src="/images/test_image.png"
                    alt={models[0].title}
                    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.style.display = 'none';
                    }}
                  />
                  <div className="absolute bottom-2 left-2 right-2 text-sm text-gray-700 bg-white/80 rounded px-3 py-1 truncate">
                    {models[0].title}
                  </div>
                </div>

              </button>
            )}

            {/* Сетка маленьких карточек для остальных моделей */}
            {models.length > 1 && (
              <div className="grid grid-cols-2 gap-3">
                {models.slice(1).map((model, idx) => (
                  <button
                    key={`${model.path}-${idx}`}
                    type="button"
                    onClick={() => handleSelectModel(model.path)}
                className="relative flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center hover:bg-gray-400 transition-colors"
                title={`Загрузить модель: ${model.title}`}
              >
                    <div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
                      <Image 
                        src="/images/test_image.png"
                        alt={model.title}
                        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.style.display = 'none';
                        }}
                      />
                      <div className="absolute bottom-1 left-1 right-1 text-[10px] text-gray-700 bg-white/70 rounded px-2 py-0.5 truncate">
                        {model.title}
                      </div>
                    </div>

                  </button>
                ))}
              </div>
            )}
          </>
        )}

        {models.length === 0 && !loadError && (
          <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">
              Список моделей пуст. Добавьте файлы в assets/big-models или проверьте API /api/big-models/list.
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Monitoring;