import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { budgetService, categoryService } from '../services/api';
import useFormatters from '../hooks/useFormatters';
import ConfirmModal from '../components/ConfirmModal';

const Budgets = () => {
  const { t } = useTranslation();
  const { currency } = useFormatters();
  
  const [loading, setLoading] = useState(true);
  const [budgets, setBudgets] = useState([]);
  const [categories, setCategories] = useState([]);
  const [availableCategories, setAvailableCategories] = useState([]);
  const [year, setYear] = useState(new Date().getFullYear());
  const [month, setMonth] = useState(new Date().getMonth() + 1);
  const [showModal, setShowModal] = useState(false);
  const [editingBudget, setEditingBudget] = useState(null);
  const [deleteBudget, setDeleteBudget] = useState(null);
  const [yearSummary, setYearSummary] = useState(null);
  const [formData, setFormData] = useState({
    category_id: '',
    amount: '',
  });

  const months = [
    { value: 1, label: 'Enero' },
    { value: 2, label: 'Febrero' },
    { value: 3, label: 'Marzo' },
    { value: 4, label: 'Abril' },
    { value: 5, label: 'Mayo' },
    { value: 6, label: 'Junio' },
    { value: 7, label: 'Julio' },
    { value: 8, label: 'Agosto' },
    { value: 9, label: 'Septiembre' },
    { value: 10, label: 'Octubre' },
    { value: 11, label: 'Noviembre' },
    { value: 12, label: 'Diciembre' },
  ];

  useEffect(() => {
    loadData();
  }, [year, month]);

  const loadData = async () => {
    setLoading(true);
    try {
      const [budgetsData, categoriesData, availableData, summaryData] = await Promise.all([
        budgetService.getAll({ year, month }),
        categoryService.getAll(),
        budgetService.getAvailableCategories(year, month),
        budgetService.getYearSummary(year),
      ]);
      setBudgets(budgetsData);
      setCategories(categoriesData.filter(c => c.type === 'debit'));
      setAvailableCategories(availableData);
      setYearSummary(summaryData);
    } catch (error) {
      console.error('Error loading budgets:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const data = {
        ...formData,
        year,
        month,
      };
      
      if (editingBudget) {
        await budgetService.update(editingBudget.id, data);
      } else {
        await budgetService.create(data);
      }
      setShowModal(false);
      setEditingBudget(null);
      resetForm();
      loadData();
    } catch (error) {
      console.error('Error saving budget:', error);
    }
  };

  const handleDelete = async () => {
    if (!deleteBudget) return;
    try {
      await budgetService.delete(deleteBudget.id);
      setDeleteBudget(null);
      loadData();
    } catch (error) {
      console.error('Error deleting budget:', error);
    }
  };

  const handleEdit = (budget) => {
    setEditingBudget(budget);
    setFormData({
      category_id: budget.category_id,
      amount: budget.amount,
    });
    setShowModal(true);
  };

  const handleCopyToNextMonth = async () => {
    try {
      await budgetService.copyToNextMonth(year, month);
      // Move to next month view
      if (month === 12) {
        setYear(year + 1);
        setMonth(1);
      } else {
        setMonth(month + 1);
      }
    } catch (error) {
      console.error('Error copying budgets:', error);
    }
  };

  const resetForm = () => {
    setFormData({
      category_id: '',
      amount: '',
    });
  };

  const openNewBudget = () => {
    setEditingBudget(null);
    resetForm();
    setShowModal(true);
  };

  const getProgressColor = (percentage) => {
    if (percentage >= 100) return '#ef4444';
    if (percentage >= 80) return '#f59e0b';
    if (percentage >= 60) return '#eab308';
    return '#10b981';
  };

  // Calculate totals
  const totals = {
    budgeted: budgets.reduce((sum, b) => sum + parseFloat(b.amount), 0),
    spent: budgets.reduce((sum, b) => sum + parseFloat(b.spent_amount || 0), 0),
  };
  totals.remaining = totals.budgeted - totals.spent;
  totals.percentage = totals.budgeted > 0 ? (totals.spent / totals.budgeted) * 100 : 0;

  if (loading) {
    return (
      <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '400px' }}>
        <div className="spinner-border text-primary" role="status">
          <span className="visually-hidden">{t('common.loading')}</span>
        </div>
      </div>
    );
  }

  return (
    <div className="budgets-container">
      {/* Header */}
      <div className="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h4 className="text-white mb-1 fw-bold">
            <i className="bi bi-wallet2 me-2"></i>
            {t('budgets.title')}
          </h4>
          <p className="text-slate-400 mb-0 small">{t('budgets.subtitle')}</p>
        </div>
        <div className="d-flex gap-2">
          <button 
            className="btn btn-outline-secondary btn-sm"
            onClick={handleCopyToNextMonth}
            title="Copiar presupuestos al próximo mes"
          >
            <i className="bi bi-copy me-1"></i>
            {t('budgets.copyToNext')}
          </button>
          <button className="btn btn-primary" onClick={openNewBudget}>
            <i className="bi bi-plus-lg me-1"></i>
            {t('budgets.addBudget')}
          </button>
        </div>
      </div>

      {/* Month/Year Selector */}
      <div className="card border-0 mb-4" style={{ background: '#0f172a' }}>
        <div className="card-body py-2">
          <div className="row align-items-center">
            <div className="col-auto">
              <button 
                className="btn btn-outline-secondary btn-sm"
                onClick={() => {
                  if (month === 1) {
                    setYear(year - 1);
                    setMonth(12);
                  } else {
                    setMonth(month - 1);
                  }
                }}
              >
                <i className="bi bi-chevron-left"></i>
              </button>
            </div>
            <div className="col text-center">
              <select 
                className="form-select form-select-sm d-inline-block w-auto bg-dark border-secondary text-white me-2"
                value={month}
                onChange={(e) => setMonth(parseInt(e.target.value))}
              >
                {months.map(m => (
                  <option key={m.value} value={m.value}>{m.label}</option>
                ))}
              </select>
              <select 
                className="form-select form-select-sm d-inline-block w-auto bg-dark border-secondary text-white"
                value={year}
                onChange={(e) => setYear(parseInt(e.target.value))}
              >
                {[2024, 2025, 2026].map(y => (
                  <option key={y} value={y}>{y}</option>
                ))}
              </select>
            </div>
            <div className="col-auto">
              <button 
                className="btn btn-outline-secondary btn-sm"
                onClick={() => {
                  if (month === 12) {
                    setYear(year + 1);
                    setMonth(1);
                  } else {
                    setMonth(month + 1);
                  }
                }}
              >
                <i className="bi bi-chevron-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Summary Cards */}
      <div className="row g-3 mb-4">
        <div className="col-md-3">
          <div className="card border-0" style={{ background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' }}>
            <div className="card-body text-white py-3">
              <small className="opacity-75">{t('budgets.totalBudgeted')}</small>
              <h4 className="mb-0">{currency(totals.budgeted)}</h4>
            </div>
          </div>
        </div>
        <div className="col-md-3">
          <div className="card border-0" style={{ background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)' }}>
            <div className="card-body text-white py-3">
              <small className="opacity-75">{t('budgets.totalSpent')}</small>
              <h4 className="mb-0">{currency(totals.spent)}</h4>
            </div>
          </div>
        </div>
        <div className="col-md-3">
          <div 
            className="card border-0" 
            style={{ 
              background: totals.remaining >= 0 
                ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)' 
                : 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)'
            }}
          >
            <div className="card-body text-white py-3">
              <small className="opacity-75">{t('budgets.remaining')}</small>
              <h4 className="mb-0">{currency(totals.remaining)}</h4>
            </div>
          </div>
        </div>
        <div className="col-md-3">
          <div className="card border-0" style={{ background: '#1e293b' }}>
            <div className="card-body py-3">
              <small className="text-slate-400">{t('budgets.usage')}</small>
              <h4 className="mb-1" style={{ color: getProgressColor(totals.percentage) }}>
                {totals.percentage.toFixed(1)}%
              </h4>
              <div className="progress bg-slate-700" style={{ height: '4px' }}>
                <div 
                  className="progress-bar"
                  style={{ 
                    width: `${Math.min(totals.percentage, 100)}%`,
                    background: getProgressColor(totals.percentage)
                  }}
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Budgets List */}
      {budgets.length === 0 ? (
        <div className="card border-0 text-center py-5" style={{ background: '#0f172a' }}>
          <div className="card-body">
            <i className="bi bi-wallet2 text-slate-500" style={{ fontSize: '4rem' }}></i>
            <h5 className="text-white mt-3">{t('budgets.noBudgets')}</h5>
            <p className="text-slate-400">{t('budgets.noBudgetsDescription')}</p>
            <button className="btn btn-primary" onClick={openNewBudget}>
              <i className="bi bi-plus-lg me-1"></i>
              {t('budgets.createFirst')}
            </button>
          </div>
        </div>
      ) : (
        <div className="row g-3">
          {budgets.map(budget => {
            const spent = parseFloat(budget.spent_amount || 0);
            const amount = parseFloat(budget.amount);
            const percentage = budget.usage_percentage || ((spent / amount) * 100);
            const remaining = budget.remaining_amount || (amount - spent);
            const isExceeded = spent > amount;

            return (
              <div key={budget.id} className="col-md-6 col-lg-4">
                <div className="card border-0 h-100" style={{ background: '#0f172a' }}>
                  <div className="card-body">
                    {/* Header */}
                    <div className="d-flex align-items-center justify-content-between mb-3">
                      <div className="d-flex align-items-center">
                        <div 
                          className="rounded-circle p-2 me-2"
                          style={{ background: `${budget.category?.color || '#3b82f6'}20` }}
                        >
                          <i 
                            className={`bi ${budget.category?.icon || 'bi-tag'}`}
                            style={{ color: budget.category?.color || '#3b82f6' }}
                          ></i>
                        </div>
                        <div>
                          <h6 className="text-white mb-0">{budget.category?.name || 'Sin categoría'}</h6>
                        </div>
                      </div>
                      <div className="dropdown">
                        <button 
                          className="btn btn-link text-slate-400 p-0"
                          data-bs-toggle="dropdown"
                        >
                          <i className="bi bi-three-dots-vertical"></i>
                        </button>
                        <ul className="dropdown-menu dropdown-menu-dark dropdown-menu-end">
                          <li>
                            <button 
                              className="dropdown-item"
                              onClick={() => handleEdit(budget)}
                            >
                              <i className="bi bi-pencil me-2"></i>
                              {t('common.edit')}
                            </button>
                          </li>
                          <li>
                            <button 
                              className="dropdown-item text-danger"
                              onClick={() => setDeleteBudget(budget)}
                            >
                              <i className="bi bi-trash me-2"></i>
                              {t('common.delete')}
                            </button>
                          </li>
                        </ul>
                      </div>
                    </div>

                    {/* Progress */}
                    <div className="mb-3">
                      <div className="d-flex justify-content-between mb-1">
                        <span className="text-slate-400 small">{t('budgets.spent')}</span>
                        <span className="text-slate-400 small">{t('budgets.budgeted')}</span>
                      </div>
                      <div className="d-flex justify-content-between mb-2">
                        <span className={`fw-bold ${isExceeded ? 'text-danger' : 'text-white'}`}>
                          {currency(spent)}
                        </span>
                        <span className="text-white">{currency(amount)}</span>
                      </div>
                      <div className="progress bg-slate-700" style={{ height: '8px' }}>
                        <div 
                          className="progress-bar"
                          style={{ 
                            width: `${Math.min(percentage, 100)}%`,
                            background: getProgressColor(percentage)
                          }}
                        ></div>
                      </div>
                    </div>

                    {/* Stats */}
                    <div className="d-flex justify-content-between">
                      <div>
                        <small className="text-slate-400 d-block">{t('budgets.remaining')}</small>
                        <span className={`fw-bold ${remaining >= 0 ? 'text-success' : 'text-danger'}`}>
                          {currency(remaining)}
                        </span>
                      </div>
                      <div className="text-end">
                        <small className="text-slate-400 d-block">{t('budgets.usage')}</small>
                        <span 
                          className="fw-bold"
                          style={{ color: getProgressColor(percentage) }}
                        >
                          {percentage.toFixed(1)}%
                        </span>
                      </div>
                    </div>

                    {/* Warning */}
                    {isExceeded && (
                      <div className="alert alert-danger py-2 mt-3 mb-0">
                        <small>
                          <i className="bi bi-exclamation-triangle me-1"></i>
                          {t('budgets.exceeded')} {currency(Math.abs(remaining))}
                        </small>
                      </div>
                    )}
                    {!isExceeded && percentage >= 80 && (
                      <div className="alert alert-warning py-2 mt-3 mb-0">
                        <small>
                          <i className="bi bi-exclamation-circle me-1"></i>
                          {t('budgets.almostExceeded')}
                        </small>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Year Summary */}
      {yearSummary && yearSummary.length > 0 && (
        <div className="mt-4">
          <h5 className="text-white mb-3">
            <i className="bi bi-calendar3 me-2"></i>
            {t('budgets.yearSummary')} {year}
          </h5>
          <div className="card border-0" style={{ background: '#0f172a' }}>
            <div className="card-body p-0">
              <div className="table-responsive">
                <table className="table table-dark table-hover mb-0">
                  <thead>
                    <tr>
                      <th>{t('budgets.month')}</th>
                      <th className="text-end">{t('budgets.budgeted')}</th>
                      <th className="text-end">{t('budgets.spent')}</th>
                      <th className="text-end">{t('budgets.remaining')}</th>
                      <th className="text-end">{t('budgets.usage')}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {yearSummary.map(item => {
                      const monthName = months.find(m => m.value === item.month)?.label || item.month;
                      const isCurrentMonth = item.month === new Date().getMonth() + 1 && year === new Date().getFullYear();
                      
                      return (
                        <tr 
                          key={item.month}
                          className={isCurrentMonth ? 'table-primary' : ''}
                          style={{ cursor: 'pointer' }}
                          onClick={() => setMonth(item.month)}
                        >
                          <td>
                            {monthName}
                            {isCurrentMonth && (
                              <span className="badge bg-primary ms-2">Actual</span>
                            )}
                          </td>
                          <td className="text-end">{currency(item.budgeted)}</td>
                          <td className="text-end text-danger">{currency(item.spent)}</td>
                          <td className={`text-end ${item.remaining >= 0 ? 'text-success' : 'text-danger'}`}>
                            {currency(item.remaining)}
                          </td>
                          <td className="text-end">
                            <span 
                              className="badge"
                              style={{ 
                                background: getProgressColor(item.percentage),
                                minWidth: '60px'
                              }}
                            >
                              {item.percentage.toFixed(1)}%
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Budget Form Modal */}
      {showModal && (
        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
          <div className="modal-dialog modal-dialog-centered modal-sm">
            <div className="modal-content border-0" style={{ background: '#1e293b' }}>
              <div className="modal-header border-0">
                <h5 className="modal-title text-white">
                  <i className={`bi ${editingBudget ? 'bi-pencil' : 'bi-plus-circle'} me-2`}></i>
                  {editingBudget ? t('budgets.editBudget') : t('budgets.newBudget')}
                </h5>
                <button 
                  type="button" 
                  className="btn-close btn-close-white" 
                  onClick={() => setShowModal(false)}
                ></button>
              </div>
              <form onSubmit={handleSubmit}>
                <div className="modal-body">
                  <p className="text-slate-400 small mb-3">
                    {months.find(m => m.value === month)?.label} {year}
                  </p>

                  {/* Category */}
                  <div className="mb-3">
                    <label className="form-label text-slate-400">{t('budgets.category')} *</label>
                    <select
                      className="form-select bg-dark border-secondary text-white"
                      value={formData.category_id}
                      onChange={(e) => setFormData({...formData, category_id: e.target.value})}
                      required
                      disabled={editingBudget}
                    >
                      <option value="">{t('budgets.selectCategory')}</option>
                      {(editingBudget ? categories : availableCategories).map(cat => (
                        <option key={cat.id} value={cat.id}>
                          {cat.name}
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* Amount */}
                  <div className="mb-3">
                    <label className="form-label text-slate-400">{t('budgets.amount')} *</label>
                    <div className="input-group">
                      <span className="input-group-text bg-dark border-secondary text-white">€</span>
                      <input
                        type="number"
                        step="0.01"
                        className="form-control bg-dark border-secondary text-white"
                        value={formData.amount}
                        onChange={(e) => setFormData({...formData, amount: e.target.value})}
                        required
                      />
                    </div>
                  </div>
                </div>
                <div className="modal-footer border-0">
                  <button 
                    type="button" 
                    className="btn btn-outline-secondary"
                    onClick={() => setShowModal(false)}
                  >
                    {t('common.cancel')}
                  </button>
                  <button type="submit" className="btn btn-primary">
                    <i className="bi bi-check-lg me-1"></i>
                    {t('common.save')}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      {/* Delete Confirmation */}
      <ConfirmModal
        show={!!deleteBudget}
        onClose={() => setDeleteBudget(null)}
        onConfirm={handleDelete}
        title={t('budgets.deleteBudget')}
        message={t('budgets.deleteConfirm', { category: deleteBudget?.category?.name })}
        confirmText={t('common.delete')}
        variant="danger"
      />
    </div>
  );
};

export default Budgets;
