import { useState } from "react";

export default function LinkBudget() {
  const [tx, setTx] = useState(30);
  const [freq, setFreq] = useState(300);
  const [txg, setTxg] = useState(6);
  const [rxg, setRxg] = useState(3);
  const [dist, setDist] = useState(15);
  const [env, setEnv] = useState(10);
  const [h, setH] = useState(200);

  const fspl = 20 * Math.log10(dist) + 20 * Math.log10(freq) + 32.44;
  const rx = tx + txg + rxg - fspl - env;
  const nf = -110;
  const reqSnr = 10;
  const snr = rx - nf;
  const margin = snr - reqSnr;
  const maxPL = tx + txg + rxg - nf - reqSnr - env;
  const maxDist = Math.pow(10, (maxPL - 20 * Math.log10(freq) - 32.44) / 20);
  const wavelength = 300 / freq;
  const f1 = Math.sqrt((wavelength * dist * 1000) / 4);
  const f1Clear = h > f1 * 0.6;
  const losKm = Math.sqrt((2 * 6371 * h) / 1000);

  const status = margin > 20 ? "EXCELLENT" : margin > 10 ? "RELIABLE" : margin > 0 ? "MARGINAL" : "NO LINK";
  const sc = margin > 20 ? "#059669" : margin > 10 ? "#3b82f6" : margin > 0 ? "#d97706" : "#dc2626";

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-4 md:p-8" style={{ fontFamily: "'JetBrains Mono', 'Fira Code', monospace" }}>
      <div className="max-w-2xl mx-auto">
        <div className="flex items-center gap-3 mb-1">
          <div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse" />
          <span className="text-[10px] tracking-[4px] text-slate-500 uppercase">Fischer 26 // RF Engineering</span>
        </div>
        <h1 className="text-2xl font-bold tracking-tight mb-1 text-white">LINK BUDGET</h1>
        <p className="text-xs text-slate-500 mb-6">Silvus MANET • Fresnel clearance • LOS horizon</p>

        <div className="grid grid-cols-4 gap-2 mb-3">
          {[
            { l: "TX Power (dBm)", v: tx, s: setTx, min: 10, max: 40 },
            { l: "Freq (MHz)", v: freq, s: setFreq, min: 100, max: 6000 },
            { l: "TX Gain (dBi)", v: txg, s: setTxg, min: 0, max: 20 },
            { l: "RX Gain (dBi)", v: rxg, s: setRxg, min: 0, max: 20 },
          ].map((p) => (
            <div key={p.l} className="bg-slate-900 border border-slate-800 rounded-lg p-2">
              <label className="text-[9px] text-slate-500 uppercase tracking-widest block mb-1">{p.l}</label>
              <input type="number" value={p.v} min={p.min} max={p.max}
                onChange={(e) => p.s(parseFloat(e.target.value) || 0)}
                className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm font-bold text-white focus:outline-none focus:border-sky-500" />
            </div>
          ))}
        </div>
        <div className="grid grid-cols-3 gap-2 mb-6">
          {[
            { l: "Distance (km)", v: dist, s: setDist, min: 1, max: 100 },
            { l: "Environment loss (dB)", v: env, s: setEnv, min: 0, max: 40 },
            { l: "Antenna height (m)", v: h, s: setH, min: 1, max: 500 },
          ].map((p) => (
            <div key={p.l} className="bg-slate-900 border border-slate-800 rounded-lg p-2">
              <label className="text-[9px] text-slate-500 uppercase tracking-widest block mb-1">{p.l}</label>
              <input type="number" value={p.v} min={p.min} max={p.max}
                onChange={(e) => p.s(parseFloat(e.target.value) || 0)}
                className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm font-bold text-white focus:outline-none focus:border-sky-500" />
            </div>
          ))}
        </div>

        <div className="bg-slate-900 border border-slate-800 rounded-xl p-6 mb-4">
          <div className="grid grid-cols-4 gap-4 mb-5">
            {[
              { l: "RX Power", v: `${rx.toFixed(0)} dBm`, c: sc },
              { l: "SNR", v: `${snr.toFixed(0)} dB`, c: sc },
              { l: "Margin", v: `${margin.toFixed(0)} dB`, c: sc },
              { l: "Max Range", v: `${maxDist.toFixed(0)} km`, c: "#3b82f6" },
            ].map((m) => (
              <div key={m.l} className="text-center">
                <div className="text-[10px] text-slate-500 uppercase tracking-widest mb-1">{m.l}</div>
                <div className="text-xl font-bold" style={{ color: m.c }}>{m.v}</div>
              </div>
            ))}
          </div>

          <div className="h-2 bg-slate-800 rounded-full overflow-hidden mb-4">
            <div className="h-full rounded-full transition-all duration-300"
              style={{ width: `${Math.min(100, Math.max(0, (margin + 10) * 2))}%`, backgroundColor: sc }} />
          </div>

          <div className="rounded-lg py-3 px-4 text-center text-sm font-bold tracking-wide mb-4"
            style={{ backgroundColor: sc + "22", color: sc, border: `1px solid ${sc}44` }}>
            {status} LINK
          </div>

          <div className="grid grid-cols-3 gap-4">
            {[
              { l: "Fresnel F1", v: `${f1.toFixed(0)}m`, sub: f1Clear ? "✓ Clear" : "✕ Obstructed", c: f1Clear ? "#059669" : "#dc2626" },
              { l: "LOS Horizon", v: `${losKm.toFixed(0)} km`, sub: losKm > dist ? "✓ Within LOS" : "✕ Beyond", c: losKm > dist ? "#059669" : "#dc2626" },
              { l: "FSPL", v: `${fspl.toFixed(1)} dB`, sub: `+ ${env} dB env`, c: "#94a3b8" },
            ].map((m) => (
              <div key={m.l} className="text-center">
                <div className="text-[10px] text-slate-500 uppercase tracking-widest mb-1">{m.l}</div>
                <div className="text-lg font-bold text-white">{m.v}</div>
                <div className="text-[11px] font-bold" style={{ color: m.c }}>{m.sub}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-slate-900 border border-slate-800 rounded-lg p-4 text-xs text-slate-500">
          Link: {tx} dBm + {txg} + {rxg} − {fspl.toFixed(1)} − {env} = {rx.toFixed(1)} dBm → SNR {snr.toFixed(0)} dB (need {reqSnr})
        </div>
        <div className="mt-6 text-center text-[10px] text-slate-600 tracking-widest uppercase">FSG-A // Fischer 26 // CC BY-SA 4.0</div>
      </div>
    </div>
  );
}