import { useState } from "react";

const CAMERAS = [
  { label: "Arducam IMX477 (12.3MP)", sw: 6.287, sh: 4.712, px: 4056, py: 3040, fl: 6 },
  { label: "Arducam IMX519 (16MP)", sw: 6.287, sh: 4.712, px: 4656, py: 3496, fl: 4.28 },
  { label: "DJI Mavic 3 (20MP)", sw: 17.3, sh: 13.0, px: 5280, py: 3956, fl: 12.29 },
];

const PLATFORMS = [
  { label: "Fischer 26 (85 km/h, 2h)", speed: 85, endurance: 120 },
  { label: "FPV 5\" (100 km/h, 8min)", speed: 100, endurance: 8 },
  { label: "DJI Mavic 3 (57 km/h, 46min)", speed: 57, endurance: 46 },
];

const TASKS = [
  { name: "Vehicle detection", gsd: 100, niirs: 3 },
  { name: "Vehicle classification", gsd: 30, niirs: 5 },
  { name: "Vehicle ID (T-72 vs T-80)", gsd: 12, niirs: 6 },
  { name: "Personnel detection", gsd: 60, niirs: 4 },
  { name: "Activity recognition", gsd: 10, niirs: 7 },
  { name: "License plate", gsd: 3, niirs: 8 },
  { name: "Damage assessment", gsd: 50, niirs: 4 },
  { name: "Fortification detection", gsd: 80, niirs: 3 },
];

export default function CoverageCalculator() {
  const [camIdx, setCamIdx] = useState(0);
  const [platIdx, setPlatIdx] = useState(0);
  const [alt, setAlt] = useState(200);

  const cam = CAMERAS[camIdx];
  const plat = PLATFORMS[platIdx];
  const gsd = ((alt * cam.sw) / (cam.fl * cam.px)) * 100;
  const width = Math.round((alt * cam.sw) / cam.fl);
  const height = Math.round((alt * cam.sh) / cam.fl);
  const speedMs = plat.speed / 3.6;
  const rate = Math.round((speedMs * width * 3600) / 10000);
  const maxHa = Math.round((rate * plat.endurance) / 60);

  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-violet-400 animate-pulse" />
          <span className="text-[10px] tracking-[4px] text-slate-500 uppercase">Lisa 26 // ISR Planning</span>
        </div>
        <h1 className="text-2xl font-bold tracking-tight mb-1 text-white">COVERAGE CALCULATOR</h1>
        <p className="text-xs text-slate-500 mb-6">Ground Sample Distance • Frame size • Detection capability</p>

        <div className="grid grid-cols-3 gap-3 mb-6">
          <div className="bg-slate-900 border border-slate-800 rounded-lg p-3">
            <label className="text-[10px] text-slate-500 uppercase tracking-widest block mb-2">Camera</label>
            <select value={camIdx} onChange={(e) => setCamIdx(parseInt(e.target.value))}
              className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-2 text-xs text-white focus:outline-none focus:border-sky-500">
              {CAMERAS.map((c, i) => <option key={i} value={i}>{c.label}</option>)}
            </select>
          </div>
          <div className="bg-slate-900 border border-slate-800 rounded-lg p-3">
            <label className="text-[10px] text-slate-500 uppercase tracking-widest block mb-2">Platform</label>
            <select value={platIdx} onChange={(e) => setPlatIdx(parseInt(e.target.value))}
              className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-2 text-xs text-white focus:outline-none focus:border-sky-500">
              {PLATFORMS.map((p, i) => <option key={i} value={i}>{p.label}</option>)}
            </select>
          </div>
          <div className="bg-slate-900 border border-slate-800 rounded-lg p-3">
            <label className="text-[10px] text-slate-500 uppercase tracking-widest block mb-2">Altitude (m AGL)</label>
            <input type="number" value={alt} min={10} max={2000} step={10}
              onChange={(e) => setAlt(parseInt(e.target.value) || 10)}
              className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-2 text-lg 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-6">
            {[
              { l: "GSD", v: gsd.toFixed(1), u: "cm/px", c: "text-sky-400" },
              { l: "Frame", v: `${width}×${height}`, u: "meters", c: "text-white" },
              { l: "Rate", v: rate.toString(), u: "ha/h", c: "text-emerald-400" },
              { l: "Max Mission", v: maxHa.toString(), u: "hectares", c: "text-amber-400" },
            ].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-2xl font-bold ${m.c}`}>{m.v}</div>
                <div className="text-[10px] text-slate-600">{m.u}</div>
              </div>
            ))}
          </div>

          <div className="text-[10px] text-slate-500 uppercase tracking-widest mb-3">
            Detection Capability @ {gsd.toFixed(1)} cm/px
          </div>

          <div className="space-y-1">
            {TASKS.map((t) => {
              const ok = gsd <= t.gsd;
              const margin = ok ? Math.round((1 - gsd / t.gsd) * 100) : Math.round((1 - t.gsd / gsd) * 100);
              return (
                <div key={t.name} className="flex items-center gap-2 text-xs py-1 border-b border-slate-800">
                  <span className="text-slate-400 w-44 truncate">{t.name}</span>
                  <span className={`flex-1 font-bold ${ok ? "text-emerald-400" : "text-red-400"}`}>
                    {ok ? `✓ YES (+${margin}%)` : `✕ NO (-${Math.abs(margin)}%)`}
                  </span>
                  <span className="text-slate-600 w-16 text-right">NIIRS {t.niirs}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div className="mt-6 text-center text-[10px] text-slate-600 tracking-widest uppercase">FSG-A // Lisa 26 // CC BY-SA 4.0</div>
      </div>
    </div>
  );
}