// Ejecutora — CRM de Clientes Completo

const CRMScreen = () => {
  const [view, setView] = React.useState('tabla'); // tabla | kanban | detalle
  const [clienteActivo, setClienteActivo] = React.useState(null);
  const [showModal, setShowModal] = React.useState(false);
  const [busqueda, setBusqueda] = React.useState('');
  const [filtroEtapa, setFiltroEtapa] = React.useState('todas');

  const [clientes, setClientes] = React.useState([
    { id: 1, nombre: 'Carla Méndez', email: 'carla@negocio.com', whatsapp: '+58 412 555 0101', sector: 'Coach negocios', etapa: 'cierre', valor: 2400, notas: 'Interesada en programa Completo. Llamada el martes.', ultimoContacto: '30 abr', compraAnterior: 'Mentoria individual $500', seguimientos: 2, activa: true },
    { id: 2, nombre: 'Laura González', email: 'laura@marca.co', whatsapp: '+58 414 555 0202', sector: 'Diseñadora', etapa: 'seguimiento', valor: 1200, notas: 'Enviada propuesta. Pendiente respuesta.', ultimoContacto: '29 abr', compraAnterior: '', seguimientos: 1, activa: true },
    { id: 3, nombre: 'Paola Reyes', email: 'paola@studio.io', whatsapp: '+58 416 555 0303', sector: 'Infoproductora', etapa: 'propuesta', valor: 3800, notas: 'Quiere el pack VIP. Espera cobro.', ultimoContacto: '28 abr', compraAnterior: 'Ebook $37', seguimientos: 3, activa: true },
    { id: 4, nombre: 'María Fernández', email: 'maria@emprende.net', whatsapp: '+58 424 555 0404', sector: 'Pastelería', etapa: 'contacto', valor: 900, notas: 'Nueva lead de Instagram.', ultimoContacto: '27 abr', compraAnterior: '', seguimientos: 0, activa: true },
    { id: 5, nombre: 'Sofía Castillo', email: 'sofia@brand.com', whatsapp: '+58 412 555 0505', sector: 'Coach bienestar', etapa: 'ganado', valor: 5000, notas: 'Clienta VIP, programa 6 meses.', ultimoContacto: '25 abr', compraAnterior: 'Curso base $197', seguimientos: 0, activa: false },
    { id: 6, nombre: 'Andrea Torres', email: 'andrea@ventas.net', whatsapp: '+58 416 555 0606', sector: 'Infoproductora', etapa: 'inactiva', valor: 0, notas: 'No respondió en 2 meses. Reactivar.', ultimoContacto: '15 feb', compraAnterior: 'Ebook $37', seguimientos: 0, activa: false },
    { id: 7, nombre: 'Valentina Ríos', email: 'vale@marca.co', whatsapp: '+58 424 555 0707', sector: 'Diseñadora', etapa: 'cierre', valor: 1800, notas: 'Esperando contrato. Muy interesada.', ultimoContacto: '1 may', compraAnterior: '', seguimientos: 1, activa: true },
    { id: 8, nombre: 'Carolina Blanco', email: 'caro@studio.io', whatsapp: '+58 412 555 0808', sector: 'Entrenadora', etapa: 'seguimiento', valor: 1500, notas: 'Preguntó por el programa mensual.', ultimoContacto: '30 abr', compraAnterior: 'Reto gratis', seguimientos: 2, activa: true },
  ]);

  const [nuevoCliente, setNuevoCliente] = React.useState({ nombre: '', email: '', whatsapp: '', sector: '', etapa: 'contacto', valor: '', notas: '' });

  const etapas = {
    contacto:     { label: 'Contacto',     color: EJ.muted,   bg: EJ.bgApp,        emoji: '👋' },
    seguimiento:  { label: 'Seguimiento',  color: EJ.cyan,    bg: EJ.cyanLight,    emoji: '💬' },
    propuesta:    { label: 'Propuesta',    color: EJ.violet,  bg: EJ.violetLight,  emoji: '📋' },
    cierre:       { label: 'Cierre',       color: EJ.pink,    bg: EJ.pinkLight,    emoji: '🔥' },
    ganado:       { label: 'Ganado ✓',    color: EJ.green,   bg: EJ.greenLight,   emoji: '🎉' },
    inactiva:     { label: 'Inactiva',     color: '#C0C0C8',  bg: '#F4F4F8',       emoji: '💤' },
  };

  const sectores = ['Coach negocios', 'Coach bienestar', 'Diseñadora', 'Infoproductora', 'Pastelería', 'Entrenadora', 'Otro'];

  const clientesFiltrados = clientes.filter(c => {
    const matchBusqueda = c.nombre.toLowerCase().includes(busqueda.toLowerCase()) || c.email.toLowerCase().includes(busqueda.toLowerCase()) || c.sector.toLowerCase().includes(busqueda.toLowerCase());
    const matchEtapa = filtroEtapa === 'todas' || c.etapa === filtroEtapa;
    return matchBusqueda && matchEtapa;
  });

  const totalPipeline = clientes.filter(c => c.etapa !== 'inactiva').reduce((s, c) => s + c.valor, 0);
  const tasaCierre = Math.round((clientes.filter(c => c.etapa === 'ganado').length / clientes.length) * 100);

  const guardarCliente = () => {
    if (!nuevoCliente.nombre) return;
    setClientes(prev => [...prev, { ...nuevoCliente, id: Date.now(), valor: Number(nuevoCliente.valor) || 0, seguimientos: 0, activa: true, ultimoContacto: 'hoy', compraAnterior: '' }]);
    setNuevoCliente({ nombre: '', email: '', whatsapp: '', sector: '', etapa: 'contacto', valor: '', notas: '' });
    setShowModal(false);
  };

  const actualizarEtapa = (id, etapa) => {
    setClientes(prev => prev.map(c => c.id === id ? { ...c, etapa } : c));
  };

  const copyWA = (c) => {
    const texto = c.compraAnterior
      ? `Hola ${c.nombre.split(' ')[0]} 🌸 Hace tiempo que no hablamos y me acordé de ti — la última vez me pediste ${c.compraAnterior}. Esta semana tengo una oferta especial para mis clientas anteriores. ¿Tienes un momento? 💜`
      : `Hola ${c.nombre.split(' ')[0]} ✨ Vi tu consulta y me encantaría ayudarte. ¿Podemos hablar un momento? 💜`;
    navigator.clipboard.writeText(texto).catch(() => {});
    alert('Copy copiado al portapapeles ✓');
  };

  // Vista tabla
  const VistaTabla = () => (
    <Card style={{ padding: 0, overflow: 'hidden' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'Nunito Sans, sans-serif' }}>
        <thead>
          <tr style={{ background: EJ.bgApp }}>
            {['Cliente', 'Sector', 'Etapa', 'Valor', 'Último contacto', 'Seguim.', ''].map(h => (
              <th key={h} style={{ padding: '12px 16px', fontSize: 11, fontWeight: 700, color: EJ.muted, textAlign: 'left', letterSpacing: '0.06em', textTransform: 'uppercase', borderBottom: `1px solid ${EJ.border}` }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {clientesFiltrados.map((c, i) => {
            const etapa = etapas[c.etapa];
            return (
              <tr key={c.id} style={{ borderBottom: i < clientesFiltrados.length - 1 ? `1px solid ${EJ.border}` : 'none', transition: 'background 0.1s' }}
                onMouseEnter={e => e.currentTarget.style.background = EJ.bgApp}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
              >
                <td style={{ padding: '13px 16px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar name={c.nombre} size={32} />
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 700, color: EJ.body }}>{c.nombre}</div>
                      <div style={{ fontSize: 11, color: EJ.muted }}>{c.email}</div>
                    </div>
                  </div>
                </td>
                <td style={{ padding: '13px 16px' }}>
                  <Badge variant="soft">{c.sector}</Badge>
                </td>
                <td style={{ padding: '13px 16px' }}>
                  <span style={{ background: etapa.bg, color: etapa.color, fontSize: 11, fontWeight: 700, padding: '5px 12px', borderRadius: 50, fontFamily: 'Nunito, sans-serif' }}>{etapa.emoji} {etapa.label}</span>
                </td>
                <td style={{ padding: '13px 16px', fontSize: 13, fontWeight: 600, color: c.valor > 0 ? EJ.navy : EJ.muted, fontFamily: 'JetBrains Mono, monospace' }}>
                  {c.valor > 0 ? `$${c.valor.toLocaleString()}` : '—'}
                </td>
                <td style={{ padding: '13px 16px', fontSize: 12, color: EJ.secondary }}>{c.ultimoContacto}</td>
                <td style={{ padding: '13px 16px' }}>
                  {c.seguimientos > 0 && <Badge variant="pink" style={{ fontSize: 10 }}>{c.seguimientos} pend.</Badge>}
                </td>
                <td style={{ padding: '13px 16px' }}>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <Btn variant="ghost" size="xs" style={{ fontSize: 11, color: EJ.cyan }} onClick={() => { setClienteActivo(c); setView('detalle'); }}>Ver →</Btn>
                    <Btn variant="ghost" size="xs" style={{ fontSize: 11, color: EJ.green }} onClick={() => copyWA(c)}>WA</Btn>
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </Card>
  );

  // Vista Kanban
  const VistaKanban = () => (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14, alignItems: 'start' }}>
      {Object.entries(etapas).map(([etapaKey, etapa]) => {
        const grupo = clientesFiltrados.filter(c => c.etapa === etapaKey);
        return (
          <div key={etapaKey}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
              <span style={{ fontSize: 14 }}>{etapa.emoji}</span>
              <span style={{ fontSize: 12, fontWeight: 700, color: etapa.color, fontFamily: 'Nunito, sans-serif' }}>{etapa.label}</span>
              <span style={{ marginLeft: 'auto', background: etapa.bg, color: etapa.color, borderRadius: 50, fontSize: 10, fontWeight: 700, padding: '2px 8px', fontFamily: 'Nunito, sans-serif' }}>{grupo.length}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {grupo.map(c => (
                <div key={c.id} style={{ background: EJ.white, borderRadius: 16, padding: '12px 14px', boxShadow: '0 2px 12px rgba(26,31,110,0.07)', cursor: 'pointer', borderLeft: `3px solid ${etapa.color}` }}
                  onClick={() => { setClienteActivo(c); setView('detalle'); }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                    <Avatar name={c.nombre} size={26} />
                    <div style={{ fontSize: 12, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', lineHeight: 1.2 }}>{c.nombre}</div>
                  </div>
                  <div style={{ fontSize: 10, color: EJ.muted, fontFamily: 'Nunito Sans, sans-serif', marginBottom: 4 }}>{c.sector}</div>
                  {c.valor > 0 && <div style={{ fontSize: 13, fontWeight: 600, color: EJ.cyan, fontFamily: 'JetBrains Mono, monospace' }}>${c.valor.toLocaleString()}</div>}
                  {c.seguimientos > 0 && <Badge variant="pink" style={{ marginTop: 6, fontSize: 9 }}>{c.seguimientos} seguim.</Badge>}
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );

  // Vista detalle
  const VistaDetalle = ({ c }) => {
    const [etapaLocal, setEtapaLocal] = React.useState(c.etapa);
    const [notasLocal, setNotasLocal] = React.useState(c.notas);
    return (
      <div>
        <button onClick={() => setView('tabla')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, color: EJ.cyan, fontFamily: 'Nunito, sans-serif', fontWeight: 700, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 4 }}>← Volver al CRM</button>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 20 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
                <Avatar name={c.nombre} size={52} />
                <div>
                  <div style={{ fontSize: 18, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{c.nombre}</div>
                  <div style={{ fontSize: 12, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>{c.sector}</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[{ icon: '📧', val: c.email }, { icon: '📱', val: c.whatsapp }, { icon: '📅', val: `Último contacto: ${c.ultimoContacto}` }].map((r, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <span style={{ fontSize: 14 }}>{r.icon}</span>
                    <span style={{ fontSize: 13, color: EJ.body, fontFamily: 'Nunito Sans, sans-serif' }}>{r.val}</span>
                  </div>
                ))}
                {c.compraAnterior && (
                  <div style={{ background: EJ.cyanLight, borderRadius: 10, padding: '8px 12px', marginTop: 4 }}>
                    <div style={{ fontSize: 10, fontWeight: 700, color: EJ.cyanDark, fontFamily: 'Nunito, sans-serif', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Compra anterior</div>
                    <div style={{ fontSize: 12, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif', marginTop: 2 }}>{c.compraAnterior}</div>
                  </div>
                )}
              </div>
            </Card>
            <Card>
              <div style={{ fontSize: 13, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 10 }}>Mover de etapa</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {Object.entries(etapas).map(([key, et]) => (
                  <button key={key} onClick={() => { setEtapaLocal(key); actualizarEtapa(c.id, key); }} style={{
                    display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 12,
                    background: etapaLocal === key ? et.bg : 'transparent',
                    border: `1.5px solid ${etapaLocal === key ? et.color : EJ.border}`,
                    cursor: 'pointer', fontFamily: 'Nunito Sans, sans-serif', fontSize: 12, fontWeight: 600,
                    color: etapaLocal === key ? et.color : EJ.secondary, transition: 'all 0.15s',
                  }}>
                    <span>{et.emoji}</span> {et.label}
                  </button>
                ))}
              </div>
            </Card>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card>
              <div style={{ fontSize: 13, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 10 }}>Notas y seguimiento</div>
              <Textarea value={notasLocal} onChange={e => setNotasLocal(e.target.value)} rows={5} placeholder="Observaciones, promesas, próximos pasos..." />
              <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
                <Btn variant="primary" size="sm" onClick={() => setClientes(prev => prev.map(x => x.id === c.id ? { ...x, notas: notasLocal } : x))}>Guardar nota</Btn>
              </div>
            </Card>
            <Card>
              <div style={{ fontSize: 13, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 12 }}>Copy de WhatsApp listo</div>
              <div style={{ background: EJ.bgApp, borderRadius: 14, padding: '14px 16px', fontFamily: 'Nunito Sans, sans-serif', fontSize: 13, color: EJ.body, lineHeight: 1.6, marginBottom: 12 }}>
                {c.compraAnterior
                  ? `Hola ${c.nombre.split(' ')[0]} 🌸 Hace tiempo que no hablamos y me acordé de ti — la última vez me pediste ${c.compraAnterior}. Esta semana tengo una oferta especial para mis clientas anteriores. ¿Tienes un momento? 💜`
                  : `Hola ${c.nombre.split(' ')[0]} ✨ Vi tu consulta y me encantaría ayudarte. ¿Podemos hablar un momento? 💜`}
              </div>
              <Btn variant="outline" size="sm" onClick={() => copyWA(c)}>📋 Copiar mensaje</Btn>
            </Card>
            <Card soft>
              <div style={{ fontSize: 13, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 8 }}>💡 Dato clave</div>
              <div style={{ fontSize: 13, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', lineHeight: 1.6 }}>
                El <strong>70% de las ventas</strong> se cierran en el seguimiento. Contacta a quien preguntó y no respondió <em>ese mismo día</em>.
              </div>
              {c.etapa === 'inactiva' && (
                <div style={{ marginTop: 10, background: EJ.pinkLight, borderRadius: 10, padding: '8px 12px' }}>
                  <div style={{ fontSize: 11, color: EJ.pink, fontWeight: 700, fontFamily: 'Nunito, sans-serif' }}>🔁 Reactivar cuesta 5x menos que adquirir</div>
                </div>
              )}
            </Card>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div style={{ padding: '28px 32px', background: EJ.bgApp, minHeight: '100%' }}>
      {view === 'detalle' && clienteActivo ? (
        <VistaDetalle c={clienteActivo} />
      ) : (
        <>
          {/* Header */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
            <div>
              <h2 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 26, color: EJ.navy }}>CRM · Mis Clientes</h2>
              <p style={{ margin: '4px 0 0', fontSize: 13, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>Pipeline de ventas — La Rutina que Vende™</p>
            </div>
            <Btn variant="primary" size="sm" onClick={() => setShowModal(true)}>+ Nueva cliente</Btn>
          </div>

          {/* Stats rápidos */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 20 }}>
            <StatCard label="Pipeline total" value={`$${totalPipeline.toLocaleString()}`} color={EJ.cyan} icon="💰" />
            <StatCard label="Total clientes" value={clientes.length} color={EJ.violet} icon="👥" />
            <StatCard label="En cierre activo" value={clientes.filter(c => ['cierre','propuesta'].includes(c.etapa)).length} color={EJ.pink} icon="🔥" />
            <StatCard label="Tasa de cierre" value={`${tasaCierre}%`} color={EJ.green} icon="🎯" positive change="Meta: 30% ✓" />
          </div>

          {/* Filtros y vista */}
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 18, flexWrap: 'wrap' }}>
            <Input placeholder="🔍 Buscar por nombre, email o sector..." value={busqueda} onChange={e => setBusqueda(e.target.value)} style={{ maxWidth: 280, marginBottom: 0 }} />
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {[{ id: 'todas', label: 'Todas' }, ...Object.entries(etapas).map(([k, v]) => ({ id: k, label: v.label }))].map(f => (
                <button key={f.id} onClick={() => setFiltroEtapa(f.id)} style={{
                  padding: '6px 14px', borderRadius: 50, border: `1.5px solid ${filtroEtapa === f.id ? EJ.cyan : EJ.border}`,
                  background: filtroEtapa === f.id ? EJ.cyanLight : 'transparent',
                  color: filtroEtapa === f.id ? EJ.cyanDark : EJ.secondary,
                  fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'Nunito, sans-serif', transition: 'all 0.15s',
                }}>{f.label}</button>
              ))}
            </div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
              {[{ id: 'tabla', icon: '≡' }, { id: 'kanban', icon: '⊞' }].map(v => (
                <button key={v.id} onClick={() => setView(v.id)} style={{
                  width: 34, height: 34, borderRadius: 10, border: `1.5px solid ${view === v.id ? EJ.cyan : EJ.border}`,
                  background: view === v.id ? EJ.cyanLight : EJ.white,
                  color: view === v.id ? EJ.cyanDark : EJ.muted,
                  fontSize: 16, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{v.icon}</button>
              ))}
            </div>
          </div>

          {view === 'tabla' ? <VistaTabla /> : <VistaKanban />}
        </>
      )}

      {/* Modal nueva cliente */}
      <Modal open={showModal} onClose={() => setShowModal(false)} title="Agregar nueva cliente" width={540}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Input label="Nombre completo" value={nuevoCliente.nombre} onChange={e => setNuevoCliente(p => ({...p, nombre: e.target.value}))} placeholder="Carla Méndez" />
            <Input label="Email" type="email" value={nuevoCliente.email} onChange={e => setNuevoCliente(p => ({...p, email: e.target.value}))} placeholder="carla@negocio.com" />
            <Input label="WhatsApp" value={nuevoCliente.whatsapp} onChange={e => setNuevoCliente(p => ({...p, whatsapp: e.target.value}))} placeholder="+58 412 555 0000" />
            <Select label="Sector" value={nuevoCliente.sector} onChange={e => setNuevoCliente(p => ({...p, sector: e.target.value}))} options={[{value:'',label:'Seleccionar...'}, ...sectores.map(s => ({value:s, label:s}))]} />
            <Select label="Etapa inicial" value={nuevoCliente.etapa} onChange={e => setNuevoCliente(p => ({...p, etapa: e.target.value}))} options={Object.entries(etapas).map(([k,v]) => ({value:k, label:`${v.emoji} ${v.label}`}))} />
            <Input label="Valor potencial $USD" type="number" value={nuevoCliente.valor} onChange={e => setNuevoCliente(p => ({...p, valor: e.target.value}))} placeholder="1200" />
          </div>
          <Textarea label="Notas iniciales" value={nuevoCliente.notas} onChange={e => setNuevoCliente(p => ({...p, notas: e.target.value}))} placeholder="Cómo llegó, interés, próximo paso..." rows={3} />
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 4 }}>
            <Btn variant="ghost" size="sm" onClick={() => setShowModal(false)}>Cancelar</Btn>
            <Btn variant="primary" size="sm" onClick={guardarCliente}>Guardar cliente</Btn>
          </div>
        </div>
      </Modal>
    </div>
  );
};

Object.assign(window, { CRMScreen });