// ===== New intake order form =====
function NewOrder({ orders, user, onCreate, onCancel }){
  const nextNum = String(Math.max(...orders.map(o=>+o.num)) + 1);
  const [device, setDevice] = React.useState("celular");
  const [clientMode, setClientMode] = React.useState("existing"); // existing | new
  const [clientId, setClientId] = React.useState("");
  const [newClient, setNewClient] = React.useState({ name:"", phone:"", email:"" });
  const [form, setForm] = React.useState({ brand:"", model:"", serial:"", issue:"", estimate:"", priority:"normal", techId:user.techId||"t1" });
  const [unlock, setUnlock] = React.useState({ type:"none", code:"", pattern:[] });
  const [accessories, setAccessories] = React.useState([]);
  const [condition, setCondition] = React.useState([]);
  const [photos, setPhotos] = React.useState({});
  const [touched, setTouched] = React.useState(false);

  const ACC = ["Cargador","Funda","Caja","SIM","Memoria SD","Correa","Batería extra","Control remoto","Maletín","Cable USB"];
  const COND = ["Pantalla rayada","Golpes en chasis","Humedad/líquido","Botones flojos","Tornillos faltantes","Sin encender","Trizado posterior"];

  function up(k,v){ setForm(f=>({ ...f, [k]:v })); }
  function toggle(list,set,v){ set(list.includes(v) ? list.filter(x=>x!==v) : [...list, v]); }

  const clientName = clientMode==="existing" ? (getClient(clientId).name||"") : newClient.name;
  const valid = form.model.trim() && form.issue.trim() && clientName.trim() &&
    (clientMode==="existing" ? clientId : newClient.phone.trim());

  function submit(){
    setTouched(true);
    if(!valid) return;
    let cid = clientId;
    if(clientMode==="new"){
      cid = "c"+Date.now();
      CLIENTS.unshift({ id:cid, name:newClient.name, phone:newClient.phone, email:newClient.email, orders:1 });
    }
    const order = {
      id:"o"+nextNum, num:nextNum, device, brand:form.brand||"—", model:form.model,
      serial:form.serial, clientId:cid, techId:form.techId, priority:form.priority,
      status:"recibido", issue:form.issue, diagnosis:"", accessories, condition, unlock, photos,
      estimate:+form.estimate||0, paid:0, createdAt:new Date().toISOString(),
      log:[{ t:new Date().toISOString(), who:user.name, text:"Orden creada en recepción." }],
    };
    onCreate(order);
  }

  const dev = getDevice(device);

  return (
    <div style={{ animation:"fadeUp .35s ease" }}>
      <button onClick={onCancel} style={{ display:"inline-flex", alignItems:"center", gap:6, border:"none", background:"transparent", color:"var(--muted)", fontSize:13.5, fontWeight:600, marginBottom:16, padding:0 }}>
        <Icon name="arrowLeft" size={16} /> Volver a órdenes
      </button>

      <div style={{ display:"grid", gridTemplateColumns:"1fr 320px", gap:20, alignItems:"start" }}>
        {/* main form */}
        <div style={{ display:"flex", flexDirection:"column", gap:16 }}>
          {/* device type */}
          <Card>
            <SecTitle n="1" title="Tipo de dispositivo" />
            <div style={{ display:"grid", gridTemplateColumns:"repeat(6,1fr)", gap:10, marginTop:14 }}>
              {DEVICE_TYPES.map(d=>{
                const active = device===d.id;
                return (
                  <button key={d.id} onClick={()=>setDevice(d.id)}
                    style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:8, padding:"15px 8px", borderRadius:12,
                      border:`1.5px solid ${active?"var(--accent)":"var(--line)"}`, background: active?"var(--accent-soft)":"var(--surface)",
                      color: active?"var(--accent-ink)":"var(--ink-2)", transition:"all .14s", cursor:"pointer" }}>
                    <Icon name={d.icon} size={26} strokeWidth={active?1.9:1.6} />
                    <span style={{ fontSize:12, fontWeight:600, textAlign:"center", lineHeight:1.2 }}>{d.label}</span>
                  </button>
                );
              })}
            </div>
          </Card>

          {/* equipment details */}
          <Card>
            <SecTitle n="2" title="Datos del equipo" />
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14, marginTop:14 }}>
              <Field label="Marca">
                <TextInput value={form.brand} onChange={e=>up("brand",e.target.value)} placeholder="Apple, Samsung, DJI…" />
              </Field>
              <Field label="Modelo" required>
                <TextInput value={form.model} onChange={e=>up("model",e.target.value)} placeholder={`ej. ${dev.id==="dron"?"Mavic 3 Pro":dev.id==="laptop"?'MacBook Pro 14"':"iPhone 13"}`}
                  style={touched&&!form.model.trim()?{ borderColor:"var(--danger)" }:{}} />
              </Field>
              <Field label="N° de serie / IMEI" hint="Identificador único del equipo" style={{ gridColumn:"1 / -1" }}>
                <TextInput value={form.serial} onChange={e=>up("serial",e.target.value)} placeholder="356789102345678" style={{ fontFamily:"var(--mono)" }} />
              </Field>
              <Field label="Bloqueo del equipo" hint="Código o patrón para poder probar la reparación" style={{ gridColumn:"1 / -1" }}>
                <UnlockField value={unlock} onChange={setUnlock} />
              </Field>
            </div>
          </Card>

          {/* problem */}
          <Card>
            <SecTitle n="3" title="Falla reportada y estado físico" />
            <div style={{ marginTop:14, display:"flex", flexDirection:"column", gap:16 }}>
              <Field label="Falla reportada por el cliente" required>
                <textarea value={form.issue} onChange={e=>up("issue",e.target.value)} rows={3}
                  placeholder="Describe el problema tal como lo reporta el cliente…"
                  style={{ ...inputStyle, resize:"vertical", lineHeight:1.5, ...(touched&&!form.issue.trim()?{ borderColor:"var(--danger)" }:{}) }} />
              </Field>

              <div>
                <div style={{ fontSize:13, fontWeight:600, color:"var(--ink-2)", marginBottom:9 }}>Condición física al ingreso</div>
                <ChipGroup options={COND} selected={condition} onToggle={v=>toggle(condition,setCondition,v)} tone="warn" />
              </div>

              <div>
                <div style={{ fontSize:13, fontWeight:600, color:"var(--ink-2)", marginBottom:9 }}>Accesorios entregados</div>
                <ChipGroup options={ACC} selected={accessories} onToggle={v=>toggle(accessories,setAccessories,v)} />
              </div>

              <div>
                <div style={{ fontSize:13, fontWeight:600, color:"var(--ink-2)", marginBottom:9 }}>Fotos del equipo</div>
                <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:10 }}>
                  {["Frontal","Posterior","Daño visible","Accesorios"].map(l=>(
                    <PhotoSlot key={l} label={l} value={photos[l]} onChange={(v)=>setPhotos(p=>{ const n={...p}; if(v) n[l]=v; else delete n[l]; return n; })} h={86} />
                  ))}
                </div>
              </div>
            </div>
          </Card>

          {/* client */}
          <Card>
            <SecTitle n="4" title="Cliente" />
            <div style={{ display:"flex", gap:8, marginTop:14, marginBottom:14 }}>
              {[["existing","Cliente existente"],["new","Nuevo cliente"]].map(([m,l])=>(
                <button key={m} onClick={()=>setClientMode(m)}
                  style={{ padding:"8px 14px", borderRadius:9, fontSize:13, fontWeight:600, cursor:"pointer",
                    border:`1px solid ${clientMode===m?"var(--accent)":"var(--line)"}`,
                    background: clientMode===m?"var(--accent-soft)":"var(--surface)", color: clientMode===m?"var(--accent-ink)":"var(--ink-2)" }}>{l}</button>
              ))}
            </div>
            {clientMode==="existing" ? (
              <div style={{ display:"flex", flexDirection:"column", gap:8, maxHeight:230, overflowY:"auto" }}>
                {CLIENTS.map(c=>{
                  const sel = clientId===c.id;
                  return (
                    <button key={c.id} onClick={()=>setClientId(c.id)}
                      style={{ display:"flex", alignItems:"center", gap:12, padding:"10px 12px", borderRadius:10, textAlign:"left",
                        border:`1px solid ${sel?"var(--accent)":"var(--line)"}`, background: sel?"var(--accent-soft)":"var(--surface)" }}>
                      <Avatar name={c.name} hue={256} size={36} />
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ fontSize:14, fontWeight:700 }}>{c.name}</div>
                        <div style={{ fontSize:12.5, color:"var(--muted)" }} className="mono">{c.phone}</div>
                      </div>
                      <span style={{ fontSize:12, color:"var(--faint)" }}>{c.orders} órdenes</span>
                      {sel && <Icon name="check" size={18} style={{ color:"var(--accent)" }} />}
                    </button>
                  );
                })}
              </div>
            ) : (
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14 }}>
                <Field label="Nombre completo" required style={{ gridColumn:"1 / -1" }}>
                  <TextInput value={newClient.name} onChange={e=>setNewClient({...newClient,name:e.target.value})} placeholder="Nombre del cliente"
                    style={touched&&!newClient.name.trim()?{borderColor:"var(--danger)"}:{}} />
                </Field>
                <Field label="Teléfono" required>
                  <TextInput value={newClient.phone} onChange={e=>setNewClient({...newClient,phone:e.target.value})} placeholder="+503 7000-0000"
                    style={touched&&!newClient.phone.trim()?{borderColor:"var(--danger)"}:{}} />
                </Field>
                <Field label="Correo electrónico">
                  <TextInput value={newClient.email} onChange={e=>setNewClient({...newClient,email:e.target.value})} placeholder="correo@ejemplo.com" />
                </Field>
              </div>
            )}
          </Card>
        </div>

        {/* summary sidebar */}
        <div style={{ position:"sticky", top:0, display:"flex", flexDirection:"column", gap:16 }}>
          <Card>
            <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:14 }}>
              <span style={{ fontSize:13, fontWeight:600, color:"var(--muted)" }}>Nueva orden</span>
              <span className="mono" style={{ fontSize:14, fontWeight:700, color:"var(--accent-ink)" }}>#{nextNum}</span>
            </div>
            <div style={{ display:"flex", alignItems:"center", gap:12, padding:"12px", borderRadius:10, background:"var(--surface-2)", marginBottom:16 }}>
              <DeviceGlyph type={device} size={44} />
              <div style={{ minWidth:0 }}>
                <div style={{ fontSize:14, fontWeight:700 }}>{form.model || dev.label}</div>
                <div style={{ fontSize:12.5, color:"var(--muted)" }}>{form.brand || "Marca"} · {clientName || "Sin cliente"}</div>
              </div>
            </div>

            <Field label="Prioridad" style={{ marginBottom:14 }}>
              <div style={{ display:"flex", gap:6 }}>
                {Object.values(PRIORITIES).map(p=>{
                  const sel = form.priority===p.id;
                  return (
                    <button key={p.id} onClick={()=>up("priority",p.id)}
                      style={{ flex:1, padding:"8px 4px", borderRadius:8, fontSize:12, fontWeight:600, cursor:"pointer",
                        border:`1px solid ${sel?PRIO_COLOR[p.id]:"var(--line)"}`,
                        background: sel?`color-mix(in oklch, ${PRIO_COLOR[p.id]} 12%, white)`:"var(--surface)",
                        color: sel?PRIO_COLOR[p.id]:"var(--muted)" }}>{p.label}</button>
                  );
                })}
              </div>
            </Field>

            <Field label="Técnico asignado" style={{ marginBottom:14 }}>
              <div style={{ position:"relative" }}>
                <select value={form.techId} onChange={e=>up("techId",e.target.value)}
                  style={{ ...inputStyle, appearance:"none", paddingRight:34, cursor:"pointer" }}>
                  {TECHS.map(t=><option key={t.id} value={t.id}>{t.name} — {t.role}</option>)}
                </select>
                <Icon name="chevronDown" size={15} style={{ position:"absolute", right:12, top:"50%", transform:"translateY(-50%)", color:"var(--faint)", pointerEvents:"none" }} />
              </div>
            </Field>

            <Field label="Presupuesto estimado (US$)">
              <TextInput type="number" min="0" value={form.estimate} onChange={e=>up("estimate",e.target.value)} placeholder="0.00" style={{ fontFamily:"var(--mono)" }} />
            </Field>
          </Card>

          {touched && !valid && (
            <div style={{ display:"flex", alignItems:"flex-start", gap:8, padding:"11px 13px", borderRadius:10, background:"var(--danger-soft)", color:"var(--danger)", fontSize:12.5, fontWeight:500 }}>
              <Icon name="warning" size={16} style={{ flexShrink:0, marginTop:1 }} />
              Completa modelo, falla reportada y los datos del cliente.
            </div>
          )}

          <div style={{ display:"flex", gap:10 }}>
            <Btn variant="secondary" style={{ flex:1 }} onClick={onCancel}>Cancelar</Btn>
            <Btn icon="check" style={{ flex:1.4 }} onClick={submit} disabled={touched&&!valid}>Crear orden</Btn>
          </div>
          <p style={{ fontSize:12, color:"var(--faint)", textAlign:"center", margin:0, lineHeight:1.5 }}>
            Al crear se imprimirá el ticket de ingreso y se notificará al cliente por SMS.
          </p>
        </div>
      </div>
    </div>
  );
}

function SecTitle({ n, title }){
  return (
    <div style={{ display:"flex", alignItems:"center", gap:10 }}>
      <span style={{ width:24, height:24, borderRadius:7, background:"var(--accent-soft)", color:"var(--accent-ink)", fontSize:12.5, fontWeight:700, display:"flex", alignItems:"center", justifyContent:"center" }}>{n}</span>
      <h3 style={{ fontSize:15.5, fontWeight:700, margin:0 }}>{title}</h3>
    </div>
  );
}

function ChipGroup({ options, selected, onToggle, tone }){
  return (
    <div style={{ display:"flex", flexWrap:"wrap", gap:8 }}>
      {options.map(o=>{
        const sel = selected.includes(o);
        const warn = tone==="warn";
        return (
          <button key={o} onClick={()=>onToggle(o)}
            style={{ display:"inline-flex", alignItems:"center", gap:6, padding:"7px 12px", borderRadius:99, fontSize:12.5, fontWeight:600, cursor:"pointer",
              border:`1px solid ${sel?(warn?"var(--st-entrada)":"var(--accent)"):"var(--line)"}`,
              background: sel?(warn?"var(--st-entrada-soft)":"var(--accent-soft)"):"var(--surface)",
              color: sel?(warn?"var(--st-entrada)":"var(--accent-ink)"):"var(--ink-2)", transition:"all .13s" }}>
            {sel && <Icon name="check" size={13} />}{o}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { NewOrder, SecTitle, ChipGroup });