const {useState,useEffect}=React;

function App(){
  const[sesion,setSesion]=useState(undefined);
  const[datos,setDatos]=useState(undefined);
  const[error,setError]=useState("");
  useEffect(()=>{
    sb.auth.getSession().then(({data})=>setSesion(data.session));
    const{data:s}=sb.auth.onAuthStateChange((_e,x)=>setSesion(x));
    return()=>s.subscription.unsubscribe();
  },[]);
  async function cargar(){
    const{data,error}=await sb.rpc("miauto_inicio");
    if(error){setError(mensajeError(error));setDatos(null);return;}
    setError("");setDatos(data);
  }
  useEffect(()=>{if(sesion)cargar();else setDatos(undefined);},[sesion&&sesion.user.id]);
  if(sesion===undefined)return <p className="cargando">Cargando…</p>;
  if(!sesion)return <Acceso/>;
  if(datos===undefined)return <p className="cargando">Cargando tu auto…</p>;
  if(datos===null)return <div className="app"><div className="cuerpo"><div className="error">{error}</div><button className="btn secundario" onClick={cargar}>Reintentar</button></div></div>;
  if(!datos.autos.length)return <Alta onListo={cargar} primera={true}/>;
  return <Principal datos={datos} recargar={cargar} correo={sesion.user.email}/>;
}

function Acceso(){
  const[modo,setModo]=useState("registro");
  const[correo,setCorreo]=useState("");const[clave,setClave]=useState("");
  const[error,setError]=useState("");const[ocupado,setOcupado]=useState(false);
  async function enviar(e){
    e.preventDefault();setError("");
    if(modo==="registro"&&clave.length<10){setError("La contraseña debe tener al menos 10 caracteres.");return;}
    setOcupado(true);
    const r=modo==="entrar"?await sb.auth.signInWithPassword({email:correo.trim(),password:clave}):await sb.auth.signUp({email:correo.trim(),password:clave});
    setOcupado(false);
    if(r.error)setError(mensajeError(r.error));
  }
  return(
    <div className="acceso"><div className="acceso-caja">
      <div style={{display:"grid",gap:8}}><h1>Upco <span>Mi Auto</span></h1>
        <p>Tu auto al día, gratis: Hoy No Circula, verificación, seguro, servicio y tus papeles en el celular.</p></div>
      <div className="tarjeta" style={{gap:16,color:"var(--ink)"}}>
        <div className="pestanas">
          <button type="button" className={modo==="registro"?"on":""} onClick={()=>{setModo("registro");setError("");}}>Crear cuenta</button>
          <button type="button" className={modo==="entrar"?"on":""} onClick={()=>{setModo("entrar");setError("");}}>Ya tengo cuenta</button>
        </div>
        <form onSubmit={enviar} style={{display:"grid",gap:14}}>
          <div className="campo"><label htmlFor="correo">Correo</label><input id="correo" type="email" autoComplete="email" required value={correo} onChange={e=>setCorreo(e.target.value)}/></div>
          <div className="campo"><label htmlFor="clave">Contraseña {modo==="registro"&&<span className="ayuda">· mínimo 10 caracteres</span>}</label><input id="clave" type="password" autoComplete={modo==="entrar"?"current-password":"new-password"} required value={clave} onChange={e=>setClave(e.target.value)}/></div>
          {error&&<div className="error">{error}</div>}
          <button className="btn primario" disabled={ocupado}>{ocupado?"Un momento…":modo==="entrar"?"Entrar":"Crear mi cuenta"}</button>
        </form>
      </div>
    </div></div>
  );
}

function Segmento({opciones,valor,onCambio,etiqueta}){
  return <div className="seg" role="radiogroup" aria-label={etiqueta}>{opciones.map(o=><button type="button" key={o.v} role="radio" aria-checked={o.v===valor} className={o.v===valor?"on":""} onClick={()=>onCambio(o.v)}>{o.t}</button>)}</div>;
}
function useAseguradoras(){
  const[l,setL]=useState([]);
  useEffect(()=>{sb.from("aseguradoras").select("id,nombre").order("nombre").then(({data})=>setL(data||[]));},[]);
  return l;
}

function Alta({onListo,primera,onCancelar}){
  const aseg=useAseguradoras();
  const[f,setF]=useState({placas:"",estado:"",holograma:null,km:"",marca:"",modelo:"",anio:"",aseguradora:"",vence:""});
  const[error,setError]=useState("");const[ocupado,setOcupado]=useState(false);
  const c=k=>e=>setF({...f,[k]:e.target.value});
  const dig=soloDigitos(f.placas).slice(-1);
  const engomado={"5":"amarillo","6":"amarillo","7":"rosa","8":"rosa","3":"rojo","4":"rojo","1":"verde","2":"verde","9":"azul","0":"azul"}[dig];
  async function guardar(e){
    e.preventDefault();setError("");
    const anio=f.anio?parseInt(f.anio,10):null;
    if(anio&&(anio<1960||anio>new Date().getFullYear()+1)){setError("Revisa el año.");return;}
    setOcupado(true);
    const{data,error}=await sb.rpc("miauto_crear",{p_placas:f.placas,p_estado:f.estado||null,p_holograma:f.holograma,p_km:f.km?parseInt(soloDigitos(f.km),10):null,
      p_marca:f.marca,p_modelo:f.modelo,p_anio:anio,p_aseguradora:f.aseguradora||null,p_seguro_vence:f.vence||null,p_nombre:null});
    setOcupado(false);
    if(error||!data.ok){setError(error?mensajeError(error):data.error);return;}
    onListo();
  }
  return(
    <div className="app">
      <div className="cab">
        {onCancelar&&<button className="volver" onClick={onCancelar}>‹ Regresar</button>}
        <span className="marca">Upco <span>Mi Auto</span></span>
        <h1>{primera?"Agrega tu auto en un minuto":"Agregar otro auto"}</h1>
        <small>Con tus placas calculamos solos tu verificación y tu Hoy No Circula. Lo que no sepas, déjalo vacío.</small>
      </div>
      <form className="cuerpo" onSubmit={guardar}>
        <div className="campo"><label htmlFor="placas">Placas</label><input id="placas" className="placa-in" autoComplete="off" value={f.placas} onChange={c("placas")} placeholder="ABC-123-A"/>
          {engomado&&<span className="ayuda" style={{color:"var(--good)",fontWeight:700}}>Terminación {dig} · engomado {engomado}</span>}</div>
        <div className="dos">
          <div className="campo"><label htmlFor="estado">Estado de las placas</label><select id="estado" value={f.estado} onChange={c("estado")}><option value="">Elige…</option>{ESTADOS_MX.map(x=><option key={x}>{x}</option>)}</select></div>
          <div className="campo"><label htmlFor="km">Kilometraje hoy</label><input id="km" inputMode="numeric" value={f.km} onChange={e=>{const d=soloDigitos(e.target.value).slice(0,7);setF({...f,km:d?km(d):""});}} placeholder="61,240"/></div>
        </div>
        <div className="campo"><span className="l">Holograma de tu verificación</span>
          <Segmento etiqueta="Holograma" valor={f.holograma} onCambio={v=>setF({...f,holograma:v})} opciones={[{v:"00",t:"00"},{v:"0",t:"0"},{v:"1",t:"1"},{v:"2",t:"2"},{v:"exento",t:"Exento"}]}/>
          <span className="ayuda">Viene en la calcomanía del vidrio. Exento: eléctricos e híbridos.</span></div>
        <div className="dos">
          <div className="campo"><label htmlFor="marca">Marca</label><input id="marca" value={f.marca} onChange={c("marca")} placeholder="Nissan"/></div>
          <div className="campo"><label htmlFor="modelo">Modelo</label><input id="modelo" value={f.modelo} onChange={c("modelo")} placeholder="Versa"/></div>
        </div>
        <div className="dos">
          <div className="campo"><label htmlFor="anio">Año</label><input id="anio" inputMode="numeric" value={f.anio} onChange={e=>setF({...f,anio:soloDigitos(e.target.value).slice(0,4)})} placeholder="2019"/></div>
          <div className="campo"><label htmlFor="aseg">Aseguradora</label><select id="aseg" value={f.aseguradora} onChange={c("aseguradora")}><option value="">No sé / no tengo</option>{aseg.map(a=><option key={a.id} value={a.id}>{a.nombre}</option>)}</select></div>
        </div>
        {f.aseguradora&&<div className="campo"><label htmlFor="vence">Tu seguro vence el</label><input id="vence" type="date" value={f.vence} onChange={c("vence")}/></div>}
        {error&&<div className="error">{error}</div>}
        <button className="btn primario" disabled={ocupado} style={{minHeight:56,fontSize:16}}>{ocupado?"Guardando…":"Listo, ver mi auto"}</button>
      </form>
    </div>
  );
}

const ICONOS={
  inicio:<path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/>,
  guantera:<><rect x="3" y="6" width="18" height="14" rx="2"/><path d="M8 6V4h8v2"/></>,
  km:<><circle cx="12" cy="13" r="8"/><path d="M12 13l4-3"/></>,
  asistencia:<><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><path d="M12 17h.01"/></>
};
function Icono({n}){return <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{ICONOS[n]}</svg>;}

function Principal({datos,recargar,correo}){
  const[vista,setVista]=useState("inicio");
  const[idx,setIdx]=useState(0);
  const[hoja,setHoja]=useState(null);   // {tipo:'servicio'|'verificacion'|'ajustes'|'alta'}
  const a=datos.autos[Math.min(idx,datos.autos.length-1)];
  const recargarY=()=>{setHoja(null);recargar();};
  if(hoja&&hoja.tipo==="alta")return <Alta onListo={()=>{setIdx(datos.autos.length);recargarY();}} onCancelar={()=>setHoja(null)}/>;
  if(hoja&&hoja.tipo==="ajustes")return <Ajustes a={a} correo={correo} puedeAgregar={datos.autos.length<3} onAgregar={()=>setHoja({tipo:"alta"})} onCerrar={()=>setHoja(null)} onGuardado={recargarY}/>;
  return(
    <div className="app">
      <div className="cab">
        <div className="cab-fila"><span className="marca">Upco <span>Mi Auto</span></span>
          <button className="volver" style={{color:"#fff"}} onClick={()=>setHoja({tipo:"ajustes"})}>Ajustes</button></div>
        {datos.autos.length>1&&<Segmento etiqueta="Auto" valor={idx} onCambio={setIdx} opciones={datos.autos.map((x,i)=>({v:i,t:x.placas||x.nombre}))}/>}
        <h1>{nombreAuto(a)}</h1>
        <div className="cab-fila" style={{justifyContent:"flex-start",flexWrap:"wrap"}}>
          {a.placas&&<span className="placa">{a.placas}</span>}
          <small>{a.km!=null?km(a.km)+" km · "+(a.km_fecha?hace(a.km_fecha):""):"Sin kilometraje"}</small>
        </div>
      </div>
      {vista==="inicio"&&<Inicio a={a} onIr={setVista} onHoja={setHoja}/>}
      {vista==="km"&&<Kilometraje a={a} onGuardado={()=>{recargar();setVista("inicio");}} onServicio={()=>setHoja({tipo:"servicio"})}/>}
      {vista==="guantera"&&<Guantera a={a} flotaId={datos.flota_id} onCambio={recargar}/>}
      {vista==="asistencia"&&<Asistencia a={a}/>}
      {hoja&&hoja.tipo==="servicio"&&<HojaServicio a={a} onCerrar={()=>setHoja(null)} onGuardado={recargarY}/>}
      {hoja&&hoja.tipo==="verificacion"&&<HojaVerificacion a={a} flotaId={datos.flota_id} onCerrar={()=>setHoja(null)} onGuardado={recargarY}/>}
      <nav className="nav" aria-label="Secciones">
        {[["inicio","Inicio"],["guantera","Guantera"],["km","Kilometraje"],["asistencia","Asistencia"]].map(([k,t])=>
          <button key={k} className={(vista===k?"on ":"")+(k==="asistencia"?"rojo":"")} aria-current={vista===k?"page":undefined} onClick={()=>{setVista(k);window.scrollTo(0,0);}}><Icono n={k}/>{t}</button>)}
      </nav>
    </div>
  );
}

function Inicio({a,onIr,onHoja}){
  const seg=estadoSeguro(a),ver=estadoVerificacion(a.verificacion),ser=estadoServicio(a.mantenimiento);
  const refrendo=(a.documentos||[]).find(d=>d.tipo==="refrendo");
  const kmViejo=!a.km_fecha||-diasHasta(a.km_fecha)>=30;
  return(
    <main className="cuerpo">
      {a.circula_zmvm&&a.holograma&&(a.hoy_no_circula
        ?<div className="aviso-dia bad"><b>Hoy no circulas</b><span style={{fontSize:13.5}}>En CDMX y zona metropolitana, de 5:00 a 22:00.</span></div>
        :<div className="aviso-dia ok"><b>Hoy sí circulas</b><span style={{fontSize:13.5}}>{a.manana_no_circula?"Mañana no circulas: planea tu día.":"Mañana también."}</span></div>)}
      {a.circula_zmvm&&!a.holograma&&<button className="nota" style={{border:0,textAlign:"left",cursor:"pointer"}} onClick={()=>onHoja({tipo:"ajustes"})}>Agrega tu holograma para saber qué días no circulas →</button>}
      {kmViejo&&<button className="nota" style={{border:0,textAlign:"left",cursor:"pointer"}} onClick={()=>onIr("km")}><b>¿Cuántos km marca hoy?</b> Actualízalo una vez al mes y te decimos cuándo te toca servicio →</button>}

      <span className="etq">Lo que viene</span>
      <section className="tarjeta">
        <div className="fila"><div><b>Seguro{a.seguro&&a.seguro.aseguradora?" · "+a.seguro.aseguradora:""}</b><div className="sub">{seg.d}</div></div><span className={"pill "+seg.c}>{seg.t}</span></div>
        {seg.c==="off"&&<button className="btn secundario" onClick={()=>onHoja({tipo:"ajustes"})}>Registrar mi seguro</button>}
      </section>
      <section className="tarjeta">
        <div className="fila"><div><b>Servicio</b><div className="sub">{ser.d}</div></div><span className={"pill "+ser.c}>{ser.t}</span></div>
        {(ser.c==="off"||ser.c==="bad"||ser.c==="warn")&&<button className="btn secundario" onClick={()=>onHoja({tipo:"servicio"})}>{ser.c==="off"?"Registrar mi último servicio":"Ya le hice el servicio"}</button>}
      </section>
      <section className="tarjeta">
        <div className="fila"><div><b>Verificación</b><div className="sub">{ver.d}</div></div><span className={"pill "+ver.c}>{ver.t}</span></div>
        {(ver.c==="warn"||ver.c==="bad")&&<button className="btn secundario" onClick={()=>onHoja({tipo:"verificacion"})}>Ya la verifiqué</button>}
        {ver.c==="off"&&a.verificacion&&a.verificacion.motivo==="sin_estado"&&<button className="btn secundario" onClick={()=>onHoja({tipo:"ajustes"})}>Agregar el estado de mis placas</button>}
      </section>
      <section className="tarjeta">
        {refrendo&&refrendo.fecha_vencimiento
          ?(()=>{const n=diasHasta(refrendo.fecha_vencimiento);return <div className="fila"><div><b>Refrendo / tenencia</b><div className="sub">{n<0?"Venció el ":"Pagar antes del "}{fechaLarga(refrendo.fecha_vencimiento)}</div></div><span className={"pill "+(n<0?"bad":n<=30?"warn":"ok")}>{n<0?"Vencido":n<=30?n+" días":"Al día"}</span></div>;})()
          :<div className="fila"><div><b>Refrendo / tenencia</b><div className="sub">Guarda tu comprobante y su fecha en la guantera</div></div><button className="btn texto" onClick={()=>onIr("guantera")}>Agregar</button></div>}
      </section>
    </main>
  );
}

function Kilometraje({a,onGuardado,onServicio}){
  const[v,setV]=useState("");const[error,setError]=useState("");const[ocupado,setOcupado]=useState(false);
  const m=a.mantenimiento||{};
  async function guardar(e){
    e.preventDefault();setError("");
    const n=parseInt(soloDigitos(v),10);
    if(isNaN(n)){setError("Escribe lo que marca el tablero.");return;}
    if(a.km!=null&&n-a.km>20000&&!window.__confirmadoKm){window.__confirmadoKm=true;setError("Son "+km(n-a.km)+" km más que la vez pasada. Si es correcto, toca Guardar otra vez.");return;}
    setOcupado(true);
    const{data,error}=await sb.rpc("miauto_registrar_km",{p_vehiculo:a.id,p_km:n});
    setOcupado(false);window.__confirmadoKm=false;
    if(error||!data.ok){setError(error?mensajeError(error):data.error);return;}
    onGuardado();
  }
  return(
    <form className="cuerpo" onSubmit={guardar}>
      <h2 style={{fontSize:22}}>¿Cuántos km marca hoy?</h2>
      <p className="sub" style={{margin:0}}>Con una lectura al mes calculamos cuánto usas tu auto y cuándo te toca servicio.</p>
      <div className="tarjeta">
        <div className="campo"><label htmlFor="kmhoy">Kilometraje del tablero</label>
          <input id="kmhoy" className="grande" inputMode="numeric" autoComplete="off" value={v} onChange={e=>{const d=soloDigitos(e.target.value).slice(0,7);setV(d?km(d):"");}}/>
          {a.km!=null&&<span className="ayuda">La vez pasada: {km(a.km)} km, {a.km_fecha?hace(a.km_fecha):""}</span>}</div>
        {error&&<div className="error">{error}</div>}
        <button className="btn primario" disabled={ocupado}>{ocupado?"Guardando…":"Guardar"}</button>
      </div>
      <div className="tarjeta">
        <span className="etq" style={{marginTop:0}}>Con tus lecturas</span>
        <div className="fila"><span className="sub" style={{fontSize:14}}>Usas tu auto</span><b>{m.km_dia?m.km_dia+" km al día":"Falta otra lectura"}</b></div>
        <div className="fila"><span className="sub" style={{fontSize:14}}>Próximo servicio</span><b>{m.proximo_km?km(m.proximo_km)+" km":"—"}</b></div>
        <div className="fila"><span className="sub" style={{fontSize:14}}>Te toca aprox.</span><b>{m.fecha_estimada?fechaLarga(m.fecha_estimada):"—"}</b></div>
        <button type="button" className="btn texto" onClick={onServicio}>Registrar un servicio que ya hice</button>
      </div>
    </form>
  );
}

function Asistencia({a}){
  const s=a.seguro;
  const digitos=t=>String(t||"").replace(/[^\d*#+]/g,"");
  return(
    <main className="cuerpo">
      <h2 style={{fontSize:22}}>¿Qué pasó?</h2>
      <a className="llamar sos" href="tel:911"><span>Emergencia: llamar al 911</span><span>911</span></a>
      {s?<section className="tarjeta">
        <span className="etq" style={{marginTop:0}}>{s.aseguradora}{s.poliza?" · póliza "+s.poliza:""}</span>
        {s.tel_siniestros&&<a className="llamar sos" href={"tel:"+digitos(s.tel_siniestros)}><span>Choque o robo: aseguradora</span><span>{s.tel_siniestros}</span></a>}
        {s.tel_siniestros_cdmx&&<a className="llamar secundario" href={"tel:"+digitos(s.tel_siniestros_cdmx)}><span>Desde CDMX</span><span>{s.tel_siniestros_cdmx}</span></a>}
        <a className="llamar secundario" href={"tel:"+digitos(s.tel_asistencia_vial||s.tel_siniestros)}><span>Grúa, batería, ponchadura</span><span>{s.tel_asistencia_vial||s.tel_siniestros}</span></a>
        {s.marcacion_corta&&<span className="ayuda">Desde el celular también: {s.marcacion_corta}</span>}
        {s.indicacion&&<span className="ayuda">Al llamar elige la {s.indicacion}.</span>}
        {s.nota&&<span className="ayuda">{s.nota}</span>}
      </section>
      :<div className="nota">Registra tu aseguradora en Ajustes y aquí tendrás su teléfono de cabina y de asistencia vial a un toque.</div>}
      <section className="tarjeta">
        <b>Si chocaste</b>
        <ul style={{margin:0,paddingLeft:20,display:"grid",gap:6,fontSize:14.5,color:"var(--ink-2)"}}>
          <li>Si hay lesionados, llama primero al 911.</li>
          <li>No muevas el auto hasta que te lo indique el ajustador o la autoridad.</li>
          <li>No firmes ni aceptes acuerdos con nadie. Espera al ajustador.</li>
          <li>Toma fotos de los daños, las placas del otro auto y el lugar.</li>
        </ul>
      </section>
      <p className="ayuda" style={{margin:0,textAlign:"center"}}>Teléfonos tomados del sitio oficial de cada aseguradora. Sin señal, las llamadas funcionan igual.</p>
    </main>
  );
}

const DOCS=[{tipo:"poliza",t:"Póliza",vence:true},{tipo:"tarjeta_circulacion",t:"Tarjeta de circulación",vence:"opcional"},{tipo:"verificacion",t:"Verificación",vence:false},{tipo:"refrendo",t:"Refrendo / tenencia",vence:true},{tipo:"factura",t:"Factura",vence:false}];
function Guantera({a,flotaId,onCambio}){
  const[abierto,setAbierto]=useState(null);
  const[miniaturas,setMiniaturas]=useState({});
  useEffect(()=>{(async()=>{
    const m={};
    for(const d of a.documentos||[]){if(d.archivo_path&&/\.(jpe?g|png|webp)$/i.test(d.archivo_path)){const{data}=await sb.storage.from(d.archivo_bucket||"fleet-documentos").createSignedUrl(d.archivo_path,600);if(data)m[d.tipo]=data.signedUrl;}}
    setMiniaturas(m);
  })();},[a.id,(a.documentos||[]).length]);
  return(
    <main className="cuerpo">
      <h2 style={{fontSize:22}}>Guantera digital</h2>
      <p className="sub" style={{margin:0}}>Una foto de cada papel y ya. Si te los piden, los tienes en el celular.</p>
      <div className="docs">
        {DOCS.map(cat=>{
          const d=(a.documentos||[]).find(x=>x.tipo===cat.tipo);
          const fecha=cat.tipo==="poliza"?a.seguro_vence:d&&d.fecha_vencimiento;
          const det=fecha?(diasHasta(fecha)<0?"Venció "+fechaCorta(fecha):"Hasta "+fechaCorta(fecha)):d&&d.archivo_path?"Guardado":"Agregar foto";
          return <button key={cat.tipo} className="doc" onClick={()=>setAbierto(cat)}>
            <div className="foto">{miniaturas[cat.tipo]?<img src={miniaturas[cat.tipo]} alt=""/>:d&&d.archivo_path?"Archivo guardado":"+ Foto"}</div>
            <b style={{fontSize:14.5}}>{cat.t}</b><span className="sub" style={{color:fecha&&diasHasta(fecha)<0?"var(--bad)":undefined}}>{det}</span></button>;
        })}
      </div>
      {abierto&&<HojaDocumento a={a} flotaId={flotaId} cat={abierto} doc={(a.documentos||[]).find(x=>x.tipo===abierto.tipo)} onCerrar={()=>setAbierto(null)} onGuardado={()=>{setAbierto(null);onCambio();}}/>}
    </main>
  );
}

function Hoja({titulo,onCerrar,children}){
  useEffect(()=>{const f=e=>{if(e.key==="Escape")onCerrar();};window.addEventListener("keydown",f);return()=>window.removeEventListener("keydown",f);},[]);
  return <div style={{position:"fixed",inset:0,background:"rgba(10,28,53,.55)",display:"flex",alignItems:"flex-end",justifyContent:"center",zIndex:20}} onMouseDown={e=>{if(e.target===e.currentTarget)onCerrar();}}>
    <div role="dialog" aria-modal="true" aria-label={titulo} style={{background:"#fff",width:"100%",maxWidth:480,borderRadius:"20px 20px 0 0",padding:"20px 18px calc(20px + env(safe-area-inset-bottom,0px))",display:"grid",gap:14,maxHeight:"92vh",overflowY:"auto"}}>
      <div className="fila"><h2 style={{fontSize:20}}>{titulo}</h2><button className="btn texto" onClick={onCerrar} aria-label="Cerrar">Cerrar</button></div>
      {children}
    </div>
  </div>;
}

function HojaDocumento({a,flotaId,cat,doc,onCerrar,onGuardado}){
  const[archivo,setArchivo]=useState(null);
  const[fecha,setFecha]=useState(cat.tipo==="poliza"?(a.seguro_vence||""):(doc&&(cat.tipo==="verificacion"?doc.fecha_documento:doc.fecha_vencimiento))||"");
  const[error,setError]=useState("");const[ocupado,setOcupado]=useState(false);
  async function ver(){
    const{data,error}=await sb.storage.from(doc.archivo_bucket||"fleet-documentos").createSignedUrl(doc.archivo_path,300);
    if(error){setError(mensajeError(error));return;}
    window.open(data.signedUrl,"_blank","noopener");
  }
  async function guardar(){
    setError("");setOcupado(true);
    try{
      let ruta=doc?doc.archivo_path:null,bucket=doc?doc.archivo_bucket:"fleet-documentos";
      if(archivo){
        const b=await comprimir(archivo);
        const ext=b.type==="application/pdf"?"pdf":"jpg";
        const nueva=flotaId+"/"+crypto.randomUUID()+"."+ext;
        const{error:eu}=await sb.storage.from("fleet-documentos").upload(nueva,b,{upsert:false,contentType:b.type||"image/jpeg"});
        if(eu)throw eu;
        if(ruta&&bucket==="fleet-documentos")await sb.storage.from("fleet-documentos").remove([ruta]);
        ruta=nueva;bucket="fleet-documentos";
      }
      const fila={flota_id:flotaId,vehiculo_id:a.id,tipo:cat.tipo,archivo_path:ruta,archivo_bucket:bucket||"fleet-documentos",
        fecha_vencimiento:cat.tipo==="verificacion"?null:(fecha||null),fecha_documento:cat.tipo==="verificacion"?(fecha||null):null,updated_at:new Date().toISOString()};
      const r=doc?await sb.from("documentos_flota").update(fila).eq("id",doc.id):await sb.from("documentos_flota").insert(fila);
      if(r.error)throw r.error;
      if(cat.tipo==="poliza")await sb.from("vehiculos").update({seguro_vence:fecha||null}).eq("id",a.id);
      onGuardado();
    }catch(e){setError(mensajeError(e));}
    finally{setOcupado(false);}
  }
  return <Hoja titulo={cat.t} onCerrar={onCerrar}>
    {doc&&doc.archivo_path&&<button className="btn secundario" onClick={ver}>Ver lo guardado</button>}
    <div className="campo"><label htmlFor="doc_foto">{doc&&doc.archivo_path?"Cambiar foto":"Foto o PDF"} <span className="ayuda">· opcional</span></label>
      <input id="doc_foto" type="file" accept="image/*,application/pdf" capture="environment" onChange={e=>setArchivo(e.target.files[0]||null)} style={{height:"auto",padding:10}}/></div>
    {cat.vence!==false&&<div className="campo"><label htmlFor="doc_fecha">{cat.tipo==="refrendo"?"Pagar antes del":"Vence el"} <span className="ayuda">· {cat.vence===true?"con esta fecha te avisamos":"si trae fecha"}</span></label><input id="doc_fecha" type="date" value={fecha} onChange={e=>setFecha(e.target.value)}/></div>}
    {cat.tipo==="verificacion"&&<div className="campo"><label htmlFor="doc_fecha">Fecha en que verificaste <span className="ayuda">· opcional</span></label><input id="doc_fecha" type="date" value={fecha} onChange={e=>setFecha(e.target.value)}/></div>}
    {error&&<div className="error">{error}</div>}
    <button className="btn primario" disabled={ocupado} onClick={guardar}>{ocupado?"Guardando…":"Guardar"}</button>
  </Hoja>;
}

function HojaVerificacion({a,flotaId,onCerrar,onGuardado}){
  const[holo,setHolo]=useState(a.holograma&&a.holograma!=="exento"?a.holograma:null);
  const[error,setError]=useState("");const[ocupado,setOcupado]=useState(false);
  async function guardar(){
    setOcupado(true);setError("");
    const prev=(a.documentos||[]).find(d=>d.tipo==="verificacion");
    const fila={flota_id:flotaId,vehiculo_id:a.id,tipo:"verificacion",fecha_documento:hoyMX(),fecha_vencimiento:null,updated_at:new Date().toISOString(),notas:holo?"Holograma "+holo:null};
    const r=prev?await sb.from("documentos_flota").update(fila).eq("id",prev.id):await sb.from("documentos_flota").insert(fila);
    if(!r.error&&holo)await sb.from("vehiculos").update({holograma:holo}).eq("id",a.id);
    setOcupado(false);
    if(r.error){setError(mensajeError(r.error));return;}
    onGuardado();
  }
  return <Hoja titulo="Ya verifiqué" onCerrar={onCerrar}>
    <p className="sub" style={{margin:0}}>No necesitas el certificado digital. Dinos qué holograma te dieron y listo: calculamos sola tu siguiente verificación.</p>
    <Segmento etiqueta="Holograma" valor={holo} onCambio={setHolo} opciones={[{v:"00",t:"00"},{v:"0",t:"0"},{v:"1",t:"1"},{v:"2",t:"2"}]}/>
    <span className="ayuda">Si quieres, después guarda una foto del certificado en tu guantera.</span>
    {error&&<div className="error">{error}</div>}
    <button className="btn primario" disabled={ocupado} onClick={guardar}>{ocupado?"Guardando…":"Verifiqué hoy"}</button>
  </Hoja>;
}

function HojaServicio({a,onCerrar,onGuardado}){
  const[f,setF]=useState({fecha:hoyMX(),km:a.km!=null?km(a.km):"",costo:"",taller:"",tipo:"preventivo"});
  const[error,setError]=useState("");const[ocupado,setOcupado]=useState(false);
  async function guardar(){
    setError("");
    const k=f.km?parseInt(soloDigitos(f.km),10):null;
    if(f.tipo==="preventivo"&&k==null){setError("Pon el kilometraje: con él calculamos el siguiente servicio.");return;}
    setOcupado(true);
    const{data,error}=await sb.rpc("fleet_servicio_registrar",{p_vehiculo:a.id,p_fecha:f.fecha,p_km:k,p_tipo:f.tipo,p_descripcion:null,p_taller:f.taller,
      p_costo:f.costo?Number(String(f.costo).replace(/[^\d.]/g,"")):null,p_factura_path:null,p_incidente:null,p_regresa_a_servicio:false});
    setOcupado(false);
    if(error||!data.ok){setError(error?mensajeError(error):data.error);return;}
    onGuardado();
  }
  return <Hoja titulo="Registrar servicio" onCerrar={onCerrar}>
    <Segmento etiqueta="Tipo" valor={f.tipo} onCambio={v=>setF({...f,tipo:v})} opciones={[{v:"preventivo",t:"Servicio"},{v:"correctivo",t:"Reparación"},{v:"llantas",t:"Llantas"}]}/>
    <span className="ayuda">{f.tipo==="preventivo"?"Aceite, filtros, afinación. Con esto empieza la cuenta para el siguiente.":"Se guarda en tu historial y en tus gastos."}</span>
    <div className="dos">
      <div className="campo"><label htmlFor="sv_fecha">Fecha</label><input id="sv_fecha" type="date" max={hoyMX()} value={f.fecha} onChange={e=>setF({...f,fecha:e.target.value})}/></div>
      <div className="campo"><label htmlFor="sv_km">Kilometraje</label><input id="sv_km" inputMode="numeric" value={f.km} onChange={e=>{const d=soloDigitos(e.target.value).slice(0,7);setF({...f,km:d?km(d):""});}}/></div>
    </div>
    <div className="dos">
      <div className="campo"><label htmlFor="sv_costo">Costo <span className="ayuda">· opcional</span></label><input id="sv_costo" inputMode="decimal" value={f.costo} onChange={e=>setF({...f,costo:e.target.value})} placeholder="$1,850"/></div>
      <div className="campo"><label htmlFor="sv_taller">Taller <span className="ayuda">· opcional</span></label><input id="sv_taller" value={f.taller} onChange={e=>setF({...f,taller:e.target.value})}/></div>
    </div>
    {error&&<div className="error">{error}</div>}
    <button className="btn primario" disabled={ocupado} onClick={guardar}>{ocupado?"Guardando…":"Guardar"}</button>
  </Hoja>;
}

function Ajustes({a,correo,puedeAgregar,onAgregar,onCerrar,onGuardado}){
  const aseg=useAseguradoras();
  const[f,setF]=useState({placas:a.placas||"",estado:a.estado||"",holograma:a.holograma||null,marca:a.marca||"",modelo:a.modelo||"",anio:a.anio||"",
    aseguradora:(a.seguro&&a.seguro.en_catalogo&&aseg.find(x=>x.nombre===a.seguro.aseguradora)||{}).id||"",poliza:(a.seguro&&a.seguro.poliza)||"",vence:a.seguro_vence||"",intervalo:"10000"});
  useEffect(()=>{if(aseg.length&&!f.aseguradora&&a.seguro&&a.seguro.en_catalogo){const x=aseg.find(z=>z.nombre===a.seguro.aseguradora);if(x)setF(v=>({...v,aseguradora:x.id}));}},[aseg.length]);
  const[error,setError]=useState("");const[ok,setOk]=useState("");const[ocupado,setOcupado]=useState(false);
  const c=k=>e=>setF({...f,[k]:e.target.value});
  async function guardar(e){
    e.preventDefault();setError("");setOk("");setOcupado(true);
    const fila={placas:f.placas.trim().toUpperCase().replace(/\s+/g,"")||null,estado:f.estado||null,holograma:f.holograma||null,
      circula_zmvm:f.estado==="Ciudad de México"||f.estado==="Estado de México",marca:f.marca.trim()||null,modelo:f.modelo.trim()||null,
      anio:f.anio?parseInt(f.anio,10):null,seguro_aseguradora_id:f.aseguradora||null,seguro_poliza:f.poliza.trim()||null,seguro_vence:f.vence||null};
    const{error}=await sb.from("vehiculos").update(fila).eq("id",a.id);
    setOcupado(false);
    if(error){setError(mensajeError(error));return;}
    onGuardado();
  }
  return(
    <div className="app">
      <div className="cab"><button className="volver" onClick={onCerrar}>‹ Mi auto</button><h1>Ajustes</h1><small>{correo}</small></div>
      <form className="cuerpo" onSubmit={guardar}>
        <span className="etq">Tu auto</span>
        <div className="campo"><label htmlFor="aj_placas">Placas</label><input id="aj_placas" className="placa-in" value={f.placas} onChange={c("placas")}/></div>
        <div className="campo"><label htmlFor="aj_estado">Estado de las placas</label><select id="aj_estado" value={f.estado} onChange={c("estado")}><option value="">Elige…</option>{ESTADOS_MX.map(x=><option key={x}>{x}</option>)}</select></div>
        <div className="campo"><span className="l">Holograma</span><Segmento etiqueta="Holograma" valor={f.holograma} onCambio={v=>setF({...f,holograma:v})} opciones={[{v:"00",t:"00"},{v:"0",t:"0"},{v:"1",t:"1"},{v:"2",t:"2"},{v:"exento",t:"Exento"}]}/></div>
        <div className="dos"><div className="campo"><label htmlFor="aj_marca">Marca</label><input id="aj_marca" value={f.marca} onChange={c("marca")}/></div><div className="campo"><label htmlFor="aj_modelo">Modelo</label><input id="aj_modelo" value={f.modelo} onChange={c("modelo")}/></div></div>
        <div className="campo"><label htmlFor="aj_anio">Año</label><input id="aj_anio" inputMode="numeric" value={f.anio} onChange={e=>setF({...f,anio:soloDigitos(e.target.value).slice(0,4)})}/></div>
        <span className="etq">Tu seguro</span>
        <div className="campo"><label htmlFor="aj_aseg">Aseguradora</label><select id="aj_aseg" value={f.aseguradora} onChange={c("aseguradora")}><option value="">Sin seguro registrado</option>{aseg.map(x=><option key={x.id} value={x.id}>{x.nombre}</option>)}</select></div>
        <div className="dos"><div className="campo"><label htmlFor="aj_pol">Número de póliza</label><input id="aj_pol" value={f.poliza} onChange={c("poliza")}/></div><div className="campo"><label htmlFor="aj_vence">Vence el</label><input id="aj_vence" type="date" value={f.vence} onChange={c("vence")}/></div></div>
        {error&&<div className="error">{error}</div>}{ok&&<div className="bien">{ok}</div>}
        <button className="btn primario" disabled={ocupado}>{ocupado?"Guardando…":"Guardar"}</button>
        <span className="etq">Cuenta</span>
        {puedeAgregar&&<button type="button" className="btn secundario" onClick={onAgregar}>+ Agregar otro auto</button>}
        <button type="button" className="btn texto" onClick={()=>sb.auth.signOut()}>Cerrar sesión</button>
      </form>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);