// Lavadero Curupí — Admin panel v2 (API connected)

const {
  useState: useStateA,
  useEffect: useEffectA,
  useCallback: useCallbackA,
  useMemo: useMemoA,
  useRef: useRefA,
} = React;

const th = { padding: '12px 18px', fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: 'var(--text-muted)', textAlign: 'left', fontWeight: 600 };
const td = { padding: '14px 18px' };

const ESTADO_META = {
  pendiente:  { label: 'Pendiente',  color: 'var(--text-faint)',  bg: 'var(--surface-2)',              dot: '#888' },
  en_proceso: { label: 'En proceso', color: 'var(--accent)',      bg: 'var(--accent-soft)',             dot: 'var(--accent)' },
  listo:      { label: 'Listo',      color: '#4ade80',            bg: 'rgba(74,222,128,.12)',           dot: '#4ade80' },
  entregado:  { label: 'Entregado',  color: 'var(--text-muted)',  bg: 'var(--surface-2)',               dot: '#555' },
  cancelado:  { label: 'Cancelado',  color: '#e05252',            bg: 'rgba(224,82,82,.12)',            dot: '#e05252' },
};

const HOY_ISO = new Date().toISOString().slice(0, 10);
const MES_ACTUAL = new Date().toISOString().slice(0, 7);

function fmtPesos(n) { return '$' + Number(n || 0).toLocaleString('es-UY'); }

// ── Shared helpers ──────────────────────────────────────────────

function KPI({ label, value, sub, accent }) {
  return (
    <div className="card" style={{
      padding: 20,
      background: accent
        ? 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 15%, var(--surface)), var(--surface))'
        : 'var(--surface)',
      borderColor: accent ? 'color-mix(in oklab, var(--accent) 30%, var(--border))' : 'var(--border)',
    }}>
      <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.1em', marginBottom: 8 }}>{label.toUpperCase()}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, color: accent ? 'var(--accent)' : 'var(--text)' }}>{value}</div>
      {sub && <div className="mono" style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

function EstadoBadge({ estado }) {
  const m = ESTADO_META[estado] || ESTADO_META.pendiente;
  return (
    <span style={{ background: m.bg, color: m.color, padding: '4px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: m.dot }} />{m.label}
    </span>
  );
}

function Spinner() {
  return <div className="mono" style={{ color: 'var(--text-faint)', padding: 32, textAlign: 'center', fontSize: 12 }}>cargando…</div>;
}

function Vacío({ mensaje = 'Sin datos' }) {
  return <div className="mono" style={{ color: 'var(--text-faint)', padding: 40, textAlign: 'center', fontSize: 12 }}>— {mensaje} —</div>;
}

// ── Configuración de pagos ──────────────────────────────────────

function ConfigPagosView() {
  const [metodos, setMetodos] = useStateA([]);
  const [nuevoMetodo, setNuevoMetodo] = useStateA('');
  const [dias, setDias] = useStateA([]);
  const [nuevoDia, setNuevoDia] = useStateA('');
  const [loading, setLoading] = useStateA(true);

  useEffectA(() => { cargar(); }, []);

  async function cargar() {
    setLoading(true);
    const [{ data: m }, { data: d }] = await Promise.all([
      window._sb.from('metodos_pago').select('*').order('orden'),
      window._sb.from('config_recordatorios_pago').select('*').order('dias_offset'),
    ]);
    setMetodos(m || []);
    setDias(d || []);
    setLoading(false);
  }

  async function toggleMetodo(id, activo) {
    await window._sb.from('metodos_pago').update({ activo: !activo }).eq('id', id);
    setMetodos(prev => prev.map(m => m.id === id ? { ...m, activo: !activo } : m));
  }

  async function eliminarMetodo(id) {
    if (!confirm('¿Eliminar método de pago?')) return;
    await window._sb.from('metodos_pago').delete().eq('id', id);
    setMetodos(prev => prev.filter(m => m.id !== id));
  }

  async function agregarMetodo() {
    const nombre = nuevoMetodo.trim();
    if (!nombre) return;
    const { data, error } = await window._sb
      .from('metodos_pago')
      .insert({ nombre, orden: metodos.length + 1 })
      .select().single();
    if (error) { alert('Error: ' + error.message); return; }
    setMetodos(prev => [...prev, data]);
    setNuevoMetodo('');
  }

  async function eliminarDia(id) {
    await window._sb.from('config_recordatorios_pago').delete().eq('id', id);
    setDias(prev => prev.filter(d => d.id !== id));
  }

  async function agregarDia() {
    const offset = parseInt(nuevoDia);
    if (!offset || offset < 1) return;
    const { data, error } = await window._sb
      .from('config_recordatorios_pago')
      .insert({ dias_offset: offset })
      .select().single();
    if (error) { alert(error.code === '23505' ? 'Ese día ya está configurado.' : error.message); return; }
    setDias(prev => [...prev, data].sort((a, b) => a.dias_offset - b.dias_offset));
    setNuevoDia('');
  }

  if (loading) return <Spinner />;

  const trStyle = { borderTop: '1px solid var(--border)' };
  const tdS = { padding: '10px 16px' };
  const thS = { ...tdS, fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' };

  return (
    <div className="col gap-8">
      <div>
        <span className="eyebrow">CONFIGURACIÓN</span>
        <h1 style={{ fontSize: 34, marginTop: 8 }}>Pagos</h1>
      </div>

      <div className="col gap-4">
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 20, margin: 0 }}>Métodos de pago</h2>
        <div className="card" style={{ overflow: 'hidden', padding: 0 }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr><th style={thS}>Nombre</th><th style={thS}>Estado</th><th style={thS}>Acciones</th></tr>
            </thead>
            <tbody>
              {metodos.length === 0 && (
                <tr><td colSpan={3} style={{ ...tdS, color: 'var(--text-faint)', textAlign: 'center' }}>Sin métodos</td></tr>
              )}
              {metodos.map(m => (
                <tr key={m.id} style={trStyle}>
                  <td style={{ ...tdS, fontWeight: 500 }}>{m.nombre}</td>
                  <td style={tdS}>
                    <button
                      onClick={() => toggleMetodo(m.id, m.activo)}
                      style={{
                        padding: '3px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600,
                        background: m.activo ? 'rgba(74,222,128,.12)' : 'var(--surface-2)',
                        color: m.activo ? '#4ade80' : 'var(--text-faint)',
                        border: 'none', cursor: 'pointer',
                      }}
                    >
                      {m.activo ? 'Activo' : 'Inactivo'}
                    </button>
                  </td>
                  <td style={tdS}>
                    <button onClick={() => eliminarMetodo(m.id)} className="btn btn-ghost btn-sm" style={{ color: 'var(--error, #e53e3e)' }}>
                      Eliminar
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="row gap-2">
          <input
            value={nuevoMetodo}
            onChange={e => setNuevoMetodo(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && agregarMetodo()}
            placeholder="Nuevo método (ej: QR)…"
            style={{ flex: 1 }}
          />
          <button onClick={agregarMetodo} className="btn btn-primary">Agregar</button>
        </div>
      </div>

      <div className="col gap-4">
        <div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 20, margin: 0 }}>Recordatorios WhatsApp</h2>
          <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: '4px 0 0' }}>
            Se envía WA al cliente X días después de que el turno pasa a Listo, si no pagó.
          </p>
        </div>
        <div className="card" style={{ overflow: 'hidden', padding: 0 }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr><th style={thS}>Días después de Listo</th><th style={thS}>Acciones</th></tr>
            </thead>
            <tbody>
              {dias.length === 0 && (
                <tr><td colSpan={2} style={{ ...tdS, color: 'var(--text-faint)', textAlign: 'center' }}>Sin recordatorios configurados</td></tr>
              )}
              {dias.map(d => (
                <tr key={d.id} style={trStyle}>
                  <td style={{ ...tdS, fontWeight: 500 }}>{d.dias_offset} {d.dias_offset === 1 ? 'día' : 'días'}</td>
                  <td style={tdS}>
                    <button onClick={() => eliminarDia(d.id)} className="btn btn-ghost btn-sm" style={{ color: 'var(--error, #e53e3e)' }}>
                      Eliminar
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="row gap-2">
          <input
            type="number"
            min="1"
            value={nuevoDia}
            onChange={e => setNuevoDia(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && agregarDia()}
            placeholder="Número de días…"
            style={{ width: 160 }}
          />
          <button onClick={agregarDia} className="btn btn-primary">Agregar día</button>
        </div>
      </div>
    </div>
  );
}

// ── Telegram — Gestión de equipo ────────────────────────────────────────────

function TelegramView() {
  const [usuarios, setUsuarios]     = React.useState([]);
  const [loading, setLoading]       = React.useState(true);
  const [loadError, setLoadError]   = React.useState(null);
  const [genRol, setGenRol]         = React.useState('funcionario');
  const [codigo, setCodigo]         = React.useState('');
  const [genLoading, setGenLoading] = React.useState(false);

  React.useEffect(() => { loadUsuarios(); }, []);

  async function loadUsuarios() {
    setLoading(true);
    setLoadError(null);
    const { data, error } = await window._sb
      .from('telegram_usuarios')
      .select('*')
      .eq('activo', true)
      .order('creado_en', { ascending: false });
    if (error) { setLoadError('Error al cargar usuarios.'); setLoading(false); return; }
    setUsuarios(data || []);
    setLoading(false);
  }

  async function eliminar(telegram_id, nombre) {
    if (!confirm(`¿Eliminar acceso de ${nombre}?`)) return;
    const { error } = await window._sb
      .from('telegram_usuarios')
      .update({ activo: false })
      .eq('telegram_id', telegram_id);
    if (error) { alert('Error al eliminar. Intenta de nuevo.'); return; }
    setUsuarios(prev => prev.filter(u => u.telegram_id !== telegram_id));
  }

  async function generarCodigo() {
    setGenLoading(true);
    setCodigo('');
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
    const mkCode = () => Array.from({ length: 6 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
    const expires_at = new Date(Date.now() + 48 * 3600 * 1000).toISOString();
    let code = mkCode();
    let { error } = await window._sb.from('telegram_invites').insert({ code, rol: genRol, expires_at });
    if (error) {
      code = mkCode();
      ({ error } = await window._sb.from('telegram_invites').insert({ code, rol: genRol, expires_at }));
    }
    if (error) { alert('Error al generar código. Intenta de nuevo.'); setGenLoading(false); return; }
    setCodigo(code);
    setGenLoading(false);
  }

  if (loading) return <div style={{ color: 'var(--text-muted)', padding: 32 }}>Cargando...</div>;
  if (loadError) return <div style={{ color: 'var(--error, #e53e3e)', padding: 32 }}>{loadError}</div>;

  const tdStyle = { padding: '10px 16px', borderBottom: '1px solid var(--border)' };
  const thStyle = { ...tdStyle, fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' };

  return (
    <div className="col gap-6">
      <div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, margin: 0 }}>Equipo Telegram</h2>
        <p style={{ color: 'var(--text-muted)', fontSize: 13, marginTop: 4 }}>
          Usuarios con acceso a @curupistaff_bot
        </p>
      </div>

      <div className="card" style={{ overflow: 'hidden', padding: 0 }}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              {['Nombre', 'Usuario TG', 'Rol', 'Desde', 'Acciones'].map(h => (
                <th key={h} style={thStyle}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {usuarios.length === 0 && (
              <tr>
                <td colSpan={5} style={{ ...tdStyle, textAlign: 'center', color: 'var(--text-faint)', padding: 32 }}>
                  Sin usuarios registrados. Generá un código de invitación abajo.
                </td>
              </tr>
            )}
            {usuarios.map(u => (
              <tr key={u.telegram_id}>
                <td style={{ ...tdStyle, fontWeight: 500 }}>{u.nombre}</td>
                <td style={{ ...tdStyle, color: 'var(--text-muted)' }}>{u.username ? `@${u.username}` : '—'}</td>
                <td style={tdStyle}>
                  <span style={{
                    padding: '2px 8px', borderRadius: 4, fontSize: 11, fontWeight: 600,
                    background: u.rol === 'propietario' ? 'var(--accent-soft)' : 'var(--surface-2)',
                    color:      u.rol === 'propietario' ? 'var(--accent)'      : 'var(--text-muted)',
                  }}>
                    {u.rol}
                  </span>
                </td>
                <td style={{ ...tdStyle, fontSize: 12, color: 'var(--text-muted)' }}>
                  {new Date(u.creado_en).toLocaleDateString('es-UY')}
                </td>
                <td style={tdStyle}>
                  <button
                    onClick={() => eliminar(u.telegram_id, u.nombre)}
                    className="btn btn-ghost btn-sm"
                    style={{ color: 'var(--error, #e53e3e)' }}
                  >
                    Eliminar
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card col gap-4" style={{ padding: 24 }}>
        <h3 style={{ fontSize: 15, fontWeight: 600, margin: 0 }}>Generar código de invitación</h3>
        <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>
          Un solo uso · válido 48 horas.
        </p>
        <div className="row gap-3" style={{ alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <div className="col gap-1">
            <label style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-muted)' }}>Rol</label>
            <select value={genRol} onChange={e => setGenRol(e.target.value)} className="input" style={{ width: 160 }}>
              <option value="funcionario">Funcionario</option>
              <option value="propietario">Propietario</option>
            </select>
          </div>
          <button onClick={generarCodigo} disabled={genLoading} className="btn btn-primary">
            {genLoading ? 'Generando…' : 'Generar código'}
          </button>
        </div>

        {codigo && (
          <div style={{ background: 'var(--surface-2)', borderRadius: 10, padding: '16px 20px' }}>
            <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: '0 0 8px 0' }}>
              Envía esto al funcionario:
            </p>
            <div className="row gap-3" style={{ alignItems: 'center' }}>
              <code style={{
                fontSize: 26, fontFamily: 'var(--font-mono)', letterSpacing: '0.25em',
                fontWeight: 700, color: 'var(--accent)',
              }}>
                {codigo}
              </code>
              <button
                onClick={() => navigator.clipboard.writeText(`/start ${codigo}`)}
                className="btn btn-ghost btn-sm"
              >
                Copiar
              </button>
            </div>
            <p style={{ fontSize: 11, color: 'var(--text-faint)', margin: '8px 0 0 0' }}>
              El funcionario debe buscar <strong>@curupistaff_bot</strong> en Telegram y enviar:{' '}
              <code>/start {codigo}</code>
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

// ── Admin shell ─────────────────────────────────────────────────

function Admin({ onBack }) {
  const [tab, setTab] = useStateA('kanban');

  const NAV = [
    ['kanban',       'Turnos',     'Calendar'],
    ['clients',      'Clientes',   'User'],
    ['inbox',        'Inbox WA',   'WhatsApp'],
    ['funcionarios', 'Empleados',  'Settings'],
    ['services',     'Servicios',  'Sparkles'],
    ['inventario',   'Inventario', 'Droplet'],
    ['caja',         'Caja',       'Dollar'],
    ['gastos',       'Gastos',     'CreditCard'],
    ['reportes',     'Reportes',   'Trending'],
    ['promociones',  'Promociones','Gift'],
    ['telegram',     'Equipo TG',  'Send'],
    ['config-pagos', 'Pagos',      'Dollar'],
  ];

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)', display: 'flex' }} className="admin-shell">
      <aside style={{
        width: 220, padding: '24px 16px',
        borderRight: '1px solid var(--border)',
        background: 'var(--surface)',
        display: 'flex', flexDirection: 'column', gap: 4,
        position: 'sticky', top: 0, height: '100vh', flexShrink: 0,
      }} className="admin-side">
        <div className="row gap-2" style={{ alignItems: 'center', marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid var(--border)' }}>
          <CurupiLogo />
          <div className="col" style={{ lineHeight: 1.1 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16 }}>Curupí</span>
            <span className="mono" style={{ fontSize: 9, color: 'var(--text-faint)', letterSpacing: '0.15em' }}>PANEL ADMIN</span>
          </div>
        </div>

        {NAV.map(([id, label, icon]) => {
          const Icon = LCIcons[icon];
          const active = tab === id;
          return (
            <button key={id} onClick={() => setTab(id)} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '9px 12px', borderRadius: 8,
              background: active ? 'var(--accent-soft)' : 'transparent',
              color: active ? 'var(--accent)' : 'var(--text-muted)',
              border: 'none', fontSize: 13, fontWeight: active ? 600 : 500,
              textAlign: 'left', transition: 'all .15s', cursor: 'pointer',
            }}>
              <Icon size={15} /> {label}
            </button>
          );
        })}

        <div style={{ marginTop: 'auto' }}>
          <button onClick={onBack} className="btn btn-ghost btn-sm" style={{ width: '100%', justifyContent: 'flex-start' }}>
            <LCIcons.ArrowLeft size={14} /> Volver al sitio
          </button>
        </div>
      </aside>

      <main style={{ flex: 1, padding: '32px 36px', overflow: 'auto' }} className="admin-main">
        {tab === 'kanban'       && <KanbanView />}
        {tab === 'clients'      && <ClientsView />}
        {tab === 'inbox'        && <InboxView />}
        {tab === 'funcionarios' && <FuncionariosView />}
        {tab === 'services'     && <ServicesView />}
        {tab === 'inventario'   && <InventarioView />}
        {tab === 'caja'         && <CajaView />}
        {tab === 'gastos'       && <GastosView />}
        {tab === 'reportes'     && <ReportesView />}
        {tab === 'promociones'  && <PromocionesView />}
        {tab === 'telegram'     && <TelegramView />}
        {tab === 'config-pagos' && <ConfigPagosView />}
      </main>

      <style>{`
        @media (max-width: 800px) {
          .admin-shell { flex-direction: column; }
          .admin-side { width: 100% !important; height: auto !important; position: relative !important; }
          .admin-main { padding: 20px !important; }
        }
      `}</style>
    </div>
  );
}

// ── KANBAN ──────────────────────────────────────────────────────

const COLUMNAS = [
  { id: 'pendiente',  label: 'Pendiente' },
  { id: 'en_proceso', label: 'En proceso' },
  { id: 'listo',      label: 'Listo' },
  { id: 'entregado',  label: 'Entregado' },
];

const SIGUIENTE = { pendiente: 'en_proceso', en_proceso: 'listo', listo: 'entregado' };

function KanbanView() {
  const [reservas, setReservas] = useStateA([]);
  const [loading, setLoading] = useStateA(true);
  const [fecha, setFecha] = useStateA(HOY_ISO);

  const cargar = useCallbackA(() => {
    setLoading(true);
    LC_API.listarReservas({ fecha })
      .then(setReservas)
      .catch(() => setReservas([]))
      .finally(() => setLoading(false));
  }, [fecha]);

  useEffectA(() => { cargar(); }, [cargar]);

  const cambiarEstado = async (id, estado, extra = {}) => {
    await LC_API.actualizarReserva(id, { estado, ...extra });
    setReservas(prev => prev.map(r => r.id === id ? { ...r, estado, ...extra } : r));
  };

  const bahias = reservas.filter(r => r.estado === 'en_proceso').length;

  return (
    <div>
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">TURNOS DEL DÍA</span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Kanban</h1>
        </div>
        <div className="row gap-2" style={{ alignItems: 'center' }}>
          <div style={{
            padding: '8px 16px', borderRadius: 999,
            background: bahias >= 4 ? 'rgba(224,82,82,.12)' : 'var(--accent-soft)',
            color: bahias >= 4 ? '#e05252' : 'var(--accent)',
            fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
          }}>
            Bahías {bahias}/4
          </div>
          <input type="date" value={fecha} onChange={e => setFecha(e.target.value)}
            style={{ fontFamily: 'var(--font-mono)', fontSize: 13, padding: '8px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }} />
          <button className="btn btn-ghost btn-sm" onClick={cargar}>↻</button>
        </div>
      </div>

      {loading ? <Spinner /> : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignItems: 'start' }} className="kanban-grid">
          {COLUMNAS.map(col => {
            const cards = reservas.filter(r => r.estado === col.id);
            const m = ESTADO_META[col.id];
            return (
              <div key={col.id}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 4px 12px' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: m.color, letterSpacing: '0.08em' }}>
                    {col.label.toUpperCase()}
                  </span>
                  <span style={{ background: m.bg, color: m.color, borderRadius: 999, padding: '2px 8px', fontSize: 11, fontWeight: 700 }}>
                    {cards.length}
                  </span>
                </div>
                <div className="col gap-2">
                  {cards.length === 0 && (
                    <div style={{ padding: 24, borderRadius: 12, border: '1px dashed var(--border)', textAlign: 'center' }}>
                      <span className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>vacío</span>
                    </div>
                  )}
                  {cards.map(r => (
                    <KanbanCard key={r.id} r={r} onCambiar={cambiarEstado} />
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}

      <style>{`
        @media (max-width: 1100px) { .kanban-grid { grid-template-columns: repeat(2,1fr) !important; } }
        @media (max-width: 600px)  { .kanban-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  );
}

function PrecioInlineEdit({ reservaId, precioActual, onSaved }) {
  const [open, setOpen] = useStateA(false);
  const [monto, setMonto] = useStateA(String(precioActual || ''));
  const [saving, setSaving] = useStateA(false);

  const guardar = async () => {
    const val = parseFloat(monto);
    if (!val || val <= 0) return;
    setSaving(true);
    try {
      await LC_API.actualizarReserva(reservaId, { precio_final: val });
      onSaved(val);
      setOpen(false);
    } catch (_) {}
    setSaving(false);
  };

  if (!open) return (
    <button onClick={() => setOpen(true)} className="btn btn-ghost btn-sm" style={{ fontSize: 10, padding: '2px 7px', marginTop: 2 }}>
      ✏️ Editar precio
    </button>
  );

  return (
    <div style={{ marginTop: 6, padding: '8px 10px', borderRadius: 10, background: 'var(--surface-2)', border: '1px solid var(--border)', display: 'flex', gap: 6, alignItems: 'center' }}>
      <input type="number" value={monto} onChange={e => setMonto(e.target.value)} onKeyDown={e => e.key === 'Enter' && guardar()} style={{ fontSize: 12, padding: '4px 8px', width: 90 }} />
      <button className="btn btn-primary btn-sm" onClick={guardar} disabled={saving} style={{ fontSize: 11 }}>OK</button>
      <button className="btn btn-ghost btn-sm" onClick={() => setOpen(false)} style={{ fontSize: 11 }}>✕</button>
    </div>
  );
}

function VehiculoInlineEdit({ reservaId, vehiculo, onSaved }) {
  const [open, setOpen] = useStateA(false);
  const [form, setForm] = useStateA({ marca: vehiculo.marca || '', modelo: vehiculo.modelo || '', patente: vehiculo.patente || '' });
  const [saving, setSaving] = useStateA(false);

  const guardar = async () => {
    setSaving(true);
    try {
      await LC_API.actualizarVehiculoReserva(reservaId, form);
      onSaved({ ...vehiculo, ...form, patente: (form.patente || '').toUpperCase() });
      setOpen(false);
    } catch (_) {}
    setSaving(false);
  };

  if (!open) return (
    <button onClick={() => setOpen(true)} className="btn btn-ghost btn-sm" style={{ fontSize: 10, padding: '2px 7px', marginTop: 2 }}>
      ✏️ {vehiculo.marca ? 'Editar vehículo' : 'Agregar vehículo'}
    </button>
  );

  return (
    <div style={{ marginTop: 8, padding: '10px 12px', borderRadius: 10, background: 'var(--surface-2)', border: '1px solid var(--border)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 6 }}>
        <input value={form.marca} onChange={e => setForm(f => ({ ...f, marca: e.target.value }))} placeholder="Marca" style={{ fontSize: 12, padding: '5px 8px' }} />
        <input value={form.modelo} onChange={e => setForm(f => ({ ...f, modelo: e.target.value }))} placeholder="Modelo" style={{ fontSize: 12, padding: '5px 8px' }} />
        <input value={form.patente} onChange={e => setForm(f => ({ ...f, patente: e.target.value.toUpperCase() }))} placeholder="Matrícula" style={{ fontSize: 12, padding: '5px 8px', gridColumn: '1 / -1' }} />
      </div>
      <div className="row gap-1">
        <button className="btn btn-primary btn-sm" onClick={guardar} disabled={saving} style={{ fontSize: 11 }}>Guardar</button>
        <button className="btn btn-ghost btn-sm" onClick={() => setOpen(false)} style={{ fontSize: 11 }}>Cancelar</button>
      </div>
    </div>
  );
}

function KanbanCard({ r, onCambiar }) {
  const [loading, setLoading] = useStateA(false);
  const [pagoOpen, setPagoOpen] = useStateA(false);
  const [pagoBadgeOpen, setPagoBadgeOpen] = useStateA(false);
  const [pagoLocal, setPagoLocal] = useStateA(null);
  const [vehiculoLocal, setVehiculoLocal] = useStateA(null);
  const [precioLocal, setPrecioLocal] = useStateA(null);
  const pagado = pagoLocal !== null ? pagoLocal.pagado : (r.pagado || false);
  const metodoPago = pagoLocal !== null ? pagoLocal.metodo_pago : r.metodo_pago;
  const siguiente = SIGUIENTE[r.estado];
  const vehiculo = vehiculoLocal || r.vehiculos || {};
  const servicio = r.servicios || {};
  const funcionario = r.funcionarios || {};

  const avanzar = async () => {
    if (!siguiente) return;
    if (siguiente === 'entregado') { setPagoOpen(true); return; }
    setLoading(true);
    const extra = (siguiente === 'listo' && !r.listo_en)
      ? { listo_en: new Date().toISOString() }
      : {};
    await onCambiar(r.id, siguiente, extra);
    setLoading(false);
  };

  const confirmarPago = async ({ metodo_pago, premio, descuento_manual }) => {
    setLoading(true);
    if (premio) {
      try { await LC_API.canjearPremio(premio.id, r.id); } catch (_) {}
    }
    await onCambiar(r.id, 'entregado', {
      metodo_pago,
      pagado: true,
      descuento: descuento_manual ? parseFloat(descuento_manual) : undefined,
    });
    setPagoOpen(false);
    setLoading(false);
  };

  return (
    <>
      <div className="card" style={{ padding: 16, borderLeft: `3px solid ${ESTADO_META[r.estado].dot}` }}>
        <div className="row between" style={{ marginBottom: 8 }}>
          <span className="mono" style={{ fontSize: 12, fontWeight: 700 }}>{vehiculo.patente || '—'}</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>{(r.hora || '').slice(0, 5)}</span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>{servicio.nombre || r.servicio_id}</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>{vehiculo.marca} {vehiculo.modelo}</div>
        <VehiculoInlineEdit reservaId={r.id} vehiculo={vehiculo} onSaved={setVehiculoLocal} />
        {funcionario.nombre && (
          <div className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', marginBottom: 10 }}>👤 {funcionario.nombre}</div>
        )}
        <div style={{ marginBottom: 8 }}>
          <button
            onClick={() => setPagoBadgeOpen(true)}
            style={{
              background: pagado ? 'rgba(74,222,128,.12)' : 'var(--surface-2)',
              color: pagado ? '#4ade80' : 'var(--text-faint)',
              border: `1px solid ${pagado ? 'rgba(74,222,128,.3)' : 'var(--border)'}`,
              borderRadius: 999, padding: '3px 10px', fontSize: 11, fontWeight: 600,
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 5,
            }}
          >
            {pagado ? `💰 Pagado${metodoPago ? ` — ${metodoPago}` : ''}` : '⏳ Sin pagar'}
          </button>
        </div>
        <PrecioInlineEdit reservaId={r.id} precioActual={precioLocal ?? r.precio_final} onSaved={setPrecioLocal} />
        <div className="row between" style={{ alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700 }}>{fmtPesos(precioLocal ?? r.precio_final)}</span>
          {siguiente && (
            <button className="btn btn-primary btn-sm" onClick={avanzar} disabled={loading} style={{ fontSize: 11, padding: '5px 10px' }}>
              {loading ? '…' : '→ ' + ESTADO_META[siguiente].label}
            </button>
          )}
        </div>
      </div>
      {pagoOpen && <PagoModal reserva={r} onClose={() => setPagoOpen(false)} onConfirm={confirmarPago} />}
      {pagoBadgeOpen && (
        <RegistrarPagoModal
          reserva={{ ...r, pagado, metodo_pago: metodoPago }}
          onClose={() => setPagoBadgeOpen(false)}
          onSaved={(update) => { setPagoLocal(update); setPagoBadgeOpen(false); }}
        />
      )}
    </>
  );
}

function PagoModal({ reserva, onClose, onConfirm }) {
  const vehiculo = reserva.vehiculos || {};
  const servicio = reserva.servicios || {};
  const cliente = reserva.clientes || {};

  const [premios, setPremios] = useStateA([]);
  const [premioDispo, setPremioDispo] = useStateA([]);
  const [selectedPremio, setSelectedPremio] = useStateA(null);
  const [metodo, setMetodo] = useStateA('efectivo');
  const [descuentoManual, setDescuentoManual] = useStateA('');
  const [saving, setSaving] = useStateA(false);

  useEffectA(() => {
    if (reserva.cliente_id) {
      LC_API.premiosCliente(reserva.cliente_id)
        .then(data => setPremioDispo(data.filter(p => p.estado === 'disponible')))
        .catch(() => {});
    }
  }, [reserva.cliente_id]);

  const calcPrecioFinal = () => {
    let precio = parseFloat(reserva.precio_final);
    if (selectedPremio) {
      const promo = selectedPremio.promociones || {};
      if (promo.tipo_descuento === 'porcentaje') precio = precio * (1 - promo.valor_descuento / 100);
      else if (promo.tipo_descuento === 'monto') precio -= promo.valor_descuento;
      else precio = 0;
    } else if (descuentoManual) {
      precio -= parseFloat(descuentoManual) || 0;
    }
    return Math.max(0, Math.round(precio));
  };

  const fmtPremio = (p) => {
    const promo = p.promociones || {};
    if (promo.tipo_descuento === 'porcentaje') return `${promo.valor_descuento}% off`;
    if (promo.tipo_descuento === 'monto') return `${fmtPesos(promo.valor_descuento)} off`;
    return 'Gratis';
  };

  const handleConfirm = async () => {
    setSaving(true);
    await onConfirm({
      metodo_pago: metodo,
      premio: selectedPremio,
      descuento_manual: !selectedPremio ? descuentoManual : '',
    });
  };

  const precioFinal = calcPrecioFinal();
  const hayDescuento = precioFinal < parseFloat(reserva.precio_final);

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.55)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
      onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="card" style={{ width: '100%', maxWidth: 440, padding: 28 }}>

        {/* Encabezado */}
        <div style={{ marginBottom: 20 }}>
          <span className="eyebrow" style={{ fontSize: 10 }}>COBRO · {vehiculo.patente || '—'}</span>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, marginTop: 4 }}>{servicio.nombre || '—'}</h3>
          {cliente.nombre && <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>👤 {cliente.nombre}</div>}
        </div>

        {/* Premios disponibles */}
        {premioDispo.length > 0 && (
          <div style={{ marginBottom: 20 }}>
            <label style={{ fontWeight: 600, fontSize: 12, display: 'block', marginBottom: 8 }}>🎁 Premios disponibles del cliente</label>
            <div className="col gap-1">
              {premioDispo.map(p => (
                <label key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 8, border: `1px solid ${selectedPremio?.id === p.id ? 'var(--accent)' : 'var(--border)'}`, cursor: 'pointer', background: selectedPremio?.id === p.id ? 'var(--accent-soft)' : 'var(--surface-2)' }}>
                  <input type="radio" name="premio" checked={selectedPremio?.id === p.id}
                    onChange={() => { setSelectedPremio(p); setDescuentoManual(''); }} style={{ width: 'auto' }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{(p.promociones || {}).nombre}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{fmtPremio(p)}</div>
                  </div>
                </label>
              ))}
              <label style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 8, border: `1px solid ${!selectedPremio ? 'var(--accent)' : 'var(--border)'}`, cursor: 'pointer', background: !selectedPremio ? 'var(--accent-soft)' : 'var(--surface-2)' }}>
                <input type="radio" name="premio" checked={!selectedPremio}
                  onChange={() => setSelectedPremio(null)} style={{ width: 'auto' }} />
                <span style={{ fontSize: 13 }}>No aplicar premio</span>
              </label>
            </div>
          </div>
        )}

        {/* Descuento manual (solo si no hay premio seleccionado) */}
        {!selectedPremio && (
          <div style={{ marginBottom: 20 }}>
            <label>Descuento manual (UYU)</label>
            <input type="number" min="0" value={descuentoManual}
              onChange={e => setDescuentoManual(e.target.value)}
              placeholder="0 = sin descuento" />
          </div>
        )}

        {/* Método de pago */}
        <div style={{ marginBottom: 24 }}>
          <label style={{ fontWeight: 600, fontSize: 12, display: 'block', marginBottom: 8 }}>Método de pago</label>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[['efectivo','💵 Efectivo'],['debito','💳 Débito'],['credito','💳 Crédito'],['transferencia','📲 Transferencia']].map(([id, label]) => (
              <button key={id} onClick={() => setMetodo(id)}
                style={{ padding: '10px 8px', borderRadius: 8, border: `1px solid ${metodo === id ? 'var(--accent)' : 'var(--border)'}`, background: metodo === id ? 'var(--accent-soft)' : 'var(--surface-2)', color: metodo === id ? 'var(--accent)' : 'var(--text)', fontWeight: metodo === id ? 700 : 400, fontSize: 12, cursor: 'pointer' }}>
                {label}
              </button>
            ))}
          </div>
        </div>

        {/* Precio final */}
        <div style={{ padding: '16px 0', borderTop: '1px solid var(--border)', marginBottom: 20 }}>
          {hayDescuento && (
            <div className="row between" style={{ marginBottom: 4 }}>
              <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>Precio original</span>
              <span className="mono" style={{ fontSize: 13, color: 'var(--text-muted)', textDecoration: 'line-through' }}>{fmtPesos(reserva.precio_final)}</span>
            </div>
          )}
          <div className="row between">
            <span style={{ fontWeight: 700, fontSize: 15 }}>Total a cobrar</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 800, color: 'var(--accent)' }}>{fmtPesos(precioFinal)}</span>
          </div>
        </div>

        <div className="row gap-2">
          <button className="btn btn-primary" style={{ flex: 1 }} onClick={handleConfirm} disabled={saving}>
            {saving ? '…' : `Cobrar ${fmtPesos(precioFinal)}`}
          </button>
          <button className="btn btn-ghost" onClick={onClose} disabled={saving}>Cancelar</button>
        </div>
      </div>
    </div>
  );
}

function RegistrarPagoModal({ reserva, onClose, onSaved }) {
  const [metodos, setMetodos] = useStateA([]);
  const [saving, setSaving] = useStateA(false);

  useEffectA(() => {
    window._sb.from('metodos_pago').select('*').eq('activo', true).order('orden')
      .then(({ data }) => setMetodos(data || []));
  }, []);

  const patch = async (fields) => {
    setSaving(true);
    try {
      const { error } = await window._sb.from('reservas').update(fields).eq('id', reserva.id);
      if (error) { alert('Error al guardar: ' + error.message); return; }
      onSaved({ pagado: fields.pagado, metodo_pago: fields.metodo_pago ?? null });
    } finally {
      setSaving(false);
    }
  };

  const vehiculo = reserva.vehiculos || {};
  const servicio = reserva.servicios || {};

  return (
    <div
      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.55)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="card" style={{ width: '100%', maxWidth: 380, padding: 24 }}>
        <div style={{ marginBottom: 18 }}>
          <span className="eyebrow" style={{ fontSize: 10 }}>PAGO · {vehiculo.patente || '—'}</span>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginTop: 4 }}>{servicio.nombre || '—'}</h3>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>
            {reserva.pagado ? `✅ Pagado${reserva.metodo_pago ? ` — ${reserva.metodo_pago}` : ''}` : '⏳ Sin pagar'}
          </div>
        </div>

        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>Registrar con método:</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {metodos.map(m => (
              <button
                key={m.id}
                onClick={() => patch({ pagado: true, metodo_pago: m.nombre })}
                disabled={saving}
                style={{
                  padding: '10px 8px', borderRadius: 8,
                  border: `1px solid ${reserva.pagado && reserva.metodo_pago === m.nombre ? 'var(--accent)' : 'var(--border)'}`,
                  background: reserva.pagado && reserva.metodo_pago === m.nombre ? 'var(--accent-soft)' : 'var(--surface-2)',
                  color: reserva.pagado && reserva.metodo_pago === m.nombre ? 'var(--accent)' : 'var(--text)',
                  fontWeight: 500, fontSize: 13, cursor: 'pointer',
                }}
              >
                {m.nombre}
              </button>
            ))}
          </div>
        </div>

        {reserva.pagado && (
          <button
            onClick={() => patch({ pagado: false, metodo_pago: null })}
            disabled={saving}
            className="btn btn-ghost"
            style={{ width: '100%', marginBottom: 12, fontSize: 12, color: 'var(--text-muted)' }}
          >
            ↩️ Marcar sin pagar
          </button>
        )}

        <button onClick={onClose} className="btn btn-ghost" style={{ width: '100%', fontSize: 12 }}>
          Cerrar
        </button>
      </div>
    </div>
  );
}

// ── CLIENTES ────────────────────────────────────────────────────

function ClientsView() {
  const [clientes, setClientes] = useStateA([]);
  const [q, setQ] = useStateA('');
  const [orden, setOrden] = useStateA('reciente');
  const [loading, setLoading] = useStateA(true);
  const [ficha, setFicha] = useStateA(null);

  useEffectA(() => {
    setLoading(true);
    LC_API.listarClientes({ q: q || undefined, orden })
      .then(setClientes)
      .finally(() => setLoading(false));
  }, [q, orden]);

  if (ficha) return <FichaCliente id={ficha} onBack={() => setFicha(null)} />;

  const tier = v => v >= 20 ? '⭐⭐ VIP' : v >= 8 ? '⭐ Club' : null;

  return (
    <div>
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">CRM · {clientes.length} CLIENTES</span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Clientes</h1>
        </div>
        <div className="row gap-2">
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Buscar por nombre o teléfono…" style={{ width: 260 }} />
          <select value={orden} onChange={e => setOrden(e.target.value)}
            style={{ padding: '8px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13 }}>
            <option value="reciente">Más recientes</option>
            <option value="visitas">Más visitas</option>
            <option value="gasto">Mayor gasto</option>
          </select>
        </div>
      </div>

      {loading ? <Spinner /> : clientes.length === 0 ? <Vacío mensaje="No hay clientes aún" /> : (
        <div className="card" style={{ overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: 'var(--surface-2)' }}>
                <th style={th}>CLIENTE</th>
                <th style={th}>TELÉFONO</th>
                <th style={{ ...th, textAlign: 'center' }}>VISITAS</th>
                <th style={th}>ÚLTIMA VISITA</th>
                <th style={{ ...th, textAlign: 'right' }}>TOTAL GASTADO</th>
              </tr>
            </thead>
            <tbody>
              {clientes.map(c => {
                const t = tier(c.visitas_total);
                return (
                  <tr key={c.id} onClick={() => setFicha(c.id)} style={{ borderTop: '1px solid var(--border)', cursor: 'pointer' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <td style={td}>
                      <div className="row gap-2" style={{ alignItems: 'center' }}>
                        <div style={{ width: 34, height: 34, borderRadius: 999, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>
                          {c.nombre.split(' ').slice(0, 2).map(n => n[0]).join('')}
                        </div>
                        <div>
                          <div style={{ fontWeight: 600, fontSize: 14 }}>{c.nombre}</div>
                          {t && <div className="mono" style={{ fontSize: 10, color: 'var(--accent)' }}>{t}</div>}
                        </div>
                      </div>
                    </td>
                    <td style={{ ...td, fontFamily: 'var(--font-mono)', fontSize: 12 }}>{c.telefono}</td>
                    <td style={{ ...td, textAlign: 'center', fontFamily: 'var(--font-display)', fontWeight: 700 }}>{c.visitas_total}</td>
                    <td style={{ ...td, fontSize: 13, color: 'var(--text-muted)' }}>{c.ultima_visita || '—'}</td>
                    <td style={{ ...td, textAlign: 'right', fontFamily: 'var(--font-display)', fontWeight: 700 }}>{fmtPesos(c.gasto_total)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function OtorgarPremioPanel({ clienteId, onOtorgado, onCancelar }) {
  const [promos, setPromos] = useStateA([]);
  const [promoId, setPromoId] = useStateA('');
  const [venceEn, setVenceEn] = useStateA('');
  const [saving, setSaving] = useStateA(false);

  useEffectA(() => {
    fetch(LC_API_BASE + '/promociones').then(r => r.json()).then(data => {
      const activas = (data || []).filter(p => p.activa);
      setPromos(activas);
      if (activas.length) setPromoId(activas[0].id);
    });
  }, []);

  const guardar = async () => {
    if (!promoId) return;
    setSaving(true);
    await fetch(LC_API_BASE + `/clientes/${clienteId}/premios`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ promocion_id: promoId, vence_en: venceEn || null }),
    });
    setSaving(false);
    onOtorgado();
  };

  return (
    <div style={{ background: 'var(--surface-2)', borderRadius: 10, padding: 16, marginBottom: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div>
          <label>Promoción</label>
          {promos.length === 0
            ? <div className="mono" style={{ fontSize: 12, color: 'var(--text-faint)', paddingTop: 8 }}>No hay promociones activas</div>
            : <select value={promoId} onChange={e => setPromoId(e.target.value)}
                style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }}>
                {promos.map(p => <option key={p.id} value={p.id}>{p.nombre}</option>)}
              </select>
          }
        </div>
        <div>
          <label>Vence el (opcional)</label>
          <input type="date" value={venceEn} onChange={e => setVenceEn(e.target.value)} />
        </div>
      </div>
      <div className="row gap-2" style={{ marginTop: 12 }}>
        <button className="btn btn-primary btn-sm" onClick={guardar} disabled={saving || !promoId}>{saving ? '…' : 'Otorgar'}</button>
        <button className="btn btn-ghost btn-sm" onClick={onCancelar}>Cancelar</button>
      </div>
    </div>
  );
}

function FichaCliente({ id, onBack }) {
  const [data, setData] = useStateA(null);
  const [loading, setLoading] = useStateA(true);
  const [premiosLocales, setPremiosLocales] = useStateA([]);
  const [otorgarOpen, setOtorgarOpen] = useStateA(false);

  useEffectA(() => {
    LC_API.fichaCliente(id).then(d => {
      setData(d);
      setPremiosLocales(d?.premios || []);
    }).finally(() => setLoading(false));
  }, [id]);

  const recargarPremios = () => {
    LC_API.premiosCliente(id).then(setPremiosLocales);
  };

  if (loading) return <Spinner />;
  if (!data) return <Vacío mensaje="Cliente no encontrado" />;

  const { vehiculos = [], reservas = [] } = data;
  const premiosDisponibles = premiosLocales.filter(p => p.estado === 'disponible').length;

  return (
    <div>
      <button className="btn btn-ghost btn-sm" onClick={onBack} style={{ marginBottom: 20 }}>
        <LCIcons.ArrowLeft size={14} /> Volver a Clientes
      </button>

      <div className="row gap-3" style={{ alignItems: 'flex-start', flexWrap: 'wrap', marginBottom: 28 }}>
        <div style={{ width: 60, height: 60, borderRadius: 999, background: 'var(--accent)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22 }}>
          {data.nombre.split(' ').slice(0, 2).map(n => n[0]).join('')}
        </div>
        <div>
          <h1 style={{ fontSize: 32 }}>{data.nombre}</h1>
          <div className="mono" style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>
            {data.telefono}{data.email ? ' · ' + data.email : ''}
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 14, marginBottom: 28 }}>
        <KPI label="Visitas" value={data.visitas_total} sub="totales" />
        <KPI label="Gasto total" value={fmtPesos(data.gasto_total)} sub="acumulado" accent />
        <KPI label="Última visita" value={data.ultima_visita || '—'} sub="" />
        <KPI label="Premios" value={premiosDisponibles} sub="disponibles" />
      </div>

      {/* Vehículos */}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, marginBottom: 14 }}>Vehículos</h3>
        {vehiculos.length === 0 ? <Vacío mensaje="Sin vehículos registrados" /> : (
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {vehiculos.map(v => (
              <div key={v.id} className="card" style={{ padding: '12px 16px', background: 'var(--surface-2)' }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{v.marca} {v.modelo}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>
                  {v.patente || 'sin patente'}{v.color ? ' · ' + v.color : ''}{v.tamano_id ? ' · ' + v.tamano_id : ''}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Premios */}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <div className="row between" style={{ marginBottom: 14 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16 }}>Premios</h3>
          <button className="btn btn-ghost btn-sm" onClick={() => setOtorgarOpen(o => !o)}>
            <LCIcons.Gift size={13} /> Otorgar manual
          </button>
        </div>

        {otorgarOpen && (
          <OtorgarPremioPanel clienteId={id} onOtorgado={() => { recargarPremios(); setOtorgarOpen(false); }} onCancelar={() => setOtorgarOpen(false)} />
        )}

        {premiosLocales.length === 0 ? <Vacío mensaje="Sin premios" /> : (
          <div className="col gap-1">
            {premiosLocales.map(p => {
              const promo = p.promociones || {};
              const estadoColor = { disponible: '#4ade80', usado: 'var(--text-faint)', vencido: '#e05252' }[p.estado];
              const fmtDesc = promo.tipo_descuento === 'porcentaje' ? `${promo.valor_descuento}% off`
                : promo.tipo_descuento === 'monto' ? fmtPesos(promo.valor_descuento) + ' off' : 'Gratis';
              return (
                <div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: '1px dashed var(--border)' }}>
                  <div>
                    <span style={{ fontWeight: 600, fontSize: 13 }}>{promo.nombre || '—'}</span>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', marginLeft: 10 }}>{fmtDesc}</span>
                    {p.vence_en && <span className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', marginLeft: 8 }}>vence {p.vence_en}</span>}
                  </div>
                  <span style={{ color: estadoColor, fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600 }}>{p.estado}</span>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Historial */}
      <div className="card" style={{ overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16 }}>Historial de reservas</h3>
        </div>
        {reservas.length === 0 ? <Vacío mensaje="Sin reservas" /> : (
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead><tr style={{ background: 'var(--surface-2)' }}>
              <th style={th}>FECHA</th><th style={th}>SERVICIO</th><th style={th}>ESTADO</th><th style={{ ...th, textAlign: 'right' }}>PRECIO</th>
            </tr></thead>
            <tbody>
              {reservas.map(r => (
                <tr key={r.id} style={{ borderTop: '1px solid var(--border)' }}>
                  <td style={{ ...td, fontFamily: 'var(--font-mono)', fontSize: 12 }}>{r.fecha} {(r.hora || '').slice(0, 5)}</td>
                  <td style={{ ...td, fontSize: 13 }}>{(r.servicios || {}).nombre || r.servicio_id}</td>
                  <td style={td}><EstadoBadge estado={r.estado} /></td>
                  <td style={{ ...td, textAlign: 'right', fontFamily: 'var(--font-display)', fontWeight: 700 }}>{fmtPesos(r.precio_final)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

// ── INBOX WA ────────────────────────────────────────────────────

function InboxView() {
  const [convs, setConvs] = useStateA([]);
  const [sel, setSel] = useStateA(null);
  const [mensajes, setMensajes] = useStateA([]);
  const [texto, setTexto] = useStateA('');
  const [loading, setLoading] = useStateA(true);
  const endRef = useRefA(null);

  const cargarConvs = useCallbackA(() => {
    LC_API.listarConversaciones()
      .then(setConvs)
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  useEffectA(() => {
    cargarConvs();
    const id = setInterval(cargarConvs, 10000);
    return () => clearInterval(id);
  }, [cargarConvs]);

  useEffectA(() => {
    if (!sel) return;
    LC_API.getMensajes(sel.id).then(msgs => { setMensajes(msgs); LC_API.marcarLeido(sel.id); });
    const id = setInterval(() => LC_API.getMensajes(sel.id).then(setMensajes), 5000);
    return () => clearInterval(id);
  }, [sel?.id]);

  useEffectA(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [mensajes]);

  const tomarControl = async () => {
    await LC_API.tomarControl(sel.id, 'admin');
    setSel(s => ({ ...s, modo: 'humano' }));
  };

  const devolverBot = async () => {
    await LC_API.devolverBot(sel.id);
    setSel(s => ({ ...s, modo: 'bot' }));
  };

  const enviar = async () => {
    if (!texto.trim()) return;
    await LC_API.enviarMensaje(sel.id, texto, 'admin');
    setTexto('');
    LC_API.getMensajes(sel.id).then(setMensajes);
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 0, height: 'calc(100vh - 100px)', overflow: 'hidden', border: '1px solid var(--border)', borderRadius: 16 }} className="inbox-grid">
      {/* Lista */}
      <div style={{ borderRight: '1px solid var(--border)', overflow: 'auto', background: 'var(--surface)' }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16 }}>WhatsApp</h3>
        </div>
        {loading ? <Spinner /> : convs.length === 0 ? <Vacío mensaje="Sin conversaciones" /> : convs.map(c => (
          <div key={c.id} onClick={() => setSel(c)} style={{
            padding: '14px 20px', borderBottom: '1px solid var(--border)', cursor: 'pointer',
            background: sel?.id === c.id ? 'var(--accent-soft)' : 'transparent',
          }}>
            <div className="row between" style={{ marginBottom: 4 }}>
              <span style={{ fontWeight: 600, fontSize: 13 }}>{c.telefono}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--text-faint)' }}>
                {c.modo === 'humano' ? '👤' : '🤖'}
                {c.no_leidos > 0 && <span style={{ marginLeft: 6, background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 999, padding: '1px 6px', fontSize: 10 }}>{c.no_leidos}</span>}
              </span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {c.ultimo_mensaje_preview || '…'}
            </div>
          </div>
        ))}
      </div>

      {/* Hilo */}
      {!sel ? (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-faint)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
          Seleccioná una conversación
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {/* Header */}
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border)', background: 'var(--surface)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontWeight: 600 }}>{sel.telefono}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>{sel.modo === 'humano' ? '👤 Atendido por operador' : '🤖 Bot activo'}</div>
            </div>
            <div className="row gap-1">
              {sel.modo === 'bot'
                ? <button className="btn btn-primary btn-sm" onClick={tomarControl}>Tomar control</button>
                : <button className="btn btn-ghost btn-sm" onClick={devolverBot}>Devolver al bot</button>
              }
            </div>
          </div>

          {/* Mensajes */}
          <div style={{ flex: 1, overflow: 'auto', padding: 20 }}>
            {mensajes.length === 0 ? <Vacío mensaje="Sin mensajes" /> : mensajes.map(m => {
              const saliente = m.direccion === 'out';
              return (
                <div key={m.id} style={{ display: 'flex', justifyContent: saliente ? 'flex-end' : 'flex-start', marginBottom: 12 }}>
                  <div style={{
                    maxWidth: '70%', padding: '10px 14px', borderRadius: saliente ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
                    background: saliente ? 'var(--accent)' : 'var(--surface-2)',
                    color: saliente ? 'var(--accent-ink)' : 'var(--text)',
                    fontSize: 13,
                  }}>
                    {m.autor === 'bot' && <div className="mono" style={{ fontSize: 9, marginBottom: 4, opacity: 0.7 }}>🤖 bot</div>}
                    {m.autor === 'humano' && <div className="mono" style={{ fontSize: 9, marginBottom: 4, opacity: 0.7 }}>👤 operador</div>}
                    {m.contenido}
                    <div className="mono" style={{ fontSize: 9, marginTop: 4, opacity: 0.6, textAlign: 'right' }}>
                      {(m.enviado_en || '').slice(11, 16)}
                    </div>
                  </div>
                </div>
              );
            })}
            <div ref={endRef} />
          </div>

          {/* Input */}
          {sel.modo === 'humano' && (
            <div style={{ padding: '14px 20px', borderTop: '1px solid var(--border)', display: 'flex', gap: 10 }}>
              <input value={texto} onChange={e => setTexto(e.target.value)}
                onKeyDown={e => e.key === 'Enter' && enviar()}
                placeholder="Escribe un mensaje…" style={{ flex: 1 }} />
              <button className="btn btn-primary" onClick={enviar} disabled={!texto.trim()}>
                <LCIcons.Send size={15} />
              </button>
            </div>
          )}
          {sel.modo === 'bot' && (
            <div style={{ padding: '14px 20px', borderTop: '1px solid var(--border)', textAlign: 'center' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>El bot está activo. Tomá el control para responder manualmente.</span>
            </div>
          )}
        </div>
      )}

      <style>{`@media (max-width: 700px) { .inbox-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

// ── FUNCIONARIOS ────────────────────────────────────────────────

function FuncionariosView() {
  const [funcionarios, setFuncionarios] = useStateA([]);
  const [matriz, setMatriz] = useStateA([]);
  const [servicios, setServicios] = useStateA([]);
  const [loading, setLoading] = useStateA(true);
  const [form, setForm] = useStateA(null); // null | {} | { id }
  const [saving, setSaving] = useStateA(false);

  const cargar = useCallbackA(() => {
    Promise.all([
      LC_API.listarFuncionarios(),
      fetch(LC_API_BASE + '/funcionarios/comisiones-config').then(r => r.json()).catch(() => []),
      window._sb.from('servicios').select('id, nombre').eq('activo', true).order('orden').then(r => r.data || []),
    ]).then(([f, m, svcs]) => { setFuncionarios(f); setMatriz(m); setServicios(svcs); }).finally(() => setLoading(false));
  }, []);

  useEffectA(() => { cargar(); }, [cargar]);

  const getPct = (funcId, srvId) => {
    const row = matriz.find(m => m.funcionario_id === funcId && m.servicio_id === srvId);
    return row ? row.porcentaje : 0;
  };

  const setPct = (funcId, srvId, val) => {
    setMatriz(prev => {
      const next = prev.filter(m => !(m.funcionario_id === funcId && m.servicio_id === srvId));
      if (parseFloat(val) > 0) next.push({ funcionario_id: funcId, servicio_id: srvId, porcentaje: parseFloat(val) });
      return next;
    });
  };

  const guardarMatriz = async () => {
    setSaving(true);
    await fetch(LC_API_BASE + '/funcionarios/comisiones-config', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: matriz }),
    });
    setSaving(false);
  };

  const guardarFuncionario = async () => {
    setSaving(true);
    try {
      const { id, ...body } = form;
      const url = id ? LC_API_BASE + `/funcionarios/${id}` : LC_API_BASE + '/funcionarios';
      const res = await fetch(url, {
        method: id ? 'PATCH' : 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (!res.ok) {
        const t = await res.text().catch(() => '');
        throw new Error(`HTTP ${res.status} ${t.slice(0, 160)}`);
      }
      setForm(null);
      cargar();
    } catch (e) {
      alert('Error al guardar el empleado: ' + e.message);
    } finally {
      setSaving(false);
    }
  };

  const ROL_COLORS = { operario: 'var(--accent)', cajero: '#60a5fa', supervisor: '#fbbf24' };

  return (
    <div>
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">EQUIPO</span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Empleados</h1>
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => setForm({ nombre: '', rol: 'operario', telefono: '', email: '' })}>
          <LCIcons.Plus size={14} /> Nuevo empleado
        </button>
      </div>

      {/* Form */}
      {form && (
        <div className="card" style={{ padding: 24, marginBottom: 24 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, marginBottom: 16 }}>{form.id ? 'Editar' : 'Nuevo'} empleado</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 600 }}>
            <div><label>Nombre</label><input value={form.nombre || ''} onChange={e => setForm(f => ({ ...f, nombre: e.target.value }))} /></div>
            <div><label>Rol</label>
              <select value={form.rol || 'operario'} onChange={e => setForm(f => ({ ...f, rol: e.target.value }))}
                style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }}>
                <option value="operario">Operario</option>
                <option value="cajero">Cajero</option>
                <option value="supervisor">Supervisor</option>
              </select>
            </div>
            <div><label>Teléfono</label><input value={form.telefono || ''} onChange={e => setForm(f => ({ ...f, telefono: e.target.value }))} /></div>
            <div><label>Email</label><input value={form.email || ''} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} /></div>
          </div>
          <div className="row gap-2" style={{ marginTop: 16 }}>
            <button className="btn btn-primary btn-sm" onClick={guardarFuncionario} disabled={saving || !form.nombre}>{saving ? '…' : 'Guardar'}</button>
            <button className="btn btn-ghost btn-sm" onClick={() => setForm(null)}>Cancelar</button>
          </div>
        </div>
      )}

      {loading ? <Spinner /> : (
        <>
          {/* Lista */}
          <div className="card" style={{ overflow: 'hidden', marginBottom: 24 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead><tr style={{ background: 'var(--surface-2)' }}>
                <th style={th}>NOMBRE</th><th style={th}>ROL</th><th style={th}>TELÉFONO</th><th style={th}>ESTADO</th><th style={th}></th>
              </tr></thead>
              <tbody>
                {funcionarios.map(f => (
                  <tr key={f.id} style={{ borderTop: '1px solid var(--border)' }}>
                    <td style={{ ...td, fontWeight: 600, fontSize: 14 }}>{f.nombre}</td>
                    <td style={td}><span style={{ background: `color-mix(in oklab, ${ROL_COLORS[f.rol] || 'var(--accent)'} 15%, transparent)`, color: ROL_COLORS[f.rol] || 'var(--accent)', padding: '3px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>{f.rol}</span></td>
                    <td style={{ ...td, fontFamily: 'var(--font-mono)', fontSize: 12 }}>{f.telefono || '—'}</td>
                    <td style={td}><span style={{ color: f.activo ? '#4ade80' : '#e05252', fontFamily: 'var(--font-mono)', fontSize: 11 }}>{f.activo ? 'activo' : 'inactivo'}</span></td>
                    <td style={td}><button className="btn btn-ghost btn-sm" onClick={() => setForm({ ...f })}>Editar</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Matriz comisiones */}
          {funcionarios.length > 0 && (
            <div className="card" style={{ padding: 24 }}>
              <div className="row between" style={{ marginBottom: 16 }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16 }}>Comisiones (% por servicio)</h3>
                <button className="btn btn-primary btn-sm" onClick={guardarMatriz} disabled={saving}>{saving ? '…' : 'Guardar matriz'}</button>
              </div>
              <div style={{ overflow: 'auto' }}>
                <table style={{ borderCollapse: 'collapse', minWidth: 500 }}>
                  <thead><tr style={{ background: 'var(--surface-2)' }}>
                    <th style={{ ...th, minWidth: 140 }}>EMPLEADO</th>
                    {servicios.map(s => <th key={s.id} style={{ ...th, textAlign: 'center' }}>{s.nombre}</th>)}
                  </tr></thead>
                  <tbody>
                    {funcionarios.map(f => (
                      <tr key={f.id} style={{ borderTop: '1px solid var(--border)' }}>
                        <td style={{ ...td, fontSize: 13, fontWeight: 600 }}>{f.nombre}</td>
                        {servicios.map(s => (
                          <td key={s.id} style={{ ...td, textAlign: 'center' }}>
                            <input type="number" min="0" max="100" step="0.5"
                              value={getPct(f.id, s.id)}
                              onChange={e => setPct(f.id, s.id, e.target.value)}
                              style={{ width: 60, textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 13, padding: '6px 4px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }} />
                            <span className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', marginLeft: 2 }}>%</span>
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ── SERVICIOS ───────────────────────────────────────────────────

const SVC_DB_EMPTY = { nombre: '', precio_base: 0, duracion_min: 30, consultar: false };

function ServicesView() {
  const [servicios, setServicios] = useStateA([]);
  const [tamanos, setTamanos] = useStateA([]);
  const [loading, setLoading] = useStateA(true);
  const [editing, setEditing] = useStateA(null);
  const [isNew, setIsNew] = useStateA(false);
  const [saving, setSaving] = useStateA(false);
  const [precios, setPrecios] = useStateA({});
  const [savingPrecios, setSavingPrecios] = useStateA(false);

  const loadAll = async () => {
    setLoading(true);
    const [svcsRes, tamsRes, precRes] = await Promise.all([
      window._sb.from('servicios').select('*').order('orden'),
      window._sb.from('tamanos').select('*').order('orden'),
      window._sb.from('precios_servicio_tamano').select('*'),
    ]);
    setServicios(svcsRes.data || []);
    setTamanos(tamsRes.data || []);
    const pmap = {};
    (precRes.data || []).forEach(p => {
      pmap[`${p.servicio_id}__${p.tamano_id}`] = { precio: p.precio, duracion_min: p.duracion_min };
    });
    setPrecios(pmap);
    setLoading(false);
  };

  useEffectA(() => { loadAll(); }, []);

  const openNew = () => { setEditing({ ...SVC_DB_EMPTY }); setIsNew(true); };
  const openEdit = (s) => { setEditing({ ...s }); setIsNew(false); };
  const closeModal = () => { setEditing(null); setIsNew(false); };
  const upd = (k, v) => setEditing(e => ({ ...e, [k]: v }));

  const saveService = async () => {
    setSaving(true);
    if (isNew) {
      const maxOrden = servicios.length > 0 ? Math.max(...servicios.map(s => s.orden)) + 1 : 1;
      const { error } = await window._sb.from('servicios').insert({ ...editing, orden: maxOrden });
      if (error) { alert('Error: ' + error.message); setSaving(false); return; }
    } else {
      const { error } = await window._sb.from('servicios').update(editing).eq('id', editing.id);
      if (error) { alert('Error: ' + error.message); setSaving(false); return; }
    }
    setSaving(false);
    closeModal();
    loadAll();
  };

  const toggleActivo = async (s) => {
    await window._sb.from('servicios').update({ activo: !s.activo }).eq('id', s.id);
    setServicios(prev => prev.map(x => x.id === s.id ? { ...x, activo: !x.activo } : x));
  };

  const moverOrden = async (idx, dir) => {
    const list = [...servicios];
    const swapIdx = idx + dir;
    if (swapIdx < 0 || swapIdx >= list.length) return;
    const a = list[idx], b = list[swapIdx];
    await Promise.all([
      window._sb.from('servicios').update({ orden: b.orden }).eq('id', a.id),
      window._sb.from('servicios').update({ orden: a.orden }).eq('id', b.id),
    ]);
    loadAll();
  };

  const setCell = (sid, tid, field, val) =>
    setPrecios(prev => ({ ...prev, [`${sid}__${tid}`]: { ...(prev[`${sid}__${tid}`] || {}), [field]: val } }));

  const guardarPrecios = async () => {
    setSavingPrecios(true);
    const rows = [];
    servicios.forEach(s => tamanos.forEach(t => {
      const cell = precios[`${s.id}__${t.id}`];
      if (cell && cell.precio !== '' && cell.precio != null) {
        rows.push({
          servicio_id: s.id,
          tamano_id: t.id,
          precio: parseFloat(cell.precio),
          duracion_min: (cell.duracion_min !== '' && cell.duracion_min != null)
            ? parseInt(cell.duracion_min) : (s.duracion_min || 60),
        });
      }
    }));
    const { error } = await window._sb.from('precios_servicio_tamano').upsert(rows, { onConflict: 'servicio_id,tamano_id' });
    setSavingPrecios(false);
    if (error) { alert('Error al guardar precios: ' + error.message); return; }
    alert('Precios y duraciones guardados ✅');
    loadAll();
  };

  if (loading) return <div style={{ padding: 40, color: 'var(--text-muted)' }}>Cargando…</div>;

  return (
    <div>
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">{servicios.length} SERVICIOS</span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Servicios y precios</h1>
        </div>
        <button className="btn btn-primary btn-sm" onClick={openNew}>
          <LCIcons.Plus size={14} /> Nuevo servicio
        </button>
      </div>

      {/* Tabla de servicios */}
      <div className="card" style={{ overflow: 'hidden', marginBottom: 32 }}>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 520 }}>
            <thead>
              <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                <th style={{ ...th, textAlign: 'left' }}>SERVICIO</th>
                <th style={{ ...th, textAlign: 'right' }}>PRECIO BASE</th>
                <th style={{ ...th, textAlign: 'center' }}>DURACIÓN</th>
                <th style={{ ...th, textAlign: 'center' }}>CONSULTAR</th>
                <th style={{ ...th, textAlign: 'center' }}>ACTIVO</th>
                <th style={{ ...th }}></th>
              </tr>
            </thead>
            <tbody>
              {servicios.map((s, idx) => (
                <tr key={s.id} style={{ borderBottom: '1px solid var(--border)', opacity: s.activo ? 1 : 0.5 }}>
                  <td style={td}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{s.nombre}</div>
                  </td>
                  <td style={{ ...td, textAlign: 'right' }}>
                    <span className="mono" style={{ fontWeight: 700 }}>{fmtPesos(s.precio_base)}</span>
                  </td>
                  <td style={{ ...td, textAlign: 'center' }}>
                    <span className="mono" style={{ fontSize: 12, color: 'var(--text-muted)' }}>{s.duracion_min} min</span>
                  </td>
                  <td style={{ ...td, textAlign: 'center' }}>
                    <span style={{ fontSize: 13 }}>{s.consultar ? '📞 Sí' : '—'}</span>
                  </td>
                  <td style={{ ...td, textAlign: 'center' }}>
                    <button className="btn btn-ghost btn-sm" onClick={() => toggleActivo(s)}
                      style={{ color: s.activo ? 'var(--accent)' : 'var(--text-faint)' }}>
                      {s.activo ? '✓ Activo' : 'Inactivo'}
                    </button>
                  </td>
                  <td style={{ ...td, whiteSpace: 'nowrap' }}>
                    <div className="row gap-1">
                      <button className="btn btn-ghost btn-sm" onClick={() => moverOrden(idx, -1)} disabled={idx === 0}>↑</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => moverOrden(idx, 1)} disabled={idx === servicios.length - 1}>↓</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => openEdit(s)}>Editar</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Tabla de precios por tamaño (referencia) */}
      <div className="row between" style={{ marginBottom: 12, flexWrap: 'wrap', gap: 12 }}>
        <h2 style={{ fontSize: 22 }}>Precios y duración por tamaño</h2>
        <button className="btn btn-primary btn-sm" onClick={guardarPrecios} disabled={savingPrecios}>
          {savingPrecios ? 'Guardando…' : 'Guardar precios'}
        </button>
      </div>
      <p style={{ color: 'var(--text-muted)', fontSize: 13, marginBottom: 16 }}>
        Editá el precio (UYU) y la duración (min) de cada servicio según el tamaño. Dejá el precio vacío si ese servicio no aplica a ese tamaño. La duración se usa para calcular la disponibilidad de turnos.
      </p>
      <div className="card" style={{ overflow: 'hidden', marginBottom: 32 }}>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 680 }}>
            <thead>
              <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                <th style={{ ...th, textAlign: 'left' }}>SERVICIO</th>
                {tamanos.map(t => (
                  <th key={t.id} style={{ ...th, textAlign: 'center' }}>{t.nombre.toUpperCase()}<br /><span style={{ fontWeight: 400, color: 'var(--text-faint)', fontSize: 10 }}>$ / min</span></th>
                ))}
              </tr>
            </thead>
            <tbody>
              {servicios.filter(s => s.activo).map(s => (
                <tr key={s.id} style={{ borderBottom: '1px solid var(--border)' }}>
                  <td style={td}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{s.nombre}</div>
                    {s.consultar && <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>desde</div>}
                  </td>
                  {tamanos.map(t => {
                    const cell = precios[`${s.id}__${t.id}`] || {};
                    const inp = { width: 70, textAlign: 'right', padding: '4px 6px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13 };
                    return (
                      <td key={t.id} style={{ ...td, textAlign: 'center' }}>
                        <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 4 }}>
                          <input type="number" min="0" step="50" placeholder="$" value={cell.precio ?? ''}
                            onChange={e => setCell(s.id, t.id, 'precio', e.target.value)} style={inp} />
                          <input type="number" min="0" step="15" placeholder="min" value={cell.duracion_min ?? ''}
                            onChange={e => setCell(s.id, t.id, 'duracion_min', e.target.value)} style={{ ...inp, fontSize: 11, opacity: 0.85 }} />
                        </div>
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Modal editar/agregar */}
      {editing && (
        <div style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000,
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20,
        }} onClick={e => e.target === e.currentTarget && closeModal()}>
          <div className="card" style={{ width: '100%', maxWidth: 480, padding: 32, maxHeight: '90vh', overflowY: 'auto' }}>
            <h2 style={{ fontSize: 24, marginBottom: 24 }}>{isNew ? 'Nuevo servicio' : 'Editar servicio'}</h2>

            <label style={{ display: 'block', marginBottom: 16 }}>
              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', display: 'block', marginBottom: 6 }}>NOMBRE</span>
              <input value={editing.nombre} onChange={e => upd('nombre', e.target.value)}
                placeholder="Ej: Lavado completo" style={{ width: '100%' }} />
            </label>

            <label style={{ display: 'block', marginBottom: 16 }}>
              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', display: 'block', marginBottom: 6 }}>PRECIO BASE ($) — para Auto (Chico)</span>
              <input type="number" min="0" value={editing.precio_base}
                onChange={e => upd('precio_base', parseFloat(e.target.value) || 0)}
                style={{ width: '100%' }} />
            </label>

            <label style={{ display: 'block', marginBottom: 16 }}>
              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', display: 'block', marginBottom: 6 }}>DURACIÓN (min)</span>
              <input type="number" min="5" step="5" value={editing.duracion_min}
                onChange={e => upd('duracion_min', parseInt(e.target.value) || 30)}
                style={{ width: '100%' }} />
            </label>

            <label style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24, cursor: 'pointer' }}>
              <input type="checkbox" checked={!!editing.consultar} onChange={e => upd('consultar', e.target.checked)} />
              <span style={{ fontSize: 14 }}>Solo consulta (redirige a WhatsApp en vez de permitir reserva online)</span>
            </label>

            <div className="row gap-2">
              <button className="btn btn-primary" onClick={saveService} disabled={saving || !editing.nombre}>
                {saving ? 'Guardando…' : (isNew ? 'Agregar' : 'Guardar')}
              </button>
              <button className="btn btn-ghost" onClick={closeModal}>Cancelar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── INVENTARIO ──────────────────────────────────────────────────

const PROD_EMPTY = { nombre: '', unidad: 'unidad', stock_actual: '', stock_minimo: '', costo_unitario: '' };
const UNIDADES = ['unidad', 'litro', 'ml', 'kg', 'g', 'par', 'rollo', 'caja'];

function InventarioView() {
  const [productos, setProductos] = useStateA([]);
  const [loading, setLoading] = useStateA(true);
  const [error, setError] = useStateA(null);

  // Modal producto (crear / editar)
  const [prodModal, setProdModal] = useStateA(null); // null | { ...producto, _isNew }
  const [savingProd, setSavingProd] = useStateA(false);
  const [prodError, setProdError] = useStateA('');

  // Modal movimiento
  const [movModal, setMovModal] = useStateA(null);
  const [movForm, setMovForm] = useStateA({ tipo: 'entrada', cantidad: '', motivo: '' });
  const [savingMov, setSavingMov] = useStateA(false);

  const cargar = useCallbackA(() => {
    setError(null);
    LC_API.listarProductos()
      .then(setProductos)
      .catch(() => setError('No se pudo conectar con el servidor.'))
      .finally(() => setLoading(false));
  }, []);

  useEffectA(() => { cargar(); }, [cargar]);

  const abrirNuevo = () => { setProdModal({ ...PROD_EMPTY, _isNew: true }); setProdError(''); };
  const abrirEditar = (p) => { setProdModal({ ...p, _isNew: false }); setProdError(''); };
  const updProd = (k, v) => setProdModal(p => ({ ...p, [k]: v }));

  const guardarProducto = async () => {
    if (!prodModal.nombre.trim()) { setProdError('El nombre es obligatorio.'); return; }
    setSavingProd(true);
    setProdError('');
    try {
      const body = {
        nombre: prodModal.nombre.trim(),
        unidad: prodModal.unidad,
        stock_minimo: parseFloat(prodModal.stock_minimo) || 0,
        costo_unitario: prodModal.costo_unitario !== '' ? parseFloat(prodModal.costo_unitario) : null,
      };
      if (prodModal._isNew) {
        body.stock_actual = parseFloat(prodModal.stock_actual) || 0;
        await LC_API.crearProducto(body);
      } else {
        await LC_API.actualizarProducto(prodModal.id, body);
      }
      setProdModal(null);
      cargar();
    } catch (e) {
      setProdError(e.message || 'Error al guardar.');
    } finally {
      setSavingProd(false);
    }
  };

  const eliminarProducto = async (p) => {
    if (!confirm(`¿Eliminar "${p.nombre}"? Esta acción no se puede deshacer.`)) return;
    try {
      await LC_API.eliminarProducto(p.id);
      cargar();
    } catch (e) {
      alert('No se pudo eliminar: ' + e.message);
    }
  };

  const registrarMov = async () => {
    setSavingMov(true);
    try {
      await LC_API.registrarMovimiento({ producto_id: movModal.id, ...movForm, cantidad: parseFloat(movForm.cantidad) });
      setMovModal(null);
      cargar();
    } catch (e) {
      alert('Error: ' + e.message);
    } finally {
      setSavingMov(false);
    }
  };

  const alertas = productos.filter(p => p.stock_actual <= p.stock_minimo).length;

  return (
    <div>
      {/* Header */}
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">
            STOCK · {productos.length} ARTÍCULO{productos.length !== 1 ? 'S' : ''}
            {alertas > 0 && <span style={{ color: '#e05252', marginLeft: 10 }}>⚠ {alertas} bajo mínimo</span>}
          </span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Inventario</h1>
        </div>
        <div className="row gap-2">
          <button className="btn btn-ghost btn-sm" onClick={cargar}>↻ Actualizar</button>
          <button className="btn btn-primary btn-sm" onClick={abrirNuevo}>
            <LCIcons.Plus size={14} /> Nuevo artículo
          </button>
        </div>
      </div>

      {/* Tabla */}
      {loading ? <Spinner /> : error ? <Vacío mensaje={error} /> : productos.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '60px 0' }}>
          <div style={{ fontSize: 40, marginBottom: 16 }}>📦</div>
          <div style={{ fontWeight: 600, marginBottom: 8 }}>Sin artículos cargados</div>
          <div style={{ color: 'var(--text-muted)', marginBottom: 24, fontSize: 14 }}>Agrega los productos que usas en el lavadero.</div>
          <button className="btn btn-primary" onClick={abrirNuevo}><LCIcons.Plus size={14} /> Agregar primer artículo</button>
        </div>
      ) : (
        <div className="card" style={{ overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 560 }}>
              <thead>
                <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                  <th style={th}>ARTÍCULO</th>
                  <th style={{ ...th, textAlign: 'right' }}>STOCK ACTUAL</th>
                  <th style={{ ...th, textAlign: 'right' }}>MÍNIMO</th>
                  <th style={{ ...th, textAlign: 'right' }}>COSTO UNIT.</th>
                  <th style={{ ...th, textAlign: 'right' }}></th>
                </tr>
              </thead>
              <tbody>
                {productos.map(p => {
                  const bajo = parseFloat(p.stock_actual) <= parseFloat(p.stock_minimo);
                  return (
                    <tr key={p.id} style={{ borderTop: '1px solid var(--border)', background: bajo ? 'rgba(224,82,82,.04)' : 'transparent' }}>
                      <td style={td}>
                        <div style={{ fontWeight: 600, fontSize: 14 }}>{p.nombre}</div>
                        <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>{p.unidad}</div>
                      </td>
                      <td style={{ ...td, textAlign: 'right' }}>
                        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: bajo ? '#e05252' : 'var(--text)' }}>
                          {p.stock_actual}
                        </span>
                        {bajo && <div className="mono" style={{ fontSize: 10, color: '#e05252' }}>⚠ bajo mínimo</div>}
                      </td>
                      <td style={{ ...td, textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-muted)' }}>
                        {p.stock_minimo} {p.unidad}
                      </td>
                      <td style={{ ...td, textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
                        {p.costo_unitario ? fmtPesos(p.costo_unitario) : '—'}
                      </td>
                      <td style={{ ...td, textAlign: 'right', whiteSpace: 'nowrap' }}>
                        <div className="row gap-1" style={{ justifyContent: 'flex-end' }}>
                          <button className="btn btn-ghost btn-sm" onClick={() => { setMovModal(p); setMovForm({ tipo: 'entrada', cantidad: '', motivo: '' }); }}>
                            ± Stock
                          </button>
                          <button className="btn btn-ghost btn-sm" onClick={() => abrirEditar(p)}>Editar</button>
                          <button className="btn btn-ghost btn-sm" style={{ color: '#e05252' }} onClick={() => eliminarProducto(p)}>✕</button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Modal crear / editar producto */}
      {prodModal && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.55)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
          <div className="card" style={{ padding: 32, width: '100%', maxWidth: 480 }}>
            <div className="row between" style={{ marginBottom: 24 }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20 }}>
                {prodModal._isNew ? 'Nuevo artículo' : `Editar: ${prodModal.nombre}`}
              </h3>
              <button className="btn btn-ghost btn-sm" onClick={() => setProdModal(null)}><LCIcons.Close size={14} /></button>
            </div>

            <div className="col gap-2">
              <div>
                <label>Nombre del artículo</label>
                <input value={prodModal.nombre} onChange={e => updProd('nombre', e.target.value)} placeholder="Ej: Shampoo neutro, Microfibras, Cera…" autoFocus />
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div>
                  <label>Unidad de medida</label>
                  <select value={prodModal.unidad} onChange={e => updProd('unidad', e.target.value)}
                    style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 14 }}>
                    {UNIDADES.map(u => <option key={u} value={u}>{u}</option>)}
                  </select>
                </div>

                {prodModal._isNew && (
                  <div>
                    <label>Stock inicial</label>
                    <input type="number" min="0" step="0.1" value={prodModal.stock_actual}
                      onChange={e => updProd('stock_actual', e.target.value)} placeholder="0" />
                  </div>
                )}

                <div>
                  <label>Stock mínimo</label>
                  <input type="number" min="0" step="0.1" value={prodModal.stock_minimo}
                    onChange={e => updProd('stock_minimo', e.target.value)} placeholder="Alerta cuando llegue a…" />
                </div>

                <div>
                  <label>Costo unitario ($) <span style={{ color: 'var(--text-faint)', fontWeight: 400 }}>opcional</span></label>
                  <input type="number" min="0" step="1" value={prodModal.costo_unitario}
                    onChange={e => updProd('costo_unitario', e.target.value)} placeholder="Precio de compra" />
                </div>
              </div>

              {prodError && (
                <div className="mono" style={{ fontSize: 12, color: '#e05252', padding: '8px 12px', background: 'rgba(224,82,82,.08)', borderRadius: 8 }}>
                  ⚠ {prodError}
                </div>
              )}
            </div>

            <div className="row gap-2" style={{ marginTop: 24, justifyContent: 'flex-end' }}>
              <button className="btn btn-ghost" onClick={() => setProdModal(null)}>Cancelar</button>
              <button className="btn btn-primary" onClick={guardarProducto} disabled={savingProd || !prodModal.nombre.trim()}>
                {savingProd ? '…' : prodModal._isNew ? 'Agregar artículo' : 'Guardar cambios'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal movimiento de stock */}
      {movModal && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.55)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
          <div className="card" style={{ padding: 28, width: '100%', maxWidth: 400 }}>
            <div className="row between" style={{ marginBottom: 4 }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18 }}>Ajustar stock</h3>
              <button className="btn btn-ghost btn-sm" onClick={() => setMovModal(null)}><LCIcons.Close size={14} /></button>
            </div>
            <div className="row gap-2" style={{ marginBottom: 20, alignItems: 'center' }}>
              <span className="mono" style={{ fontSize: 12, color: 'var(--text-muted)' }}>{movModal.nombre}</span>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>
                {movModal.stock_actual} <span className="mono" style={{ fontSize: 11, fontWeight: 400 }}>{movModal.unidad}</span>
              </span>
            </div>

            <div className="col gap-2" style={{ marginBottom: 20 }}>
              <div>
                <label>Tipo de movimiento</label>
                <div className="row gap-2">
                  {[['entrada', '↑ Entrada'], ['salida', '↓ Salida'], ['ajuste', '= Ajuste']].map(([val, lbl]) => (
                    <button key={val} onClick={() => setMovForm(f => ({ ...f, tipo: val }))}
                      style={{
                        flex: 1, padding: '10px 8px', borderRadius: 8, fontSize: 12, fontWeight: 600,
                        background: movForm.tipo === val ? 'var(--accent-soft)' : 'var(--surface)',
                        border: '1px solid', borderColor: movForm.tipo === val ? 'var(--accent)' : 'var(--border)',
                        color: movForm.tipo === val ? 'var(--accent)' : 'var(--text)', cursor: 'pointer',
                      }}>
                      {lbl}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label>
                  {movForm.tipo === 'ajuste' ? `Stock exacto (${movModal.unidad})` : `Cantidad (${movModal.unidad})`}
                </label>
                <input type="number" min="0" step="0.1" value={movForm.cantidad}
                  onChange={e => setMovForm(f => ({ ...f, cantidad: e.target.value }))}
                  placeholder={movForm.tipo === 'ajuste' ? 'Nuevo stock total' : 'Cantidad a registrar'} autoFocus />
              </div>
              <div>
                <label>Motivo <span style={{ color: 'var(--text-faint)', fontWeight: 400 }}>opcional</span></label>
                <input value={movForm.motivo} onChange={e => setMovForm(f => ({ ...f, motivo: e.target.value }))}
                  placeholder="Ej: compra a proveedor, uso en servicio…" />
              </div>
            </div>

            <div className="row gap-2" style={{ justifyContent: 'flex-end' }}>
              <button className="btn btn-ghost" onClick={() => setMovModal(null)}>Cancelar</button>
              <button className="btn btn-primary" onClick={registrarMov} disabled={savingMov || !movForm.cantidad}>
                {savingMov ? '…' : 'Registrar movimiento'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── CAJA ────────────────────────────────────────────────────────

function CajaView() {
  const [data, setData] = useStateA(null);
  const [fecha, setFecha] = useStateA(HOY_ISO);
  const [loading, setLoading] = useStateA(true);
  const [efInicial, setEfInicial] = useStateA('');

  const cargar = useCallbackA(() => {
    setLoading(true);
    LC_API.getCajaHoy(fecha).then(setData).finally(() => setLoading(false));
  }, [fecha]);

  useEffectA(() => { cargar(); }, [cargar]);

  const abrirCaja = async () => {
    await fetch(LC_API_BASE + '/caja/abrir', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ efectivo_inicial: parseFloat(efInicial) || 0 }) });
    cargar();
  };

  const cerrarCaja = async () => {
    const ef = parseFloat(prompt('¿Cuánto efectivo hay en caja?') || '0');
    await fetch(LC_API_BASE + '/caja/cerrar', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ efectivo_final: ef }) });
    cargar();
  };

  return (
    <div>
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">CAJA DEL DÍA</span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Caja</h1>
        </div>
        <div className="row gap-2">
          <input type="date" value={fecha} onChange={e => setFecha(e.target.value)}
            style={{ fontFamily: 'var(--font-mono)', fontSize: 13, padding: '8px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }} />
        </div>
      </div>

      {loading ? <Spinner /> : !data ? <Vacío mensaje="Sin datos" /> : (
        <>
          {!data.arqueo && fecha === HOY_ISO && (
            <div className="card" style={{ padding: 20, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
              <span style={{ fontWeight: 600 }}>Caja no abierta</span>
              <input value={efInicial} onChange={e => setEfInicial(e.target.value)} placeholder="Efectivo inicial" type="number" style={{ width: 160 }} />
              <button className="btn btn-primary btn-sm" onClick={abrirCaja}>Abrir caja</button>
            </div>
          )}

          {data.arqueo && !data.arqueo.cerrado_en && fecha === HOY_ISO && (
            <div className="card" style={{ padding: 20, marginBottom: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <span style={{ fontWeight: 600 }}>Caja abierta</span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 12 }}>Efectivo inicial: {fmtPesos(data.arqueo.efectivo_inicial)}</span>
              </div>
              <button className="btn btn-primary btn-sm" onClick={cerrarCaja}>Cerrar caja</button>
            </div>
          )}

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 14, marginBottom: 24 }}>
            <KPI label="Ingresos" value={fmtPesos(data.total_ingresos)} sub={fecha} accent />
            <KPI label="Gastos" value={fmtPesos(data.total_gastos)} sub={fecha} />
            <KPI label="Neto" value={fmtPesos(data.neto)} sub="ingresos − gastos" />
            {data.arqueo?.diferencia != null && (
              <KPI label="Diferencia caja" value={fmtPesos(data.arqueo.diferencia)} sub={data.arqueo.diferencia >= 0 ? 'sobrante' : 'faltante'} />
            )}
          </div>

          {data.ingresos?.length > 0 && (
            <div className="card" style={{ overflow: 'hidden', marginBottom: 16 }}>
              <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border)' }}><h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16 }}>Ingresos</h3></div>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead><tr style={{ background: 'var(--surface-2)' }}><th style={th}>MÉTODO</th><th style={th}>NOTAS</th><th style={{ ...th, textAlign: 'right' }}>MONTO</th></tr></thead>
                <tbody>
                  {data.ingresos.map((r, i) => (
                    <tr key={i} style={{ borderTop: '1px solid var(--border)' }}>
                      <td style={{ ...td, fontFamily: 'var(--font-mono)', fontSize: 12 }}>{r.metodo_pago}</td>
                      <td style={{ ...td, fontSize: 13, color: 'var(--text-muted)' }}>{r.notas || '—'}</td>
                      <td style={{ ...td, textAlign: 'right', fontFamily: 'var(--font-display)', fontWeight: 700 }}>{fmtPesos(r.monto)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ── GASTOS ──────────────────────────────────────────────────────

function GastosView() {
  const [gastos, setGastos] = useStateA([]);
  const [loading, setLoading] = useStateA(true);
  const [showForm, setShowForm] = useStateA(false);
  const [form, setForm] = useStateA({ descripcion: '', monto: '', categoria_id: 'otros', fecha: HOY_ISO, metodo_pago: 'efectivo' });
  const [saving, setSaving] = useStateA(false);

  const CATS = [
    { id: 'insumos', nombre: 'Insumos' }, { id: 'sueldos', nombre: 'Sueldos' },
    { id: 'servicios', nombre: 'Servicios' }, { id: 'mantenimiento', nombre: 'Mantenimiento' },
    { id: 'otros', nombre: 'Otros' },
  ];

  const cargar = useCallbackA(() => {
    setLoading(true);
    fetch(LC_API_BASE + '/gastos').then(r => r.json()).then(setGastos).finally(() => setLoading(false));
  }, []);

  useEffectA(() => { cargar(); }, [cargar]);

  const guardar = async () => {
    setSaving(true);
    await fetch(LC_API_BASE + '/gastos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...form, monto: parseFloat(form.monto) }) });
    setSaving(false);
    setShowForm(false);
    cargar();
  };

  const total = gastos.reduce((s, g) => s + parseFloat(g.monto || 0), 0);

  return (
    <div>
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">GASTOS</span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Gastos</h1>
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => setShowForm(s => !s)}>
          <LCIcons.Plus size={14} /> Registrar gasto
        </button>
      </div>

      {showForm && (
        <div className="card" style={{ padding: 24, marginBottom: 24 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, marginBottom: 16 }}>Nuevo gasto</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 620 }}>
            <div style={{ gridColumn: '1 / -1' }}>
              <label>Descripción</label>
              <input value={form.descripcion} onChange={e => setForm(f => ({ ...f, descripcion: e.target.value }))} placeholder="Ej: Shampoo neutro × 10L" />
            </div>
            <div><label>Monto (UYU)</label><input type="number" min="0" value={form.monto} onChange={e => setForm(f => ({ ...f, monto: e.target.value }))} /></div>
            <div><label>Categoría</label>
              <select value={form.categoria_id} onChange={e => setForm(f => ({ ...f, categoria_id: e.target.value }))}
                style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }}>
                {CATS.map(c => <option key={c.id} value={c.id}>{c.nombre}</option>)}
              </select>
            </div>
            <div><label>Método de pago</label>
              <select value={form.metodo_pago} onChange={e => setForm(f => ({ ...f, metodo_pago: e.target.value }))}
                style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }}>
                <option value="efectivo">Efectivo</option>
                <option value="debito">Débito</option>
                <option value="credito">Crédito</option>
                <option value="transferencia">Transferencia</option>
              </select>
            </div>
            <div><label>Fecha</label><input type="date" value={form.fecha} onChange={e => setForm(f => ({ ...f, fecha: e.target.value }))} /></div>
          </div>
          <div className="row gap-2" style={{ marginTop: 16 }}>
            <button className="btn btn-primary btn-sm" onClick={guardar} disabled={saving || !form.descripcion || !form.monto}>{saving ? '…' : 'Guardar'}</button>
            <button className="btn btn-ghost btn-sm" onClick={() => setShowForm(false)}>Cancelar</button>
          </div>
        </div>
      )}

      {loading ? <Spinner /> : gastos.length === 0 ? <Vacío mensaje="No hay gastos registrados" /> : (
        <>
          <div style={{ marginBottom: 16 }}>
            <KPI label="Total gastos cargados" value={fmtPesos(total)} sub={`${gastos.length} registros`} />
          </div>
          <div className="card" style={{ overflow: 'hidden' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead><tr style={{ background: 'var(--surface-2)' }}>
                <th style={th}>DESCRIPCIÓN</th><th style={th}>CATEGORÍA</th><th style={th}>FECHA</th><th style={th}>MÉTODO</th><th style={{ ...th, textAlign: 'right' }}>MONTO</th>
              </tr></thead>
              <tbody>
                {gastos.map((g, i) => (
                  <tr key={i} style={{ borderTop: '1px solid var(--border)' }}>
                    <td style={{ ...td, fontWeight: 600, fontSize: 13 }}>{g.descripcion}</td>
                    <td style={{ ...td, fontSize: 12, color: 'var(--text-muted)' }}>{(g.gastos_categorias || {}).nombre || g.categoria_id}</td>
                    <td style={{ ...td, fontFamily: 'var(--font-mono)', fontSize: 12 }}>{g.fecha}</td>
                    <td style={{ ...td, fontFamily: 'var(--font-mono)', fontSize: 12 }}>{g.metodo_pago || '—'}</td>
                    <td style={{ ...td, textAlign: 'right', fontFamily: 'var(--font-display)', fontWeight: 700 }}>{fmtPesos(g.monto)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}

// ── REPORTES ────────────────────────────────────────────────────

function ReportesView() {
  const [mes, setMes] = useStateA(MES_ACTUAL);
  const [rep, setRep] = useStateA(null);
  const [loading, setLoading] = useStateA(true);

  useEffectA(() => {
    setLoading(true);
    LC_API.getReporteMensual(mes).then(setRep).finally(() => setLoading(false));
  }, [mes]);

  const ingresosPorDia = useMemoA(() => {
    if (!rep?.ingresos) return [];
    const map = {};
    rep.ingresos.forEach(r => { map[r.fecha] = (map[r.fecha] || 0) + parseFloat(r.monto); });
    return Object.entries(map).sort(([a], [b]) => a.localeCompare(b));
  }, [rep]);

  const maxIngreso = useMemoA(() => Math.max(...ingresosPorDia.map(([, v]) => v), 1), [ingresosPorDia]);

  return (
    <div>
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">REPORTES</span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Métricas</h1>
        </div>
        <input type="month" value={mes} onChange={e => setMes(e.target.value)}
          style={{ fontFamily: 'var(--font-mono)', fontSize: 13, padding: '8px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }} />
      </div>

      {loading ? <Spinner /> : !rep ? <Vacío /> : (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 14, marginBottom: 24 }}>
            <KPI label="Ingresos" value={fmtPesos(rep.total_ingresos)} sub={mes} accent />
            <KPI label="Gastos" value={fmtPesos(rep.total_gastos)} sub={mes} />
            <KPI label="Comisiones" value={fmtPesos(rep.total_comisiones)} sub="devengadas" />
            <KPI label="Neto" value={fmtPesos(rep.neto)} sub="ing − gas − com" />
          </div>

          {ingresosPorDia.length > 0 && (
            <div className="card" style={{ padding: 28, marginBottom: 16 }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginBottom: 24 }}>Ingresos por día</h3>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 180 }}>
                {ingresosPorDia.map(([fecha, monto]) => (
                  <div key={fecha} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, minWidth: 0 }} title={`${fecha}: ${fmtPesos(monto)}`}>
                    <div style={{ width: '100%', height: `${(monto / maxIngreso) * 100}%`, background: 'var(--accent)', borderRadius: '4px 4px 2px 2px', minHeight: 4 }} />
                    <span className="mono" style={{ fontSize: 9, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }}>
                      {fecha.slice(8)}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ── PROMOCIONES ─────────────────────────────────────────────────

const PROMO_EMPTY = {
  nombre: '', descripcion: '', activa: true,
  visitas_minimas: '', cada_n_visitas: '', servicio_id: '',
  tipo_descuento: 'porcentaje', valor_descuento: '',
  vigente_desde: '', vigente_hasta: '',
};

function PromocionesView() {
  const [promos, setPromos] = useStateA([]);
  const [serviciosDB, setServiciosDB] = useStateA([]);
  const [loading, setLoading] = useStateA(true);
  const [modal, setModal] = useStateA(null);
  const [saving, setSaving] = useStateA(false);
  const [error, setError] = useStateA('');

  const cargar = useCallbackA(() => {
    setLoading(true);
    fetch(LC_API_BASE + '/promociones').then(r => r.json()).then(setPromos).finally(() => setLoading(false));
  }, []);

  useEffectA(() => { cargar(); }, [cargar]);
  useEffectA(() => {
    window._sb.from('servicios').select('id, nombre').eq('activo', true).order('orden').then(r => setServiciosDB(r.data || []));
  }, []);

  const guardar = async () => {
    if (!modal.nombre.trim()) { setError('El nombre es obligatorio.'); return; }
    if (!modal.valor_descuento && modal.tipo_descuento !== 'servicio_gratis') { setError('Ingresá el valor del descuento.'); return; }
    setSaving(true); setError('');
    const body = {
      nombre: modal.nombre.trim(),
      descripcion: modal.descripcion || null,
      activa: modal.activa,
      visitas_minimas: modal.visitas_minimas ? parseInt(modal.visitas_minimas) : null,
      cada_n_visitas: modal.cada_n_visitas ? parseInt(modal.cada_n_visitas) : null,
      servicio_id: modal.servicio_id || null,
      tipo_descuento: modal.tipo_descuento,
      valor_descuento: modal.tipo_descuento === 'servicio_gratis' ? 0 : parseFloat(modal.valor_descuento),
      vigente_desde: modal.vigente_desde || null,
      vigente_hasta: modal.vigente_hasta || null,
    };
    const url = modal._isNew ? '/promociones' : `/promociones/${modal.id}`;
    const method = modal._isNew ? 'POST' : 'PATCH';
    await fetch(LC_API_BASE + url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
    setSaving(false); setModal(null); cargar();
  };

  const toggleActiva = async (p) => {
    await fetch(LC_API_BASE + `/promociones/${p.id}`, {
      method: 'PATCH', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ activa: !p.activa }),
    });
    cargar();
  };

  const eliminar = async (p) => {
    if (!confirm(`¿Eliminar "${p.nombre}"?`)) return;
    await fetch(LC_API_BASE + `/promociones/${p.id}`, { method: 'DELETE' });
    cargar();
  };

  const fmtRegla = (p) => {
    const partes = [];
    if (p.visitas_minimas) partes.push(`Desde visita ${p.visitas_minimas}`);
    if (p.cada_n_visitas) partes.push(`Cada ${p.cada_n_visitas} visitas`);
    if (p.servicio_id) partes.push(serviciosDB.find(s => s.id === p.servicio_id)?.nombre || p.servicio_id);
    return partes.length ? partes.join(' · ') : 'Siempre activa';
  };

  const fmtDescuento = (p) => {
    if (p.tipo_descuento === 'porcentaje') return `${p.valor_descuento}% off`;
    if (p.tipo_descuento === 'monto') return `${fmtPesos(p.valor_descuento)} off`;
    return 'Servicio gratis';
  };

  const upd = (k, v) => setModal(m => ({ ...m, [k]: v }));

  return (
    <div>
      <div className="row between" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <span className="eyebrow">FIDELIZACIÓN</span>
          <h1 style={{ fontSize: 34, marginTop: 8 }}>Promociones</h1>
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => setModal({ ...PROMO_EMPTY, _isNew: true })}>
          <LCIcons.Plus size={14} /> Nueva promoción
        </button>
      </div>

      {loading ? <Spinner /> : promos.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '60px 0' }}>
          <div className="mono" style={{ color: 'var(--text-faint)', fontSize: 12, marginBottom: 16 }}>— Sin promociones configuradas —</div>
          <button className="btn btn-primary btn-sm" onClick={() => setModal({ ...PROMO_EMPTY, _isNew: true })}>Crear primera promoción</button>
        </div>
      ) : (
        <div className="col gap-2">
          {promos.map(p => (
            <div key={p.id} className="card" style={{ padding: 20, borderLeft: `3px solid ${p.activa ? 'var(--accent)' : 'var(--border)'}` }}>
              <div className="row between" style={{ alignItems: 'flex-start', gap: 12 }}>
                <div style={{ flex: 1 }}>
                  <div className="row gap-2" style={{ alignItems: 'center', marginBottom: 6 }}>
                    <span style={{ fontWeight: 700, fontSize: 15 }}>{p.nombre}</span>
                    <span style={{
                      background: p.activa ? 'var(--accent-soft)' : 'var(--surface-2)',
                      color: p.activa ? 'var(--accent)' : 'var(--text-faint)',
                      padding: '2px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600,
                    }}>{p.activa ? 'activa' : 'inactiva'}</span>
                  </div>
                  {p.descripcion && <div style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 8 }}>{p.descripcion}</div>}
                  <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>📋 {fmtRegla(p)}</span>
                    <span className="mono" style={{ fontSize: 11, color: '#4ade80', fontWeight: 600 }}>🎁 {fmtDescuento(p)}</span>
                    {(p.vigente_desde || p.vigente_hasta) && (
                      <span className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>
                        {p.vigente_desde ? `desde ${p.vigente_desde}` : ''}{p.vigente_hasta ? ` hasta ${p.vigente_hasta}` : ''}
                      </span>
                    )}
                  </div>
                </div>
                <div className="row gap-1" style={{ flexShrink: 0 }}>
                  <button className="btn btn-ghost btn-sm" onClick={() => toggleActiva(p)}>{p.activa ? 'Pausar' : 'Activar'}</button>
                  <button className="btn btn-ghost btn-sm" onClick={() => setModal({ ...p, _isNew: false })}>Editar</button>
                  <button className="btn btn-ghost btn-sm" style={{ color: '#e05252' }} onClick={() => eliminar(p)}>✕</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {modal && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
          onClick={e => { if (e.target === e.currentTarget) { setModal(null); setError(''); } }}>
          <div className="card" style={{ width: '100%', maxWidth: 560, padding: 28, maxHeight: '90vh', overflowY: 'auto' }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, marginBottom: 24 }}>
              {modal._isNew ? 'Nueva promoción' : 'Editar promoción'}
            </h3>

            {error && <div style={{ color: '#e05252', fontSize: 13, marginBottom: 12 }}>{error}</div>}

            <div className="col gap-3">
              <div>
                <label>Nombre</label>
                <input value={modal.nombre} onChange={e => upd('nombre', e.target.value)} placeholder="Ej: Premio 5ta visita" autoFocus />
              </div>
              <div>
                <label>Descripción (opcional)</label>
                <input value={modal.descripcion} onChange={e => upd('descripcion', e.target.value)} placeholder="Texto explicativo" />
              </div>

              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 16 }}>
                <div className="eyebrow" style={{ marginBottom: 12, fontSize: 10 }}>REGLA DE ACTIVACIÓN</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div>
                    <label>Visitas mínimas</label>
                    <input type="number" min="1" value={modal.visitas_minimas} onChange={e => upd('visitas_minimas', e.target.value)} placeholder="Ej: 5" />
                  </div>
                  <div>
                    <label>Cada N visitas</label>
                    <input type="number" min="1" value={modal.cada_n_visitas} onChange={e => upd('cada_n_visitas', e.target.value)} placeholder="Ej: 10" />
                  </div>
                </div>
                <div style={{ marginTop: 12 }}>
                  <label>Limitar a servicio (opcional)</label>
                  <select value={modal.servicio_id} onChange={e => upd('servicio_id', e.target.value)}
                    style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }}>
                    <option value="">Cualquier servicio</option>
                    {serviciosDB.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
                  </select>
                </div>
              </div>

              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 16 }}>
                <div className="eyebrow" style={{ marginBottom: 12, fontSize: 10 }}>RECOMPENSA</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div>
                    <label>Tipo de descuento</label>
                    <select value={modal.tipo_descuento} onChange={e => upd('tipo_descuento', e.target.value)}
                      style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)' }}>
                      <option value="porcentaje">% Porcentaje</option>
                      <option value="monto">$ Monto fijo</option>
                      <option value="servicio_gratis">Servicio gratis</option>
                    </select>
                  </div>
                  <div>
                    <label>{modal.tipo_descuento === 'porcentaje' ? 'Porcentaje (%)' : modal.tipo_descuento === 'monto' ? 'Monto (UYU)' : 'Valor'}</label>
                    <input type="number" min="0" value={modal.tipo_descuento === 'servicio_gratis' ? '0' : modal.valor_descuento}
                      onChange={e => upd('valor_descuento', e.target.value)}
                      disabled={modal.tipo_descuento === 'servicio_gratis'}
                      placeholder={modal.tipo_descuento === 'porcentaje' ? '20' : '500'} />
                  </div>
                </div>
              </div>

              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 16 }}>
                <div className="eyebrow" style={{ marginBottom: 12, fontSize: 10 }}>VIGENCIA (OPCIONAL)</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div><label>Desde</label><input type="date" value={modal.vigente_desde} onChange={e => upd('vigente_desde', e.target.value)} /></div>
                  <div><label>Hasta</label><input type="date" value={modal.vigente_hasta} onChange={e => upd('vigente_hasta', e.target.value)} /></div>
                </div>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <input type="checkbox" id="promo-activa" checked={modal.activa} onChange={e => upd('activa', e.target.checked)} style={{ width: 'auto' }} />
                <label htmlFor="promo-activa" style={{ cursor: 'pointer', fontWeight: 500 }}>Promoción activa</label>
              </div>
            </div>

            <div className="row gap-2" style={{ marginTop: 24 }}>
              <button className="btn btn-primary" onClick={guardar} disabled={saving}>
                {saving ? '…' : modal._isNew ? 'Crear promoción' : 'Guardar cambios'}
              </button>
              <button className="btn btn-ghost" onClick={() => { setModal(null); setError(''); }}>Cancelar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.LCAdmin = Admin;