import React, { useState, useMemo } from 'react';

// Iconos en línea nativos (no requieren instalación)
const IconWind = () => <svg className="text-green-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.8 19.6A2 2 0 1 0 14 16H2"/><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"/><path d="M9.8 4.4A2 2 0 1 1 11 8H2"/></svg>;
const IconAperture = () => <svg className="text-cyan-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>;
const IconActivity = () => <svg className="text-red-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>;
const IconDatabase = () => <svg className="text-blue-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>;
const IconExternalLink = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>;

// Helpers para dibujar gráficos vectoriales puros
const mapVal = (val, inMin, inMax, outMin, outMax) => ((val - inMin) / (inMax - inMin)) * (outMax - outMin) + outMin;

export default function DDISDashboard() {
  const [coupling, setCoupling] = useState(80000);
  const [etaEff, setEtaEff] = useState(1.2);
  const [f0, setF0] = useState(1200);
  const [qFactor, setQFactor] = useState(15);
  const [targetV, setTargetV] = useState(0.3);
  
  const [ehtTarget, setEhtTarget] = useState('SgrA');
  const [binaryMass, setBinaryMass] = useState(65);

  const baseShadowUas = ehtTarget === 'SgrA' ? 51.8 : 39.0; 
  const r_345_uas = baseShadowUas * (1 + 0.5 * coupling / Math.pow(345, 2));
  const r_230_uas = baseShadowUas * (1 + 0.5 * coupling / Math.pow(230, 2));
  const absoluteShiftUas = (r_230_uas - r_345_uas).toFixed(2);

  const ligoData = useMemo(() => {
    const data = [];
    const t_merger = 0;
    const t_offset = -0.0035;
    const tau = qFactor / (Math.sqrt(2) * Math.PI * f0);
    const A_burst = 3.5 * Math.sqrt(etaEff); 
    const freqScale = 65 / binaryMass; 

    for (let t = -0.04; t <= 0.01; t += 0.0002) {
      let h_gr = 0;
      if (t < t_merger) {
        const tau_t = t_merger - t;
        const f_gr = 40 * freqScale * Math.pow(tau_t + 0.005, -3/8);
        const phase = 2 * Math.PI * f_gr * t;
        h_gr = 2 * Math.pow(tau_t + 0.005, -1/4) * Math.cos(phase);
      } else {
        h_gr = 2 * Math.pow(0.005, -1/4) * Math.exp(-t/0.003) * Math.cos(2 * Math.PI * 200 * freqScale * t);
      }
      const env = Math.exp(-Math.pow(t - t_offset, 2) / Math.pow(tau, 2));
      const osc = Math.cos(2 * Math.PI * f0 * (t - t_offset));
      data.push({ tNum: parseFloat(t.toFixed(4)), GR: h_gr, sGB: h_gr + (A_burst * env * osc) });
    }
    return data;
  }, [etaEff, f0, qFactor, binaryMass]);

  const quasarData = useMemo(() => {
    const data = [];
    for (let x = 0; x <= 0.2; x += 0.005) {
      data.push({ ratio: x, velocity: Math.sqrt(1 - Math.pow(1 + x, -2)) });
    }
    return data;
  }, []);

  const requiredRatio = (Math.sqrt(1 / (1 - Math.pow(targetV, 2))) - 1);

  // Lógica de Renderizado SVG para Cuásar
  const qXMin = 0, qXMax = 0.2, qYMin = 0, qYMax = 0.6;
  const qPts = quasarData.map(d => `${mapVal(d.ratio, qXMin, qXMax, 40, 380)},${mapVal(d.velocity, qYMin, qYMax, 160, 20)}`).join(' L ');
  const reqX = mapVal(requiredRatio, qXMin, qXMax, 40, 380);
  const reqY = mapVal(targetV, qYMin, qYMax, 160, 20);

  // Lógica de Renderizado SVG para LIGO
  const lXMin = -0.04, lXMax = 0.01;
  let lYMax = 0;
  ligoData.forEach(d => {
    if (Math.abs(d.sGB) > lYMax) lYMax = Math.abs(d.sGB);
    if (Math.abs(d.GR) > lYMax) lYMax = Math.abs(d.GR);
  });
  lYMax = Math.ceil(lYMax) || 1;
  const lYMin = -lYMax;
  
  const grPts = ligoData.map(d => `${mapVal(d.tNum, lXMin, lXMax, 40, 380)},${mapVal(d.GR, lYMin, lYMax, 160, 20)}`).join(' L ');
  const sgbPts = ligoData.map(d => `${mapVal(d.tNum, lXMin, lXMax, 40, 380)},${mapVal(d.sGB, lYMin, lYMax, 160, 20)}`).join(' L ');
  const refX = mapVal(-0.0035, lXMin, lXMax, 40, 380);

  return (
    <div className="min-h-screen text-slate-200 p-6 font-sans">
      <header className="mb-8 border-b border-slate-800 pb-4">
        <h1 className="text-3xl font-bold text-white mb-2">Motor Fenomenológico DDIS 2.0</h1>
        <p className="text-slate-400">Plataforma de validación sGB para colaboraciones LIGO/EHT</p>
      </header>

      <div className="bg-gradient-to-r from-blue-900/40 to-slate-900 border border-blue-500/30 p-6 rounded-xl mb-8 flex flex-col md:flex-row items-center justify-between gap-4">
        <div>
          <h3 className="text-lg font-bold text-white flex items-center gap-2">
            <IconDatabase /> ¿Analista de datos o investigador?
          </h3>
          <p className="text-slate-300 text-sm mt-1">Acceda al laboratorio de computación técnica para cargar archivos CSV propios y validar el modelo contra datos reales de observatorios.</p>
        </div>
        <a 
          href="https://colab.research.google.com/drive/1D9D_U82hb9les4TTqExBnvpm4nGGW6ig?usp=sharing" 
          target="_blank" rel="noopener noreferrer"
          className="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-bold flex items-center gap-2 transition-all shadow-lg shadow-blue-900/20"
        >
          Ir al Laboratorio en Colab <IconExternalLink />
        </a>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* PANEL 1: QUASAR */}
        <div className="bg-slate-900 border border-slate-800 rounded-xl p-5 shadow-xl flex flex-col">
          <div className="flex items-center gap-3 mb-4"><IconWind /> <h2 className="text-xl font-semibold text-white">Flujo de Cuásar J2318</h2></div>
          <div className="h-48 mb-4 bg-slate-950 rounded-lg flex items-center justify-center border border-slate-800">
             <svg viewBox="0 0 400 200" className="w-full h-full text-xs">
                <line x1="40" y1="160" x2="380" y2="160" stroke="#334155" />
                <line x1="40" y1="90" x2="380" y2="90" stroke="#334155" strokeDasharray="3 3" />
                <line x1="40" y1="20" x2="380" y2="20" stroke="#334155" strokeDasharray="3 3" />
                
                <text x="35" y="160" fill="#94a3b8" textAnchor="end" dominantBaseline="middle">0.0</text>
                <text x="35" y="90" fill="#94a3b8" textAnchor="end" dominantBaseline="middle">0.3</text>
                <text x="35" y="20" fill="#94a3b8" textAnchor="end" dominantBaseline="middle">0.6</text>
                
                {[0, 0.05, 0.1, 0.15, 0.2].map((val, i) => (
                  <text key={i} x={mapVal(val, qXMin, qXMax, 40, 380)} y="175" fill="#94a3b8" textAnchor="middle">{val}</text>
                ))}

                <path d={`M ${qPts}`} fill="none" stroke="#4ade80" strokeWidth="2" />
                {requiredRatio <= 0.2 && <circle cx={reqX} cy={reqY} r="5" fill="#ef4444" />}
             </svg>
          </div>
          <div className="space-y-4 flex-grow flex flex-col justify-end">
            <div>
              <label className="text-sm font-medium text-slate-400 flex justify-between">
                <span>{"Velocidad Terminal Objetivo ($v_\\infty$)"}</span>
                <span className="text-green-400">{targetV.toFixed(2)}c</span>
              </label>
              <input type="range" min="0.05" max="0.5" step="0.01" value={targetV} onChange={(e) => setTargetV(parseFloat(e.target.value))} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer mt-2" />
            </div>
            <div className="bg-slate-800/50 border border-slate-700 p-3 rounded-md text-sm">
              <span className="text-slate-400 block mb-1">{"Ratio Topológico/Densidad Requerido ($\\Delta U / \\rho_0$):"}</span>
              <span className="text-2xl font-mono text-white">{requiredRatio.toFixed(4)}</span>
            </div>
          </div>
        </div>

        {/* PANEL 2: EHT */}
        <div className="bg-slate-900 border border-slate-800 rounded-xl p-5 shadow-xl flex flex-col">
          <div className="flex items-center gap-3 mb-4"><IconAperture /> <h2 className="text-xl font-semibold text-white">Sombra Óptica EHT</h2></div>
          <div className="h-48 mb-4 bg-black rounded-lg flex items-center justify-center border border-slate-800 relative">
             <svg width="100%" height="100%" viewBox="0 0 300 300">
                <line x1="150" y1="0" x2="150" y2="300" stroke="#1e293b" />
                <line x1="0" y1="150" x2="300" y2="150" stroke="#1e293b" />
                <circle cx={150} cy={150} r={baseShadowUas * 2.5} stroke="white" strokeWidth="1.5" strokeDasharray="4 4" fill="transparent" />
                <circle cx={150} cy={150} r={r_345_uas * 2.5} stroke="#22d3ee" strokeWidth="2" fill="#22d3ee" fillOpacity="0.1" />
                <circle cx={150} cy={150} r={r_230_uas * 2.5} stroke="#fb923c" strokeWidth="2" fill="#fb923c" fillOpacity="0.1" />
             </svg>
          </div>
          <div className="space-y-4 flex-grow flex flex-col justify-end">
            <div className="flex gap-2">
               <button onClick={() => setEhtTarget('SgrA')} className={`flex-1 py-1 text-sm rounded ${ehtTarget === 'SgrA' ? 'bg-cyan-600 text-white' : 'bg-slate-800 text-slate-400'}`}>SgrA*</button>
               <button onClick={() => setEhtTarget('M87')} className={`flex-1 py-1 text-sm rounded ${ehtTarget === 'M87' ? 'bg-cyan-600 text-white' : 'bg-slate-800 text-slate-400'}`}>M87*</button>
            </div>
            <div>
              <label className="text-sm font-medium text-slate-400 flex justify-between">
                <span>{"Acoplamiento ($e^2\\phi_h^2$)"}</span>
                <span className="text-cyan-400">{coupling}</span>
              </label>
              <input type="range" min="0" max="150000" step="5000" value={coupling} onChange={(e) => setCoupling(parseInt(e.target.value))} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer mt-2" />
            </div>
            <div className="flex justify-between items-center text-sm bg-slate-800/50 border border-slate-700 p-3 rounded-md">
              <div className="text-cyan-400">345 GHz<br/><span className="text-lg font-mono text-white">{(r_345_uas).toFixed(1)} <span className="text-xs text-cyan-500">μas</span></span></div>
              <div className="text-center bg-slate-900 px-3 py-1 rounded border border-slate-700">
                <span className="text-slate-400 text-xs">Crecimiento</span><br/>
                <span className="font-bold text-white">+{absoluteShiftUas} μas</span>
              </div>
              <div className="text-orange-400 text-right">230 GHz<br/><span className="text-lg font-mono text-white">{(r_230_uas).toFixed(1)} <span className="text-xs text-orange-500">μas</span></span></div>
            </div>
          </div>
        </div>

        {/* PANEL 3: LIGO */}
        <div className="bg-slate-900 border border-slate-800 rounded-xl p-5 shadow-xl flex flex-col">
          <div className="flex items-center gap-3 mb-4"><IconActivity /> <h2 className="text-xl font-semibold text-white">Ráfaga LIGO</h2></div>
          <div className="h-48 mb-4 bg-slate-950 rounded-lg flex items-center justify-center border border-slate-800">
             <svg viewBox="0 0 400 200" className="w-full h-full text-[10px]">
                <line x1="40" y1="90" x2="380" y2="90" stroke="#334155" strokeDasharray="3 3" />
                
                <text x="35" y="20" fill="#94a3b8" textAnchor="end" dominantBaseline="middle">{lYMax}</text>
                <text x="35" y="90" fill="#94a3b8" textAnchor="end" dominantBaseline="middle">0</text>
                <text x="35" y="160" fill="#94a3b8" textAnchor="end" dominantBaseline="middle">-{lYMax}</text>
                
                {[-0.04, -0.03, -0.02, -0.01, 0, 0.01].map((val, i) => (
                  <text key={i} x={mapVal(val, lXMin, lXMax, 40, 380)} y="175" fill="#94a3b8" textAnchor="middle">{val}</text>
                ))}

                <line x1={refX} y1="10" x2={refX} y2="170" stroke="#3b82f6" strokeWidth="15" strokeOpacity="0.2" />
                <path d={`M ${grPts}`} fill="none" stroke="#64748b" strokeWidth="1" strokeDasharray="3 3" />
                <path d={`M ${sgbPts}`} fill="none" stroke="#ef4444" strokeWidth="2" />
             </svg>
          </div>
          <div className="space-y-4 flex-grow flex flex-col justify-end">
            <div>
              <label className="text-sm font-medium text-slate-400 flex justify-between">
                <span>{"Masa de la Binaria ($M_\\odot$)"}</span>
                <span className="text-slate-300">{binaryMass} {"$M_\\odot$"}</span>
              </label>
              <input type="range" min="20" max="150" step="5" value={binaryMass} onChange={(e) => setBinaryMass(parseFloat(e.target.value))} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer mt-2" />
            </div>
            <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium text-slate-400 flex justify-between">
                    <span>{"Viscosidad ($\\eta_{eff}$)"}</span>
                    <span className="text-red-400">{etaEff.toFixed(1)}</span>
                  </label>
                  <input type="range" min="0.1" max="3.0" step="0.1" value={etaEff} onChange={(e) => setEtaEff(parseFloat(e.target.value))} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer mt-2" />
                </div>
                <div>
                  <label className="text-sm font-medium text-slate-400 flex justify-between">
                    <span>{"Frec. ($f_0$)"}</span>
                    <span className="text-red-400">{f0} Hz</span>
                  </label>
                  <input type="range" min="500" max="3000" step="100" value={f0} onChange={(e) => setF0(parseInt(e.target.value))} className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer mt-2" />
                </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}