// ─────────────────────────────────────────────────────
// LEAD form modal — create/edit. Mirrors legacy leads-modal.js.
// Field names match backend contract from src/routes/records.js +
// src/utils/records.js splitLeadBody().
// ─────────────────────────────────────────────────────

const PRODUCTOS_CANON = [
  { v: 'cortina_o_corredera_de_cristal', label: 'Cortina/corredera de cristal' },
  { v: 'barandilla_de_cristal',          label: 'Barandilla de cristal' },
  { v: 'techo_fijo_o_móvil',             label: 'Techo fijo/móvil' },
  { v: 'pérgola_bioclimática',           label: 'Pérgola bioclimática' },
  { v: 'otro',                           label: 'Otro' },
];

const MESES = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];

const ESTADO_OPTS = [
  'pdte_datos','pdte_presupuesto','pdte_visita','pdte_llamar',
  'enviado','aceptado','sin_interes','info_curiosidad','telefono_erroneo',
];

// Convert DD/MM/YYYY ↔ YYYY-MM-DD
const dmyToInput = (s) => {
  if (!s) return '';
  const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(s.trim());
  return m ? `${m[3]}-${m[2]}-${m[1]}` : '';
};
const inputToDmy = (s) => {
  if (!s) return '';
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim());
  return m ? `${m[3]}/${m[2]}/${m[1]}` : s;
};

const isAceptado = (v) => (v || '').trim().toLowerCase() === 'aceptado';

const ACCION_TIPOS = ['NOTA','LLAMADA','EMAIL','WHATSAPP','REUNION','VISITA','TAREA'];
const ACCION_TIPO_ICON = {
  NOTA:'📝', LLAMADA:'📞', EMAIL:'✉️', WHATSAPP:'💬',
  REUNION:'🤝', VISITA:'📍', TAREA:'✅',
};

const fmtAccionDate = (iso) => {
  if (!iso) return '';
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return '';
  const dd = String(d.getDate()).padStart(2,'0');
  const mm = String(d.getMonth()+1).padStart(2,'0');
  const yyyy = d.getFullYear();
  const hh = String(d.getHours()).padStart(2,'0');
  const mi = String(d.getMinutes()).padStart(2,'0');
  return `${dd}/${mm}/${yyyy} ${hh}:${mi}`;
};
const fmtAccionDateOnly = (iso) => {
  if (!iso) return '';
  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso));
  if (m) return `${m[3]}/${m[2]}/${m[1]}`;
  return '';
};

const LeadActionsPanel = ({ leadId, onToast, onChange }) => (
  <ActionsPanel
    scopeUrl={`/api/records/${leadId}/acciones`}
    itemUrl={(id) => `/api/acciones/${id}`}
    onToast={onToast}
    onChange={onChange}
  />
);

// Read-only list of acciones for each presupuesto associated with this lead.
const PresupuestosAccionesForLead = ({ leadId, onToast }) => {
  const [presus, setPresus] = React.useState(null);

  React.useEffect(() => {
    let alive = true;
    API.get('/api/presupuestos', { lead_id: leadId })
      .then(rows => { if (alive) setPresus(Array.isArray(rows) ? rows : []); })
      .catch(e => { if (alive) { setPresus([]); onToast && onToast(e.message || 'Error al cargar presupuestos', true); } });
    return () => { alive = false; };
  }, [leadId]);

  if (presus === null) return <div style={{color:'var(--ink-3)', fontSize:12.5}}>Cargando…</div>;
  if (presus.length === 0) return <div style={{color:'var(--ink-3)', fontSize:12.5, fontStyle:'italic'}}>Este lead no tiene presupuestos asociados.</div>;

  return (
    <div style={{display:'flex', flexDirection:'column', gap:12}}>
      {presus.map(p => (
        <div key={p.id} style={{border:'1px solid var(--line)', borderRadius:6, padding:10, background:'var(--surface)'}}>
          <div style={{fontSize:12, fontWeight:600, marginBottom:6, color:'var(--ink-1)'}}>
            Presupuesto <span className="mono">{p.numero_presupuesto || p.id}</span>
            {p.estado && <span style={{marginLeft:8, color:'var(--ink-3)', fontWeight:400}}>· {p.estado}</span>}
          </div>
          <ActionsPanel
            scopeUrl={`/api/records/presupuesto/${p.id}/acciones`}
            itemUrl={(id) => `/api/acciones/${id}`}
            readOnly
            onToast={onToast}
            title="Acciones"
          />
        </div>
      ))}
    </div>
  );
};

const LeadForm = ({ leadId, onClose, onSaved, onToast, vendedores, origenes }) => {
  const isEdit = leadId != null;
  const [loading, setLoading] = React.useState(isEdit);
  const [saving, setSaving] = React.useState(false);
  const [data, setData] = React.useState({
    numero_presupuesto: '',
    nombre: '', telefono: '', email: '', direccion: '',
    localidad: '', provincia: '',
    vendedor: '', origen: '', estado: 'pdte_datos', mes: '',
    fecha_solicitud: '', fecha_1_contacto: '', fecha_envio_pto: '',
    fecha_aceptacion_presupuesto: '', fecha_instalacion: '',
    fecha_proxima_action: '', accion: '',
    descripcion_del_producto: '',
    interes_pct: '', importe: '',
    observaciones_comentario_estado: '',
    via_envio_default: 'mail',
    productos: [],
  });

  React.useEffect(() => {
    let alive = true;
    if (isEdit) {
      API.get(`/api/records/${leadId}`).then(d => {
        if (!alive) return;
        let prods = [];
        try { prods = JSON.parse(d.productos_interesados || '[]'); } catch {}
        setData({
          numero_presupuesto: d.numero_presupuesto || '',
          nombre: d.nombre || '', telefono: d.telefono || '', email: d.email || '',
          direccion: d.direccion || '', localidad: d.localidad || '', provincia: d.provincia || '',
          vendedor: d.vendedor || '', origen: d.origen || '',
          estado: (d.estado || 'pdte_datos').toLowerCase(),
          mes: d.mes || '',
          fecha_solicitud: dmyToInput(d.fecha_solicitud),
          fecha_1_contacto: dmyToInput(d.fecha_1_contacto),
          fecha_envio_pto: dmyToInput(d.fecha_envio_pto),
          fecha_aceptacion_presupuesto: dmyToInput(d.fecha_aceptacion_presupuesto),
          fecha_instalacion: dmyToInput(d.fecha_instalacion),
          fecha_proxima_action: dmyToInput(d.fecha_proxima_action),
          accion: d.accion || '',
          descripcion_del_producto: d.descripcion_del_producto || '',
          interes_pct: d.interes_pct || '',
          importe: d.importe || '',
          observaciones_comentario_estado: d.observaciones_comentario_estado || '',
          via_envio_default: (d.via_envio_default === 'wa' ? 'wa' : 'mail'),
          productos: prods,
        });
        setLoading(false);
      }).catch(e => { onToast(e.message, true); onClose(); });
    } else {
      // Pre-fill numero_presupuesto from /api/next-num
      API.get('/api/next-num').then(r => {
        if (!alive) return;
        setData(d => ({ ...d, numero_presupuesto: r.numero_presupuesto || '' }));
      }).catch(()=>{});
    }
    return () => { alive = false; };
  }, [leadId]);

  const set = (k, v) => setData(d => {
    const n = { ...d, [k]: v };
    // Auto-derive mes from fecha_solicitud (input YYYY-MM-DD)
    if (k === 'fecha_solicitud' && v) {
      const m = /^\d{4}-(\d{2})-\d{2}$/.exec(v);
      if (m) n.mes = MESES[parseInt(m[1], 10) - 1] || n.mes;
    }
    return n;
  });

  const toggleProd = (val) => setData(d => {
    const has = d.productos.includes(val);
    return { ...d, productos: has ? d.productos.filter(x => x !== val) : [...d.productos, val] };
  });

  const submit = async (ev) => {
    ev.preventDefault();
    setSaving(true);
    const payload = {
      ...data,
      fecha_solicitud: inputToDmy(data.fecha_solicitud),
      fecha_1_contacto: inputToDmy(data.fecha_1_contacto),
      fecha_envio_pto: inputToDmy(data.fecha_envio_pto),
      fecha_aceptacion_presupuesto: isAceptado(data.estado) ? inputToDmy(data.fecha_aceptacion_presupuesto) : '',
      fecha_instalacion: inputToDmy(data.fecha_instalacion),
      fecha_proxima_action: inputToDmy(data.fecha_proxima_action),
      productos_interesados: JSON.stringify(data.productos.length ? data.productos : ['otro']),
    };
    delete payload.productos;
    if (isEdit) {
      // Acciones managed by LeadActionsPanel; don't re-insert on PUT.
      payload.accion = '';
      payload.fecha_proxima_action = '';
    }
    try {
      if (isEdit) {
        await API.put(`/api/records/${leadId}`, payload);
        onToast('Lead actualizado ✓');
      } else {
        const r = await API.post('/api/records', payload);
        onToast(`Lead creado · Nº ${r.numero_presupuesto} ✓`);
      }
      onSaved && onSaved();
      onClose();
    } catch (e) {
      onToast(e.message || 'Error al guardar', true);
    } finally {
      setSaving(false);
    }
  };

  const del = async () => {
    if (!isEdit) return;
    if (!confirm('¿Eliminar este lead? No se puede deshacer.')) return;
    try {
      await API.del(`/api/records/${leadId}`);
      onToast('Lead eliminado');
      onSaved && onSaved();
      onClose();
    } catch (e) { onToast(e.message || 'Error al eliminar', true); }
  };

  const showAcept = isAceptado(data.estado);
  const vendList = vendedores && vendedores.length ? vendedores : window.DATA.VENDEDORES.map(v => v.code);
  const origList = origenes && origenes.length ? origenes : window.DATA.ORIGENES;

  return (
    <div className="modal-bg open" onClick={(e)=>{ if (e.target.classList.contains('modal-bg')) onClose(); }}
      style={{position:'fixed',inset:0,background:'rgba(0,0,0,.35)',zIndex:200,display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'40px 20px',overflow:'auto'}}>
      <div className="modal" style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:8,width:'min(960px,100%)',boxShadow:'0 20px 60px rgba(0,0,0,.18)'}} onClick={e=>e.stopPropagation()}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'14px 18px',borderBottom:'1px solid var(--line)'}}>
          <h3 style={{margin:0,fontSize:15}}>{isEdit ? `Editar lead · ${data.numero_presupuesto}` : 'Nuevo lead'}</h3>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        {loading ? (
          <div style={{padding:40,textAlign:'center',color:'var(--ink-3)'}}>Cargando…</div>
        ) : (
          <form onSubmit={submit} autoComplete="off">
            <div style={{padding:18,display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
              <div>
                <div className="section-title">Identificación</div>
                <div className="fields-grid">
                  <Fld label="Nº Presupuesto"><input value={data.numero_presupuesto} onChange={e=>set('numero_presupuesto', e.target.value)} disabled={isEdit}/></Fld>
                  <Fld label="Vendedor">
                    <select value={data.vendedor} onChange={e=>set('vendedor', e.target.value)}>
                      <option value="">—</option>
                      {vendList.map(v => <option key={v} value={v}>{v}</option>)}
                    </select>
                  </Fld>
                  <Fld label="Origen">
                    <select value={data.origen} onChange={e=>set('origen', e.target.value)}>
                      <option value="">—</option>
                      {origList.map(v => <option key={v} value={v}>{v}</option>)}
                    </select>
                  </Fld>
                  <Fld label="Estado">
                    <select value={data.estado} onChange={e=>set('estado', e.target.value)}>
                      {ESTADO_OPTS.map(v => <option key={v} value={v}>{v}</option>)}
                    </select>
                  </Fld>
                  <Fld label="Fecha solicitud"><input type="date" value={data.fecha_solicitud} onChange={e=>set('fecha_solicitud', e.target.value)}/></Fld>
                  <Fld label="Mes">
                    <select value={data.mes} onChange={e=>set('mes', e.target.value)}>
                      <option value="">—</option>
                      {MESES.map(m => <option key={m} value={m}>{m}</option>)}
                    </select>
                  </Fld>
                  {showAcept && (
                    <Fld label="Fecha aceptación"><input type="date" value={data.fecha_aceptacion_presupuesto} onChange={e=>set('fecha_aceptacion_presupuesto', e.target.value)}/></Fld>
                  )}
                  <Fld label="Importe (€)"><input value={data.importe} onChange={e=>set('importe', e.target.value)} placeholder="ej. 8500"/></Fld>
                  <Fld label="Interés (%)"><input value={data.interes_pct} onChange={e=>set('interes_pct', e.target.value)} placeholder="0–100"/></Fld>
                  <Fld label="F. instalación"><input type="date" value={data.fecha_instalacion} onChange={e=>set('fecha_instalacion', e.target.value)}/></Fld>
                </div>

                <div className="section-title">Contacto cliente</div>
                <div className="fields-grid">
                  <Fld label="Nombre / Empresa" full><input value={data.nombre} onChange={e=>set('nombre', e.target.value)} required/></Fld>
                  <Fld label="Teléfono"><input value={data.telefono} onChange={e=>set('telefono', e.target.value)}/></Fld>
                  <Fld label="Email"><input type="email" value={data.email} onChange={e=>set('email', e.target.value)}/></Fld>
                  <Fld label="Localidad"><input value={data.localidad} onChange={e=>set('localidad', e.target.value)}/></Fld>
                  <Fld label="Provincia"><input value={data.provincia} onChange={e=>set('provincia', e.target.value)}/></Fld>
                  <Fld label="Dirección" full><input value={data.direccion} onChange={e=>set('direccion', e.target.value)}/></Fld>
                  <Fld label="Canal envío preferido">
                    <select value={data.via_envio_default} onChange={e=>set('via_envio_default', e.target.value)}>
                      <option value="mail">Email</option>
                      <option value="wa">WhatsApp</option>
                    </select>
                  </Fld>
                </div>
              </div>

              <div>
                <div className="section-title">Productos interesados</div>
                <div style={{display:'flex',flexDirection:'column',gap:6}}>
                  {PRODUCTOS_CANON.map(p => (
                    <label key={p.v} style={{display:'flex',alignItems:'center',gap:8,padding:8,border:'1px solid var(--line)',borderRadius:6,background:'var(--surface)',cursor:'pointer'}}>
                      <input type="checkbox" checked={data.productos.includes(p.v)} onChange={()=>toggleProd(p.v)}/>
                      <span>{p.label}</span>
                    </label>
                  ))}
                </div>

                <div className="section-title">Descripción producto</div>
                <textarea rows="3" value={data.descripcion_del_producto} onChange={e=>set('descripcion_del_producto', e.target.value)} style={{width:'100%',padding:8,border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5,fontFamily:'inherit'}}/>

                <div className="section-title">Gestión comercial</div>
                <div className="fields-grid">
                  <Fld label="F. 1º contacto"><input type="date" value={data.fecha_1_contacto} onChange={e=>set('fecha_1_contacto', e.target.value)}/></Fld>
                  <Fld label="F. envío presup."><input type="date" value={data.fecha_envio_pto} onChange={e=>set('fecha_envio_pto', e.target.value)}/></Fld>
                  {!isEdit && (
                    <Fld label="F. próx. acción"><input type="date" value={data.fecha_proxima_action} onChange={e=>set('fecha_proxima_action', e.target.value)}/></Fld>
                  )}
                  {!isEdit && (
                    <Fld label="Acción / Nota inicial" full><textarea rows="2" value={data.accion} onChange={e=>set('accion', e.target.value)} style={{width:'100%',padding:8,border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5,fontFamily:'inherit'}}/></Fld>
                  )}
                </div>

                {isEdit && (
                  <>
                    <div className="section-title">Acciones (CRM)</div>
                    <LeadActionsPanel leadId={leadId} onToast={onToast} onChange={onSaved}/>
                    <div className="section-title">Acciones de presupuestos asociados</div>
                    <PresupuestosAccionesForLead leadId={leadId} onToast={onToast}/>
                  </>
                )}

                <div className="section-title">Observaciones</div>
                <textarea rows="3" value={data.observaciones_comentario_estado} onChange={e=>set('observaciones_comentario_estado', e.target.value)} style={{width:'100%',padding:8,border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5,fontFamily:'inherit'}}/>
              </div>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',padding:'12px 18px',borderTop:'1px solid var(--line)',gap:8}}>
              <div>
                {isEdit && <button type="button" className="btn ghost" onClick={del} style={{color:'var(--err)'}}>Eliminar</button>}
              </div>
              <div style={{display:'flex',gap:8}}>
                <button type="button" className="btn ghost" onClick={onClose}>Cancelar</button>
                <button type="submit" className="btn primary" disabled={saving}>{saving ? 'Guardando…' : (isEdit ? 'Guardar' : 'Crear')}</button>
              </div>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};

const Fld = ({ label, children, full }) => (
  <div className={`field${full ? ' full' : ''}`}>
    <label>{label}</label>
    {React.cloneElement(children, {
      style: { width: '100%', padding: '6px 8px', border: '1px solid var(--line)', borderRadius: 4, background: 'var(--surface)', fontSize: 12.5, ...(children.props.style || {}) },
    })}
  </div>
);

window.LeadForm = LeadForm;
window.dmyToInput = dmyToInput;
window.inputToDmy = inputToDmy;