/* DIRECTION A — "ATLAS" : dark pro-instrument workbench.
   A focused measurement cockpit. Deep forest chrome, floating glassy command
   surfaces, amber as the precision signal. Keyboard-first, data-dense, calm.
   Full function: 4 tools, 13 line classes, full inspector, measure/BOQ/QA/source,
   global controls + routing, trace/snap/image, save + route states. */
const A_TONE = { high:["#3FB67C","Verified"], medium:["#F4B454","To check"], low:["#FF5A63","Assumed"] };

function AConf({ c }) { const [col,lab]=A_TONE[c]||A_TONE.medium; return <span className="a-conf"><i style={{background:col}}/>{lab}</span>; }
function ASwatch({ t }) { const m=TK.LINE_META[t]; return <span className={"a-sw"+(m.dashed?" dash":"")} style={m.dashed?{color:m.color}:{background:m.color}}/>; }

function atlasToolIcon(mode){ return mode==="select"?"cursor":mode==="polygon"?"polygon":mode==="line"?"line":"point"; }

function AtlasInspector({ ed }) {
  const f = ed.selected; if (!f) return null;
  const isLine = f.geometry_type==="LineString", isPoly = f.geometry_type==="Polygon";
  const meas = isLine ? `${fmt(TK.lineLenM(f.geom))} lm` : isPoly ? `${fmt(TK.polyPlanM2(f.geom))} m²` : "1 object";
  const typeOpts = isPoly ? Object.keys(TK.POLY_META) : isLine ? TK.LINE_ORDER : Object.keys(TK.POINT_META);
  const typeLabel = (t) => (TK.POLY_META[t]||TK.LINE_META[t]||TK.POINT_META[t]).label;
  return (
    <div className="a-inspector">
      <div className="a-insp-head">
        <span className="a-insp-kicker">{isLine && <ASwatch t={f.feature_type}/>}{isLine?"Line":isPoly?"Plane":"Object"}<b>{typeLabel(f.feature_type)}</b></span>
        <span className="a-meas">{meas}</span>
        <button className="a-iconbtn" onClick={()=>ed.setSelId(null)}><Icon n="x" s={14}/></button>
      </div>
      <div className="a-insp-body">
        {isLine && (<><div className="a-insp-label">Reclassify</div>
          <div className="a-chipwrap">{TK.LINE_ORDER.map(t => (
            <button key={t} className={"a-chip"+(t===f.feature_type?" on":"")} onClick={()=>ed.reclass(f.id,t)}><ASwatch t={t}/>{TK.LINE_META[t].label}</button>
          ))}</div></>)}
        {!isLine && (<label className="a-field"><span>Type</span>
          <div className="a-select"><select value={f.feature_type} onChange={e=>ed.patch(f.id,{feature_type:e.target.value})}>
            {typeOpts.map(t=> <option key={t} value={t}>{typeLabel(t)}</option>)}</select><Icon n="chevron" s={13}/></div></label>)}
        <label className="a-field"><span>Label</span><input className="a-input" value={f.label||""} placeholder="optional" onChange={e=>ed.patch(f.id,{label:e.target.value||null})}/></label>
        <div className="a-2col">
          <label className="a-field"><span>Source</span><div className="a-select"><select value={f.source} onChange={e=>ed.patch(f.id,{source:e.target.value})}>
            {TK.SOURCES.map(s=> <option key={s} value={s}>{TK.SOURCE_LABEL[s]}</option>)}</select><Icon n="chevron" s={13}/></div></label>
          <label className="a-field"><span>Confidence</span><div className="a-select"><select value={f.confidence} onChange={e=>ed.patch(f.id,{confidence:e.target.value})}>
            {["high","medium","low"].map(c=> <option key={c} value={c}>{c}</option>)}</select><Icon n="chevron" s={13}/></div></label>
        </div>
        {isPoly && <div className="a-2col">
          <label className="a-field"><span>Pitch °</span><input className="a-input" type="number" value={f.pitch_degrees??""} placeholder={ed.globalPitch} onChange={e=>ed.patch(f.id,{pitch_degrees:e.target.value===""?undefined:+e.target.value})}/></label>
          <label className="a-field"><span>Building</span><input className="a-input" value={f.building_id||""} onChange={e=>ed.patch(f.id,{building_id:e.target.value})}/></label>
        </div>}
        {isLine && <label className="a-field"><span>Length basis</span><div className="a-select"><select value={f.length_basis||"auto"} onChange={e=>ed.patch(f.id,{length_basis:e.target.value==="auto"?undefined:e.target.value})}>
          <option value="auto">Auto (default for type)</option><option value="plan_view">Plan view</option><option value="slope_corrected">Slope corrected</option><option value="manual_override">Manual override</option><option value="unknown">Unknown — needs review</option>
        </select><Icon n="chevron" s={13}/></div></label>}
        <label className="a-check"><input type="checkbox" checked={f.include_in_boq} onChange={e=>ed.patch(f.id,{include_in_boq:e.target.checked})}/><span>Include in BOQ candidate</span></label>
        {f.notes && <div className="a-note"><Icon n="info" s={13}/>{f.notes}</div>}
        <div className="a-insp-foot"><AConf c={f.confidence}/><button className="a-del" onClick={()=>ed.del(f.id)}><Icon n="trash" s={13}/> Delete</button></div>
      </div>
    </div>
  );
}

function AtlasMeasure({ ed }) {
  const s = ed.summary; const rows = lineRows(s); const maxv = Math.max(...rows.map(r=>r.v),1);
  return (
    <div className="a-stack">
      <div className="a-hero">
        <div className="a-hero-row"><span>Roof surface</span><b className="a-big">{fmt(s.total_surface_area_m2,0)}<i>m²</i></b></div>
        <div className="a-hero-sub">
          <span>Plan {fmt(s.total_plan_area_m2,0)} m²</span>
          <span>+{s.waste_factor_percent}% → {fmt(s.roof_install_area_with_waste_m2,0)} m²</span>
        </div>
        {s.area_by_pitch.length>0 && <div className="a-pitch">{s.area_by_pitch.map(b=> <span key={b.pitch_degrees}>{b.pitch_degrees}° · {b.surface_area_m2} m²</span>)}</div>}
      </div>
      <div className="a-card">
        <div className="a-card-h">Linears</div>
        <div className="a-bars">{rows.map(r => (
          <div key={r.k} className="a-bar"><span className="a-bar-l"><i className={"a-sw"+(r.dashed?" dash":"")} style={r.dashed?{color:r.color}:{background:r.color}}/>{r.label}</span>
            <span className="a-bar-track"><i style={{width:(r.v/maxv*100)+"%", background:r.color}}/></span>
            <span className="a-bar-v">{fmt(r.v)}<em>lm</em></span></div>
        ))}</div>
      </div>
      <div className="a-card">
        <div className="a-card-h">Objects</div>
        <div className="a-objs">
          {[["chimney","Chimneys"],["skylight","Skylights"],["vent","Vents"],["whirlybird","Whirlybirds"],["solar","Solar"]].filter(([k])=>s.counts[k]).map(([k,n])=>
            <div key={k} className="a-obj"><b>{s.counts[k]}</b>{n}</div>)}
          <div className="a-obj"><b>{s.penetrations}</b>Penetrations</div>
        </div>
      </div>
    </div>
  );
}

function AtlasBOQ({ ed }) {
  const groups = ["Area","Linears","Objects","Allowances"];
  return (
    <div className="a-stack">
      <div className="a-banner"><Icon n="info" s={14}/><span><b>BOQ candidate / prefill.</b> A quantity basis for pricing review — not a final order or cutting list.</span></div>
      {groups.map(g => { const rows=ed.boq.filter(b=>b.group===g); if(!rows.length) return null; return (
        <div key={g} className="a-card"><div className="a-card-h">{g}</div>
          <table className="a-table"><tbody>{rows.map((b,i)=>(
            <tr key={i} className={b.included?"":"excl"}>
              <td>{b.cls && <ASwatch t={b.cls}/>}{b.name}{b.tag && <em className="a-tag">{b.tag}</em>}</td>
              <td className="num">{b.unit==="ea"||b.unit==="item"?b.qty:fmt(b.qty)}</td>
              <td className="unit">{b.unit}</td>
              <td><i className="a-dot" style={{background:A_TONE[b.conf][0]}}/></td>
            </tr>))}</tbody></table>
        </div>); })}
    </div>
  );
}

function AtlasQA({ ed }) {
  const warns = TK.QA_CHECKS.filter(c=>c.status!=="pass").length;
  const routes = [["ready","Pricing-stage measurement basis","#3FB67C"],["verify","Human verification required","#F4B454"],["full","Route to full measurement","#FF5A63"]];
  return (
    <div className="a-stack">
      <div className="a-card"><div className="a-card-h">QA checklist {warns>0 && <em className="a-warnc">{warns} to check</em>}</div>
        <div className="a-qa">{TK.QA_CHECKS.map(c=>(
          <div key={c.key} className="a-qa-row"><i className={"a-qa-ic "+c.status}>{c.status==="pass"?<Icon n="check" s={11}/>:<Icon n="alert" s={11}/>}</i>
            <div><div className="a-qa-l">{c.label}{c.required && <em className="a-req">required</em>}</div>{c.note && <div className="a-qa-note">{c.note}</div>}</div></div>
        ))}</div>
      </div>
      <div className="a-card"><div className="a-card-h">Route decision</div>
        <div className="a-routes">{routes.map(([k,l,col])=>(
          <button key={k} className={"a-route"+(ed.route===k?" on":"")} onClick={()=>ed.setRoute(k)} style={ed.route===k?{borderColor:col}:null}>
            <i style={{background:ed.route===k?col:"transparent",borderColor:col}}/>{l}</button>))}</div>
      </div>
      <div className="a-card"><div className="a-card-h">Global controls</div>
        <div className="a-2col">
          <label className="a-field"><span>Global pitch °</span><input className="a-input" type="number" value={ed.globalPitch} onChange={e=>ed.setGlobalPitch(+e.target.value)}/></label>
          <label className="a-field"><span>Waste %</span><input className="a-input" type="number" value={ed.waste} onChange={e=>ed.setWaste(+e.target.value)}/></label>
        </div>
        <label className="a-field"><span>Reviewer</span><input className="a-input" defaultValue={TK.JOB.reviewer}/></label>
        <div className="a-2col">
          <label className="a-field"><span>QA status</span><div className="a-select"><select defaultValue="in_progress"><option value="not_started">Not started</option><option value="in_progress">In progress</option><option value="qa_passed">Passed</option><option value="qa_failed">Failed</option></select><Icon n="chevron" s={13}/></div></label>
          <label className="a-field"><span>Lane override</span><div className="a-select"><select defaultValue="auto"><option value="auto">Auto</option><option value="green">Green</option><option value="amber">Amber</option><option value="red">Red</option></select><Icon n="chevron" s={13}/></div></label>
        </div>
        <div className="a-actions"><button className="a-btn ghost">Route to AppliCad</button><button className="a-btn amber">Mark pack ready</button></div>
      </div>
    </div>
  );
}

function AtlasSource({ ed }) {
  return (
    <div className="a-stack">
      <div className="a-card"><div className="a-card-h">Calibrated source</div>
        <div className="a-evi">{TK.EVIDENCE.map((r,i)=>(
          <div key={i} className="a-evi-row"><div><div className="a-evi-l">{r.label}</div><div className="a-evi-v">{r.value}</div></div><i className="a-dot" style={{background:A_TONE[r.conf][0]}}/></div>
        ))}</div>
      </div>
      <div className="a-banner"><Icon n="layers" s={14}/><span>Measurements derive from the JGW ruler and stay an internal BOQ prefill until QA passes.</span></div>
    </div>
  );
}

function Atlas() {
  const ed = useEditor();
  const [imgOpen, setImgOpen] = uS(false);
  const tools = [["select","Select","V"],["polygon","Polygon","B"],["line","Line","L"],["point","Point","P"]];
  const lineActive = ed.tool.mode==="line" || ed.selected?.geometry_type==="LineString";
  const drawClass = ed.tool.mode==="line" ? ed.tool.featureType : "ridge";
  const routeMeta = { ready:["#3FB67C","Pricing-stage basis"], verify:["#F4B454","Human verification"], full:["#FF5A63","Route to full"] }[ed.route];

  return (
    <div className="atlas">
      {/* command bar */}
      <header className="a-cmd">
        <div className="a-cmd-l">
          <button className="a-iconbtn"><Icon n="arrowLeft" s={16}/></button>
          <span className="a-mark">R</span>
          <div className="a-job"><div className="a-job-t">{TK.JOB.address}</div><div className="a-job-m">Takeoff Lite · {TK.JOB.market}</div></div>
        </div>
        <div className="a-cmd-c"><button className="a-cmdk"><Icon n="command" s={13}/>Search · run command<kbd>⌘K</kbd></button></div>
        <div className="a-cmd-r">
          <span className="a-route-pill" style={{ "--rc": routeMeta[0] }}><i/>{routeMeta[1]}</span>
          <span className="a-save"><i/>Saved 12:04</span>
          <button className="a-btn primary"><Icon n="download" s={14}/>Preview pack</button>
        </div>
      </header>

      <div className="a-body">
        {/* tool rail */}
        <nav className="a-rail">
          <div className="a-rail-g">
            {tools.map(([m,label,k])=>(
              <button key={m} className={"a-tool"+(ed.tool.mode===m?" on":"")}
                onClick={()=>ed.setTool(m==="line"?{mode:"line",featureType:"ridge"}:m==="polygon"?{mode:"polygon",featureType:"roof_plane"}:m==="point"?{mode:"point",featureType:"skylight"}:{mode:"select"})}
                data-tip={`${label} · ${k}`}><Icon n={atlasToolIcon(m)} s={19}/></button>
            ))}
          </div>
          <div className="a-rail-div"/>
          <div className="a-rail-g">
            <button className="a-tool" data-tip="Undo · ⌘Z"><Icon n="undo" s={18}/></button>
            <button className="a-tool" data-tip="Redo · ⇧⌘Z"><Icon n="redo" s={18}/></button>
          </div>
          <div className="a-rail-div"/>
          <div className="a-rail-g">
            <button className={"a-tool"+(ed.snap?" sig":"")} onClick={()=>ed.setSnap(s=>!s)} data-tip={ed.snap?"Snap on":"Free placement"}><Icon n="magnet" s={18}/></button>
            <button className={"a-tool"+(ed.trace?" sig":"")} onClick={()=>ed.setTrace(t=>!t)} data-tip={ed.trace?"Trace mode on":"Trace mode off"}><Icon n="trace" s={18}/></button>
            <button className={"a-tool"+(imgOpen?" on":"")} onClick={()=>setImgOpen(o=>!o)} data-tip="Image filters"><Icon n="image" s={18}/></button>
          </div>
          <div className="a-rail-sp"/>
          <button className="a-tool danger" disabled={!ed.selected} onClick={()=>ed.selected&&ed.del(ed.selId)} data-tip="Delete selected"><Icon n="trash" s={18}/></button>
        </nav>

        {/* canvas */}
        <div className="a-canvas">
          <RoofCanvas ed={ed} theme="dark"/>

          {/* floating line-class dock */}
          {lineActive && (
            <div className="a-dock">
              <span className="a-dock-l">{ed.selected?.geometry_type==="LineString" ? "Reclassify" : "Drawing as"}</span>
              <div className="a-dock-chips">{TK.LINE_ORDER.map(t=>{
                const on = ed.selected?.geometry_type==="LineString" ? ed.selected.feature_type===t : drawClass===t;
                return <button key={t} className={"a-dchip"+(on?" on":"")} onClick={()=> ed.selected?.geometry_type==="LineString" ? ed.reclass(ed.selId,t) : ed.setTool({mode:"line",featureType:t})}><ASwatch t={t}/>{TK.LINE_META[t].label}</button>;
              })}</div>
            </div>
          )}

          {/* image popover */}
          {imgOpen && (
            <div className="a-img-pop">
              <div className="a-card-h">Image</div>
              <label className="a-slider"><span>Opacity</span><input type="range" min="20" max="100" defaultValue="100"/></label>
              <label className="a-slider"><span>Contrast</span><input type="range" min="50" max="250" defaultValue="100"/></label>
              <label className="a-check"><input type="checkbox"/><span>Black & white</span></label>
            </div>
          )}

          {/* inspector */}
          <AtlasInspector ed={ed}/>

          {/* status */}
          <div className="a-status">
            <span className="a-status-mode"><Icon n={atlasToolIcon(ed.tool.mode)} s={13}/>{ed.tool.mode==="select"?"Select / edit":ed.tool.mode==="line"?"Draw line":ed.tool.mode==="polygon"?"Draw polygon":"Add object"}</span>
            <span className="a-status-hint">{ed.tool.mode==="select"?"Click a feature to inspect":"Click to place vertices · double-click to finish"}</span>
            <span className="a-status-snap">{ed.snap?"Snap on":"Free"}</span>
          </div>
          {/* zoom */}
          <div className="a-zoom"><button className="a-iconbtn"><Icon n="zoomIn" s={16}/></button><button className="a-iconbtn"><Icon n="zoomOut" s={16}/></button><button className="a-iconbtn"><Icon n="fit" s={15}/></button></div>
        </div>

        {/* right rail */}
        <aside className="a-side">
          <div className="a-tabs">{[["measure","Measure"],["boq","BOQ"],["qa","QA"],["source","Source"]].map(([k,l])=>
            <button key={k} className={"a-tab"+(ed.tab===k?" on":"")} onClick={()=>ed.setTab(k)}>{l}</button>)}</div>
          <div className="a-side-scroll">
            {ed.tab==="measure" && <AtlasMeasure ed={ed}/>}
            {ed.tab==="boq" && <AtlasBOQ ed={ed}/>}
            {ed.tab==="qa" && <AtlasQA ed={ed}/>}
            {ed.tab==="source" && <AtlasSource ed={ed}/>}
          </div>
        </aside>
      </div>
    </div>
  );
}
window.Atlas = Atlas;