import React, { useState, useMemo } from 'react';
import { Brain, TrendingUp, AlertCircle, Play, RotateCcw, Eye, Loader, CheckCircle } from 'lucide-react';
import { Button, Badge, Modal, Table, Select, StatsGrid, StatusCard, SearchAndFilter, type FilterConfig, Card, EmptyState } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { useToast } from '../../../../hooks/ui/useToast';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useIngredients } from '../../../../api/hooks/inventory';
import {
  useModels,
  useActiveModel,
  useTrainSingleProduct,
  useModelMetrics,
  useModelPerformance,
  useTenantTrainingStatistics
} from '../../../../api/hooks/training';
import { ModelDetailsModal, RetrainModelModal } from '../../../../components/domain/forecasting';
import type { IngredientResponse } from '../../../../api/types/inventory';
import type { TrainedModelResponse, SingleProductTrainingRequest } from '../../../../api/types/training';

// Actual API response structure (different from expected paginated response)
interface ModelsApiResponse {
  tenant_id: string;
  models: TrainedModelResponse[];
  total_returned: number;
  active_only: boolean;
  pagination: any;
  enhanced_features: boolean;
  repository_integration: boolean;
}

interface ModelStatus {
  ingredient: IngredientResponse;
  hasModel: boolean;
  model?: TrainedModelResponse;
  isTraining: boolean;
  trainingJobId?: string;
  lastTrainingDate?: string;
  accuracy?: number;
  status: 'no_model' | 'active' | 'training' | 'error';
}

const ModelsConfigPage: React.FC = () => {
  const { addToast } = useToast();
  const currentTenant = useCurrentTenant();
  const tenantId = currentTenant?.id || '';

  const [selectedIngredient, setSelectedIngredient] = useState<IngredientResponse | null>(null);
  const [selectedModel, setSelectedModel] = useState<TrainedModelResponse | null>(null);
  const [showTrainingModal, setShowTrainingModal] = useState(false);
  const [showRetrainModal, setShowRetrainModal] = useState(false);
  const [showModelDetailsModal, setShowModelDetailsModal] = useState(false);
  const [trainingSettings, setTrainingSettings] = useState<Partial<SingleProductTrainingRequest>>({
    seasonality_mode: 'additive',
    daily_seasonality: true,
    weekly_seasonality: true,
    yearly_seasonality: false,
  });

  // API hooks
  const { data: ingredients = [], isLoading: ingredientsLoading } = useIngredients(tenantId);
  const { data: modelsData, isLoading: modelsLoading, error: modelsError } = useModels(tenantId);
  const { data: statistics, error: statsError } = useTenantTrainingStatistics(tenantId);
  const trainMutation = useTrainSingleProduct();

  // Debug: Log the models data structure
  React.useEffect(() => {
    console.log('Models data structure:', {
      modelsData,
      modelsLoading,
      modelsError,
      ingredients: ingredients.length
    });
  }, [modelsData, modelsLoading, modelsError, ingredients]);

  // Build model status for each ingredient
  const modelStatuses = useMemo<ModelStatus[]>(() => {
    // Handle different possible data structures from the API response
    let models: TrainedModelResponse[] = [];

    // The API actually returns { models: [...], tenant_id: ..., total_returned: ... }
    const apiResponse = modelsData as any as ModelsApiResponse;
    if (apiResponse?.models && Array.isArray(apiResponse.models)) {
      models = apiResponse.models;
    } else if (modelsData?.data && Array.isArray(modelsData.data)) {
      models = modelsData.data;
    } else if (modelsData && Array.isArray(modelsData)) {
      models = modelsData as any;
    }

    console.log('Processing models:', {
      modelsData,
      extractedModels: models,
      modelsCount: models.length,
      ingredientsCount: ingredients.length
    });

    return ingredients.map((ingredient: IngredientResponse) => {
      const model = models.find((m: any) => {
        // Focus only on ID-based matching
        return m.inventory_product_id === ingredient.id ||
               String(m.inventory_product_id) === String(ingredient.id);
      });

      const isTraining = false; // We'll track this separately for active training jobs

      console.log(`Ingredient ${ingredient.name} (${ingredient.id}):`, {
        hasModel: !!model,
        model: model ? {
          id: model.model_id,
          created: model.created_at,
          inventory_product_id: model.inventory_product_id
        } : null
      });

      return {
        ingredient,
        hasModel: !!model,
        model,
        isTraining,
        lastTrainingDate: model?.created_at || undefined,
        accuracy: model ? 
                 (model.training_metrics?.mape !== undefined ? (100 - model.training_metrics.mape) : 
                 (model as any).mape !== undefined ? (100 - (model as any).mape) : 
                 undefined) : undefined,
        status: model
          ? (isTraining ? 'training' : 'active')
          : 'no_model'
      };
    });
  }, [ingredients, modelsData]);

  // Calculate orphaned models (models for ingredients that no longer exist)
  const orphanedModels = useMemo(() => {
    const apiResponse = modelsData as any as ModelsApiResponse;
    const models = apiResponse?.models || [];
    const ingredientIds = new Set(ingredients.map(ing => ing.id));

    return models.filter((model: any) => !ingredientIds.has(model.inventory_product_id));
  }, [modelsData, ingredients]);

  // Filter and search
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');

  const filteredStatuses = useMemo(() => {
    return modelStatuses.filter(status => {
      const matchesSearch = status.ingredient.name.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesStatus = statusFilter === 'all' || status.status === statusFilter;
      return matchesSearch && matchesStatus;
    });
  }, [modelStatuses, searchTerm, statusFilter]);

  const handleTrainModel = async () => {
    if (!selectedIngredient) return;

    try {
      await trainMutation.mutateAsync({
        tenantId,
        inventoryProductId: selectedIngredient.id,
        request: trainingSettings
      });

      addToast(`Entrenamiento iniciado para ${selectedIngredient.name}`, { type: 'success' });
      setShowTrainingModal(false);
    } catch (error) {
      addToast('Error al iniciar el entrenamiento', { type: 'error' });
    }
  };

  const handleViewModelDetails = async (ingredient: IngredientResponse) => {
    setSelectedIngredient(ingredient);
    
    // Find the model for this ingredient
    const model = modelStatuses.find(status => status.ingredient.id === ingredient.id)?.model;
    if (model) {
      setSelectedModel(model);
    }
    
    setShowModelDetailsModal(true);
  };

  const handleStartTraining = (ingredient: IngredientResponse) => {
    setSelectedIngredient(ingredient);
    setShowTrainingModal(true);
  };

  const handleStartRetraining = (ingredient: IngredientResponse) => {
    setSelectedIngredient(ingredient);

    // Find and set the model for this ingredient
    const model = modelStatuses.find(status => status.ingredient.id === ingredient.id)?.model;
    if (model) {
      setSelectedModel(model);
    }

    setShowRetrainModal(true);
  };

  const handleRetrain = async (settings: SingleProductTrainingRequest) => {
    if (!selectedIngredient) return;

    try {
      await trainMutation.mutateAsync({
        tenantId,
        inventoryProductId: selectedIngredient.id,
        request: settings
      });

      addToast(`Reentrenamiento iniciado para ${selectedIngredient.name}`, { type: 'success' });
      setShowRetrainModal(false);
      setSelectedIngredient(null);
      setSelectedModel(null);
    } catch (error) {
      addToast('Error al reentrenar el modelo', { type: 'error' });
    }
  };



  if (ingredientsLoading || modelsLoading) {
    return (
      <div className="p-6 space-y-6">
        <PageHeader
          title="Configuración de Modelos IA"
          description="Gestiona el entrenamiento y configuración de modelos de predicción para cada ingrediente"
        />
        <div className="flex items-center justify-center h-64">
          <Loader className="w-8 h-8 animate-spin" />
          <span className="ml-2">
            {ingredientsLoading ? 'Cargando ingredientes...' : 'Cargando modelos...'}
          </span>
        </div>
      </div>
    );
  }

  if (modelsError) {
    console.error('Error loading models:', modelsError);
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="Configuración de Modelos IA"
        description="Gestiona el entrenamiento y configuración de modelos de predicción para cada ingrediente"
      />

      {/* Statistics Cards */}
      <StatsGrid
        stats={[
          {
            title: 'Ingredientes con Modelo',
            value: modelStatuses.filter(s => s.hasModel).length,
            icon: Brain,
            variant: 'default',
          },
          {
            title: 'Sin Modelo',
            value: modelStatuses.filter(s => s.status === 'no_model').length,
            icon: AlertCircle,
            variant: 'warning',
          },
          {
            title: 'Modelos Activos',
            value: modelStatuses.filter(s => s.status === 'active').length,
            icon: CheckCircle,
            variant: 'success',
          },
          {
            title: 'Precisión Promedio',
            value: statsError ? 'N/A' : (statistics?.models?.average_accuracy !== undefined && statistics?.models?.average_accuracy !== null ? `${Number(statistics.models.average_accuracy).toFixed(1)}%` : 'N/A'),
            icon: TrendingUp,
            variant: 'success',
          },
          {
            title: 'Total Modelos',
            value: modelStatuses.length,
            icon: Brain,
            variant: 'info',
          },
          {
            title: 'Modelos Huérfanos',
            value: orphanedModels.length,
            icon: AlertCircle,
            variant: 'error',
          },
        ]}
        columns={3}
      />

      {/* Search and Filter Controls */}
      <SearchAndFilter
        searchValue={searchTerm}
        onSearchChange={setSearchTerm}
        searchPlaceholder="Buscar ingrediente..."
        filters={[
          {
            key: 'status',
            label: 'Estado',
            type: 'dropdown',
            value: statusFilter,
            onChange: (value) => setStatusFilter(value as string),
            placeholder: 'Todos los estados',
            options: [
              { value: 'no_model', label: 'Sin modelo' },
              { value: 'active', label: 'Activo' },
              { value: 'training', label: 'Entrenando' },
              { value: 'error', label: 'Error' }
            ]
          }
        ] as FilterConfig[]}
      />

      {/* Models Grid */}
      {filteredStatuses.length === 0 ? (
        <EmptyState
          icon={Brain}
          title="No se encontraron ingredientes"
          description="No hay ingredientes que coincidan con los filtros aplicados."
          className="col-span-full"
        />
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {(
          filteredStatuses.map((status) => {
            // Get status configuration for the StatusCard
            const statusConfig = {
              color: status.status === 'active' 
                ? '#10B981' // green for active
                : status.status === 'no_model' 
                ? '#6B7280' // gray for no model
                : status.status === 'training' 
                ? '#F59E0B' // amber for training
                : '#EF4444', // red for error
              text: status.status === 'active' 
                ? 'Activo' 
                : status.status === 'no_model' 
                ? 'Sin Modelo' 
                : status.status === 'training' 
                ? 'Entrenando' 
                : 'Error',
              icon: status.status === 'active' 
                ? CheckCircle 
                : status.status === 'no_model' 
                ? AlertCircle 
                : status.status === 'training' 
                ? Loader 
                : AlertCircle,
              isCritical: status.status === 'error',
              isHighlight: status.status === 'training'
            };

            return (
              <StatusCard
                key={status.ingredient.id}
                id={status.ingredient.id}
                statusIndicator={statusConfig}
                title={status.ingredient.name}
                subtitle={status.ingredient.category || undefined}
                primaryValue={status.accuracy ? status.accuracy.toFixed(1) : 'N/A'}
                primaryValueLabel="Precisión"
                secondaryInfo={status.lastTrainingDate ? {
                  label: 'Último entrenamiento',
                  value: new Date(status.lastTrainingDate).toLocaleDateString('es-ES')
                } : undefined}
                onClick={() => {
                  if (status.hasModel) {
                    handleViewModelDetails(status.ingredient);
                  } else {
                    handleStartTraining(status.ingredient);
                  }
                }}
                actions={[
                  // Primary action - View details or train model
                  {
                    label: status.hasModel ? 'Ver Detalles' : 'Entrenar',
                    icon: status.hasModel ? Eye : Play,
                    onClick: () => status.hasModel 
                      ? handleViewModelDetails(status.ingredient)
                      : handleStartTraining(status.ingredient),
                    priority: 'primary' as const
                  },
                  // Secondary action - Retrain if model exists
                  ...(status.hasModel ? [{
                    label: 'Reentrenar',
                    icon: RotateCcw,
                    onClick: () => handleStartRetraining(status.ingredient),
                    priority: 'secondary' as const
                  }] : [])
                ]}
              />
            );
          })
        )}
        </div>
      )}

      {/* Training Modal */}
      <Modal
        isOpen={showTrainingModal}
        onClose={() => setShowTrainingModal(false)}
        title={`Entrenar Modelo - ${selectedIngredient?.name}`}
        size="lg"
      >
        <div className="space-y-6">
          <div className="p-4 bg-blue-50 rounded-lg">
            <h4 className="font-medium text-blue-900 mb-2">Configuración de Entrenamiento</h4>
            <p className="text-sm text-blue-700">
              Configure los parámetros para el entrenamiento del modelo de predicción de demanda.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium mb-2">Modo de Estacionalidad</label>
              <Select
                value={trainingSettings.seasonality_mode || 'additive'}
                onChange={(value) => setTrainingSettings(prev => ({ ...prev, seasonality_mode: value as any }))}
                options={[
                  { value: 'additive', label: 'Aditivo' },
                  { value: 'multiplicative', label: 'Multiplicativo' }
                ]}
              />
            </div>

            <div className="space-y-4">
              <h4 className="font-medium text-sm">Patrones Estacionales</h4>

              <label className="flex items-center space-x-2">
                <input
                  type="checkbox"
                  checked={trainingSettings.daily_seasonality || false}
                  onChange={(e) => setTrainingSettings(prev => ({ ...prev, daily_seasonality: e.target.checked }))}
                  className="rounded border-[var(--border-primary)]"
                />
                <span className="text-sm">Estacionalidad diaria</span>
              </label>

              <label className="flex items-center space-x-2">
                <input
                  type="checkbox"
                  checked={trainingSettings.weekly_seasonality || false}
                  onChange={(e) => setTrainingSettings(prev => ({ ...prev, weekly_seasonality: e.target.checked }))}
                  className="rounded border-[var(--border-primary)]"
                />
                <span className="text-sm">Estacionalidad semanal</span>
              </label>

              <label className="flex items-center space-x-2">
                <input
                  type="checkbox"
                  checked={trainingSettings.yearly_seasonality || false}
                  onChange={(e) => setTrainingSettings(prev => ({ ...prev, yearly_seasonality: e.target.checked }))}
                  className="rounded border-[var(--border-primary)]"
                />
                <span className="text-sm">Estacionalidad anual</span>
              </label>
            </div>
          </div>

          <div className="flex justify-end space-x-3 pt-4 border-t">
            <Button variant="outline" onClick={() => setShowTrainingModal(false)}>
              Cancelar
            </Button>
            <Button
              onClick={handleTrainModel}
              isLoading={trainMutation.isPending}
              leftIcon={<Play className="w-4 h-4" />}
            >
              Iniciar Entrenamiento
            </Button>
          </div>
        </div>
      </Modal>

      {/* Model Details Modal */}
      {selectedModel && (
        <ModelDetailsModal
          isOpen={showModelDetailsModal}
          onClose={() => setShowModelDetailsModal(false)}
          model={selectedModel}
        />
      )}

      {/* Retrain Model Modal */}
      {selectedIngredient && (
        <RetrainModelModal
          isOpen={showRetrainModal}
          onClose={() => {
            setShowRetrainModal(false);
            setSelectedIngredient(null);
            setSelectedModel(null);
          }}
          ingredient={selectedIngredient}
          currentModel={selectedModel}
          onRetrain={handleRetrain}
          isLoading={trainMutation.isPending}
        />
      )}
    </div>
  );
};

export default ModelsConfigPage;