import React, { useState, useMemo, useCallback } from 'react';
import { clsx } from 'clsx';
import {
  RadialBarChart,
  RadialBar,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Tooltip,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  ComposedChart,
  Line,
  LineChart,
  ReferenceLine,
} from 'recharts';
import { Card, CardHeader, CardBody } from '../../ui';
import { Button } from '../../ui';
import { Badge } from '../../ui';
import { Select } from '../../ui';
// Simplified interfaces for seasonality data
interface SimpleSeasonalData {
  month: string;
  value: number;
  season: string;
}

interface SimpleWeeklyData {
  day: string;
  value: number;
}

export interface SeasonalityIndicatorProps {
  className?: string;
  title?: string;
  loading?: boolean;
  error?: string | null;
}

const SPANISH_MONTHS = [
  'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
  'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
];

const SPANISH_DAYS = [
  'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'
];

const SPANISH_DAYS_SHORT = [
  'L', 'M', 'X', 'J', 'V', 'S', 'D'
];

const SPANISH_SEASONS: Record<string, string> = {
  'spring': 'Primavera',
  'summer': 'Verano',
  'fall': 'Otoño',
  'winter': 'Invierno',
};

const SEASON_COLORS: Record<string, string> = {
  'spring': '#22c55e', // Green
  'summer': '#f59e0b', // Amber
  'fall': '#ea580c', // Orange
  'winter': '#3b82f6', // Blue
};

const SPANISH_HOLIDAYS = [
  { month: 0, name: 'Año Nuevo' },
  { month: 0, name: 'Día de Reyes' },
  { month: 2, name: 'Semana Santa' }, // March/April
  { month: 4, name: 'Día del Trabajador' },
  { month: 7, name: 'Asunción' },
  { month: 9, name: 'Día Nacional' },
  { month: 10, name: 'Todos los Santos' },
  { month: 11, name: 'Constitución' },
  { month: 11, name: 'Navidad' },
];

const INTENSITY_COLORS = [
  '#f3f4f6', // Very low
  '#dbeafe', // Low
  '#bfdbfe', // Medium-low
  '#93c5fd', // Medium
  '#60a5fa', // Medium-high
  '#3b82f6', // High
  '#2563eb', // Very high
  '#1d4ed8', // Extremely high
];

const SeasonalityIndicator: React.FC<SeasonalityIndicatorProps> = ({
  className,
  title = 'Patrones Estacionales',
  loading = false,
  error = null,
}) => {
  // Loading state
  if (loading) {
    return (
      <Card className={className}>
        <CardHeader>
          <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
        </CardHeader>
        <CardBody>
          <div className="flex items-center justify-center h-64">
            <div className="flex items-center space-x-2">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-color-primary"></div>
              <span className="text-text-secondary">Cargando patrones estacionales...</span>
            </div>
          </div>
        </CardBody>
      </Card>
    );
  }

  // Error state
  if (error) {
    return (
      <Card className={className} variant="outlined">
        <CardHeader>
          <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
        </CardHeader>
        <CardBody>
          <div className="flex items-center justify-center h-64">
            <div className="text-center">
              <div className="text-red-500 mb-2">
                <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <p className="text-text-secondary">{error}</p>
            </div>
          </div>
        </CardBody>
      </Card>
    );
  }

  // Placeholder view - no complex seasonality data available yet
  return (
    <Card className={className}>
      <CardHeader>
        <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
      </CardHeader>
      <CardBody>
        <div className="flex items-center justify-center h-64">
          <div className="text-center">
            <div className="text-text-tertiary mb-4">
              <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4m-6 4v10a2 2 0 002 2h4a2 2 0 002-2V11m-6 0a2 2 0 012-2h4a2 2 0 012 2m-6 0h8" />
              </svg>
            </div>
            <p className="text-text-secondary mb-2">Análisis de patrones estacionales</p>
            <p className="text-text-tertiary text-sm">
              Los datos de estacionalidad estarán disponibles próximamente
            </p>
          </div>
        </div>
      </CardBody>
    </Card>
  );
};

export default SeasonalityIndicator;