import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import type { Session, RequestRecord } from '../types/index.js';
import { LatencyChart } from '../components/LatencyChart.js';
import { LiveCapture } from '../components/LiveCapture.js';
import { conclusions } from '../lib/analysis.js';
import './style.css';
const initial:Session={id:'',url:'',phase:'idle',started:null,requests:0,responses:0,changesTotal:0,records:[],endpoints:[],changes:[],logs:[],error:null,lastDom:null,lastVisible:null,comparisons:[],source:'isolated',watches:[],liveValues:[],valueUpdates:[]};
const ms=(v:number|null|undefined)=>v==null?'—':`${v.toLocaleString(undefined,{maximumFractionDigits:1})} ms`;
const time=(v:number|null)=>v?new Date(v).toLocaleTimeString():'—';
const average=(a:(number|null|undefined)[])=>{const n=a.filter((v):v is number=>typeof v==='number');return n.length?n.reduce((a,b)=>a+b,0)/n.length:null;};
function App(){
  const [s,setS]=useState(initial),[url,setUrl]=useState(''),[tab,setTab]=useState('Endpoints'),[error,setError]=useState(''),[connected,setConnected]=useState(false),[busy,setBusy]=useState(false),[search,setSearch]=useState(''),[selected,setSelected]=useState<RequestRecord|null>(null),[label,setLabel]=useState(''),[view,setView]=useState('overview');
  useEffect(()=>{const events=new EventSource('/api/events');events.onmessage=e=>{setS(JSON.parse(e.data));setConnected(true);};events.onerror=()=>setConnected(false);return()=>events.close();},[]);
  async function action(name:string,body:unknown={}){setBusy(true);setError('');try{const r=await fetch(`/api/${name}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});const data=await r.json();if(!r.ok)throw new Error(data.error);if(name==='clear'){setSelected(null);setS(initial);}return data as {token?:string};}catch(e){setError(e instanceof Error?e.message:'Unable to reach the local server.');}finally{setBusy(false);}}
  const active=['starting','monitoring'].includes(s.phase),api=s.records.filter(r=>r.api),complete=api.filter(r=>r.duration!==null),avg=average(complete.map(r=>r.duration)),last=s.changes[0],total=average(complete.filter(r=>r.visibleDelay!==undefined).map(r=>(r.duration??0)+r.visibleDelay!));
  const timingRows=complete.length?complete:s.records.filter(r=>r.duration!==null);
  const filtered=s.records.filter(r=>`${r.endpoint} ${r.method} ${r.status} ${r.kind}`.toLowerCase().includes(search.toLowerCase()));
  return <div className="shell">
    <aside className="sidebar"><a className="brand" href="#" aria-label="PROJAWAL home"><span className="brand-icon">P<span/></span><span>PROJAWAL<small>OBSERVABILITY LAB</small></span></a><div className="workspace">WORKSPACE <span>LOCAL</span></div><nav>{[['overview','◈','Overview'],['network','⇄','Network activity'],['changes','⌁','Data changes'],['comparison','▥','Compare sessions']].map(([key,icon,text])=><button key={key} className={view===key?'nav-item active':'nav-item'} onClick={()=>{setView(key);if(key==='network')setTab('Network');if(key==='changes')setTab('Changes');}}><b>{icon}</b>{text}{key==='changes'&&s.changesTotal>0&&<i>{s.changesTotal}</i>}</button>)}</nav><div className="side-note"><span className="shield">◇</span><strong>Observe. Understand.</strong><p>Public browser activity.<br/>Local, isolated sessions.</p><small>No access-control bypass.</small></div><div className="side-footer"><span className={`dot ${connected?'green':''}`}/>{connected?'Local engine connected':'Engine disconnected'}<small>PROJAWAL / v1.0</small></div></aside>
    <main><header className="topbar"><div><span className="breadcrumb">WORKSPACE /</span> {view==='comparison'?'Compare sessions':'Analysis overview'}</div><span className="local-pill">⌘ &nbsp; LOCALHOST ONLY</span></header>
    <div className="content"><div className="page-title"><div><div className="eyebrow">BROWSER OBSERVABILITY</div><h1>Web Latency &amp; Real-Time Data Analyzer</h1><p>Follow the request. Find the delay.</p></div><span className="version">LOCAL-FIRST <b>v1.0</b></span></div>
    <nav className="mobile-nav" aria-label="Mobile workspace navigation">{[['overview','Overview'],['network','Network activity'],['changes','Data changes'],['comparison','Compare sessions']].map(([key,text])=><button key={key} className={view===key?'selected':''} onClick={()=>{setView(key);if(key==='network')setTab('Network');if(key==='changes')setTab('Changes');}}>{text}</button>)}</nav>
    <section className="panel analyzer"><div className="panel-title"><h2><span className="accent">◎</span> Website analyzer</h2><span className="privacy">◇ &nbsp; Isolated browser · memory-only</span></div><form onSubmit={e=>{e.preventDefault();void action('start',{url});}}><label className="url-field"><span>↗</span><input type="url" aria-label="Website URL" placeholder="https://example.com" value={url} onChange={e=>setUrl(e.target.value)} required disabled={active}/></label><button className="primary" disabled={busy||active||!connected}><span>▷</span> Start analysis</button><button type="button" className="secondary" disabled={busy||!active} onClick={()=>void action('stop')}>□ &nbsp; Stop</button><button type="button" className="text-button" disabled={busy} onClick={()=>void action('clear')}>Clear session data</button></form><div className="analyzer-bottom"><span><span className={`dot ${s.phase==='monitoring'?'green':s.phase==='error'?'red':''}`}/>{s.phase==='idle'?'Ready to analyze':s.phase==='starting'?'Launching browser…':s.phase==='monitoring'?'Monitoring':s.phase==='error'?'Error':'Stopped'}{s.url&&<code title={s.url}>{s.url}</code>}</span><small>Client-observed measurements · no saved credentials</small></div></section>
    {(error||s.error||!connected)&&<div role="alert" className="alert">{error||s.error||'Connecting to the local observer engine…'}</div>}
    <LiveCapture session={s} action={action} busy={busy}/>
    <div className="stats"><Stat label="REQUESTS OBSERVED" value={String(s.requests)} foot={`${s.endpoints.length} detected data endpoints`} icon="↗"/><Stat label="RESPONSES RECEIVED" value={String(s.responses)} foot="HTTP responses + WebSocket frames" icon="↙"/><Stat label="AVG. API RESPONSE" value={ms(avg)} foot="Request start → response completion" icon="◷"/><Stat label="DATA CHANGES" value={String(s.changesTotal)} foot={last?`Last detected ${time(last.at)}`:'Waiting for a response change'} icon="⌁"/></div>
    {view==='comparison'?<section className="panel"><div className="panel-title"><h2>Compare two observed sessions</h2><span className="tag">MEMORY ONLY</span></div><p className="muted">Save a summary, stop the analysis, then run a second session. The latest two snapshots stay in memory until cleared. Values reflect the retained request window.</p><div className="compare-form"><input aria-label="Comparison label" value={label} onChange={e=>setLabel(e.target.value)} placeholder="Session label, e.g. baseline" maxLength={60}/><button className="primary" disabled={!s.responses||busy} onClick={()=>void action('compare',{label})}>Save comparison snapshot</button></div><div className="table-wrap"><table><thead><tr><th>MEASUREMENT</th>{s.comparisons.map((c,i)=><th key={c.id}>{i===0?'A':'B'} · {c.label}</th>)}</tr></thead><tbody>{(['dns','connect','ttfb','duration','rendering','total'] as const).map(k=><tr key={k}><td>{{dns:'DNS',connect:'Connection (includes TLS)',ttfb:'Time to first byte',duration:'Completed response',rendering:'Correlated frame callback',total:'Correlated request → frame'}[k]}</td>{s.comparisons.map(c=><td key={c.id} className="mono">{ms(c[k])}</td>)}</tr>)}</tbody></table></div>{!s.comparisons.length&&<Empty title="No comparison snapshots" text="Collect responses and save your first session above."/>}</section>:<>
    <div className="overview-grid"><section className="panel timeline-panel"><div className="panel-title"><div><h2>Response latency</h2><p className="muted">Completed requests over time</p></div><span className="legend"><span className="dot green"/> Duration · ms</span></div><LatencyChart records={s.records}/><div className="chart-footer"><span>Last 60 completed requests</span><span>Peak <b>{ms(s.records.reduce<number|null>((max,r)=>r.duration===null?max:Math.max(max??0,r.duration),null))}</b></span></div></section><section className="panel breakdown"><div className="panel-title"><h2>Latency breakdown</h2><span className="tag">OBSERVED</span></div>{[['DNS lookup',average(timingRows.map(r=>r.timing.dns))],['Connection · includes TLS',average(timingRows.map(r=>r.timing.connect))],['Time to first byte',average(timingRows.map(r=>r.timing.ttfb))],['Response download',average(timingRows.map(r=>r.timing.download))],['Browser processing',null],['Response → frame¹',average(complete.map(r=>r.visibleDelay))]].map(([name,val])=><div className="breakdown-row" key={String(name)}><span>{name}</span><b className="mono">{ms(val as number|null)}</b></div>)}<div className="total-row"><span>Request → frame¹</span><strong>{ms(total)}</strong></div><p className="fine">¹ Temporal correlation, not causal latency. DNS/connection samples include reused connections. Processing cannot be measured reliably.</p></section></div>
    <section className="panel evidence"><div className="evidence-head"><div className="tabs" role="tablist" aria-label="Analysis evidence">{['Endpoints','Network','Changes','Logs'].map(t=><button role="tab" aria-selected={tab===t} key={t} className={tab===t?'tab selected':'tab'} onClick={()=>setTab(t)}>{t}<span>{t==='Endpoints'?s.endpoints.length:t==='Network'?s.requests:t==='Changes'?s.changesTotal:s.logs.length}</span></button>)}</div>{tab==='Network'&&<input className="search" aria-label="Filter network activity" placeholder="Filter requests…" value={search} onChange={e=>setSearch(e.target.value)}/>}<span className="live"><span className={`dot ${active?'green':''}`}/>{active?'LIVE':'SESSION'}</span></div>
    {tab==='Endpoints'&&<div className="table-wrap"><table><thead><tr><th>ENDPOINT</th><th>METHOD / TYPE</th><th>STATUS</th><th>RESPONSE</th><th>POLLING</th><th>LAST CHANGE</th></tr></thead><tbody>{s.endpoints.map(e=><tr key={e.key}><td className="endpoint" title={e.url}>{e.url}<small>{e.contentType||'Awaiting response'}</small></td><td><span className="method">{e.method}</span><small>{e.kind} · {e.count} observed</small></td><td><Status value={e.status}/></td><td className="mono">{ms(e.duration)}</td><td className="mono">{e.polling?`≈ ${(e.polling/1000).toFixed(1)} s`:'—'}</td><td className="mono">{time(e.lastChange)}</td></tr>)}</tbody></table>{!s.endpoints.length&&<Empty title="No data endpoints detected yet" text="Fetch, XHR, JSON, GraphQL, SSE and WebSocket traffic will appear here."/>}</div>}
    {tab==='Network'&&<div className="table-wrap"><table><thead><tr><th>TIME</th><th>REQUEST</th><th>TYPE</th><th>STATUS</th><th>DURATION</th><th>SIZE</th><th></th></tr></thead><tbody>{filtered.map(r=><tr key={r.id}><td className="mono">{time(r.started)}</td><td className="endpoint" title={r.endpoint}><span className="method">{r.method}</span> {r.endpoint}{r.failure&&<small className="error-text">{r.failure}</small>}</td><td>{r.kind}</td><td><Status value={r.status}/></td><td className="mono">{ms(r.duration)}</td><td className="mono">{r.size===null?'—':`${(r.size/1024).toFixed(1)} KB`}</td><td><button className="detail-button" onClick={()=>setSelected(r)}>Inspect ↗</button></td></tr>)}</tbody></table>{!filtered.length&&<Empty title="No matching requests" text="Browser requests appear here as the target loads and updates."/>}</div>}
    {tab==='Changes'&&<div className="changes">{s.changes.map(c=><div className="change" key={c.id}><div><span className="change-symbol">⌁</span><strong>Response fingerprint changed</strong><time>{time(c.at)}</time></div><p className="mono">{c.endpoint}</p><div className="hashes"><span>PREVIOUS <code>{c.previous.slice(0,20)}…</code></span><b>→</b><span>NEW <code>{c.current.slice(0,20)}…</code></span></div><small>{c.transport} · {c.size} bytes · response payloads are not retained</small></div>)}{!s.changes.length&&<Empty title="No changes observed" text="Successive response fingerprints are compared without displaying or retaining their contents."/>}</div>}
    {tab==='Logs'&&<div className="logs">{s.logs.map((l,i)=><div key={`${l.at}-${i}`}><time>{time(l.at)}</time><span className={`log-level ${l.level}`}>{l.level}</span><span>{l.message}</span></div>)}{!s.logs.length&&<Empty title="Engine is ready" text="Session events and useful error messages will appear here."/>}</div>}
    <div className="evidence-footer"><span>Query values, credentials, response bodies and sensitive headers are withheld.</span><span>600-request window</span></div></section>
    <section className="panel findings"><div className="panel-title"><h2><span className="accent">⌕</span> WHERE IS THE DELAY?</h2><span className="tag">EVIDENCE-BASED FINDINGS</span></div><div className="finding-grid">{conclusions(s).map((f,i)=><div className={`finding ${f.severity}`} key={f.title}><span className="finding-number">{String(i+1).padStart(2,'0')}</span><div><h3>{f.title}</h3><p>{f.detail}</p></div></div>)}</div></section>
    <section className="panel journey"><h2>Observed browser journey</h2><div className="journey-steps">{[['01','Request started','Browser timestamp'],['02','Response received','Headers / completion'],['03','Data processed','Unavailable without instrumentation'],['04','DOM changed','Page-wide mutation'],['05','Frame callback','Double requestAnimationFrame']].map(([n,title,desc])=><div key={n}><span>{n}</span><strong>{title}</strong><small>{desc}</small></div>)}</div><p className="fine">DOM and frame events are matched to the latest API response within two seconds. Relevant-element changes and actual screen paint are not established. Last DOM event: {time(s.lastDom)} · Last frame callback: {time(s.lastVisible)}</p></section>
    </>}
    <footer><span>PROJAWAL <b>•</b> Local web-performance research</span><span>Observation only. Website access restrictions remain respected.</span></footer></div></main>
    {selected&&<div className="modal-backdrop" onClick={()=>setSelected(null)}><section role="dialog" aria-modal="true" aria-label="Request details" className="modal panel" onClick={e=>e.stopPropagation()}><div className="panel-title"><h2>Request details</h2><button className="secondary" onClick={()=>setSelected(null)} autoFocus>Close ×</button></div><p className="mono wrap">{selected.method} {selected.endpoint}</p><div className="detail-grid">{Object.entries({Started:time(selected.started),'Response headers':time(selected.responded),Completed:time(selected.finished),Duration:ms(selected.duration),DNS:ms(selected.timing.dns),Connection:ms(selected.timing.connect),TLS:ms(selected.timing.tls),TTFB:ms(selected.timing.ttfb),Download:ms(selected.timing.download),'DOM correlation':ms(selected.domDelay),'Frame correlation':ms(selected.visibleDelay)}).map(([k,v])=><div key={k}><span>{k}</span><b>{v}</b></div>)}</div><h3>Public cache / infrastructure headers</h3><pre>{JSON.stringify(selected.headers,null,2)}</pre><p className="fine">TLS overlaps connection time. TTFB includes server and network time. Processing and exact publication time are unavailable.</p></section></div>}
  </div>;
}
function Stat({label,value,foot,icon}:{label:string;value:string;foot:string;icon:string}){return <section className="stat"><div><span>{label}</span><b>{icon}</b></div><strong>{value}</strong><small>{foot}</small></section>;}
function Status({value}:{value:number|null}){return value===null?<span className="muted">—</span>:<span className={`status ${value<400?'ok':'bad'}`}>{value}</span>;}
function Empty({title,text}:{title:string;text:string}){return <div className="empty"><span>⌁</span><strong>{title}</strong><p>{text}</p></div>;}
createRoot(document.getElementById('root')!).render(<React.StrictMode><App/></React.StrictMode>);