import React, { useState } from 'react';
import { Calculator, TrendingUp } from 'lucide-react';
import { AnimatedCounter } from './AnimatedCounter';
import { Button } from './Button';

export interface SavingsCalculatorProps {
  /** Default waste per day in units */
  defaultWaste?: number;
  /** Price per unit (e.g., €2 per loaf) */
  pricePerUnit?: number;
  /** Waste reduction percentage with AI (default: 80%) */
  wasteReduction?: number;
  /** Unit name (e.g., "barras", "loaves") */
  unitName?: string;
  /** Currency symbol */
  currency?: string;
  /** Additional CSS classes */
  className?: string;
}

/**
 * SavingsCalculator - Interactive calculator for waste reduction savings
 *
 * Features:
 * - User inputs their current waste
 * - Calculates potential savings with AI
 * - Animated number counters
 * - Daily, monthly, and yearly projections
 * - Visual comparison (before/after)
 *
 * @example
 * <SavingsCalculator
 *   defaultWaste={50}
 *   pricePerUnit={2}
 *   wasteReduction={80}
 *   unitName="barras"
 *   currency="€"
 * />
 */
export const SavingsCalculator: React.FC<SavingsCalculatorProps> = ({
  defaultWaste = 50,
  pricePerUnit = 2,
  wasteReduction = 80, // 80% reduction (from 50 to 10)
  unitName = 'barras',
  currency = '€',
  className = '',
}) => {
  const [wasteUnits, setWasteUnits] = useState<number>(defaultWaste);
  const [showResults, setShowResults] = useState(false);

  // Calculations
  const currentDailyWaste = wasteUnits * pricePerUnit;
  const currentMonthlyWaste = currentDailyWaste * 30;
  const currentYearlyWaste = currentDailyWaste * 365;

  const futureWasteUnits = Math.round(wasteUnits * (1 - wasteReduction / 100));
  const futureDailyWaste = futureWasteUnits * pricePerUnit;
  const futureMonthlyWaste = futureDailyWaste * 30;
  const futureYearlyWaste = futureDailyWaste * 365;

  const monthlySavings = currentMonthlyWaste - futureMonthlyWaste;
  const yearlySavings = currentYearlyWaste - futureYearlyWaste;

  const handleCalculate = () => {
    setShowResults(true);
  };

  return (
    <div className={`bg-gradient-to-br from-[var(--bg-primary)] to-[var(--bg-secondary)] rounded-2xl p-6 md:p-8 border-2 border-[var(--color-primary)] shadow-xl ${className}`}>
      {/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <div className="w-12 h-12 bg-[var(--color-primary)] rounded-xl flex items-center justify-center">
          <Calculator className="w-6 h-6 text-white" />
        </div>
        <div>
          <h3 className="text-xl font-bold text-[var(--text-primary)]">
            Calculadora de Ahorros
          </h3>
          <p className="text-sm text-[var(--text-secondary)]">
            Descubre cuánto podrías ahorrar
          </p>
        </div>
      </div>

      {/* Input */}
      <div className="mb-6">
        <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
          ¿Cuántas {unitName} tiras al día en promedio?
        </label>
        <div className="flex gap-3">
          <input
            type="number"
            value={wasteUnits}
            onChange={(e) => setWasteUnits(Number(e.target.value))}
            min="0"
            max="1000"
            className="flex-1 px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent"
            placeholder="Ej: 50"
          />
          <Button
            onClick={handleCalculate}
            className="bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white"
          >
            Calcular
          </Button>
        </div>
        <p className="text-xs text-[var(--text-tertiary)] mt-2">
          Precio por unidad: {currency}{pricePerUnit}
        </p>
      </div>

      {/* Results */}
      {showResults && wasteUnits > 0 && (
        <div className="space-y-6 animate-in fade-in duration-500">
          {/* Before/After Comparison */}
          <div className="grid md:grid-cols-2 gap-4">
            {/* Before */}
            <div className="bg-red-50 dark:bg-red-900/20 rounded-xl p-4 border-2 border-red-200 dark:border-red-800">
              <p className="text-sm font-medium text-red-700 dark:text-red-400 mb-2">
                ❌ Ahora (Sin IA)
              </p>
              <div className="text-2xl font-bold text-red-900 dark:text-red-100">
                <AnimatedCounter
                  value={currentDailyWaste}
                  prefix={currency}
                  suffix="/día"
                  decimals={0}
                  duration={1.5}
                />
              </div>
              <p className="text-xs text-red-700 dark:text-red-400 mt-1">
                {wasteUnits} {unitName} desperdiciadas
              </p>
            </div>

            {/* After */}
            <div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-4 border-2 border-green-200 dark:border-green-800">
              <p className="text-sm font-medium text-green-700 dark:text-green-400 mb-2">
                ✅ Con Bakery-IA
              </p>
              <div className="text-2xl font-bold text-green-900 dark:text-green-100">
                <AnimatedCounter
                  value={futureDailyWaste}
                  prefix={currency}
                  suffix="/día"
                  decimals={0}
                  duration={1.5}
                  delay={0.3}
                />
              </div>
              <p className="text-xs text-green-700 dark:text-green-400 mt-1">
                {futureWasteUnits} {unitName} desperdiciadas
              </p>
            </div>
          </div>

          {/* Savings Highlight */}
          <div className="bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-xl p-6 text-white">
            <div className="flex items-center gap-3 mb-4">
              <TrendingUp className="w-8 h-8" />
              <h4 className="text-lg font-bold">Tu Ahorro Estimado</h4>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-white/80 text-sm mb-1">Al mes</p>
                <p className="text-3xl font-bold">
                  <AnimatedCounter
                    value={monthlySavings}
                    prefix={currency}
                    decimals={0}
                    duration={2}
                    delay={0.5}
                  />
                </p>
              </div>
              <div>
                <p className="text-white/80 text-sm mb-1">Al año</p>
                <p className="text-3xl font-bold">
                  <AnimatedCounter
                    value={yearlySavings}
                    prefix={currency}
                    decimals={0}
                    duration={2}
                    delay={0.7}
                  />
                </p>
              </div>
            </div>

            <p className="text-white/90 text-sm mt-4">
              🎯 Reducción de desperdicios: {wasteReduction}% (de {wasteUnits} a {futureWasteUnits} {unitName}/día)
            </p>
          </div>

          {/* ROI Message */}
          <div className="bg-[var(--bg-secondary)] rounded-lg p-4 border-l-4 border-[var(--color-primary)]">
            <p className="text-sm font-medium text-[var(--text-primary)]">
              💡 <strong>Recuperas la inversión en menos de 1 semana.</strong>
            </p>
            <p className="text-xs text-[var(--text-secondary)] mt-1">
              Basado en predicciones 92% precisas y reducción de desperdicios de 20-40%.
            </p>
          </div>
        </div>
      )}

      {showResults && wasteUnits === 0 && (
        <div className="text-center py-8">
          <p className="text-[var(--text-secondary)]">
            Introduce una cantidad mayor que 0 para calcular tus ahorros
          </p>
        </div>
      )}
    </div>
  );
};

export default SavingsCalculator;
