// js/components/widgets/depositos/WarehousesAdminModal.jsx
// [Wave 3 KIMI 2026-05-15] Extraído de Depositos.jsx — refactor mecânico zero-lógica.
// Self-contained: zero closures escopo pai.
// Globals runtime: window.sb (Supabase), toast, Modal, window.crypto, showPrompt, React.Fragment.
//
// Props (preservadas byte-by-byte):
//   warehouses, onClose, onDone
(function() {
  'use strict';
  const {useState, useEffect} = React;

  function WarehousesAdminModal({warehouses, onClose, onDone}){
    const sb = window.sb;
    const [editing, setEditing] = useState(null); // null = lista, {} = novo, {id, ...} = edit
    const [busy, setBusy] = useState(false);
    const [appUsers, setAppUsers] = useState([]);

    useEffect(()=>{
      (async ()=>{
        try{
          const {data} = await sb.from('app_users').select('id,name,role').eq('active', true).order('name');
          setAppUsers((data||[]).filter(u=>u.role==='estoquista'||u.role==='admin'));
        }catch(e){ console.warn('[WhAdmin] users load failed', e); }
      })();
    }, []);

    const callRpc = async (fn, params)=>{
      setBusy(true);
      try{
        const idem = (window.crypto?.randomUUID?.() || (Date.now()+'-'+Math.random()));
        const {data, error} = await sb.rpc(fn, {...params, p_idem_key: idem});
        if(error) throw error;
        toast('✅ '+(data?.message || 'Ação concluída'),'success');
        onDone();
        return data;
      }catch(err){
        console.error('[WhAdmin]', fn, err);
        toast('Erro: '+(err?.message||'falha'),'error');
        return null;
      }finally{
        setBusy(false);
      }
    };

    const save = async ()=>{
      const payload = {
        name: editing.name?.trim(),
        code: editing.code?.trim()?.toUpperCase(),
        manager_app_user_id: editing.manager_app_user_id || null,
        is_principal: !!editing.is_principal,
        address: editing.address || null,
        notes: editing.notes || null
      };
      let result;
      if(editing.id){
        result = await callRpc('admin_warehouse_update', {p_warehouse_id: editing.id, p_payload: payload});
      } else {
        result = await callRpc('admin_warehouse_create', {p_payload: payload});
      }
      if(result?.success) setEditing(null);
    };

    const desativar = async (w)=>{
      // [ONDA3 P2 2026-05-11] showPrompt ao invés de prompt() nativo (UX consistência)
      const reason = await showPrompt({
        title:`Desativar depósito "${w.name}"`,
        message:'Informe o motivo (mínimo 5 caracteres). Ficará registrado no audit log.',
        placeholder:'Ex.: depósito fechado, troca de localidade, etc.',
        minLength:5,
        multiline:true,
        confirmText:'Desativar',
        confirmColor:'#DC2626'
      });
      if(reason==null) return; // cancelado
      if(reason.length < 5){
        toast('Motivo obrigatório (mín 5 chars)','error');
        return;
      }
      const result = await callRpc('admin_warehouse_delete', {p_warehouse_id: w.id, p_reason: reason});
      if(result?.success) onDone();
    };

    return (
      <Modal onClose={onClose}>
        <div style={{width:'min(700px, 95vw)', maxHeight:'85vh', display:'flex', flexDirection:'column', background:'#fff', borderRadius:10, overflow:'hidden'}}>
          {/* HEADER */}
          <div style={{background:'linear-gradient(135deg, #1B2A4A 0%, #2A3F66 100%)', color:'#fff', padding:'14px 18px', borderBottom:'3px solid #B89840'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div>
                <div style={{fontSize:10,color:'#B89840',fontWeight:700,letterSpacing:1}}>ADMINISTRAÇÃO</div>
                <h3 style={{margin:'2px 0 0 0', fontSize:18, fontWeight:700}}>⚙️ Gerenciar Depósitos</h3>
              </div>
              <button onClick={onClose} style={{background:'rgba(255,255,255,.1)',color:'#fff',border:'1px solid rgba(255,255,255,.3)',padding:'6px 12px',borderRadius:5,cursor:'pointer',fontSize:12}}>✕</button>
            </div>
          </div>

          <div style={{flex:1, overflow:'auto', padding:18}}>
            {!editing ? (
              <React.Fragment>
                {/* LISTA + BOTÃO NOVO */}
                <button onClick={()=>setEditing({})}
                  style={{background:'#15803D',color:'#fff',border:'none',padding:'10px 18px',borderRadius:6,fontWeight:700,cursor:'pointer',fontSize:13,marginBottom:14}}>
                  + Novo Depósito
                </button>
                <div style={{display:'flex',flexDirection:'column',gap:8}}>
                  {warehouses.map(w=>(
                    <div key={w.id} style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:8,padding:12,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                      <div>
                        <div style={{fontSize:14,fontWeight:700,color:'#1B2A4A'}}>
                          {w.name}
                          {w.is_principal && <span style={{marginLeft:8,fontSize:9,background:'#B89840',color:'#fff',padding:'2px 6px',borderRadius:3,fontWeight:700}}>PRINCIPAL</span>}
                        </div>
                        <div style={{fontSize:11,color:'#6B7280',marginTop:2}}>
                          {w.code} · Manager: {appUsers.find(u=>u.id===w.manager_app_user_id)?.name || '—'}
                        </div>
                        {w.address && <div style={{fontSize:11,color:'#9CA3AF',marginTop:2}}>📍 {w.address}</div>}
                      </div>
                      <div style={{display:'flex',gap:6}}>
                        <button onClick={()=>setEditing({...w})} disabled={busy}
                          style={{background:'#1B2A4A',color:'#fff',border:'none',padding:'6px 12px',borderRadius:5,fontSize:11,fontWeight:600,cursor:'pointer'}}>Editar</button>
                        {!w.is_principal && (
                          <button onClick={()=>desativar(w)} disabled={busy}
                            style={{background:'transparent',color:'#B91C1C',border:'1px solid #FCA5A5',padding:'6px 12px',borderRadius:5,fontSize:11,fontWeight:600,cursor:'pointer'}}>Desativar</button>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </React.Fragment>
            ) : (
              <React.Fragment>
                {/* FORM */}
                <h4 style={{margin:'0 0 14px',fontSize:14,color:'#1B2A4A'}}>{editing.id ? '✏️ Editar' : '➕ Novo'} Depósito</h4>
                <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:10,marginBottom:10}}>
                  <div>
                    <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>NOME *</label>
                    <input type="text" value={editing.name||''} onChange={e=>setEditing({...editing,name:e.target.value})}
                      placeholder="Ex: Loja Centro"
                      style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13}}/>
                  </div>
                  <div>
                    <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>CÓDIGO *</label>
                    <input type="text" value={editing.code||''} onChange={e=>setEditing({...editing,code:e.target.value.toUpperCase()})}
                      placeholder="Ex: CENTRO"
                      maxLength={10}
                      style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13,fontFamily:'monospace',textTransform:'uppercase'}}/>
                  </div>
                </div>
                <div style={{marginBottom:10}}>
                  <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>RESPONSÁVEL (estoquista)</label>
                  <select value={editing.manager_app_user_id||''} onChange={e=>setEditing({...editing,manager_app_user_id:e.target.value||null})}
                    style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13,background:'#fff'}}>
                    <option value="">— Sem responsável —</option>
                    {appUsers.map(u=>(
                      <option key={u.id} value={u.id}>{u.name} ({u.role})</option>
                    ))}
                  </select>
                </div>
                <div style={{marginBottom:10}}>
                  <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>ENDEREÇO</label>
                  <input type="text" value={editing.address||''} onChange={e=>setEditing({...editing,address:e.target.value})}
                    placeholder="Rua, número, bairro, cidade"
                    style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13}}/>
                </div>
                <div style={{marginBottom:10}}>
                  <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>NOTAS</label>
                  <textarea value={editing.notes||''} onChange={e=>setEditing({...editing,notes:e.target.value})}
                    style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13,resize:'vertical',minHeight:50}}/>
                </div>
                <label style={{display:'flex',alignItems:'center',gap:8,padding:10,background:'#FEF3C7',borderRadius:5,cursor:'pointer',marginBottom:14,fontSize:12,color:'#78350F'}}>
                  <input type="checkbox" checked={!!editing.is_principal} onChange={e=>setEditing({...editing,is_principal:e.target.checked})}/>
                  ⚠️ Marcar como PRINCIPAL (despromove o atual)
                </label>

                <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
                  <button onClick={()=>setEditing(null)} disabled={busy}
                    style={{padding:'8px 16px',border:'1px solid #D1D5DB',background:'#fff',borderRadius:5,cursor:'pointer',fontSize:13}}>Cancelar</button>
                  <button onClick={save} disabled={busy || !editing.name?.trim() || !editing.code?.trim()}
                    style={{padding:'8px 18px',background:busy?'#9CA3AF':'#B89840',color:'#fff',border:'none',borderRadius:5,cursor:busy?'not-allowed':'pointer',fontSize:13,fontWeight:700}}>
                    {busy ? 'Salvando...' : editing.id ? 'Salvar Alterações' : 'Criar Depósito'}
                  </button>
                </div>
              </React.Fragment>
            )}
          </div>
        </div>
      </Modal>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.depositos = window.ZNX.widgets.depositos || {};
  window.ZNX.widgets.depositos.WarehousesAdminModal = WarehousesAdminModal;
})();