/* QZ Motors — top-of-page sections. Extensions of the QZ Motors Design System. */
const DS = window.QZMotorsDesignSystem_756851;
const {Button, Badge, Tag, Select, Input, EmptyState, Switch, Modal, Toast} = DS;
const {useState, useEffect, useMemo, useRef} = React;

/* --- Wordmark ------------------------------------------------------------- */
function Wordmark({size=20}){
  return <img className="qz-logo" src="qz/logo-qz-motors.png" alt="QZ Motors" style={{height:(size*2.2)+'px'}}/>;
}

/* --- Status badge (extension: Badge + primary tone) ---------------------- */
function StatusBadge({status}){
  if(status==='featured') return <span className="qz-badge-primary">Featured</span>;
  if(status==='reserved') return <Badge tone="info">Reserved</Badge>;
  if(status==='sold') return <Badge tone="neutral">Sold</Badge>;
  return <Badge tone="success">Available</Badge>;
}

/* --- Top navigation (extension of TopNav: adds auth + post-ad actions) --- */
const P = {
  home:'QZ%20Motors%20-%20Homepage.html',
  inv:'QZ%20Motors%20-%20Inventory.html',
  detail:'QZ%20Motors%20-%20Vehicle%20Detail.html',
  sell:'QZ%20Motors%20-%20Sell%20Your%20Car.html',
  seller:'QZ%20Motors%20-%20Seller%20Dashboard.html',
  admin:'QZ%20Motors%20-%20Admin%20Dashboard.html',
  docs:'QZ%20Motors%20-%20Design%20Documentation.html'
};
const NAV = [{l:'Used Cars', h:P.inv, k:'inv'},{l:'Sell', h:P.sell, k:'sell'},{l:'Dashboard', h:P.seller, k:'seller'},{l:'Contact', h:P.home+'#contact', k:'contact'}];
function SiteNav({favCount=0, admin=false, onToggleAdmin, page='home'}){
  const [open, setOpen] = useState(false);
  const [auth, setAuth] = useState(false);
  const [user, setUser] = useState(()=>{try{return JSON.parse(localStorage.getItem('qz-user')||'null');}catch(e){return null;}});
  const signOut=()=>{localStorage.removeItem('qz-user'); setUser(null);};
  return (
    <header className="qz-nav">
      <div className="qz-nav-inner">
        <a className="qz-nav-brand" href={P.home} aria-label="QZ Motors home"><Wordmark/></a>
        <nav className="qz-nav-links" aria-label="Primary">
          {NAV.map(n=>(
            <a key={n.k} href={n.h} aria-current={page===n.k?'page':undefined} className={'qz-nav-link'+(page===n.k?' is-active':'')}>{n.l}</a>
          ))}
        </nav>
        <div className="qz-nav-actions">
          <a className="qz-nav-fav" href={P.seller} aria-label={`Saved vehicles: ${favCount}`}>
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 20s-7-4.35-7-9a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 4.65-7 9-7 9z"/></svg>
            <span className="qz-nav-fav-count">{favCount}</span>
          </a>
          <Button size="sm" onClick={()=>{window.location.href=P.sell;}}>+ Post Ad</Button>
          {user
            ? <Button size="sm" variant="outline-dark" onClick={signOut}>{(user.name||'Signed in')+' · Sign out'}</Button>
            : <Button size="sm" variant="outline-dark" onClick={()=>setAuth(true)}>Sign In</Button>}
        </div>
        <button className="qz-nav-burger" aria-expanded={open} aria-label="Menu" onClick={()=>setOpen(!open)}>
          <span/><span/><span/>
        </button>
      </div>
      {open && (
        <div className="qz-nav-mobile">
          {NAV.map(n=><a key={n.k} href={n.h} className={'qz-nav-link'+(page===n.k?' is-active':'')}>{n.l}</a>)}
          <div className="qz-nav-mobile-actions"><Button size="sm" onClick={()=>{window.location.href=P.sell;}}>+ Post Ad</Button>{user?<Button size="sm" variant="outline-dark" onClick={signOut}>Sign out</Button>:<Button size="sm" variant="outline-dark" onClick={()=>{setAuth(true);setOpen(false);}}>Sign In</Button>}</div>
        </div>
      )}
      <AuthModal open={auth} onClose={()=>setAuth(false)} onSignedIn={(u)=>setUser(u)}/>
    </header>
  );
}

/* --- Hero ---------------------------------------------------------------- */
function Hero({onBrowse, onSell}){
  return (
    <section className="qz-hero" id="top">
      <div className="qz-hero-media"><img className="qz-hero-img" src="uploads/paul-kansonkho-fDvByj8ms3k-unsplash.jpg" alt="White coupé parked at night against a warm-lit stone façade"/></div>
      <div className="qz-hero-scrim" aria-hidden="true"></div>
      <div className="qz-hero-body">
        <p className="qz-eyebrow qz-eyebrow-light">Established · Islamabad</p>
        <h1 className="qz-hero-title">QZ<br/><em>MOTORS</em></h1>
        <p className="qz-hero-sub">Every vehicle in the showroom passes a 197-point inspection before it reaches this page. Customer listings are published only after our own review.</p>
        <div className="qz-hero-cta">
          <Button onClick={onBrowse}>Browse Inventory</Button>
          <Button variant="outline-dark" onClick={onSell}>Sell Your Car</Button>
        </div>
      </div>
    </section>
  );
}

/* --- Advanced search ----------------------------------------------------- */
const ANY='Any';
const BODY=[ANY,'SUV','Sedan','Coupé','Hatchback','Pickup','Crossover'];
const TRANS=[ANY,'Automatic','Manual'];
const FUEL=[ANY,'Petrol','Diesel','Hybrid'];
const PRICE=[{label:ANY,value:'0'},{label:'Under 50 Lac',value:'5000000'},{label:'Under 1 Cr',value:'10000000'},{label:'Under 2.5 Cr',value:'25000000'},{label:'Under 5 Cr',value:'50000000'}];

function SearchPanel({filters, setFilters, matches, onSearch}){
  const brands = [ANY, ...Array.from(new Set(window.QZ.vehicles.map(v=>v.brand))).sort()];
  const years = [ANY, ...['2022','2020','2018','2015','2010']];
  const set = (k)=>(e)=>setFilters({...filters,[k]:e.target.value});
  return (
    <section className="qz-search" aria-label="Search inventory">
      <div className="qz-search-card">
        <div className="qz-search-head">
          <p className="qz-eyebrow">Find your next drive</p>
          <p className="qz-search-count" role="status">{matches} vehicles match</p>
        </div>
        <div className="qz-search-grid">
          <Select label="Brand" value={filters.brand} onChange={set('brand')} options={brands}/>
          <Select label="Body type" value={filters.body} onChange={set('body')} options={BODY}/>
          <Select label="Transmission" value={filters.trans} onChange={set('trans')} options={TRANS}/>
          <Select label="Fuel" value={filters.fuel} onChange={set('fuel')} options={FUEL}/>
          <Select label="Year from" value={filters.year} onChange={set('year')} options={years}/>
          <Select label="Budget" value={filters.price} onChange={set('price')} options={PRICE}/>
          <div className="qz-search-submit"><Button onClick={onSearch}>Search</Button></div>
        </div>
      </div>
    </section>
  );
}

/* --- Vehicle photo: real Storage photo, then local fallback, then drop-slot */
function VehiclePhoto({id, index=0, placeholder, urls}){
  const real=(urls&&urls[index]) ? urls[index] : window.QZPhotos.get(id)[index];
  if(real) return <img className="qz-photo-img" src={real} alt={placeholder||''}/>;
  return <image-slot id={'qz-'+id+(index?'-'+index:'')} shape="rect" placeholder={placeholder}></image-slot>;
}

/* --- Vehicle card (extension of ListingCard) ----------------------------- */
function VehicleCard({v, fav, onFav, feature=false, admin=false, onRemove}){
  const {fmt, fmtKm} = window.QZ;
  return (
    <article className={'qz-card'+(feature?' qz-card-feature':'')}>
      <div className="qz-card-media">
        <VehiclePhoto id={v.id} urls={v.photoUrls} placeholder={`${v.year} ${v.brand} ${v.model}`}/>
        <div className="qz-card-badge"><StatusBadge status={v.status}/></div>
        <button className={'qz-fav'+(fav?' is-on':'')} aria-pressed={fav} aria-label={fav?`Remove ${v.model} from saved`:`Save ${v.model}`} onClick={()=>onFav(v.id)}>
          <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill={fav?'currentColor':'none'} stroke="currentColor" strokeWidth="1.5"><path d="M12 20s-7-4.35-7-9a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 4.65-7 9-7 9z"/></svg>
        </button>
        <span className="qz-card-count">{window.QZPhotos.get(v.id).length || 6+(v.id.length*3)%14} photos</span>
      </div>
      <div className="qz-card-body">
        <h3 className="qz-card-title"><a href={P.detail+'?v='+v.id}>{v.year} {v.brand} {v.model}</a><span className="qz-card-variant"> {v.variant}</span></h3>
        <p className="qz-card-price">{fmt(v.price)}</p>
        <ul className="qz-card-specs">
          <li className="qz-spec-year">{v.year}</li>
          <li>{fmtKm(v.km)}</li>
          <li>{v.trans}</li>
          <li>{v.city}</li>
        </ul>
        {admin && (
          <div className="qz-card-admin">
            <span className="qz-card-admin-label">Admin</span>
            <button className="qz-card-remove" onClick={()=>onRemove(v.id)}>Remove vehicle</button>
          </div>
        )}
      </div>
    </article>
  );
}

/* --- Add vehicle (QZ Motors admin only) ---------------------------------- */
function AddVehicleModal({open, onClose, onAdd}){
  const blank={brand:'',model:'',variant:'',year:'2021',price:'',km:'',body:'SUV',trans:'Automatic',fuel:'Petrol',city:'Islamabad'};
  const [f,setF]=useState(blank);
  const [shots,setShots]=useState([]);
  const [busy,setBusy]=useState(false);
  const set=(k)=>(e)=>setF({...f,[k]:e.target.value});
  const pick=async(e)=>{
    const files=e.target.files; if(!files||!files.length) return;
    setBusy(true);
    const added=await window.QZPhotos.uploadFiles(files);
    setShots(s=>[...s,...added].slice(0,window.QZPhotos.MAX_PER_CAR));
    setBusy(false); e.target.value='';
  };
  const valid = f.brand.trim() && f.model.trim() && +f.price>0;
  const submit=(e)=>{e.preventDefault(); if(!valid) return; onAdd({...f, year:+f.year, price:Math.round(+f.price*100000), km:+f.km||0, shots}); setF(blank); setShots([]); onClose();};
  return (
    <Modal open={open} onClose={onClose} title="Add vehicle to inventory">
      <form className="qz-form qz-form-modal" onSubmit={submit}>
        <div className="qz-form-grid">
          <Input label="Brand" value={f.brand} onChange={set('brand')} placeholder="Toyota" required/>
          <Input label="Model" value={f.model} onChange={set('model')} placeholder="Land Cruiser" required/>
          <Input label="Variant" value={f.variant} onChange={set('variant')} placeholder="ZX"/>
          <Select label="Year" value={f.year} onChange={set('year')} options={['2026','2025','2024','2023','2022','2021','2020','2018','2015','2010']}/>
          <Input label="Price (Lac)" type="number" value={f.price} onChange={set('price')} placeholder="185" required/>
          <Input label="Mileage (KM)" type="number" value={f.km} onChange={set('km')} placeholder="42000"/>
          <Select label="Body" value={f.body} onChange={set('body')} options={BODY.slice(1)}/>
          <Select label="Transmission" value={f.trans} onChange={set('trans')} options={TRANS.slice(1)}/>
          <Select label="Fuel" value={f.fuel} onChange={set('fuel')} options={FUEL.slice(1)}/>
          <Select label="City" value={f.city} onChange={set('city')} options={['Islamabad','Rawalpindi','Lahore']}/>
        </div>
        <fieldset className="qz-upload">
          <legend className="qz-form-note" style={{textTransform:'uppercase',letterSpacing:'.9px'}}>Photographs</legend>
          <div className="qz-upload-row">
            <label className="qz-upload-btn">
              {busy?'Processing…':'Choose photos'}
              <input type="file" accept="image/*" multiple onChange={pick}/>
            </label>
            <p className="qz-form-note">{shots.length?`${shots.length} of ${window.QZPhotos.MAX_PER_CAR} attached — the first is the cover`:'JPG or PNG, up to 10. The first photo becomes the listing cover.'}</p>
          </div>
          {shots.length>0 && <div className="qz-upload-grid">
            {shots.map((src,i)=>(
              <div key={i} className={'qz-upload-thumb'+(i===0?' is-cover':'')}>
                <img src={src} alt={'Photo '+(i+1)}/>
                {i===0 && <span className="qz-upload-tag">Cover</span>}
                <button type="button" aria-label={'Remove photo '+(i+1)} onClick={()=>setShots(s=>s.filter((_,j)=>j!==i))}>×</button>
              </div>
            ))}
          </div>}
        </fieldset>
        <p className="qz-form-note">Published immediately as showroom stock. Customer submissions still require review.</p>
        <div className="qz-form-actions">
          <Button variant="outline-dark" onClick={onClose}>Cancel</Button>
          <Button type="submit" disabled={!valid}>Add to inventory</Button>
        </div>
      </form>
    </Modal>
  );
}

/* --- Inventory section (tabs + filters + grid) --------------------------- */
const TABS=[{id:'featured',label:'Featured'},{id:'latest',label:'Latest Arrivals'},{id:'all',label:'All Inventory'}];
function InventorySection({filters, setFilters, results, tab, setTab, favs, onFav, anchorRef, admin, onAdd, onRemove, total=0}){
  const [addOpen,setAddOpen]=useState(false);
  const chips = [
    filters.brand!==ANY && ['brand', filters.brand],
    filters.body!==ANY && ['body', filters.body],
    filters.trans!==ANY && ['trans', filters.trans],
    filters.fuel!==ANY && ['fuel', filters.fuel],
    filters.year!==ANY && ['year', filters.year+'+'],
    filters.price!=='0' && ['price', (PRICE.find(p=>p.value===filters.price)||{}).label]
  ].filter(Boolean);
  return (
    <section className="qz-band qz-band-light" ref={anchorRef} aria-label="Inventory">
      <div className="qz-container">
        <div className="qz-section-head">
          <div>
            <p className="qz-eyebrow qz-eyebrow-dark">Hand picked</p>
            <h2 className="qz-h2">The showroom floor</h2>
          </div>
          <div className="qz-section-actions">
            {admin && <Button size="sm" onClick={()=>setAddOpen(true)}>+ Add Vehicle</Button>}
            <a className="qz-viewall" href="#top">View all inventory →</a>
          </div>
        </div>
        <div className="qz-tabs" role="tablist" aria-label="Inventory views">
          {TABS.map(t=>(
            <button key={t.id} role="tab" aria-selected={tab===t.id} className={'qz-tab'+(tab===t.id?' is-active':'')} onClick={()=>setTab(t.id)}>{t.label}</button>
          ))}
        </div>
        {chips.length>0 && (
          <div className="qz-chips">
            {chips.map(([k,label])=><Tag key={k} onRemove={()=>setFilters({...filters,[k]: k==='price'?'0':ANY})}>{label}</Tag>)}
            <button className="qz-clear" onClick={()=>setFilters({brand:ANY,body:ANY,trans:ANY,fuel:ANY,year:ANY,price:'0'})}>Clear all</button>
          </div>
        )}
        {results.length===0
          ? <div className="qz-empty">{total===0
              ? <EmptyState title="No vehicles published yet" body="Stock appears here as soon as the showroom publishes it." action={<Button onClick={()=>{window.location.href=P.sell;}}>Sell your car</Button>}/>
              : <EmptyState title="No vehicles match those filters" body="Widen the budget or clear a filter — new stock is added weekly." action={<Button variant="outline-light" onClick={()=>setFilters({brand:ANY,body:ANY,trans:ANY,fuel:ANY,year:ANY,price:'0'})}>Clear filters</Button>}/>}</div>
          : <div className="qz-grid">
              {results.map((v,i)=><VehicleCard key={v.id} v={v} feature={i===0} fav={favs.includes(v.id)} onFav={onFav} admin={admin} onRemove={onRemove}/>)}
            </div>}
        <AddVehicleModal open={addOpen} onClose={()=>setAddOpen(false)} onAdd={onAdd}/>
      </div>
    </section>
  );
}

Object.assign(window, {VehiclePhoto, Wordmark, StatusBadge, SiteNav, Hero, SearchPanel, VehicleCard, InventorySection, AddVehicleModal, ANY, BODY, TRANS, FUEL, PRICE, P});