import React, { useState } from 'react';
import { Calculator, FileText, Sparkles } from 'lucide-react';

export default function CalculadoraDibujoArquitectonico() {
  const [precioBase, setPrecioBase] = useState('');
  const [materialesProveidos, setMaterialesProveidos] = useState(true);
  const [materiales, setMateriales] = useState({
    papel: false,
    plumones: false,
    cinta: false,
    premium: false
  });
  const [escala, setEscala] = useState('1:100');
  const [tiposDibujo, setTiposDibujo] = useState({});
  const [complejidad, setComplejidad] = useState('medio');
  const [tiempoHoras, setTiempoHoras] = useState('');
  const [color, setColor] = useState('bn');
  const [datos, setDatos] = useState('completos');
  const [tipoEncargo, setTipoEncargo] = useState('suelto');
  const [dificultad, setDificultad] = useState('medio');
  const [mostrarResultado, setMostrarResultado] = useState(false);

  const escalaValores = {
    '1:200': 8,
    '1:100': 6,
    '1:50': 4,
    '1:20': 2,
    '1:10': 2
  };

  const tipoDibujoValores = {
    'planta': 2,
    'elevacion': 3,
    'corte': 4,
    'axonometria': 5,
    'perspectiva1': 6,
    'perspectiva2': 8,
    'perspectiva3': 10
  };

  const complejidadValores = {
    'simple': 0,
    'medio': 5,
    'complejo': 10,
    'muy_complejo': 15
  };

  const colorValores = {
    'bn': 0,
    'planos': 4,
    'sombras': 7,
    'render': 10
  };

  const datosValores = {
    'completos': 0,
    'incompletos': 3,
    'sin_datos': 8
  };

  const encargoValores = {
    'suelto': 0,
    'anteproyecto': 8,
    'proyecto': 10
  };

  const multiplicadorValores = {
    'facil': 1.0,
    'medio': 1.2,
    'dificil': 1.5,
    'muy_dificil': 1.8
  };

  const actualizarCantidad = (tipo, cantidad) => {
    const cant = parseInt(cantidad) || 0;
    if (cant <= 0) {
      const nuevosTipos = { ...tiposDibujo };
      delete nuevosTipos[tipo];
      setTiposDibujo(nuevosTipos);
    } else {
      setTiposDibujo({ ...tiposDibujo, [tipo]: cant });
    }
  };

  const calcularPrecio = () => {
    const base = parseFloat(precioBase) || 0;
    
    let costoMateriales = 0;
    if (!materialesProveidos) {
      if (materiales.papel) costoMateriales += 3;
      if (materiales.plumones) costoMateriales += 4;
      if (materiales.cinta) costoMateriales += 2;
      if (materiales.premium) costoMateriales += 6;
    }

    const costoEscala = escalaValores[escala];
    
    const costoTiposDibujo = Object.entries(tiposDibujo).reduce((sum, [tipo, cantidad]) => 
      sum + (tipoDibujoValores[tipo] * cantidad), 0
    );

    const costoComplejidad = complejidadValores[complejidad];
    
    const horas = parseFloat(tiempoHoras) || 0;
    const costoTiempo = horas * 2;

    const costoColor = colorValores[color];
    const costoDatos = datosValores[datos];
    const costoEncargo = encargoValores[tipoEncargo];

    const subtotal = base + costoMateriales + costoEscala + costoTiposDibujo + 
                     costoComplejidad + costoTiempo + costoColor + costoDatos + costoEncargo;

    const multiplicador = multiplicadorValores[dificultad];
    const precioFinal = subtotal * multiplicador;

    return {
      base,
      costoMateriales,
      costoEscala,
      costoTiposDibujo,
      costoComplejidad,
      costoTiempo,
      costoColor,
      costoDatos,
      costoEncargo,
      subtotal,
      multiplicador,
      precioFinal,
      horas
    };
  };

  const handleCalcular = () => {
    if (!precioBase || Object.keys(tiposDibujo).length === 0 || !tiempoHoras) {
      alert('Por favor completa al menos: Precio base, Tipo de dibujo (con cantidad) y Tiempo estimado');
      return;
    }
    setMostrarResultado(true);
  };

  const resultado = mostrarResultado ? calcularPrecio() : null;

  return (
    <div className="min-h-screen p-4 md:p-8" style={{
      background: 'linear-gradient(135deg, #E0F4FF 0%, #FFE5F1 50%, #E5DEFF 100%)',
      fontFamily: '"Comic Sans MS", "Trebuchet MS", cursive'
    }}>
      {/* Patrón de fondo decorativo */}
      <div className="fixed inset-0 opacity-10 pointer-events-none" style={{
        backgroundImage: 'radial-gradient(circle, #000 1px, transparent 1px)',
        backgroundSize: '20px 20px'
      }}></div>

      <div className="max-w-4xl mx-auto relative z-10">
        {/* Header con estilo Y2K */}
        <div className="text-center mb-6">
          <div className="inline-block bg-gradient-to-r from-pink-200 via-purple-200 to-blue-200 p-1 rounded-full mb-4">
            <div className="bg-white rounded-full px-6 py-2 flex items-center gap-3">
              <Sparkles className="w-6 h-6 text-pink-400" />
              <h1 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent">
                ✿ Calculadora de Precios ✿
              </h1>
              <Sparkles className="w-6 h-6 text-blue-400" />
            </div>
          </div>
          <p className="text-purple-600 font-semibold text-lg">~ Dibujo Arquitectónico ~</p>
        </div>

        {/* Contenedor principal con bordes punteados */}
        <div className="bg-white/90 backdrop-blur rounded-3xl shadow-2xl p-6 md:p-8 border-4 border-dashed border-purple-300">
          
          <div className="space-y-5">
            {/* Precio Base */}
            <div className="bg-gradient-to-r from-blue-100 to-cyan-100 p-4 rounded-2xl border-2 border-blue-300">
              <label className="block text-sm font-bold text-blue-800 mb-2 flex items-center gap-2">
                <span className="bg-blue-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">1</span>
                Precio Base (S/.) *
              </label>
              <input
                type="number"
                value={precioBase}
                onChange={(e) => setPrecioBase(e.target.value)}
                className="w-full px-4 py-3 border-3 border-blue-400 rounded-xl focus:ring-4 focus:ring-blue-300 focus:border-blue-500 bg-white shadow-inner font-bold"
                placeholder="Ej: 50"
                step="0.01"
              />
            </div>

            {/* Materiales */}
            <div className="bg-gradient-to-r from-pink-100 to-rose-100 p-4 rounded-2xl border-2 border-pink-300">
              <label className="block text-sm font-bold text-pink-800 mb-3 flex items-center gap-2">
                <span className="bg-pink-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">2</span>
                Materiales
              </label>
              <div className="space-y-3">
                <label className="flex items-center gap-3 cursor-pointer bg-white/70 p-3 rounded-xl hover:bg-white transition-all">
                  <input
                    type="radio"
                    checked={materialesProveidos}
                    onChange={() => setMaterialesProveidos(true)}
                    className="w-5 h-5 text-pink-600"
                  />
                  <span className="font-semibold">Me dan materiales (+S/.0)</span>
                </label>
                <label className="flex items-center gap-3 cursor-pointer bg-white/70 p-3 rounded-xl hover:bg-white transition-all">
                  <input
                    type="radio"
                    checked={!materialesProveidos}
                    onChange={() => setMaterialesProveidos(false)}
                    className="w-5 h-5 text-pink-600"
                  />
                  <span className="font-semibold">Yo pongo materiales</span>
                </label>
                
                {!materialesProveidos && (
                  <div className="ml-6 space-y-2 p-4 bg-white/90 rounded-xl border-2 border-dashed border-pink-300">
                    {[
                      { key: 'papel', label: 'Papel especial (+S/.3)' },
                      { key: 'plumones', label: 'Plumones/marcadores (+S/.4)' },
                      { key: 'cinta', label: 'Cinta/herramientas (+S/.2)' },
                      { key: 'premium', label: 'Material premium (+S/.6)' }
                    ].map(mat => (
                      <label key={mat.key} className="flex items-center gap-3 cursor-pointer hover:bg-pink-50 p-2 rounded-lg transition-all">
                        <input
                          type="checkbox"
                          checked={materiales[mat.key]}
                          onChange={(e) => setMateriales({...materiales, [mat.key]: e.target.checked})}
                          className="w-4 h-4 text-pink-600 rounded"
                        />
                        <span className="font-semibold text-sm">{mat.label}</span>
                      </label>
                    ))}
                  </div>
                )}
              </div>
            </div>

            {/* Escala */}
            <div className="bg-gradient-to-r from-purple-100 to-violet-100 p-4 rounded-2xl border-2 border-purple-300">
              <label className="block text-sm font-bold text-purple-800 mb-2 flex items-center gap-2">
                <span className="bg-purple-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">3</span>
                Escala del dibujo
              </label>
              <select
                value={escala}
                onChange={(e) => setEscala(e.target.value)}
                className="w-full px-4 py-3 border-3 border-purple-400 rounded-xl focus:ring-4 focus:ring-purple-300 bg-white shadow-inner font-bold"
              >
                <option value="1:200">1:200 (+S/.8)</option>
                <option value="1:100">1:100 (+S/.6)</option>
                <option value="1:50">1:50 (+S/.4)</option>
                <option value="1:20">1:20 (+S/.2)</option>
                <option value="1:10">1:10 (+S/.2)</option>
              </select>
            </div>

            {/* Tipo de dibujo */}
            <div className="bg-gradient-to-r from-cyan-100 to-teal-100 p-4 rounded-2xl border-2 border-cyan-300">
              <label className="block text-sm font-bold text-cyan-800 mb-3 flex items-center gap-2">
                <span className="bg-cyan-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">4</span>
                Tipo de dibujo (cantidad de láminas) *
              </label>
              <div className="space-y-3">
                {[
                  { key: 'planta', label: 'Planta', precio: 2 },
                  { key: 'elevacion', label: 'Elevación', precio: 3 },
                  { key: 'corte', label: 'Corte', precio: 4 },
                  { key: 'axonometria', label: 'Axonometría', precio: 5 },
                  { key: 'perspectiva1', label: 'Perspectiva 1 punto', precio: 6 },
                  { key: 'perspectiva2', label: 'Perspectiva 2 puntos', precio: 8 },
                  { key: 'perspectiva3', label: 'Perspectiva 3 puntos', precio: 10 }
                ].map(tipo => (
                  <div key={tipo.key} className="flex items-center gap-3 p-3 bg-white/80 rounded-xl hover:bg-white border-2 border-cyan-200 transition-all">
                    <label className="flex-1 cursor-pointer">
                      <span className="font-bold text-cyan-800">{tipo.label}</span>
                      <span className="text-cyan-600 text-sm ml-2">(+S/.{tipo.precio} c/u)</span>
                    </label>
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-semibold text-cyan-700">Cantidad:</span>
                      <input
                        type="number"
                        min="0"
                        value={tiposDibujo[tipo.key] || ''}
                        onChange={(e) => actualizarCantidad(tipo.key, e.target.value)}
                        className="w-20 px-3 py-2 border-3 border-cyan-400 rounded-lg focus:ring-3 focus:ring-cyan-300 font-bold text-center"
                        placeholder="0"
                      />
                    </div>
                  </div>
                ))}
              </div>
              {Object.keys(tiposDibujo).length > 0 && (
                <div className="mt-4 p-4 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-xl border-2 border-dashed border-cyan-400">
                  <p className="text-sm font-bold text-cyan-800 mb-2 flex items-center gap-2">
                    <Sparkles className="w-4 h-4" />
                    Resumen de láminas:
                  </p>
                  <div className="space-y-1">
                    {Object.entries(tiposDibujo).map(([tipo, cantidad]) => {
                      const tipoInfo = [
                        { key: 'planta', label: 'Planta', precio: 2 },
                        { key: 'elevacion', label: 'Elevación', precio: 3 },
                        { key: 'corte', label: 'Corte', precio: 4 },
                        { key: 'axonometria', label: 'Axonometría', precio: 5 },
                        { key: 'perspectiva1', label: 'Perspectiva 1 punto', precio: 6 },
                        { key: 'perspectiva2', label: 'Perspectiva 2 puntos', precio: 8 },
                        { key: 'perspectiva3', label: 'Perspectiva 3 puntos', precio: 10 }
                      ].find(t => t.key === tipo);
                      return (
                        <div key={tipo} className="text-sm text-cyan-800 flex justify-between font-semibold">
                          <span>✿ {tipoInfo.label}: {cantidad}</span>
                          <span className="text-cyan-600">S/. {(tipoInfo.precio * cantidad).toFixed(2)}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>

            {/* Complejidad */}
            <div className="bg-gradient-to-r from-amber-100 to-yellow-100 p-4 rounded-2xl border-2 border-amber-300">
              <label className="block text-sm font-bold text-amber-800 mb-2 flex items-center gap-2">
                <span className="bg-amber-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">5</span>
                Complejidad del diseño
              </label>
              <select
                value={complejidad}
                onChange={(e) => setComplejidad(e.target.value)}
                className="w-full px-4 py-3 border-3 border-amber-400 rounded-xl focus:ring-4 focus:ring-amber-300 bg-white shadow-inner font-bold"
              >
                <option value="simple">Simple (+S/.0)</option>
                <option value="medio">Medio (+S/.5)</option>
                <option value="complejo">Complejo (+S/.10)</option>
                <option value="muy_complejo">Muy complejo (+S/.15)</option>
              </select>
            </div>

            {/* Tiempo */}
            <div className="bg-gradient-to-r from-green-100 to-emerald-100 p-4 rounded-2xl border-2 border-green-300">
              <label className="block text-sm font-bold text-green-800 mb-2 flex items-center gap-2">
                <span className="bg-green-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">6</span>
                Tiempo estimado (horas) * (+S/.2/hora)
              </label>
              <input
                type="number"
                value={tiempoHoras}
                onChange={(e) => setTiempoHoras(e.target.value)}
                className="w-full px-4 py-3 border-3 border-green-400 rounded-xl focus:ring-4 focus:ring-green-300 bg-white shadow-inner font-bold"
                placeholder="Ej: 5"
                step="0.5"
              />
            </div>

            {/* Color */}
            <div className="bg-gradient-to-r from-fuchsia-100 to-pink-100 p-4 rounded-2xl border-2 border-fuchsia-300">
              <label className="block text-sm font-bold text-fuchsia-800 mb-2 flex items-center gap-2">
                <span className="bg-fuchsia-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">7</span>
                Con colores o no
              </label>
              <select
                value={color}
                onChange={(e) => setColor(e.target.value)}
                className="w-full px-4 py-3 border-3 border-fuchsia-400 rounded-xl focus:ring-4 focus:ring-fuchsia-300 bg-white shadow-inner font-bold"
              >
                <option value="bn">Blanco y negro (+S/.0)</option>
                <option value="planos">Colores planos (+S/.4)</option>
                <option value="sombras">Colores + sombras (+S/.7)</option>
                <option value="render">Render tradicional (+S/.10)</option>
              </select>
            </div>

            {/* Datos */}
            <div className="bg-gradient-to-r from-indigo-100 to-blue-100 p-4 rounded-2xl border-2 border-indigo-300">
              <label className="block text-sm font-bold text-indigo-800 mb-2 flex items-center gap-2">
                <span className="bg-indigo-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">8</span>
                Datos proporcionados
              </label>
              <select
                value={datos}
                onChange={(e) => setDatos(e.target.value)}
                className="w-full px-4 py-3 border-3 border-indigo-400 rounded-xl focus:ring-4 focus:ring-indigo-300 bg-white shadow-inner font-bold"
              >
                <option value="completos">Datos completos (+S/.0)</option>
                <option value="incompletos">Datos incompletos (+S/.3)</option>
                <option value="sin_datos">Sin datos (+S/.8)</option>
              </select>
            </div>

            {/* Tipo de encargo */}
            <div className="bg-gradient-to-r from-rose-100 to-red-100 p-4 rounded-2xl border-2 border-rose-300">
              <label className="block text-sm font-bold text-rose-800 mb-2 flex items-center gap-2">
                <span className="bg-rose-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">9</span>
                Tipo de encargo
              </label>
              <select
                value={tipoEncargo}
                onChange={(e) => setTipoEncargo(e.target.value)}
                className="w-full px-4 py-3 border-3 border-rose-400 rounded-xl focus:ring-4 focus:ring-rose-300 bg-white shadow-inner font-bold"
              >
                <option value="suelto">Dibujo suelto (+S/.0)</option>
                <option value="anteproyecto">Anteproyecto (+S/.8)</option>
                <option value="proyecto">Proyecto completo (+S/.10)</option>
              </select>
            </div>

            {/* Dificultad */}
            <div className="bg-gradient-to-r from-violet-100 to-purple-100 p-4 rounded-2xl border-2 border-violet-300">
              <label className="block text-sm font-bold text-violet-800 mb-2 flex items-center gap-2">
                <span className="bg-violet-400 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">10</span>
                Multiplicador de dificultad
              </label>
              <select
                value={dificultad}
                onChange={(e) => setDificultad(e.target.value)}
                className="w-full px-4 py-3 border-3 border-violet-400 rounded-xl focus:ring-4 focus:ring-violet-300 bg-white shadow-inner font-bold"
              >
                <option value="facil">Fácil (×1.0)</option>
                <option value="medio">Medio (×1.2)</option>
                <option value="dificil">Difícil (×1.5)</option>
                <option value="muy_dificil">Muy difícil (×1.8)</option>
              </select>
            </div>

            {/* Botón calcular */}
            <button
              onClick={handleCalcular}
              className="w-full bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 hover:from-pink-500 hover:via-purple-500 hover:to-blue-500 text-white font-bold text-lg py-4 px-6 rounded-2xl transition-all transform hover:scale-105 flex items-center justify-center gap-3 shadow-lg border-3 border-white"
            >
              <Calculator className="w-6 h-6" />
              ★ CALCULAR PRECIO ★
            </button>

            {/* Resultado */}
            {mostrarResultado && resultado && (
              <div className="mt-6 p-6 bg-gradient-to-br from-yellow-100 via-green-100 to-blue-100 rounded-3xl border-4 border-dashed border-green-400 shadow-2xl">
                <div className="flex items-center gap-3 mb-4 justify-center">
                  <FileText className="w-7 h-7 text-green-600" />
                  <h2 className="text-2xl font-bold text-green-800">✿ Desglose de Costos ✿</h2>
                  <FileText className="w-7 h-7 text-green-600" />
                </div>
                
                <div className="space-y-2 bg-white/80 p-4 rounded-2xl border-2 border-green-300">
                  {[
                    { label: 'Precio base', valor: resultado.base },
                    { label: 'Materiales', valor: resultado.costoMateriales },
                    { label: `Escala (${escala})`, valor: resultado.costoEscala },
                    { label: `Tipo(s) de dibujo (${Object.values(tiposDibujo).reduce((a, b) => a + b, 0)} láminas)`, valor: resultado.costoTiposDibujo },
                    { label: 'Complejidad', valor: resultado.costoComplejidad },
                    { label: `Tiempo (${resultado.horas} hrs × S/.2)`, valor: resultado.costoTiempo },
                    { label: 'Color', valor: resultado.costoColor },
                    { label: 'Datos', valor: resultado.costoDatos },
                    { label: 'Tipo de encargo', valor: resultado.costoEncargo }
                  ].map((item, idx) => (
                    <div key={idx} className="flex justify-between py-2 border-b border-green-200">
                      <span className="font-semibold text-gray-700">✿ {item.label}:</span>
                      <span className="font-bold text-green-700">S/. {item.valor.toFixed(2)}</span>
                    </div>
                  ))}
                  
                  <div className="border-t-4 border-green-400 my-4 pt-3">
                    <div className="flex justify-between py-2 text-lg">
                      <span className="font-bold text-gray-800">★ Subtotal:</span>
                      <span className="font-bold text-green-700">S/. {resultado.subtotal.toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between py-2">
                      <span className="font-semibold text-gray-700">Multiplicador de dificultad:</span>
                      <span className="font-bold text-purple-600">×{resultado.multiplicador.toFixed(1)}</span>
                    </div>
                  </div>
                  
                  <div className="bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 text-white p-5 rounded-2xl mt-4 shadow-lg border-3 border-white">
                    <div className="flex justify-between items-center">
                      <span className="text-xl font-bold">★ PRECIO FINAL:</span>
                      <span className="text-4xl font-bold">S/. {resultado.precioFinal.toFixed(2)}</span>
                    </div>
                    <div className="text-white/90 text-sm mt-3 flex items-center justify-center gap-2">
                      <Sparkles className="w-4 h-4" />
                      Tiempo estimado: {resultado.horas} horas
                      <Sparkles className="w-4 h-4" />
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Footer decorativo */}
        <div className="text-center mt-6 text-purple-600 font-bold">
          ✿ ★ ✿ Hecho con amor ✿ ★ ✿
        </div>
      </div>
    </div>
  );
}