import { useState } from 'react';
import { FiDollarSign, FiUsers, FiCheckCircle } from 'react-icons/fi';

interface SellerCalculatorProps {
  onStartCourse: () => void;
}

export const SellerCalculator: React.FC<SellerCalculatorProps> = ({ onStartCourse }) => {
  const [coursePrice, setCoursePrice] = useState<number>(29);
  const [monthlyStudents, setMonthlyStudents] = useState<number>(150);

  const instructorRevenueShare = 0.90; // 90% revenue
  const monthlyRevenue = coursePrice * monthlyStudents * instructorRevenueShare;
  const annualRevenue = monthlyRevenue * 12;

  return (
    <section id="seller-calculator" className="py-16 bg-slate-950/90 border-b border-slate-800/80">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="text-center max-w-3xl mx-auto mb-12 space-y-3">
          <span className="text-xs font-bold uppercase tracking-wider text-violet-400 bg-violet-500/10 px-3 py-1 rounded-full border border-violet-500/20">
            Simulador Interactivo
          </span>
          <h2 className="text-2xl sm:text-4xl font-extrabold text-white">
            Calcula tu potencial de ingresos como instructor
          </h2>
          <p className="text-sm text-slate-400">
            Ajusta el precio de tu curso y la cantidad de alumnos estimados al mes para ver cuánto podrías ganar.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center bg-slate-900/60 border border-slate-800 rounded-3xl p-6 sm:p-10 shadow-2xl backdrop-blur-sm">
          
          {/* Controls column */}
          <div className="lg:col-span-6 space-y-8">
            
            {/* Price Slider */}
            <div className="space-y-3">
              <div className="flex justify-between items-center">
                <label className="text-sm font-bold text-white flex items-center gap-2">
                  <FiDollarSign className="text-violet-400 text-base" /> Precio por curso
                </label>
                <span className="text-xl font-black text-cyan-400 font-mono">
                  ${coursePrice} USD
                </span>
              </div>
              <input
                type="range"
                min="9"
                max="199"
                step="5"
                value={coursePrice}
                onChange={(e) => setCoursePrice(Number(e.target.value))}
                className="w-full h-2.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-violet-500"
              />
              <div className="flex justify-between text-[11px] text-slate-500 font-mono">
                <span>$9 (Básico)</span>
                <span>$99 (Especialización)</span>
                <span>$199 (Master/Bootcamp)</span>
              </div>
            </div>

            {/* Students Slider */}
            <div className="space-y-3">
              <div className="flex justify-between items-center">
                <label className="text-sm font-bold text-white flex items-center gap-2">
                  <FiUsers className="text-violet-400 text-base" /> Alumnos nuevos por mes
                </label>
                <span className="text-xl font-black text-violet-400 font-mono">
                  {monthlyStudents} alumnos
                </span>
              </div>
              <input
                type="range"
                min="10"
                max="1000"
                step="10"
                value={monthlyStudents}
                onChange={(e) => setMonthlyStudents(Number(e.target.value))}
                className="w-full h-2.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-violet-500"
              />
              <div className="flex justify-between text-[11px] text-slate-500 font-mono">
                <span>10 alumnos</span>
                <span>500 alumnos</span>
                <span>1,000+ alumnos</span>
              </div>
            </div>

            {/* Features checkmarks */}
            <div className="space-y-2 pt-2 text-xs text-slate-400">
              <div className="flex items-center gap-2">
                <FiCheckCircle className="text-emerald-400" /> Cobras el 90% del valor de cada venta
              </div>
              <div className="flex items-center gap-2">
                <FiCheckCircle className="text-emerald-400" /> Sin cuotas mensuales ni cobros por alojamiento de video
              </div>
              <div className="flex items-center gap-2">
                <FiCheckCircle className="text-emerald-400" /> Tus derechos de autor y propiedad intelectual 100% protegidos
              </div>
            </div>

          </div>

          {/* Results Display Column */}
          <div className="lg:col-span-6 bg-gradient-to-br from-violet-950/60 to-slate-950 p-8 rounded-2xl border border-violet-500/30 text-center space-y-6 shadow-xl">
            
            <span className="text-xs font-semibold text-violet-300 uppercase tracking-wider">
              Ingresos Estimados Netos
            </span>

            {/* Monthly Estimate */}
            <div>
              <div className="text-4xl sm:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-violet-400 via-purple-300 to-cyan-300 font-mono">
                ${monthlyRevenue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
              </div>
              <p className="text-xs text-slate-400 mt-1 font-medium">al mes proyectado</p>
            </div>

            {/* Annual Estimate */}
            <div className="p-4 rounded-xl bg-slate-900/80 border border-slate-800 flex items-center justify-around">
              <div>
                <span className="text-[11px] text-slate-400">Proyección Anual</span>
                <p className="text-xl font-bold text-white font-mono">
                  ${annualRevenue.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} USD
                </p>
              </div>
              <div className="h-8 w-[1px] bg-slate-800" />
              <div>
                <span className="text-[11px] text-slate-400">Comisión RyCourses</span>
                <p className="text-xl font-bold text-emerald-400 font-mono">Solo 10%</p>
              </div>
            </div>

            <button
              onClick={onStartCourse}
              className="w-full py-3.5 bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-bold rounded-xl text-sm shadow-xl shadow-violet-600/30 transition-all hover:scale-[1.02] cursor-pointer"
            >
              Comenzar a Crear mi Curso Ahora
            </button>

          </div>

        </div>

      </div>
    </section>
  );
};