// js/components/widgets/clientes/ClientForm.jsx
// [Wave 9 KIMI 2026-05-17] Extraído de Clientes.jsx L876-933 — form body do Modal Novo/Editar Cliente.
// Padrão: IIFE + window.ZNX.widgets.clientes.ClientForm namespace + props injection.
//
// Form fields (5 sections: Identificação + Contato + Localização + Preferências + Observações)
// com 16 inputs controlados via form/setForm + botões Cancelar/Salvar.
// Modal wrapper FICA no pai — widget retorna só os children do Modal.
//
// Props (validados FASE 1.5 = 6 props):
//   form: object — state pai (campos: name, type, document, segment, channel, phone, whatsapp, email, birthDate, cep, city, state, neighborhood, address, canalPref, notes)
//   setForm: setter — atualiza form
//   isNew: bool — modal==='new' (controla title indirectly + comportamentos)
//   isSavingClient: bool — loading state (regra_loading_state_obrigatorio)
//   onSave: fn — save() handler do pai (IDB queue + dualWrite INTOCADA)
//   onClose: fn — () => setModal(null)
//
// Deps runtime globals: SmartSelect (componente global), CLIENT_SEGMENTS, CLIENT_CHANNELS, BR_STATES
// (constants top-level em index.html — escopo lexical via global script scope).
(function() {
  'use strict';

  function ClientForm({form, setForm, isNew, isSavingClient, onSave, onClose}){
    return (
      <>
        {/* Identificação */}
        <div style={{fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,marginBottom:10}}>Identificação</div>
        <div className="form-grid">
          <div className="form-group full"><label>Nome completo / Razão Social <span style={{color:"#DC2626",fontSize:11,fontWeight:600}}>(obrigatório)</span></label><input value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="Nome do cliente ou empresa"/></div>
          <div className="form-group"><label>Tipo</label>
            <SmartSelect value={form.type} onChange={val=>setForm(f=>({...f,type:val}))} options={[{value:'PF',label:'Pessoa Física'},{value:'PJ',label:'Pessoa Jurídica'}]}/>
          </div>
          <div className="form-group"><label>CPF / CNPJ <span style={{color:"#DC2626",fontSize:11,fontWeight:600}}>(obrigatório)</span></label><input value={form.document} onChange={e=>setForm(f=>({...f,document:e.target.value}))}/></div>
          <div className="form-group"><label>Segmento</label>
            <SmartSelect value={form.segment} onChange={val=>setForm(f=>({...f,segment:val}))} options={[{value:'',label:'Selecione...'},...CLIENT_SEGMENTS.map(s=>({value:s,label:s}))]}/>
          </div>
          <div className="form-group"><label>Como nos conheceu</label>
            <SmartSelect value={form.channel} onChange={val=>setForm(f=>({...f,channel:val}))} options={[{value:'',label:'Selecione...'},...CLIENT_CHANNELS.map(c=>({value:c,label:c}))]}/>
          </div>
        </div>

        {/* Contato */}
        <div style={{fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,margin:'16px 0 10px'}}>Contato</div>
        <div className="form-grid">
          <div className="form-group"><label>Telefone</label><input value={form.phone} onChange={e=>setForm(f=>({...f,phone:e.target.value}))} placeholder="(11) 99999-9999"/></div>
          <div className="form-group"><label>WhatsApp <span style={{color:"#DC2626",fontSize:11,fontWeight:600}}>(obrigatório)</span></label><input value={form.whatsapp} onChange={e=>setForm(f=>({...f,whatsapp:e.target.value}))} placeholder="(11) 99999-9999"/></div>
          <div className="form-group full"><label>Email</label><input value={form.email} onChange={e=>setForm(f=>({...f,email:e.target.value}))} placeholder="email@exemplo.com"/></div>
          <div className="form-group"><label>Data de Nascimento <span style={{color:'#9CA3AF',fontSize:11}}>(opcional)</span></label><input type="date" value={form.birthDate||''} onChange={e=>setForm(f=>({...f,birthDate:e.target.value}))} style={{width:'100%'}}/></div>
        </div>

        {/* Localização */}
        <div style={{fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,margin:'16px 0 10px'}}>📍 Localização</div>
        <div className="form-grid">
          <div className="form-group"><label>CEP <span style={{color:"#DC2626",fontSize:11,fontWeight:600}}>(obrigatório)</span></label><input value={form.cep} onChange={e=>setForm(f=>({...f,cep:e.target.value}))} placeholder="00000-000"/></div>
          <div className="form-group"><label>Cidade <span style={{color:"#DC2626",fontSize:11,fontWeight:600}}>(obrigatório)</span></label><input value={form.city} onChange={e=>setForm(f=>({...f,city:e.target.value}))} placeholder="São Paulo"/></div>
          <div className="form-group"><label>Estado (UF)</label>
            <SmartSelect value={form.state} onChange={val=>setForm(f=>({...f,state:val}))} options={[{value:'',label:'Selecione...'},...BR_STATES.map(s=>({value:s,label:s}))]}/>
          </div>
          <div className="form-group"><label>Bairro</label><input value={form.neighborhood} onChange={e=>setForm(f=>({...f,neighborhood:e.target.value}))} placeholder="Centro"/></div>
          <div className="form-group full"><label>Endereço completo</label><input value={form.address} onChange={e=>setForm(f=>({...f,address:e.target.value}))} placeholder="Rua, número, complemento"/></div>
        </div>

        {/* Preferências */}
        <div style={{fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,margin:'16px 0 10px'}}>Preferências</div>
        <div className="form-grid">
          <div className="form-group">
            <label>Canal Preferencial</label>
            <SmartSelect value={form.canalPref||''} onChange={val=>setForm(f=>({...f,canalPref:val}))} options={[{value:'',label:'— Selecione —'},...['WhatsApp','Instagram','E-mail','Telefone','Presencial'].map(c=>({value:c,label:c}))]}/>
          </div>
        </div>

        {/* Observações */}
        <div style={{fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,margin:'16px 0 10px'}}>Observações</div>
        <textarea value={form.notes} onChange={e=>setForm(f=>({...f,notes:e.target.value}))}
          placeholder="Preferências, observações importantes sobre o cliente..."
          style={{width:'100%',minHeight:60,background:'#FFFFFF',border:'1px solid #E4E7EC',borderRadius:8,color:'#374151',padding:'8px 12px',fontSize:13,resize:'vertical',boxSizing:'border-box'}}/>

        <div style={{display:'flex',gap:10,marginTop:20,justifyContent:'flex-end'}}>
          <button className="btn-outline" onClick={onClose} disabled={isSavingClient}>Cancelar</button>
          <button className="btn-gold" onClick={onSave} disabled={isSavingClient} style={{opacity:isSavingClient?0.6:1,cursor:isSavingClient?'not-allowed':'pointer'}}>{isSavingClient?'⏳ Salvando…':'Salvar Cliente'}</button>
        </div>
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.clientes = window.ZNX.widgets.clientes || {};
  window.ZNX.widgets.clientes.ClientForm = ClientForm;
})();