// ===== Roles, permissions & user management =====

// Master permission catalogue
const PERMS = [
  { id:"orders_view",   label:"Ver órdenes de trabajo" },
  { id:"orders_create", label:"Crear órdenes de ingreso" },
  { id:"diagnosis",     label:"Editar diagnóstico técnico" },
  { id:"advance",       label:"Avanzar estados de reparación" },
  { id:"clients",       label:"Gestionar clientes" },
  { id:"stats",         label:"Ver estadísticas y reportes" },
  { id:"config",        label:"Configuración del taller" },
  { id:"users",         label:"Gestionar usuarios y roles" },
];

const ROLES = {
  admin: {
    id:"admin", label:"Administrador", hue:320,
    desc:"Control total del taller, usuarios y configuración.",
    perms:["orders_view","orders_create","diagnosis","advance","clients","stats","config","users"],
  },
  tecnico: {
    id:"tecnico", label:"Técnico", hue:256,
    desc:"Atiende reparaciones: diagnóstico y avance de estados.",
    perms:["orders_view","orders_create","diagnosis","advance"],
  },
  recepcion: {
    id:"recepcion", label:"Recepción", hue:70,
    desc:"Recibe equipos, crea órdenes y atiende clientes.",
    perms:["orders_view","orders_create","clients"],
  },
};

const DEFAULT_USERS = [
  { id:"t1", name:"Daniela López",  username:"daniela",   pass:"taller2026", roleId:"admin",     specialty:"Técnico sénior",  active:true,  initials:"DL", hue:256, lastAccess: daysAgo(0) },
  { id:"u_admin", name:"Administrador", username:"admin", pass:"admin",      roleId:"admin",     specialty:"Dueño del taller", active:true,  initials:"AD", hue:320, lastAccess: daysAgo(0) },
  { id:"t4", name:"Julio Paredes",  username:"recepcion", pass:"taller2026", roleId:"recepcion", specialty:"Recepción",       active:true,  initials:"JP", hue:320, lastAccess: daysAgo(1) },
  { id:"t2", name:"Marco Reyes",    username:"marco",     pass:"taller2026", roleId:"tecnico",   specialty:"Microsoldadura",  active:true,  initials:"MR", hue:150, lastAccess: daysAgo(0) },
  { id:"t3", name:"Andrea Salas",   username:"andrea",    pass:"taller2026", roleId:"tecnico",   specialty:"Técnico",         active:false, initials:"AS", hue:70,  lastAccess: daysAgo(6) },
];

const LS_USERS = "casepoint.users.v1";
function loadUsers(){
  try{ const v = localStorage.getItem(LS_USERS); if(v) return JSON.parse(v); }catch(e){}
  return DEFAULT_USERS;
}

function RoleBadge({ roleId }){
  const r = ROLES[roleId]; if(!r) return null;
  return (
    <span style={{ display:"inline-flex", alignItems:"center", gap:6, padding:"4px 10px", borderRadius:99,
      fontSize:12, fontWeight:700, color:`oklch(0.46 0.13 ${r.hue})`, background:`oklch(0.95 0.045 ${r.hue})` }}>
      <span style={{ width:6, height:6, borderRadius:"50%", background:`oklch(0.55 0.15 ${r.hue})` }} />
      {r.label}
    </span>
  );
}

// ===== Main view: tabs Usuarios | Roles y permisos =====
function UsersAndRoles({ users, setUsers, currentUser }){
  const [tab, setTab] = React.useState("usuarios");
  const [modal, setModal] = React.useState(null); // null | {} (new) | user (edit)
  const canManage = ROLES[currentUser.roleId]?.perms.includes("users");

  function saveUser(u){
    setUsers(prev => {
      const exists = prev.some(x => x.id === u.id);
      return exists ? prev.map(x => x.id === u.id ? u : x) : [...prev, u];
    });
    setModal(null);
  }
  function toggleActive(id){
    setUsers(prev => prev.map(x => x.id===id ? { ...x, active: !x.active } : x));
  }
  function removeUser(id){
    setUsers(prev => prev.filter(x => x.id !== id));
    setModal(null);
  }

  return (
    <div>
      {/* sub tabs */}
      <div style={{ display:"flex", gap:4, marginBottom:18, background:"var(--surface-2)", padding:4, borderRadius:11, width:"fit-content", border:"1px solid var(--line)" }}>
        {[["usuarios","Usuarios"],["roles","Roles y permisos"]].map(([id,l])=>(
          <button key={id} onClick={()=>setTab(id)}
            style={{ padding:"8px 16px", borderRadius:8, border:"none", fontSize:13.5, fontWeight:600, cursor:"pointer",
              background: tab===id?"var(--surface)":"transparent", color: tab===id?"var(--ink)":"var(--muted)",
              boxShadow: tab===id?"var(--shadow-sm)":"none" }}>{l}</button>
        ))}
      </div>

      {tab==="usuarios" ? (
        <Card pad={0}>
          <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"16px 20px", borderBottom:"1px solid var(--line)" }}>
            <div>
              <h3 style={{ fontSize:15.5, fontWeight:700, margin:0 }}>Usuarios del taller</h3>
              <p style={{ fontSize:13, color:"var(--muted)", margin:"3px 0 0" }}>{users.filter(u=>u.active).length} activos · {users.length} en total</p>
            </div>
            <Btn icon="plus" size="sm" onClick={()=>canManage && setModal({ new:true })} disabled={!canManage}
              title={canManage?"":"Solo un administrador puede crear usuarios"}>Nuevo usuario</Btn>
          </div>

          {!canManage && (
            <div style={{ display:"flex", alignItems:"center", gap:9, margin:"14px 20px 0", padding:"10px 13px", borderRadius:10, background:"var(--st-entrada-soft)", color:"var(--st-entrada)", fontSize:12.5, fontWeight:600 }}>
              <Icon name="warning" size={16} /> Estás viendo en modo lectura. Inicia sesión como <b>administrador</b> para crear o editar usuarios.
            </div>
          )}

          <div style={{ padding:"8px 8px 8px" }}>
            {users.map(u=>{
              const isMe = u.username === currentUser.username;
              return (
                <div key={u.id} style={{ display:"flex", alignItems:"center", gap:14, padding:"13px 12px", borderRadius:10, transition:"background .12s" }}
                  onMouseEnter={e=>e.currentTarget.style.background="var(--surface-2)"}
                  onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                  <div style={{ position:"relative" }}>
                    <Avatar name={u.name} initials={u.initials} hue={u.hue} size={42} />
                    <span style={{ position:"absolute", bottom:-1, right:-1, width:12, height:12, borderRadius:"50%",
                      background: u.active?"var(--st-listo)":"var(--faint)", border:"2px solid var(--surface)" }} />
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                      <span style={{ fontSize:14.5, fontWeight:700 }}>{u.name}</span>
                      {isMe && <span style={{ fontSize:11, fontWeight:700, color:"var(--accent-ink)", background:"var(--accent-soft)", padding:"2px 7px", borderRadius:99 }}>Tú</span>}
                    </div>
                    <div style={{ fontSize:12.5, color:"var(--muted)" }}><span className="mono">@{u.username}</span> · {u.specialty}</div>
                  </div>
                  <div style={{ width:150 }}><RoleBadge roleId={u.roleId} /></div>
                  <div style={{ width:130, fontSize:12.5, color:"var(--faint)" }}>
                    {u.active ? `Acceso ${relTime(u.lastAccess)}` : "Cuenta inactiva"}
                  </div>
                  <div style={{ display:"flex", gap:2 }}>
                    <IconBtn icon="edit" size={16} title={canManage?"Editar":"Solo lectura"} onClick={()=>canManage && setModal(u)} />
                    <button onClick={()=>canManage && toggleActive(u.id)} disabled={!canManage || isMe} title={isMe?"No puedes desactivar tu propia cuenta":(u.active?"Desactivar":"Activar")}
                      style={{ width:38, height:38, borderRadius:10, border:"none", background:"transparent", cursor: (canManage&&!isMe)?"pointer":"not-allowed", opacity:(canManage&&!isMe)?1:0.4,
                        display:"flex", alignItems:"center", justifyContent:"center", color: u.active?"var(--st-listo)":"var(--faint)" }}>
                      <Icon name={u.active?"check":"x"} size={16} />
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      ) : (
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))", gap:16 }}>
          {Object.values(ROLES).map(r=>{
            const count = users.filter(u=>u.roleId===r.id).length;
            return (
              <Card key={r.id} style={{ display:"flex", flexDirection:"column" }}>
                <div style={{ display:"flex", alignItems:"flex-start", justifyContent:"space-between", marginBottom:6 }}>
                  <div style={{ display:"flex", alignItems:"center", gap:10 }}>
                    <span style={{ width:38, height:38, borderRadius:10, display:"flex", alignItems:"center", justifyContent:"center",
                      background:`oklch(0.95 0.045 ${r.hue})`, color:`oklch(0.5 0.14 ${r.hue})` }}><Icon name={r.id==="admin"?"settings":r.id==="tecnico"?"tools":"clients"} size={20} /></span>
                    <div>
                      <div style={{ fontSize:15.5, fontWeight:700 }}>{r.label}</div>
                      <div style={{ fontSize:12, color:"var(--muted)" }}>{count} {count===1?"usuario":"usuarios"}</div>
                    </div>
                  </div>
                </div>
                <p style={{ fontSize:13, color:"var(--ink-2)", lineHeight:1.5, margin:"6px 0 14px" }}>{r.desc}</p>
                <div style={{ display:"flex", flexDirection:"column", gap:9, paddingTop:14, borderTop:"1px solid var(--line-2)" }}>
                  {PERMS.map(p=>{
                    const on = r.perms.includes(p.id);
                    return (
                      <div key={p.id} style={{ display:"flex", alignItems:"center", gap:9, fontSize:13, color: on?"var(--ink-2)":"var(--faint)" }}>
                        <span style={{ width:18, height:18, borderRadius:6, flexShrink:0, display:"flex", alignItems:"center", justifyContent:"center",
                          background: on?`oklch(0.95 0.045 ${r.hue})`:"var(--surface-2)", color: on?`oklch(0.5 0.14 ${r.hue})`:"var(--faint)", border:`1px solid ${on?"transparent":"var(--line)"}` }}>
                          {on ? <Icon name="check" size={13} /> : <Icon name="x" size={12} />}
                        </span>
                        {p.label}
                      </div>
                    );
                  })}
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {modal && <UserModal user={modal.new?null:modal} onSave={saveUser} onClose={()=>setModal(null)} onDelete={removeUser} existing={users} />}
    </div>
  );
}

// ===== Create / edit user modal =====
function UserModal({ user, onSave, onClose, onDelete, existing }){
  const editing = !!user;
  const HUES = [256,150,70,320,200,30];
  const [f, setF] = React.useState(user || { name:"", username:"", pass:"", roleId:"tecnico", specialty:"", active:true, hue:256 });
  const [touched, setTouched] = React.useState(false);
  function up(k,v){ setF(p=>({ ...p, [k]:v })); }

  const dupUser = existing.some(u => u.username === f.username.trim().toLowerCase() && u.id !== (user?.id));
  const valid = f.name.trim() && f.username.trim() && (editing || f.pass.trim()) && !dupUser;

  function save(){
    setTouched(true);
    if(!valid) return;
    const initials = f.name.trim().split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase();
    onSave({
      id: user?.id || ("u_"+Date.now()),
      name: f.name.trim(), username: f.username.trim().toLowerCase(), pass: f.pass || user?.pass,
      roleId: f.roleId, specialty: f.specialty.trim() || ROLES[f.roleId].label, active: f.active,
      initials, hue: f.hue, lastAccess: user?.lastAccess || new Date().toISOString(),
    });
  }

  return (
    <div onClick={onClose} style={{ position:"fixed", inset:0, zIndex:90, background:"oklch(0.2 0.03 262 / 0.42)", display:"flex", alignItems:"center", justifyContent:"center", padding:24, animation:"fadeIn .15s ease" }}>
      <div onClick={e=>e.stopPropagation()} style={{ width:"100%", maxWidth:460, background:"var(--surface)", borderRadius:16, boxShadow:"var(--shadow-lg)", animation:"popIn .18s ease", overflow:"hidden" }}>
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"18px 22px", borderBottom:"1px solid var(--line)" }}>
          <h3 style={{ fontSize:17, fontWeight:800, margin:0 }}>{editing?"Editar usuario":"Nuevo usuario"}</h3>
          <IconBtn icon="x" size={18} onClick={onClose} />
        </div>

        <div style={{ padding:"20px 22px", display:"flex", flexDirection:"column", gap:15, maxHeight:"68vh", overflowY:"auto" }}>
          <div style={{ display:"flex", alignItems:"center", gap:13 }}>
            <Avatar name={f.name||"?"} initials={(f.name||"?").split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase()} hue={f.hue} size={52} />
            <div style={{ display:"flex", gap:6 }}>
              {HUES.map(h=>(
                <button key={h} onClick={()=>up("hue",h)} style={{ width:24, height:24, borderRadius:"50%", cursor:"pointer",
                  background:`oklch(0.6 0.15 ${h})`, border: f.hue===h?"2.5px solid var(--ink)":"2.5px solid transparent" }} />
              ))}
            </div>
          </div>

          <Field label="Nombre completo" required>
            <TextInput value={f.name} onChange={e=>up("name",e.target.value)} placeholder="ej. Carla Méndez"
              style={touched&&!f.name.trim()?{borderColor:"var(--danger)"}:{}} />
          </Field>

          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14 }}>
            <Field label="Usuario" required hint={dupUser?"":"Para iniciar sesión"}>
              <TextInput value={f.username} onChange={e=>up("username",e.target.value.replace(/\s/g,""))} placeholder="carla"
                style={{ fontFamily:"var(--mono)", ...(touched&&(!f.username.trim()||dupUser)?{borderColor:"var(--danger)"}:{}) }} />
              {dupUser && <span style={{ fontSize:12, color:"var(--danger)", fontWeight:500 }}>Ese usuario ya existe</span>}
            </Field>
            <Field label={editing?"Nueva contraseña":"Contraseña"} required={!editing} hint={editing?"Dejar vacío = sin cambios":""}>
              <TextInput type="text" value={f.pass} onChange={e=>up("pass",e.target.value)} placeholder="••••••••"
                style={touched&&!editing&&!f.pass.trim()?{borderColor:"var(--danger)"}:{}} />
            </Field>
          </div>

          <Field label="Rol">
            <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
              {Object.values(ROLES).map(r=>{
                const sel = f.roleId===r.id;
                return (
                  <button key={r.id} onClick={()=>up("roleId",r.id)}
                    style={{ display:"flex", alignItems:"center", gap:11, padding:"11px 13px", borderRadius:10, textAlign:"left", cursor:"pointer",
                      border:`1.5px solid ${sel?`oklch(0.6 0.14 ${r.hue})`:"var(--line)"}`, background: sel?`oklch(0.97 0.03 ${r.hue})`:"var(--surface)" }}>
                    <span style={{ width:18, height:18, borderRadius:"50%", flexShrink:0, border:`5px solid ${sel?`oklch(0.55 0.15 ${r.hue})`:"var(--line)"}`, background:"var(--surface)" }} />
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13.5, fontWeight:700 }}>{r.label}</div>
                      <div style={{ fontSize:12, color:"var(--muted)" }}>{r.desc}</div>
                    </div>
                    <span style={{ fontSize:11.5, fontWeight:600, color:"var(--faint)" }}>{r.perms.length} permisos</span>
                  </button>
                );
              })}
            </div>
          </Field>

          <Field label="Especialidad / cargo" hint="Aparece junto al nombre">
            <TextInput value={f.specialty} onChange={e=>up("specialty",e.target.value)} placeholder="ej. Microsoldadura, Recepción…" />
          </Field>

          <label style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"12px 14px", borderRadius:10, background:"var(--surface-2)", border:"1px solid var(--line)" }}>
            <div>
              <div style={{ fontSize:13.5, fontWeight:600 }}>Cuenta activa</div>
              <div style={{ fontSize:12, color:"var(--muted)" }}>Puede iniciar sesión en el taller</div>
            </div>
            <button type="button" onClick={()=>up("active",!f.active)} style={{ width:42, height:24, borderRadius:99, border:"none", padding:2, cursor:"pointer",
              background: f.active?"var(--accent)":"var(--line)", transition:"background .2s", display:"flex", justifyContent: f.active?"flex-end":"flex-start" }}>
              <span style={{ width:20, height:20, borderRadius:"50%", background:"#fff", boxShadow:"var(--shadow-sm)" }} />
            </button>
          </label>
        </div>

        <div style={{ display:"flex", alignItems:"center", gap:10, padding:"16px 22px", borderTop:"1px solid var(--line)" }}>
          {editing && user.username!=="admin" && (
            <Btn variant="danger" size="md" icon="trash" onClick={()=>onDelete(user.id)}>Eliminar</Btn>
          )}
          <div style={{ marginLeft:"auto", display:"flex", gap:10 }}>
            <Btn variant="secondary" onClick={onClose}>Cancelar</Btn>
            <Btn icon="check" onClick={save} disabled={touched&&!valid}>{editing?"Guardar cambios":"Crear usuario"}</Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PERMS, ROLES, DEFAULT_USERS, LS_USERS, loadUsers, RoleBadge, UsersAndRoles, UserModal });