const {useState: useStudioState, useRef: useStudioRef, useEffect: useStudioEffect} = React;

function BuildingSearch({onSelect}) {
  const [lat,setLat]=useStudioState('44.6488'), [lon,setLon]=useStudioState('-63.5752');
  const [radius,setRadius]=useStudioState('150'), [rows,setRows]=useStudioState([]), [selected,setSelected]=useStudioState(null);
  const [height,setHeight]=useStudioState(9), [busy,setBusy]=useStudioState(false), [message,setMessage]=useStudioState('Halifax coordinates are preselected. Adjust them to your project site.');
  const controller=useStudioRef(null), cache=useStudioRef(new Map());
  useStudioEffect(() => () => controller.current?.abort(), []);
  async function search(event) {
    event.preventDefault(); setRows([]); setSelected(null);
    try {
      const box=BuildingData.searchBounds(lat,lon,radius), key=box.join(',');
      setBusy(true); setMessage('Searching only the submitted area…');
      let results=cache.current.get(key);
      if (!results) {
        controller.current = new AbortController();
        const timeout=setTimeout(()=>controller.current.abort(),25000);
        try {
          const response=await fetch('https://overpass-api.de/api/interpreter',{method:'POST',body:new URLSearchParams({data:`[out:json][timeout:20][maxsize:8388608];way["building"](${key})->.buildings;.buildings out geom 151;(node["addr:housenumber"](${key});node["addr:full"](${key});node(w.buildings)["addr:housenumber"];);out body 2001;`}), signal:controller.current.signal});
          if (!response.ok) throw new Error(`Building service unavailable (${response.status}). Try again shortly or upload a floorplan.`);
          const data=await response.json();
          if (data.remark) throw new Error('Building service could not complete the query. Reduce the area and retry.');
          results=BuildingData.describeBuildings(data.elements || [],Number(lat),Number(lon)); cache.current.set(key,results);
        } finally {clearTimeout(timeout);}
      }
      setRows(results.slice(0,150)); setMessage(results.length ? `${Math.min(results.length,150)} buildings found.${results.length>150?' Result limit reached; narrow the area.':''} Select an address below; closest buildings are listed first.` : 'No supported building footprints in this area. Try nearby coordinates or upload a floorplan.');
    } catch(error) {setMessage(error.name==='AbortError'?'Search cancelled or timed out. Reduce the area and retry.':error.message);}
    finally {setBusy(false);}
  }
  const ring=selected?.geometry || [];
  const xy=ring.map(p=>[(p.lon-Number(lon))*Math.cos(Number(lat)*Math.PI/180),-p.lat]);
  const xs=xy.map(p=>p[0]),ys=xy.map(p=>p[1]);
  const w=Math.max(...xs)-Math.min(...xs)||1,h=Math.max(...ys)-Math.min(...ys)||1;
  const span=Math.max(w,h), points=xy.map(p=>`${25+(p[0]-Math.min(...xs))/span*200},${25+(p[1]-Math.min(...ys))/span*200}`).join(' ');
  return <div className="building-search">
    <form onSubmit={search}><div className="coordinate-fields"><label>Latitude<input required type="number" step="any" disabled={busy} value={lat} onChange={e=>{setLat(e.target.value);setRows([]);setSelected(null);}}/></label><label>Longitude<input required type="number" step="any" disabled={busy} value={lon} onChange={e=>{setLon(e.target.value);setRows([]);setSelected(null);}}/></label><label>Search radius<select disabled={busy} value={radius} onChange={e=>{setRadius(e.target.value);setRows([]);setSelected(null);}}><option value="50">50 m</option><option value="150">150 m</option><option value="300">300 m</option><option value="500">500 m</option></select></label></div>
    <button className="primary-action" disabled={busy}>{busy?'Searching…':'Search this area'}</button>{busy&&<button type="button" onClick={()=>controller.current?.abort()}>Cancel search</button>}</form>
    <p className="source-note">Small bounding-box search around your coordinates. No region-wide model download. Addresses come from mapped buildings and address points inside their footprints. Missing addresses are marked explicitly. Supports closed building ways; complex multipolygon buildings are not included.</p>
    <p role="status" className="search-status">{message}</p>
    <div className="building-results"><div className="building-list">{rows.map(row=><button key={row.id} aria-pressed={selected?.id===row.id} onClick={()=>{setSelected(row);setHeight(BuildingData.heightInfo(row.tags).height);}}><strong>{row.label}</strong><span>{row.address && row.tags?.name ? `${row.tags.name} · ` : ""}{Math.round(row.distance)} m from search point · {row.tags?.building}</span><span>{!row.address ? "Street address not mapped · " : ""}OSM {row.id} · {row.center.lat.toFixed(5)}, {row.center.lon.toFixed(5)}</span></button>)}</div>
    {selected&&<div className="footprint-card"><strong>{selected.label}</strong><a className="building-map-link" href={`https://www.openstreetmap.org/way/${selected.id}`} target="_blank" rel="noreferrer">View building on map ↗</a><svg viewBox="0 0 250 250" aria-label="Selected building footprint"><polygon points={points} fill="#d9efed" stroke="#167d8d" strokeWidth="2"/><text x="225" y="18">N ↑</text></svg><label>Building height (m)<input type="number" min="0.1" max="1000" step="0.1" value={height} onChange={e=>setHeight(Number(e.target.value))}/></label><small>{BuildingData.heightInfo(selected.tags).source}. Exterior only; confirm height and materials.</small><button className="primary-action" disabled={!(height>0&&height<=1000)} onClick={()=>{try{onSelect(BuildingData.toObj(selected,height),{type:'osm',id:selected.id,address:selected.address,lat:Number(lat),lon:Number(lon),radius:Number(radius),height,attribution:'© OpenStreetMap contributors · ODbL'});}catch(e){setMessage(e.message);}}}>Use this building →</button></div>}</div>
    <a className="attribution" href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">© OpenStreetMap contributors · ODbL</a>
  </div>;
}

function SignalStudio() {
  const [project,setProject]=useStudioState(null), [tab,setTab]=useStudioState('setup'), [mode,setMode]=useStudioState('plan');
  const [name,setName]=useStudioState('Untitled project'), [technology,setTechnology]=useStudioState('cellular');
  const [model,setModel]=useStudioState(null), [file,setFile]=useStudioState(null), [revision,setRevision]=useStudioState(0);
  const [error,setError]=useStudioState(''), [setup,setSetup]=useStudioState(true), [initialRF,setInitialRF]=useStudioState({});
  const rfApi=useStudioRef(null), planApi=useStudioRef(null), openInput=useStudioRef(null);
  const [planRevision,setPlanRevision]=useStudioState(0);
  useStudioEffect(()=>{requestAnimationFrame(()=>window.dispatchEvent(new Event('resize')));},[tab,setup]);
  function begin(nextFile=null,nextModel=null,source=null) {
    setProject({name:name.trim()||'Untitled project',technology,source:source||{type:mode},createdAt:new Date().toISOString()});
    setFile(nextFile); setModel(nextModel); setInitialRF({simulation:{frequencyMHz:technology==='wifi'?5180:3500},antennas:[createAntenna({powerDbm:technology==='wifi'?20:30,x:0,y:0,z:2.2})]});
    planApi.current=null; rfApi.current=null; setPlanRevision(v=>v+1);setRevision(v=>v+1);setSetup(false);setTab(nextFile?'plan':'rf');setError('');
  }
  function acceptPlanModel(nextModel) {
    const state=rfApi.current?.(); setInitialRF({...state?.scenario,slice:undefined,transform:{...DEFAULT_TRANSFORM}});setModel(nextModel);setRevision(v=>v+1);setTab('rf');
  }
  function save() {
    const rf=rfApi.current?.() || {};
    const {floorplan:previousPlan,...metadata}=project;
    const payload={format:'engever-rf-simulator',version:1,project:metadata,model:rf.model||model,scenario:rf.scenario||initialRF,floorplan:planApi.current?.()||previousPlan||null};
    downloadBlob(new Blob([JSON.stringify(payload)],{type:'application/json'}),`${project.name.replace(/[^a-z0-9_-]/gi,'-')}.rfproject.json`);
  }
  async function open(event) {
    try {
      const f=event.target.files[0];if(!f)return;
      if(f.size>60*1024*1024)throw new Error('Project must be smaller than 60 MB.');
      const data=JSON.parse(await f.text());
      if(!['engever-rf-simulator','signal-studio'].includes(data.format)||data.version!==1||!data.project||typeof data.project.name!=='string'||(data.model&&(typeof data.model.text!=='string'||typeof data.model.name!=='string')))throw new Error('Choose a valid RF Simulator project file.');
      if(data.scenario?.antennas && (!Array.isArray(data.scenario.antennas)||data.scenario.antennas.some(a=>!a||typeof a.id!=='string'||!['x','y','z','powerDbm','azimuthDeg','tiltDeg'].every(k=>Number.isFinite(a[k])))))throw new Error('Project transmitters contain invalid coordinates or power settings.');
      if(data.scenario?.slice) CoverageGeometry.validate(data.scenario.slice);
      if(data.scenario?.crowd) CrowdEngine.validate(data.scenario.crowd);
      CrowdEngine.validatePeople(data.scenario?.people);
      if(data.scenario?.viewMetric&&!['power','snr','sinr'].includes(data.scenario.viewMetric))throw new Error('Invalid saved heatmap metric.');
      if(data.floorplan && (!Array.isArray(data.floorplan.walls)||!Array.isArray(data.floorplan.footprintPoints)||!Number.isFinite(data.floorplan.metersPerPixel)))throw new Error('The saved floorplan is incomplete.');
      setProject({...data.project,floorplan:data.floorplan});setName(data.project.name);setTechnology(data.project.technology);setModel(data.model);setFile(null);setInitialRF(data.scenario||{});planApi.current=null;rfApi.current=null;setPlanRevision(v=>v+1);setRevision(v=>v+1);setTab(data.model?'rf':'plan');setSetup(false);setError('');
    }catch(e){setError(e.message);}finally{event.target.value='';}
  }
  return <div className="studio">
    <aside className="studio-rail"><a href="#" className="brand" title="EngEver · Project setup" aria-label="EngEver · Project setup" onClick={e=>{e.preventDefault();setSetup(true);}}><span className="brand-mark">◈</span><span>EngEver<small>RF SIMULATOR</small></span></a><div className="rail-label">PROJECT WORKSPACE</div><button title="Project setup" aria-label="Project setup" className={setup?'active':''} onClick={()=>setSetup(true)}><ToolIcon name="settings"/></button><button title="Floorplan & walls" aria-label="Floorplan & walls" disabled={!project} className={!setup&&tab==='plan'?'active':''} onClick={()=>{setSetup(false);setTab('plan');}}><ToolIcon name="plan"/></button><button title="RF design & results" aria-label="RF design & results" disabled={!project} className={!setup&&tab==='rf'?'active':''} onClick={()=>{setSetup(false);setTab('rf');}}><ToolIcon name="antenna"/></button><div className="rail-bottom"><span className="live-dot"/> Browser workspace<p>Geometry → materials → coverage</p><small>Preliminary planning estimates.<br/>Validate against site measurements.</small></div></aside>
    <main className="studio-main"><header className="studio-topbar"><div><span className="breadcrumb">Projects / </span><strong>{project?.name||'New project'}</strong></div><div className="top-actions">{project&&<><button title="Save project" aria-label="Save project" onClick={save}><ToolIcon name="save"/></button><button title="New project" aria-label="New project" onClick={()=>{setName('Untitled project');setSetup(true);}}><ToolIcon name="plus"/></button></>}<button title="Open project" aria-label="Open project" onClick={()=>openInput.current.click()}><ToolIcon name="open"/></button><input ref={openInput} hidden type="file" accept=".json" onChange={open}/></div></header>
    {error&&<div role="alert" className="error-banner">{error}</div>}
    {setup&&<section className="setup-page"><div className="eyebrow">PLAN WITH CONFIDENCE</div><h1>Every great network<br/>starts with a solid plan.</h1><p className="setup-intro">Bring your building into focus. Build the environment, place your radios,<br className="desktop-break"/> and explore coverage in one connected workspace.</p>
      <div className="setup-meta"><label>Project name<input value={name} maxLength="100" onChange={e=>setName(e.target.value)} placeholder="e.g. Halifax · Office Level 01"/></label><label>System type<select value={technology} onChange={e=>setTechnology(e.target.value)}><option value="cellular">Cellular · 3.5 GHz starting preset</option><option value="wifi">Wi-Fi · 5 GHz starting preset</option></select></label></div>
      <div className="section-heading"><h2>Choose your starting point</h2><span>01 / BUILDING SOURCE</span></div><div className="source-options"><button className={mode==='plan'?'source-card selected':'source-card'} onClick={()=>setMode('plan')} aria-pressed={mode==='plan'}><span className="source-icon">▧</span><span className="selection-dot"/><h3>Upload a floorplan</h3><p>Turn drawings into an RF-ready model with calibrated dimensions and traced walls.</p><small>IMAGE / PDF / EXISTING OBJ</small></button><button className={mode==='building'?'source-card selected':'source-card'} onClick={()=>setMode('building')} aria-pressed={mode==='building'}><span className="source-icon">▥</span><span className="selection-dot"/><h3>Find a real-world building</h3><p>Start from open building footprints and heights, searching only around your site.</p><small>COORDINATES / OPENSTREETMAP</small></button></div>
      <div className="source-content">{mode==='plan'?<><h3>Bring your site drawings</h3><p>Images and PDFs open in the floorplan editor. Existing OBJ models go directly to RF design.</p><label className="upload-zone"><span className="upload-icon">↥</span><strong>Choose a floorplan or 3D model</strong><span>PNG, JPG, WebP, PDF (first page), or OBJ · up to 40 MB</span><input type="file" accept="image/*,.pdf,.obj" onChange={async e=>{const f=e.target.files[0];if(!f)return;if(f.size>40*1024*1024){setError('Please choose a file smaller than 40 MB.');return;}try{if(/\.obj$/i.test(f.name))begin(null,{name:f.name,text:await f.text()});else begin(f);}catch(err){setError(err.message);}finally{e.target.value='';}}}/></label><button className="text-action" onClick={()=>{begin();setTab('plan');}}>Open floorplan editor with sample option →</button><small className="local-note">Your drawings stay in this browser. Save a project file to keep your work.</small></>:<BuildingSearch onSelect={(m,s)=>begin(null,m,s)}/>}</div>
      <div className="workflow-strip"><div><b>1</b><span>Build the environment<small>Scale, footprints and walls</small></span></div><div><b>2</b><span>Design the network<small>Materials and transmitters</small></span></div><div><b>3</b><span>Evaluate coverage<small>Floor coverage and exports</small></span></div></div>
    </section>}
    {project&&<><div hidden={setup||tab!=='plan'} className="plan-workspace"><FloorplanEditor key={planRevision} initialFile={file} initialSnapshot={project.floorplan||{}} apiRef={planApi} onModel={acceptPlanModel}/></div><div hidden={setup||tab!=='rf'} className="rf-workspace"><RFWorkspace active={!setup&&tab==='rf'} key={revision} model={model} initialScenario={initialRF} apiRef={rfApi} technology={project.technology}/>{project.source?.type==='osm'&&<p className="workspace-attribution">{project.source.address && <strong>{project.source.address} · </strong>}Exterior geometry: © OpenStreetMap contributors · ODbL. Height {project.source.height} m. Interior walls are not included.</p>}</div></>}
    </main></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<SignalStudio/>);