import React, { useState, useMemo } from 'react';
import { Brain, TrendingUp, AlertCircle, Play, RotateCcw, Eye, Loader, CheckCircle } from 'lucide-react';
import { Button, Card, Badge, Modal, Table, Select, Input } 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 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 [showTrainingModal, setShowTrainingModal] = 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,
        accuracy: model?.training_metrics?.mape ? (100 - model.training_metrics.mape) : 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 = (ingredient: IngredientResponse) => {
    setSelectedIngredient(ingredient);
    setShowModelDetailsModal(true);
  };

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

  const getStatusBadge = (status: ModelStatus['status']) => {
    switch (status) {
      case 'no_model':
        return <Badge variant="secondary">Sin modelo</Badge>;
      case 'active':
        return <Badge variant="success">Activo</Badge>;
      case 'training':
        return <Badge variant="warning">Entrenando</Badge>;
      case 'error':
        return <Badge variant="error">Error</Badge>;
      default:
        return <Badge variant="secondary">Desconocido</Badge>;
    }
  };

  const getAccuracyBadge = (accuracy?: number) => {
    if (!accuracy) return null;

    const variant = accuracy >= 90 ? 'success' : accuracy >= 75 ? 'warning' : 'error';
    return <Badge variant={variant} size="sm">{accuracy.toFixed(1)}%</Badge>;
  };

  // Table columns configuration
  const tableColumns = [
    {
      key: 'ingredient',
      title: 'Ingrediente',
      render: (_: any, status: ModelStatus) => (
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold">
            {status.ingredient.name.charAt(0).toUpperCase()}
          </div>
          <div>
            <div className="font-medium text-[var(--text-primary)]">{status.ingredient.name}</div>
            <div className="text-sm text-[var(--text-secondary)]">{status.ingredient.category}</div>
          </div>
        </div>
      ),
    },
    {
      key: 'status',
      title: 'Estado del Modelo',
      render: (_: any, status: ModelStatus) => (
        <div className="flex items-center gap-2">
          {getStatusBadge(status.status)}
          {status.accuracy && getAccuracyBadge(status.accuracy)}
        </div>
      ),
    },
    {
      key: 'lastTrained',
      title: 'Último Entrenamiento',
      render: (_: any, status: ModelStatus) => (
        <div className="text-sm text-[var(--text-secondary)]">
          {status.lastTrainingDate
            ? new Date(status.lastTrainingDate).toLocaleDateString('es-ES')
            : 'Nunca'
          }
        </div>
      ),
    },
    {
      key: 'actions',
      title: 'Acciones',
      render: (_: any, status: ModelStatus) => (
        <div className="flex items-center gap-2">
          {status.hasModel && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => handleViewModelDetails(status.ingredient)}
              leftIcon={<Eye className="w-4 h-4" />}
            >
              Ver detalles
            </Button>
          )}
          <Button
            variant={status.hasModel ? "outline" : "primary"}
            size="sm"
            onClick={() => handleStartTraining(status.ingredient)}
            leftIcon={status.hasModel ? <RotateCcw className="w-4 h-4" /> : <Play className="w-4 h-4" />}
            disabled={status.isTraining}
          >
            {status.hasModel ? 'Reentrenar' : 'Entrenar'}
          </Button>
        </div>
      ),
    },
  ];

  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="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"
      />


      {/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-[var(--text-primary)]">
                {modelStatuses.filter(s => s.hasModel).length}
              </div>
              <div className="text-sm text-[var(--text-secondary)]">Ingredientes con Modelo</div>
            </div>
            <Brain className="w-8 h-8 text-[var(--color-primary)]" />
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-[var(--text-primary)]">
                {modelStatuses.filter(s => s.status === 'no_model').length}
              </div>
              <div className="text-sm text-[var(--text-secondary)]">Sin Modelo</div>
            </div>
            <AlertCircle className="w-8 h-8 text-[var(--color-warning)]" />
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-[var(--text-primary)]">
                {orphanedModels.length}
              </div>
              <div className="text-sm text-[var(--text-secondary)]">Modelos Huérfanos</div>
            </div>
            <AlertCircle className="w-8 h-8 text-[var(--color-secondary)]" />
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-[var(--text-primary)]">
                {statsError ? 'N/A' : (statistics?.average_accuracy ? `${(100 - statistics.average_accuracy).toFixed(1)}%` : 'N/A')}
              </div>
              <div className="text-sm text-[var(--text-secondary)]">Precisión Promedio</div>
            </div>
            <TrendingUp className="w-8 h-8 text-[var(--color-primary)]" />
          </div>
        </Card>
      </div>

      {/* Orphaned Models Warning */}
      {orphanedModels.length > 0 && (
        <Card className="p-4 bg-orange-50 border-orange-200">
          <div className="flex items-start gap-3">
            <AlertCircle className="w-5 h-5 text-orange-600 mt-0.5" />
            <div>
              <h4 className="font-medium text-orange-900 mb-1">
                Modelos Huérfanos Detectados
              </h4>
              <p className="text-sm text-orange-700">
                Se encontraron {orphanedModels.length} modelos entrenados para ingredientes que ya no existen en el inventario.
                Estos modelos pueden ser eliminados para optimizar el espacio de almacenamiento.
              </p>
            </div>
          </div>
        </Card>
      )}

      {/* Filters */}
      <Card className="p-6">
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <Input
              placeholder="Buscar ingrediente..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <div className="w-full sm:w-48">
            <Select
              value={statusFilter}
              onChange={(value) => setStatusFilter(value as string)}
              options={[
                { value: 'all', label: 'Todos los estados' },
                { value: 'no_model', label: 'Sin modelo' },
                { value: 'active', label: 'Activo' },
                { value: 'training', label: 'Entrenando' },
                { value: 'error', label: 'Error' },
              ]}
            />
          </div>
        </div>
      </Card>

      {/* Models Table */}
      <Card>
        {filteredStatuses.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-12">
            <Brain className="w-12 h-12 text-[var(--color-secondary)] mb-4" />
            <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
              No se encontraron ingredientes
            </h3>
            <p className="text-[var(--text-secondary)] text-center">
              No hay ingredientes que coincidan con los filtros aplicados.
            </p>
          </div>
        ) : (
          <Table
            data={filteredStatuses}
            columns={tableColumns}
          />
        )}
      </Card>

      {/* 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 */}
      <Modal
        isOpen={showModelDetailsModal}
        onClose={() => setShowModelDetailsModal(false)}
        title={`Detalles del Modelo - ${selectedIngredient?.name}`}
        size="lg"
      >
        <div className="space-y-6">
          {selectedIngredient && (
            <ModelDetailsContent
              tenantId={tenantId}
              ingredientId={selectedIngredient.id}
            />
          )}
        </div>
      </Modal>
    </div>
  );
};

// Component for model details content
const ModelDetailsContent: React.FC<{
  tenantId: string;
  ingredientId: string;
}> = ({ tenantId, ingredientId }) => {
  const { data: activeModel } = useActiveModel(tenantId, ingredientId);

  if (!activeModel) {
    return (
      <div className="text-center py-12">
        <AlertCircle className="w-16 h-16 text-[var(--color-warning)] mx-auto mb-4" />
        <h3 className="text-xl font-semibold mb-2 text-[var(--text-primary)]">No hay modelo disponible</h3>
        <p className="text-[var(--text-secondary)] max-w-md mx-auto">
          Este ingrediente no tiene un modelo entrenado disponible. Puedes entrenar uno nuevo usando el botón "Entrenar".
        </p>
      </div>
    );
  }

  const precision = activeModel.training_metrics?.mape
    ? (100 - activeModel.training_metrics.mape).toFixed(1)
    : 'N/A';

  return (
    <div className="space-y-6">
      {/* Model Overview */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl border border-green-200">
          <div className="text-center">
            <div className="text-3xl font-bold text-green-700 mb-1">
              {precision}%
            </div>
            <div className="text-sm font-medium text-green-600">Precisión</div>
          </div>
        </div>

        <div className="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl border border-blue-200">
          <div className="text-center">
            <div className="text-3xl font-bold text-blue-700 mb-1">
              {activeModel.training_metrics?.mae?.toFixed(2) || 'N/A'}
            </div>
            <div className="text-sm font-medium text-blue-600">MAE</div>
          </div>
        </div>

        <div className="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl border border-purple-200">
          <div className="text-center">
            <div className="text-3xl font-bold text-purple-700 mb-1">
              {activeModel.training_metrics?.rmse?.toFixed(2) || 'N/A'}
            </div>
            <div className="text-sm font-medium text-purple-600">RMSE</div>
          </div>
        </div>
      </div>

      {/* Model Information */}
      <Card className="p-6 bg-[var(--bg-primary)]">
        <h4 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
          <Brain className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
          Información del Modelo
        </h4>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-4">
            <div className="flex flex-col">
              <span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
                Creado
              </span>
              <span className="text-sm text-[var(--text-primary)]">
                {new Date(activeModel.created_at).toLocaleString('es-ES', {
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit'
                })}
              </span>
            </div>

            <div className="flex flex-col">
              <span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
                Características usadas
              </span>
              <span className="text-sm text-[var(--text-primary)]">
                {activeModel.features_used?.length || 0} variables
              </span>
            </div>
          </div>

          <div className="space-y-4">
            <div className="flex flex-col">
              <span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
                Período de entrenamiento
              </span>
              <span className="text-sm text-[var(--text-primary)]">
                {activeModel.training_period?.start_date && activeModel.training_period?.end_date
                  ? `${new Date(activeModel.training_period.start_date).toLocaleDateString('es-ES')} - ${new Date(activeModel.training_period.end_date).toLocaleDateString('es-ES')}`
                  : 'No disponible'
                }
              </span>
            </div>

            <div className="flex flex-col">
              <span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
                Hiperparámetros
              </span>
              <span className="text-sm text-[var(--text-primary)]">
                {Object.keys(activeModel.hyperparameters || {}).length} configurados
              </span>
            </div>
          </div>
        </div>
      </Card>

      {/* Features Used */}
      {activeModel.features_used && activeModel.features_used.length > 0 && (
        <Card className="p-6 bg-[var(--bg-primary)]">
          <h4 className="text-lg font-semibold mb-4 text-[var(--text-primary)] flex items-center">
            <TrendingUp className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
            Características del Modelo
          </h4>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
            {activeModel.features_used.map((feature: string, index: number) => (
              <div
                key={index}
                className="bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg px-3 py-2 text-center"
              >
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  {feature.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
                </span>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Training Performance */}
      {activeModel.training_metrics && (
        <Card className="p-6 bg-[var(--bg-primary)]">
          <h4 className="text-lg font-semibold mb-4 text-[var(--text-primary)] flex items-center">
            <CheckCircle className="w-5 h-5 mr-2 text-[var(--color-success)]" />
            Métricas de Rendimiento
          </h4>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
              <div className="text-2xl font-bold text-[var(--color-success)] mb-1">
                {precision}%
              </div>
              <div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">Precisión</div>
            </div>
            <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
              <div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
                {activeModel.training_metrics.mae?.toFixed(2) || 'N/A'}
              </div>
              <div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">MAE</div>
            </div>
            <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
              <div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
                {activeModel.training_metrics.rmse?.toFixed(2) || 'N/A'}
              </div>
              <div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">RMSE</div>
            </div>
            <div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
              <div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
                {activeModel.training_metrics.r2_score?.toFixed(3) || 'N/A'}
              </div>
              <div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">R²</div>
            </div>
          </div>
        </Card>
      )}
    </div>
  );
};

export default ModelsConfigPage;