const conStyles = {
  shell:{maxWidth:1200, margin:"0 auto", minHeight:"100vh"},
  topbar:{display:"flex", alignItems:"center", gap:10, padding:"16px 20px", borderBottom:"1px solid var(--border)", background:"var(--bg-1)", position:"sticky", top:0, zIndex:4},
  listItem:(active)=>({display:"block", width:"100%", textAlign:"left", cursor:"pointer", padding:"var(--s-4)", borderRadius:"var(--r-lg)", border:"1px solid "+(active?"var(--blue-500)":"var(--border)"), background:"var(--bg-1)", boxShadow:active?"0 0 0 3px var(--blue-100)":"none", transition:"all var(--dur-fast) var(--ease-standard)"}),
  section:{marginBottom:"var(--s-6)"},
  h:{fontSize:13, fontWeight:600, letterSpacing:"-.005em", margin:"0 0 var(--s-3)", color:"var(--fg-1)"},
};
function urgencyBadge(u){
  const info = urgOf(u);
  return <span className={"badge "+(u==="emergency"?"badge-emergency":u==="week"?"badge-urgent":"badge-neutral")}>{info.label}</span>;
}
function statusBadge(s){
  return s==="quoted" ? <span className="badge badge-quoted"><Icon name="check" size={11}></Icon>Quoted</span> : <span className="badge badge-new">New</span>;
}
function ContractorApp({tweaks}){
  const [requests, setRequests] = useState(loadRequests);
  const [selId, setSelId] = useState(null);
  const [isWide, setIsWide] = useState(window.innerWidth >= 900);
  useEffect(()=>{
    const onR = ()=>setIsWide(window.innerWidth >= 900);
    window.addEventListener("resize", onR);
    return ()=>window.removeEventListener("resize", onR);
  }, []);
  useEffect(()=>{ if(isWide && !selId && requests.length) setSelId(requests[0].id); }, [isWide]);
  const update = (id, patch)=>{
    const list = requests.map(r=>r.id===id?{...r, ...patch}:r);
    setRequests(list); saveRequests(list);
  };
  const sel = requests.find(r=>r.id===selId);
  const newCount = requests.filter(r=>r.status==="new").length;
  const showList = isWide || !sel;
  const showDetail = isWide || !!sel;
  return <div style={conStyles.shell} data-screen-label="Contractor · Dashboard">
    <div style={conStyles.topbar}>
      {!isWide && sel ? <button className="btn btn-ghost btn-sm" style={{paddingLeft:0, color:"var(--fg-2)"}} onClick={()=>setSelId(null)}><Icon name="chevron-left" size={16}></Icon>Inbox</button>
        : <span style={{display:"flex", alignItems:"center", gap:9}}><BrandMark size={22}></BrandMark><span style={{fontWeight:600, fontSize:15}}>{BRAND}</span></span>}
      <span style={{marginLeft:"auto", marginRight:190, fontSize:13, color:"var(--fg-2)", whiteSpace:"nowrap"}}><span className="t-mono" style={{fontWeight:600, color:"var(--fg-1)"}}>{newCount}</span> awaiting quote</span>
    </div>
    <div style={{display:isWide?"grid":"block", gridTemplateColumns:isWide?"360px 1fr":undefined, gap:0, alignItems:"start"}}>
      {showList && <div style={{padding:"var(--s-4) 20px", display:"flex", flexDirection:"column", gap:"var(--s-3)", borderRight:isWide?"1px solid var(--border)":"none", minHeight:isWide?"calc(100vh - 65px)":undefined}}>
        <div className="t-micro" style={{padding:"var(--s-1) 0"}}>Incoming requests</div>
        {requests.map(r=><button key={r.id} style={conStyles.listItem(r.id===selId && isWide)} onClick={()=>setSelId(r.id)}>
          <div style={{display:"flex", alignItems:"center", gap:8, marginBottom:8}}>
            {statusBadge(r.status)}{urgencyBadge(r.urgency)}
            <span className="t-mono" style={{marginLeft:"auto", fontSize:11, color:"var(--fg-3)"}}>{timeAgo(r.createdAt)}</span>
          </div>
          <div style={{fontWeight:500, fontSize:15, letterSpacing:"-.01em", marginBottom:4}}>{r.ai.title}</div>
          <div style={{fontSize:13, color:"var(--fg-2)", display:"flex", alignItems:"center", gap:6}}>
            <Icon name={catOf(r.category).icon} size={13}></Icon>{catsLabel(r)} · {r.customer.name}
            {r.photos.length>0 && <span style={{display:"inline-flex", alignItems:"center", gap:3, marginLeft:"auto", color:"var(--fg-3)"}}><Icon name="image" size={13}></Icon>{r.photos.length}</span>}
          </div>
        </button>)}
        {requests.length===0 && <div className="card" style={{padding:"var(--s-8)", textAlign:"center", color:"var(--fg-2)"}}>No requests yet.</div>}
      </div>}
      {showDetail && (sel ? <RequestDetail key={sel.id} req={sel} tweaks={tweaks} onUpdate={patch=>update(sel.id, patch)}></RequestDetail>
        : <div style={{padding:"var(--s-16)", textAlign:"center", color:"var(--fg-3)"}}>Select a request.</div>)}
    </div>
  </div>;
}
function RequestDetail({req, tweaks, onUpdate}){
  const [lightbox, setLightbox] = useState(null);
  return <div className="fade" style={{padding:"var(--s-6) 20px var(--s-16)", maxWidth:720}} data-screen-label={"Contractor · Request "+req.ref}>
    <div style={{display:"flex", alignItems:"center", gap:8, flexWrap:"wrap", marginBottom:"var(--s-3)"}}>
      {statusBadge(req.status)}{urgencyBadge(req.urgency)}
      <span className="badge badge-neutral"><Icon name={catOf(req.category).icon} size={11}></Icon>{catsLabel(req)}</span>
      <span className="t-mono" style={{marginLeft:"auto", fontSize:12, color:"var(--fg-3)"}}>{req.ref} · {timeAgo(req.createdAt)}</span>
    </div>
    <h4 style={{margin:"0 0 var(--s-3)"}}>{req.ai.title}</h4>
    <p style={{margin:"0 0 var(--s-6)", color:"var(--fg-2)"}}>{req.ai.summary}</p>
    <div style={conStyles.section}><KeyFacts facts={req.ai.keyFacts}></KeyFacts></div>
    {req.ai.openQuestions && req.ai.openQuestions.length>0 && <div className="card" style={{...conStyles.section, padding:"var(--s-4)", background:"var(--bg-2)"}}>
      <div style={{display:"flex", alignItems:"center", gap:8, marginBottom:"var(--s-3)"}}><Icon name="circle-help" size={16} style={{color:"var(--warning-ink)"}}></Icon><span style={conStyles.h}>Still unknown — may affect the price</span></div>
      <div style={{display:"flex", flexDirection:"column", gap:"var(--s-2)"}}>
        {req.ai.openQuestions.map((q,i)=><div key={i} style={{fontSize:14, color:"var(--fg-2)", display:"flex", gap:8}}><span style={{color:"var(--ink-300)"}}>—</span>{q}</div>)}
      </div>
    </div>}
    {req.photos.length>0 && <div style={conStyles.section}>
      <div style={conStyles.h}>Photos</div>
      <div style={{display:"flex", gap:"var(--s-2)", flexWrap:"wrap"}}>
        {req.photos.map((p,i)=><img key={i} src={p} alt={"Photo "+(i+1)} onClick={()=>setLightbox(p)} style={{width:96, height:96, objectFit:"cover", borderRadius:"var(--r-md)", border:"1px solid var(--border)", cursor:"zoom-in"}}></img>)}
      </div>
    </div>}
    <div style={conStyles.section}>
      <div style={conStyles.h}>Customer</div>
      <div className="card" style={{padding:"var(--s-4)", display:"flex", flexWrap:"wrap", gap:"var(--s-4) var(--s-8)", fontSize:14}}>
        <span style={{fontWeight:500}}>{req.customer.name}</span>
        {req.customer.phone && <span style={{display:"inline-flex", gap:6, alignItems:"center", color:"var(--fg-2)"}}><Icon name="phone" size={14}></Icon>{req.customer.phone}</span>}
        {req.customer.email && <span style={{display:"inline-flex", gap:6, alignItems:"center", color:"var(--fg-2)"}}><Icon name="mail" size={14}></Icon>{req.customer.email}</span>}
        {req.property.address && <span style={{display:"inline-flex", gap:6, alignItems:"center", color:"var(--fg-2)"}}><Icon name="map-pin" size={14}></Icon>{req.property.address}</span>}
        {req.customer.pref && <span className="badge badge-neutral">Prefers {req.customer.pref.toLowerCase()}</span>}
      </div>
    </div>
    <details style={conStyles.section}>
      <summary style={{cursor:"pointer", fontSize:13, fontWeight:500, color:"var(--fg-2)", padding:"var(--s-2) 0"}}>Original description &amp; follow-up answers</summary>
      <div className="card" style={{padding:"var(--s-4)", marginTop:"var(--s-2)"}}>
        <p style={{margin:"0 0 var(--s-4)", fontSize:14, fontStyle:"italic", color:"var(--fg-2)"}}>&ldquo;{req.description}&rdquo;</p>
        <div style={{display:"flex", flexDirection:"column", gap:"var(--s-3)"}}>
          {req.transcript.filter(m=>m.role==="ai").length>0 && req.transcript.map((m,i)=>
            <div key={i} style={{fontSize:13, display:"flex", gap:8}}>
              <span className="t-micro" style={{flex:"none", width:52, paddingTop:2}}>{m.role==="ai"?"Asked":"Answer"}</span>
              <span style={{color:m.role==="ai"?"var(--fg-2)":"var(--fg-1)", fontWeight:m.role==="ai"?400:500}}>{m.text}</span>
            </div>)}
        </div>
      </div>
    </details>
    {req.status==="quoted" && req.quote ? <QuoteSent quote={req.quote}></QuoteSent> : <QuoteBuilder req={req} aiDraft={!tweaks || tweaks.aiDraftQuote!==false} onSend={(quote)=>onUpdate({status:"quoted", quote})}></QuoteBuilder>}
    {lightbox && <div onClick={()=>setLightbox(null)} style={{position:"fixed", inset:0, background:"rgba(10,10,11,.8)", zIndex:20, display:"flex", alignItems:"center", justifyContent:"center", padding:24, cursor:"zoom-out"}}>
      <img src={lightbox} alt="Photo enlarged" style={{maxWidth:"100%", maxHeight:"100%", borderRadius:"var(--r-lg)"}}></img>
    </div>}
  </div>;
}
function QuoteBuilder({req, aiDraft, onSend}){
  const [items, setItems] = useState([{id:uid(), desc:"", qty:1, price:""}]);
  const [note, setNote] = useState("");
  const [validDays, setValidDays] = useState(30);
  const [drafting, setDrafting] = useState(false);
  const [basis, setBasis] = useState("");
  const drafted = useRef(false);
  useEffect(()=>{
    if(!aiDraft || drafted.current) return;
    drafted.current = true;
    setDrafting(true);
    suggestQuote(req).then(res=>{
      const lines = (res.items||[]).filter(it=>it.desc && Number(it.price)>0).slice(0,5).map(it=>({id:uid(), desc:it.desc, qty:Number(it.qty)||1, price:Number(it.price)}));
      if(lines.length){ setItems(lines); setBasis(res.basis||""); }
      setDrafting(false);
    }).catch(()=>setDrafting(false));
  }, []);
  const upItem = (id, patch)=>setItems(list=>list.map(it=>it.id===id?{...it, ...patch}:it));
  const total = items.reduce((s,it)=>s + (Number(it.qty)||0)*(Number(it.price)||0), 0);
  const valid = items.some(it=>it.desc.trim() && Number(it.price)>0);
  return <div className="card" style={{padding:"var(--s-6)", boxShadow:"var(--shadow-1)"}}>
    <div className="t-eyebrow" style={{marginBottom:"var(--s-2)"}}>Quote</div>
    <h5 style={{margin:"0 0 var(--s-4)"}}>Build the quote</h5>
    {drafting && <div className="card" style={{padding:"var(--s-3) var(--s-4)", marginBottom:"var(--s-3)", background:"var(--bg-2)", display:"flex", gap:10, alignItems:"center", border:"none"}}>
      <div className="typing"><span></span><span></span><span></span></div>
      <span style={{fontSize:13, color:"var(--fg-2)"}}>Drafting line items from similar past quotes…</span>
    </div>}
    {!drafting && basis && <div className="fade" style={{padding:"var(--s-3) var(--s-4)", marginBottom:"var(--s-3)", background:"var(--blue-50)", borderRadius:"var(--r-md)", display:"flex", gap:8, alignItems:"flex-start"}}>
      <Icon name="history" size={15} style={{color:"var(--blue-600)", marginTop:2}}></Icon>
      <span style={{fontSize:13, color:"var(--blue-600)"}}>{basis} Suggested lines — adjust anything. The system learns from every quote you send.</span>
    </div>}
    <div style={{display:"flex", flexDirection:"column", gap:"var(--s-2)", marginBottom:"var(--s-3)"}}>
      {items.map(it=><div key={it.id} style={{display:"grid", gridTemplateColumns:"1fr 56px 92px 28px", gap:"var(--s-2)", alignItems:"center"}}>
        <input className="input" placeholder="Line item, e.g. Replace sink trap" value={it.desc} onChange={e=>upItem(it.id, {desc:e.target.value})} style={{fontSize:14, padding:"9px 12px"}}></input>
        <input className="input t-mono" type="number" min="1" aria-label="Quantity" value={it.qty} onChange={e=>upItem(it.id, {qty:e.target.value})} style={{fontSize:14, padding:"9px 8px", textAlign:"center"}}></input>
        <input className="input t-mono" type="number" min="0" placeholder="$" aria-label="Unit price" value={it.price} onChange={e=>upItem(it.id, {price:e.target.value})} style={{fontSize:14, padding:"9px 10px", textAlign:"right"}}></input>
        <button aria-label="Remove line" className="btn btn-ghost btn-sm" style={{padding:4, color:"var(--fg-3)"}} onClick={()=>setItems(list=>list.length>1?list.filter(x=>x.id!==it.id):list)}><Icon name="x" size={15}></Icon></button>
      </div>)}
    </div>
    <button className="btn btn-ghost btn-sm" style={{paddingLeft:0}} onClick={()=>setItems(list=>[...list, {id:uid(), desc:"", qty:1, price:""}])}><Icon name="plus" size={14}></Icon>Add line</button>
    <div style={{borderTop:"1px solid var(--border)", margin:"var(--s-4) 0", paddingTop:"var(--s-4)", display:"flex", alignItems:"baseline", justifyContent:"space-between"}}>
      <span style={{fontSize:13, color:"var(--fg-2)"}}>Total</span>
      <span className="t-mono" style={{fontSize:28, fontWeight:700, letterSpacing:"-.01em"}}>{money(total)}</span>
    </div>
    <textarea className="input" placeholder="Note to the customer — what's included, when you can start…" value={note} onChange={e=>setNote(e.target.value)} style={{minHeight:70, marginBottom:"var(--s-3)"}}></textarea>
    <div style={{display:"flex", alignItems:"center", gap:"var(--s-3)", flexWrap:"wrap"}}>
      <span style={{fontSize:13, color:"var(--fg-2)"}}>Valid for</span>
      {[14,30,60].map(d=><button key={d} className={"chip"+(validDays===d?" on":"")} onClick={()=>setValidDays(d)}>{d} days</button>)}
      <button className="btn btn-primary" style={{marginLeft:"auto"}} disabled={!valid} onClick={()=>onSend({items:items.filter(it=>it.desc.trim()).map(it=>({desc:it.desc, qty:Number(it.qty)||1, price:Number(it.price)||0})), note, validDays, sentAt:Date.now()})}>Send quote<Icon name="arrow-right" size={15}></Icon></button>
    </div>
    <p style={{fontSize:12, color:"var(--fg-3)", margin:"var(--s-3) 0 0"}}>Goes to {req.customer.name} by {req.customer.pref ? req.customer.pref.toLowerCase() : "email"}.</p>
  </div>;
}
function QuoteSent({quote}){
  const total = quote.items.reduce((s,it)=>s+it.qty*it.price, 0);
  return <div className="card" style={{padding:"var(--s-6)"}}>
    <div style={{display:"flex", alignItems:"center", gap:8, marginBottom:"var(--s-4)"}}>
      <span className="badge badge-quoted"><Icon name="check" size={11}></Icon>Quote sent</span>
      <span className="t-mono" style={{fontSize:12, color:"var(--fg-3)"}}>{timeAgo(quote.sentAt)} · valid {quote.validDays} days</span>
    </div>
    <div style={{display:"flex", flexDirection:"column", gap:"var(--s-2)", marginBottom:"var(--s-4)"}}>
      {quote.items.map((it,i)=><div key={i} style={{display:"flex", justifyContent:"space-between", fontSize:14, gap:12}}>
        <span style={{color:"var(--fg-2)"}}>{it.desc}{it.qty>1?` × ${it.qty}`:""}</span>
        <span className="t-mono">{money(it.qty*it.price)}</span>
      </div>)}
    </div>
    <div style={{borderTop:"1px solid var(--border)", paddingTop:"var(--s-3)", display:"flex", justifyContent:"space-between", alignItems:"baseline"}}>
      <span style={{fontSize:13, color:"var(--fg-2)"}}>Total</span>
      <span className="t-mono" style={{fontSize:24, fontWeight:700}}>{money(total)}</span>
    </div>
    {quote.note && <p style={{fontSize:13, color:"var(--fg-2)", margin:"var(--s-3) 0 0"}}>{quote.note}</p>}
  </div>;
}
Object.assign(window, {ContractorApp});