/* ============================================================================
   dash-views.jsx  —  Appointments, Customers, Finance, Inventory, Settings
============================================================================ */
(function(){
const { useState, useEffect } = React;
const { C, fmt$, dateStr, Btn, Tag, Card, Label, Row, Grid, Stat, H2, H3, Icon, useIsMobile } = window;
const uid3 = (p) => CheoDB.uid(p);
const inp3 = {background:'oklch(0.11 0.015 222)',border:`1.5px solid ${C.dark4}`,borderRadius:8,padding:'9px 12px',color:C.white,fontSize:'0.875rem',outline:'none',width:'100%',fontFamily:'inherit'};
const TI = (props) => <input {...props} style={{...inp3,...(props.style||{})}}/>;
const SEL = ({children,...rest}) => <select {...rest} style={inp3}>{children}</select>;
const F = ({label,children}) => <div><Label>{label}</Label>{children}</div>;

/* ──────────────────────────────────────────────────────────────────────────
   APPOINTMENTS INBOX  (fed by the public booking form)
─────────────────────────────────────────────────────────────────────────── */
function AppointmentsView({appointments, onSave, onDelete, onConvert}) {
  const pending=appointments.filter(a=>a.status==='pending');
  const handled=appointments.filter(a=>a.status!=='pending');
  const when=iso=>{try{return new Date(iso).toLocaleString('es',{month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'});}catch(e){return '';}};

  const Aclock = ({a})=>{
    const phone=(a.phone||'').replace(/\D/g,'');
    const waPhone=phone.length===10?'1'+phone:phone;
    const msg=`Hola ${a.name?a.name.split(' ')[0]:''}, soy de Cheo Auto Repair. Recibimos tu solicitud para ${a.service||'tu vehículo'}. ¿Cuándo te queda bien traerlo?`;
    return (
      <Card key={a.id} style={{borderColor:a.status==='pending'?'oklch(0.7 0.12 88 / .35)':C.dark3}}>
        <Row style={{justifyContent:'space-between',alignItems:'flex-start'}}>
          <div style={{flex:1}}>
            <Row gap="0.6rem" style={{marginBottom:4}}>
              <span style={{fontWeight:700,color:C.white,fontSize:'1rem'}}>{a.name}</span>
              <Tag label={a.service||'Servicio'} color={C.teal}/>
              {a.status==='contacted'&&<Tag label="Contactado" color={C.green}/>}
            </Row>
            <div style={{fontSize:'0.84rem',color:C.muted,marginBottom:6}}>{a.phone} · {a.vehicle||'Vehículo no especificado'}</div>
            <div style={{fontSize:'0.84rem',color:'oklch(0.66 0.01 222)'}}>🕐 {a.preferred||'—'} · solicitado {when(a.created_at)}</div>
            {a.message&&<div style={{marginTop:8,background:'oklch(0.12 0.015 222)',borderRadius:8,padding:'8px 12px',fontSize:'0.84rem',color:'oklch(0.7 0.01 222)',fontStyle:'italic'}}>“{a.message}”</div>}
          </div>
        </Row>
        <Row style={{marginTop:'1rem',gap:'0.5rem',flexWrap:'wrap'}}>
          {waPhone&&<a href={`https://wa.me/${waPhone}?text=${encodeURIComponent(msg)}`} target="_blank" rel="noopener" style={{textDecoration:'none'}}><Btn variant="success" small><Icon name="chat" size={13}/> WhatsApp</Btn></a>}
          <a href={`tel:${phone}`} style={{textDecoration:'none'}}><Btn variant="ghost" small><Icon name="phone" size={12}/> Llamar</Btn></a>
          {a.status==='pending'&&<Btn variant="ghost" small onClick={()=>onSave({...a,status:'contacted'})}><Icon name="check" size={13}/> Marcar contactado</Btn>}
          <Btn small onClick={()=>onConvert(a)}><Icon name="plus" size={13}/> Crear cliente + orden</Btn>
          <div style={{flex:1}}/>
          <button onClick={()=>onDelete(a.id)} style={{background:'none',border:'none',color:C.muted,cursor:'pointer',fontSize:'1.1rem'}}>×</button>
        </Row>
      </Card>
    );
  };

  return (
    <div>
      <H2 style={{marginBottom:'1.5rem'}}>Citas / Solicitudes</H2>
      <Grid cols="repeat(2,1fr)" gap="1rem" style={{marginBottom:'1.5rem'}}>
        <Stat label="Pendientes" value={pending.length} color={C.amber}/>
        <Stat label="Atendidas" value={handled.length} color={C.green}/>
      </Grid>
      {pending.length>0&&<div style={{fontSize:'0.72rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:C.amber,marginBottom:'0.75rem'}}>Nuevas solicitudes</div>}
      {pending.map(a=><Aclock key={a.id} a={a}/>)}
      {pending.length===0&&<Card><p style={{color:C.muted,textAlign:'center',padding:'1rem'}}>No hay solicitudes nuevas. Las reservas del sitio web aparecen aquí automáticamente.</p></Card>}
      {handled.length>0&&<><div style={{fontSize:'0.72rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:C.muted,margin:'1.5rem 0 0.75rem'}}>Historial</div>{handled.map(a=><Aclock key={a.id} a={a}/>)}</>}
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   CUSTOMERS
─────────────────────────────────────────────────────────────────────────── */
function CustomersView({customers, onSaveCustomer, onDeleteCustomer}) {
  const blank={id:null,name:'',phone:'',address:'',email:'',company:false,vehicles:[]};
  const [editing,setEditing]=useState(null);
  const [form,setForm]=useState(blank);

  const open=c=>{setForm(c?JSON.parse(JSON.stringify(c)):blank);setEditing(c?c.id:'new');};
  const close=()=>{setEditing(null);setForm(blank);};
  const save=()=>{ if(!form.name.trim())return; onSaveCustomer(form); close(); };

  if(editing){
    const addV=()=>setForm(f=>({...f,vehicles:[...f.vehicles,{id:uid3('v'),year:'',make:'',model:'',plate:'',color:'',vin:''}]}));
    const updV=(vi,patch)=>setForm(f=>({...f,vehicles:f.vehicles.map((v,i)=>i===vi?{...v,...patch}:v)}));
    const delV=vi=>setForm(f=>({...f,vehicles:f.vehicles.filter((_,i)=>i!==vi)}));
    return (
      <div style={{maxWidth:680,margin:'0 auto',padding:'0 0 4rem'}}>
        <Row style={{marginBottom:'1.5rem'}}><Btn variant="ghost" small onClick={close}><Icon name="back" size={14}/> Volver</Btn><div style={{flex:1}}/><Btn onClick={save}>Guardar</Btn></Row>
        <Card>
          <H3 style={{marginBottom:'1rem'}}>Información del Cliente</H3>
          <Grid cols="1fr 1fr" mCols="1fr" gap="0.75rem">
            <F label="Nombre / Empresa"><TI value={form.name} onChange={e=>setForm(x=>({...x,name:e.target.value}))}/></F>
            <F label="Teléfono"><TI value={form.phone} onChange={e=>setForm(x=>({...x,phone:e.target.value}))} placeholder="407-123-4567"/></F>
            <F label="Email"><TI value={form.email} onChange={e=>setForm(x=>({...x,email:e.target.value}))}/></F>
            <F label="Dirección"><TI value={form.address} onChange={e=>setForm(x=>({...x,address:e.target.value}))}/></F>
          </Grid>
          <label style={{display:'flex',alignItems:'center',gap:8,marginTop:'1rem',cursor:'pointer'}}><input type="checkbox" checked={form.company} onChange={e=>setForm(x=>({...x,company:e.target.checked}))} style={{width:17,height:17,accentColor:C.teal}}/><span style={{color:C.muted,fontSize:'0.875rem'}}>Es empresa / flota comercial</span></label>
        </Card>
        <Row style={{justifyContent:'space-between',marginBottom:'0.75rem'}}><H3>Vehículos</H3><Btn variant="ghost" small onClick={addV}><Icon name="plus" size={14}/> Vehículo</Btn></Row>
        {form.vehicles.map((v,vi)=>(
          <Card key={v.id}>
            <Grid cols="1fr 1fr 1fr" mCols="1fr 1fr" gap="0.75rem">
              <F label="Año"><TI value={v.year} onChange={e=>updV(vi,{year:e.target.value})} placeholder="2020"/></F>
              <F label="Marca"><TI value={v.make} onChange={e=>updV(vi,{make:e.target.value})} placeholder="Toyota"/></F>
              <F label="Modelo"><TI value={v.model} onChange={e=>updV(vi,{model:e.target.value})} placeholder="Corolla"/></F>
              <F label="Placa"><TI value={v.plate} onChange={e=>updV(vi,{plate:e.target.value})} placeholder="ABC-123" style={{fontFamily:'monospace'}}/></F>
              <F label="Color"><TI value={v.color} onChange={e=>updV(vi,{color:e.target.value})} placeholder="Azul"/></F>
              <F label="VIN (opcional)"><TI value={v.vin} onChange={e=>updV(vi,{vin:e.target.value})}/></F>
            </Grid>
            <div style={{marginTop:'0.75rem',textAlign:'right'}}><Btn variant="danger" small onClick={()=>delV(vi)}><Icon name="x" size={12}/> Eliminar</Btn></div>
          </Card>
        ))}
        {form.vehicles.length===0&&<Card><p style={{color:C.muted,fontSize:'0.84rem',textAlign:'center'}}>Sin vehículos. Agrega uno arriba.</p></Card>}
        {form.id&&<div style={{textAlign:'center',marginTop:'1rem'}}><Btn variant="danger" small onClick={()=>{if(confirm('¿Eliminar este cliente?')){onDeleteCustomer(form.id);close();}}}>Eliminar cliente</Btn></div>}
      </div>
    );
  }

  return (
    <div>
      <Row style={{marginBottom:'1.5rem'}}><H2 style={{flex:1}}>Base de Clientes</H2><Btn onClick={()=>open(null)}><Icon name="plus" size={15}/> Nuevo Cliente</Btn></Row>
      {customers.map(c=>(
        <div key={c.id} onClick={()=>open(c)} style={{background:C.dark2,border:`1px solid ${C.dark3}`,borderRadius:12,padding:'1rem 1.25rem',marginBottom:'0.5rem',cursor:'pointer',transition:'border-color .2s'}} onMouseEnter={e=>e.currentTarget.style.borderColor=C.teal} onMouseLeave={e=>e.currentTarget.style.borderColor=C.dark3}>
          <Row>
            <div style={{flex:1}}>
              <Row gap="0.5rem" style={{marginBottom:3}}><span style={{fontWeight:600,color:C.white}}>{c.name}</span>{c.company&&<Tag label="Empresa" color={C.amber}/>}</Row>
              <span style={{fontSize:'0.8rem',color:C.muted}}>{c.phone}{c.address?` · ${c.address}`:''}</span>
            </div>
            <div style={{textAlign:'right'}}><div style={{fontFamily:"'Barlow Condensed',sans-serif",fontWeight:700,fontSize:'1.1rem',color:C.tealL}}>{c.vehicles.length}</div><div style={{fontSize:'0.7rem',color:C.muted}}>vehículo{c.vehicles.length!==1?'s':''}</div></div>
          </Row>
          {c.vehicles.length>0&&<div style={{marginTop:'0.5rem',display:'flex',gap:'0.4rem',flexWrap:'wrap'}}>{c.vehicles.map(v=><span key={v.id} style={{background:C.dark3,borderRadius:6,padding:'3px 9px',fontSize:'0.75rem',color:C.muted,fontFamily:'monospace'}}>{v.year} {v.make} {v.model} · {v.plate}</span>)}</div>}
        </div>
      ))}
      {customers.length===0&&<Card><p style={{color:C.muted,textAlign:'center',padding:'1rem'}}>Sin clientes aún.</p></Card>}
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   FINANCE
─────────────────────────────────────────────────────────────────────────── */
function FinanceView({entries, onAdd, onDelete}) {
  const [form,setForm]=useState({type:'income',desc:'',amount:'',date:new Date().toISOString().slice(0,10)});
  const add=()=>{if(!form.desc||!form.amount)return;onAdd({id:uid3('f'),...form,amount:Number(form.amount)});setForm(f=>({...f,desc:'',amount:''}));};
  const income=entries.filter(e=>e.type==='income').reduce((s,e)=>s+e.amount,0);
  const expense=entries.filter(e=>e.type==='expense').reduce((s,e)=>s+e.amount,0);
  const net=income-expense;
  return (
    <div>
      <H2 style={{marginBottom:'1.5rem'}}>Ingresos y Gastos</H2>
      <Grid cols="repeat(3,1fr)" gap="1rem" style={{marginBottom:'1.5rem'}}>
        <Stat label="Ingresos" value={fmt$(income)} color={C.green}/>
        <Stat label="Gastos" value={fmt$(expense)} color={C.red}/>
        <Stat label="Neto" value={fmt$(net)} color={net>=0?C.green:C.red}/>
      </Grid>
      <Card>
        <H3 style={{marginBottom:'1rem'}}>Registrar Movimiento</H3>
        <Grid cols="1fr 3fr 1fr auto" mCols="1fr" gap="0.75rem" style={{alignItems:'end'}}>
          <F label="Tipo"><SEL value={form.type} onChange={e=>setForm(f=>({...f,type:e.target.value}))}><option value="income">Ingreso</option><option value="expense">Gasto</option></SEL></F>
          <F label="Descripción"><TI value={form.desc} onChange={e=>setForm(f=>({...f,desc:e.target.value}))} placeholder="Ej: WO-1005 — Frenos / Caja de guantes"/></F>
          <F label="Monto ($)"><TI type="number" step="0.01" value={form.amount} onChange={e=>setForm(f=>({...f,amount:e.target.value}))} placeholder="0.00" style={{textAlign:'right'}}/></F>
          <Btn onClick={add} style={{whiteSpace:'nowrap'}}><Icon name="plus" size={14}/> Agregar</Btn>
        </Grid>
      </Card>
      {entries.map(e=>(
        <div key={e.id} style={{display:'flex',alignItems:'center',gap:'1rem',padding:'0.75rem 1rem',background:C.dark2,border:`1px solid ${C.dark3}`,borderRadius:10,marginBottom:'0.4rem'}}>
          <div style={{width:10,height:10,borderRadius:'50%',background:e.type==='income'?C.green:C.red,flexShrink:0}}></div>
          <div style={{flex:1}}><div style={{fontWeight:500,color:C.white,fontSize:'0.875rem'}}>{e.desc}</div><div style={{fontSize:'0.75rem',color:C.muted}}>{dateStr(e.date)}</div></div>
          <div style={{fontWeight:700,color:e.type==='income'?C.green:C.red,minWidth:80,textAlign:'right'}}>{e.type==='income'?'+':'-'}{fmt$(e.amount)}</div>
          <button onClick={()=>onDelete(e.id)} style={{background:'none',border:'none',color:C.muted,cursor:'pointer',fontSize:'1rem',opacity:0.6}}>×</button>
        </div>
      ))}
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   INVENTORY
─────────────────────────────────────────────────────────────────────────── */
function InventoryView({items, onSave, onDelete}) {
  const [form,setForm]=useState({name:'',cat:'',qty:'',unit:'unidad',min:''});
  const add=()=>{if(!form.name||!form.qty)return;onSave({id:uid3('i'),...form,qty:Number(form.qty),min:Number(form.min)||0});setForm({name:'',cat:'',qty:'',unit:'unidad',min:''});};
  const updQty=(item,delta)=>onSave({...item,qty:Math.max(0,item.qty+delta)});
  const cats=[...new Set(items.map(i=>i.cat))];
  const low=items.filter(i=>i.qty<=i.min);
  return (
    <div>
      <H2 style={{marginBottom:'1.5rem'}}>Inventario / Insumos</H2>
      {low.length>0&&<div style={{background:C.amberBg,border:`1px solid ${C.amber}44`,borderRadius:10,padding:'0.75rem 1rem',marginBottom:'1.5rem',display:'flex',alignItems:'center',gap:10}}><span>⚠️</span><span style={{color:C.amber,fontSize:'0.875rem',fontWeight:600}}>{low.length} artículo(s) con stock bajo — revisar pedido.</span></div>}
      <Card>
        <H3 style={{marginBottom:'1rem'}}>Agregar Artículo</H3>
        <Grid cols="2fr 1fr 1fr 1fr 1fr auto" mCols="1fr 1fr" gap="0.75rem" style={{alignItems:'end'}}>
          <F label="Nombre"><TI value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="Aceite 5W-30"/></F>
          <F label="Categoría"><TI value={form.cat} onChange={e=>setForm(f=>({...f,cat:e.target.value}))} placeholder="Fluidos"/></F>
          <F label="Cantidad"><TI type="number" value={form.qty} onChange={e=>setForm(f=>({...f,qty:e.target.value}))} placeholder="0"/></F>
          <F label="Unidad"><TI value={form.unit} onChange={e=>setForm(f=>({...f,unit:e.target.value}))}/></F>
          <F label="Mín."><TI type="number" value={form.min} onChange={e=>setForm(f=>({...f,min:e.target.value}))} placeholder="2"/></F>
          <Btn onClick={add}><Icon name="plus" size={14}/></Btn>
        </Grid>
      </Card>
      {cats.map(cat=>(
        <div key={cat} style={{marginBottom:'1.25rem'}}>
          <div style={{fontSize:'0.72rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:C.muted,marginBottom:'0.5rem'}}>{cat||'Sin categoría'}</div>
          {items.filter(i=>i.cat===cat).map(item=>{
            const isLow=item.qty<=item.min;
            return (
              <div key={item.id} style={{background:C.dark2,border:`1px solid ${isLow?C.amber+'66':C.dark3}`,borderRadius:10,padding:'0.75rem 1rem',marginBottom:'0.4rem',display:'flex',alignItems:'center',gap:'1rem'}}>
                <div style={{flex:1}}><div style={{fontWeight:600,color:C.white,fontSize:'0.9rem'}}>{item.name}</div>{isLow&&<span style={{fontSize:'0.72rem',color:C.amber,fontWeight:700}}>⚠ Stock bajo</span>}</div>
                <Row gap="0.5rem">
                  <button onClick={()=>updQty(item,-1)} style={{width:28,height:28,background:C.dark3,border:`1px solid ${C.dark4}`,borderRadius:6,color:C.white,cursor:'pointer',fontWeight:700,fontSize:'1rem'}}>−</button>
                  <span style={{fontFamily:"'Barlow Condensed',sans-serif",fontWeight:700,fontSize:'1.2rem',color:isLow?C.amber:C.white,minWidth:32,textAlign:'center'}}>{item.qty}</span>
                  <button onClick={()=>updQty(item,1)} style={{width:28,height:28,background:C.dark3,border:`1px solid ${C.dark4}`,borderRadius:6,color:C.white,cursor:'pointer',fontWeight:700,fontSize:'1rem'}}>+</button>
                </Row>
                <span style={{fontSize:'0.78rem',color:C.muted,minWidth:60}}>{item.unit}</span>
                <button onClick={()=>onDelete(item.id)} style={{background:'none',border:'none',color:C.muted,cursor:'pointer',fontSize:'1rem',opacity:0.5}}>×</button>
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   SETTINGS  (shop info, users, data tools)
─────────────────────────────────────────────────────────────────────────── */
function SettingsView({settings, users, onSaveSettings, onSaveUser, onDeleteUser, currentUser}) {
  const [s,setS]=useState(settings);
  const [u,setU]=useState({name:'',username:'',pin:'',role:'staff',active:true});
  const saveShop=()=>onSaveSettings(s);
  const addUser=()=>{if(!u.name||!u.username||!u.pin)return;onSaveUser({...u,id:uid3('u'),username:u.username.toLowerCase()});setU({name:'',username:'',pin:'',role:'staff',active:true});};
  return (
    <div style={{maxWidth:680,margin:'0 auto'}}>
      <H2 style={{marginBottom:'1.5rem'}}>Configuración</H2>
      <Card>
        <H3 style={{marginBottom:'1rem'}}>Datos del Taller</H3>
        <Grid cols="1fr 1fr" mCols="1fr" gap="0.75rem">
          <F label="Nombre"><TI value={s.shop_name} onChange={e=>setS({...s,shop_name:e.target.value})}/></F>
          <F label="Teléfono"><TI value={s.phone} onChange={e=>setS({...s,phone:e.target.value})}/></F>
          <F label="Dirección"><TI value={s.address} onChange={e=>setS({...s,address:e.target.value})}/></F>
          <F label="Horario"><TI value={s.hours} onChange={e=>setS({...s,hours:e.target.value})}/></F>
          <F label="Impuesto por defecto (%)"><TI type="number" step="0.01" value={s.tax_rate} onChange={e=>setS({...s,tax_rate:Number(e.target.value)})}/></F>
        </Grid>
        <div style={{marginTop:'1rem',textAlign:'right'}}><Btn onClick={saveShop}>Guardar cambios</Btn></div>
      </Card>

      <Card>
        <H3 style={{marginBottom:'1rem'}}>Usuarios del Taller</H3>
        {users.map(usr=>(
          <Row key={usr.id} style={{justifyContent:'space-between',padding:'0.6rem 0',borderBottom:`1px solid ${C.dark3}`}}>
            <div><span style={{fontWeight:600,color:C.white}}>{usr.name}</span> <span style={{color:C.muted,fontSize:'0.82rem'}}>· @{usr.username} · PIN {usr.pin}</span></div>
            <Row gap="0.5rem"><Tag label={usr.role==='owner'?'Dueño':'Empleado'} color={usr.role==='owner'?C.teal:C.muted}/>{usr.role!=='owner'&&<button onClick={()=>onDeleteUser(usr.id)} style={{background:'none',border:'none',color:C.muted,cursor:'pointer',fontSize:'1rem'}}>×</button>}</Row>
          </Row>
        ))}
        <Grid cols="1.5fr 1fr 0.7fr 1fr auto" mCols="1fr 1fr" gap="0.6rem" style={{alignItems:'end',marginTop:'1rem'}}>
          <F label="Nombre"><TI value={u.name} onChange={e=>setU({...u,name:e.target.value})} placeholder="Juan"/></F>
          <F label="Usuario"><TI value={u.username} onChange={e=>setU({...u,username:e.target.value})} placeholder="juan"/></F>
          <F label="PIN"><TI value={u.pin} onChange={e=>setU({...u,pin:e.target.value})} placeholder="1234"/></F>
          <F label="Rol"><SEL value={u.role} onChange={e=>setU({...u,role:e.target.value})}><option value="staff">Empleado</option><option value="owner">Dueño</option></SEL></F>
          <Btn onClick={addUser}><Icon name="plus" size={14}/></Btn>
        </Grid>
      </Card>

      <Card>
        <H3 style={{marginBottom:'0.5rem'}}>Datos</H3>
        <p style={{color:C.muted,fontSize:'0.84rem',marginBottom:'1rem'}}>Exporta una copia de seguridad, o reinicia con los datos de ejemplo. Conectado a la nube, esto lo maneja tu base de datos.</p>
        <Row gap="0.75rem">
          <Btn variant="ghost" onClick={()=>{const blob=new Blob([CheoDB.exportJSON()],{type:'application/json'});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='cheo-backup.json';a.click();}}>Exportar respaldo</Btn>
          <Btn variant="danger" onClick={()=>{if(confirm('¿Reiniciar TODOS los datos a los de ejemplo? Esto no se puede deshacer.')){CheoDB.reset();location.reload();}}}>Reiniciar datos</Btn>
        </Row>
      </Card>
    </div>
  );
}

Object.assign(window, { AppointmentsView, CustomersView, FinanceView, InventoryView, SettingsView });
})();