import React, { useState, useRef } from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  BarController,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import { useTranslation } from 'react-i18next';
import useFormatters from '../../hooks/useFormatters';

// Registrar componentes do Chart.js
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  BarController,
  Title,
  Tooltip,
  Legend
);

const OverpaymentsAnalysis = ({ data, loading, onTransactionClick }) => {
  const { t, i18n } = useTranslation();
  const { currency } = useFormatters();
  const chartRef = useRef(null);
  const [selectedMonth, setSelectedMonth] = useState(null);
  
  // Helper para locale dinâmico
  const getLocale = () => i18n.language === 'pt-BR' ? 'pt-BR' : i18n.language === 'es' ? 'es-ES' : 'en-US';

  if (loading) {
    return (
      <div className="card border-0 h-100" style={{ background: '#0f172a' }}>
        <div className="card-body d-flex justify-content-center align-items-center" style={{ minHeight: '400px' }}>
          <div className="spinner-border text-warning" role="status">
            <span className="visually-hidden">Loading...</span>
          </div>
        </div>
      </div>
    );
  }

  if (!data || !data.transactions || data.transactions.length === 0) {
    return (
      <div className="card border-0 h-100" style={{ background: '#0f172a' }}>
        <div className="card-header border-0 d-flex justify-content-between align-items-center py-3" 
             style={{ background: 'transparent' }}>
          <h6 className="text-white mb-0 d-flex align-items-center">
            <i className="bi bi-graph-up-arrow me-2 text-warning"></i>
            {t('dashboard.overpaymentsAnalysis')}
          </h6>
        </div>
        <div className="card-body d-flex justify-content-center align-items-center" style={{ minHeight: '300px' }}>
          <div className="text-center text-slate-400">
            <i className="bi bi-check-circle fs-1 mb-2 text-success"></i>
            <p className="mb-0">{t('dashboard.noOverpayments')}</p>
          </div>
        </div>
      </div>
    );
  }

  // Agrupar transações por mês (apenas sobrepagamentos - variance > 0)
  const overpaymentsByMonth = {};
  data.transactions
    .filter(t => t.variance > 0)
    .forEach(t => {
      const month = t.effective_date.substring(0, 7);
      if (!overpaymentsByMonth[month]) {
        overpaymentsByMonth[month] = {
          month,
          total: 0,
          count: 0,
          transactions: []
        };
      }
      overpaymentsByMonth[month].total += t.variance;
      overpaymentsByMonth[month].count += 1;
      overpaymentsByMonth[month].transactions.push(t);
    });

  // Criar array de meses ordenados
  const monthsData = Object.values(overpaymentsByMonth).sort((a, b) => a.month.localeCompare(b.month));
  
  // Calcular total geral
  const totalOverpayment = monthsData.reduce((sum, m) => sum + m.total, 0);

  // Labels do gráfico formatados
  const labels = monthsData.map(d => {
    const [year, month] = d.month.split('-');
    const date = new Date(year, month - 1);
    return date.toLocaleDateString(getLocale(), { month: 'short', year: 'numeric' });
  });

  const chartData = {
    labels,
    datasets: [
      {
        label: t('dashboard.overpayment'),
        data: monthsData.map(d => d.total),
        backgroundColor: monthsData.map((_, i) => 
          selectedMonth === i ? 'rgba(251, 191, 36, 1)' : 'rgba(251, 191, 36, 0.7)'
        ),
        borderColor: 'rgba(251, 191, 36, 1)',
        borderWidth: 0,
        borderRadius: 4,
        hoverBackgroundColor: 'rgba(251, 191, 36, 1)',
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    onClick: (event, elements) => {
      if (elements.length > 0) {
        const index = elements[0].index;
        setSelectedMonth(selectedMonth === index ? null : index);
      }
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        backgroundColor: 'rgba(15, 23, 42, 0.95)',
        titleColor: '#fbbf24',
        bodyColor: '#f1f5f9',
        borderColor: '#fbbf24',
        borderWidth: 1,
        padding: 12,
        cornerRadius: 8,
        displayColors: false,
        callbacks: {
          title: (items) => {
            const idx = items[0].dataIndex;
            return monthsData[idx]?.month || '';
          },
          label: (context) => {
            const idx = context.dataIndex;
            const monthData = monthsData[idx];
            return [
              `${t('dashboard.overpayment')}: ${currency(monthData.total, 'BRL')}`,
              `${t('dashboard.transactions')}: ${monthData.count}`
            ];
          },
        },
      },
    },
    scales: {
      x: {
        grid: {
          display: false,
        },
        ticks: {
          color: '#64748b',
          font: { size: 11 },
        },
      },
      y: {
        grid: {
          color: 'rgba(100, 116, 139, 0.1)',
          drawBorder: false,
        },
        ticks: {
          color: '#64748b',
          font: { size: 11 },
          callback: (value) => `+${currency(value, 'BRL').replace('R$', '').trim()}`,
        },
      },
    },
  };

  // Dados do mês selecionado
  const selectedMonthData = selectedMonth !== null ? monthsData[selectedMonth] : null;

  return (
    <div className="card border-0 h-100" style={{ background: '#0f172a' }}>
      {/* Header */}
      <div className="card-header border-0 d-flex justify-content-between align-items-center py-3" 
           style={{ background: 'transparent', borderBottom: '1px solid rgba(251, 191, 36, 0.2)' }}>
        <h6 className="text-white mb-0 d-flex align-items-center">
          <i className="bi bi-graph-up-arrow me-2 text-warning"></i>
          {t('dashboard.overpaymentsAnalysis')} ({data.period?.months || 12} {t('common.months')})
        </h6>
        <span className="badge bg-warning text-dark px-3 py-2">
          <i className="bi bi-arrow-up-right me-1"></i>
          Total: {currency(totalOverpayment, 'BRL')}
        </span>
      </div>

      <div className="card-body">
        {/* Instrução */}
        <p className="text-slate-500 small mb-3">
          <i className="bi bi-info-circle me-1"></i>
          {t('dashboard.clickBarToSeeDetails')}
        </p>

        {/* Gráfico */}
        <div style={{ height: '220px' }}>
          <Bar ref={chartRef} data={chartData} options={options} />
        </div>

        {/* Painel de detalhes do mês selecionado */}
        {selectedMonthData && (
          <div className="mt-4 p-3 rounded-3" style={{ 
            background: 'linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%)',
            border: '1px solid rgba(251, 191, 36, 0.3)'
          }}>
            {/* Header do painel */}
            <div className="d-flex justify-content-between align-items-center mb-3">
              <h6 className="text-warning mb-0 d-flex align-items-center">
                <i className="bi bi-calendar-event me-2"></i>
                {t('dashboard.overpayments')} - {(() => {
                  const [year, month] = selectedMonthData.month.split('-');
                  return new Date(year, month - 1).toLocaleDateString(getLocale(), { month: 'long', year: 'numeric' });
                })()}
              </h6>
              <button 
                className="btn btn-outline-warning btn-sm"
                onClick={() => setSelectedMonth(null)}
              >
                <i className="bi bi-x-lg me-1"></i>
                {t('common.close')}
              </button>
            </div>

            {/* Resumo do mês */}
            <div className="row g-3 mb-3">
              <div className="col-4">
                <div className="text-center p-2 rounded" style={{ background: 'rgba(0,0,0,0.2)' }}>
                  <small className="text-slate-400 d-block text-uppercase" style={{ fontSize: '10px' }}>
                    {t('dashboard.totalOverpaid')}
                  </small>
                  <span className="text-warning fw-bold fs-5">
                    +{currency(selectedMonthData.total, 'BRL')}
                  </span>
                </div>
              </div>
              <div className="col-4">
                <div className="text-center p-2 rounded" style={{ background: 'rgba(0,0,0,0.2)' }}>
                  <small className="text-slate-400 d-block text-uppercase" style={{ fontSize: '10px' }}>
                    {t('dashboard.transactions')}
                  </small>
                  <span className="text-white fw-bold fs-5">
                    {selectedMonthData.count}
                  </span>
                </div>
              </div>
              <div className="col-4">
                <div className="text-center p-2 rounded" style={{ background: 'rgba(0,0,0,0.2)' }}>
                  <small className="text-slate-400 d-block text-uppercase" style={{ fontSize: '10px' }}>
                    {t('dashboard.avgPerTransaction')}
                  </small>
                  <span className="text-warning fw-bold fs-5">
                    +{currency(selectedMonthData.total / selectedMonthData.count, 'BRL')}
                  </span>
                </div>
              </div>
            </div>

            {/* Tabela de transações */}
            <div className="table-responsive" style={{ maxHeight: '200px', overflowY: 'auto' }}>
              <table className="table table-sm mb-0" style={{ '--bs-table-bg': 'transparent' }}>
                <thead style={{ position: 'sticky', top: 0, background: '#0f172a' }}>
                  <tr>
                    <th className="text-slate-400 small border-0 text-uppercase" style={{ fontSize: '10px' }}>{t('common.date')}</th>
                    <th className="text-slate-400 small border-0 text-uppercase" style={{ fontSize: '10px' }}>{t('common.description')}</th>
                    <th className="text-slate-400 small border-0 text-uppercase" style={{ fontSize: '10px' }}>{t('dashboard.category')}</th>
                    <th className="text-slate-400 small border-0 text-end text-uppercase" style={{ fontSize: '10px' }}>{t('dashboard.plannedValue')}</th>
                    <th className="text-slate-400 small border-0 text-end text-uppercase" style={{ fontSize: '10px' }}>{t('dashboard.actualValue')}</th>
                    <th className="text-slate-400 small border-0 text-end text-uppercase" style={{ fontSize: '10px' }}>{t('dashboard.difference')}</th>
                    <th className="text-slate-400 small border-0 text-center text-uppercase" style={{ fontSize: '10px' }}>{t('dashboard.delay')}</th>
                    <th className="text-slate-400 small border-0 text-end text-uppercase" style={{ fontSize: '10px' }}>%</th>
                  </tr>
                </thead>
                <tbody>
                  {selectedMonthData.transactions.map((tx) => (
                    <tr 
                      key={tx.id}
                      className="cursor-pointer"
                      onClick={() => onTransactionClick?.(tx.id)}
                      style={{ cursor: 'pointer' }}
                    >
                      <td className="text-slate-300 small border-0">
                        {new Date(tx.effective_date).toLocaleDateString(getLocale())}
                      </td>
                      <td className="border-0">
                        <span className="text-white small">
                          {tx.description.length > 30 ? tx.description.substring(0, 30) + '...' : tx.description}
                        </span>
                      </td>
                      <td className="border-0">
                        {tx.category ? (
                          <span 
                            className="badge rounded-pill small"
                            style={{ 
                              background: tx.category.color || '#6b7280',
                              fontSize: '10px'
                            }}
                          >
                            {tx.category.name}
                          </span>
                        ) : (
                          <span className="text-slate-500 small">-</span>
                        )}
                      </td>
                      <td className="text-slate-400 small text-end border-0">
                        {currency(tx.planned_amount, 'BRL')}
                      </td>
                      <td className="text-white small text-end border-0">
                        {currency(tx.actual_amount, 'BRL')}
                      </td>
                      <td className="text-end border-0">
                        <span className="badge bg-warning text-dark small">
                          <i className="bi bi-arrow-up me-1" style={{ fontSize: '10px' }}></i>
                          +{currency(tx.variance, 'BRL')}
                        </span>
                      </td>
                      <td className="text-center border-0">
                        {tx.delay_days !== null && tx.delay_days !== 0 ? (
                          <span 
                            className="badge small" 
                            style={{ 
                              fontSize: '10px',
                              background: tx.delay_days > 0 ? 'rgba(239, 68, 68, 0.8)' : 'rgba(34, 197, 94, 0.8)'
                            }}
                          >
                            <i className={`bi bi-clock${tx.delay_days > 0 ? '-history' : ''} me-1`} style={{ fontSize: '9px' }}></i>
                            {tx.delay_days > 0 ? `+${tx.delay_days}d` : `${tx.delay_days}d`}
                          </span>
                        ) : (
                          <span className="text-slate-500 small">-</span>
                        )}
                      </td>
                      <td className="text-warning small text-end border-0">
                        +{tx.variance_percent}%
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Dica */}
        {!selectedMonthData && monthsData.length > 0 && (
          <div className="mt-3 p-2 rounded" style={{ 
            background: 'rgba(251, 191, 36, 0.1)',
            borderLeft: '3px solid #fbbf24'
          }}>
            <small className="text-slate-300">
              <i className="bi bi-lightbulb text-warning me-2"></i>
              <strong className="text-warning">{t('dashboard.tip')}:</strong> {t('dashboard.overpaymentTip')}
            </small>
          </div>
        )}
      </div>
    </div>
  );
};

export default OverpaymentsAnalysis;
