function Tiendas() {
  const toast = useToast();
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editando, setEditando] = React.useState(null);
  const [eliminando, setEliminando] = React.useState(null);
  const [importando, setImportando] = React.useState(false);
  const [textoImport, setTextoImport] = React.useState('');

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try { setRows((await Api.get('/tiendas')).data); } catch (err) { toast.error(err.message); } finally { setLoading(false); }
  }, []);

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

  const guardar = async (form) => {
    try {
      if (form.id) await Api.put(`/tiendas/${form.id}`, form);
      else await Api.post('/tiendas', form);
      toast.success('Tienda guardada');
      setEditando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  const eliminar = async () => {
    try {
      await Api.del(`/tiendas/${eliminando.id}`);
      toast.success('Tienda eliminada');
      setEliminando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  const importarMasivo = async () => {
    const nombres = textoImport.split('\n').map((s) => s.trim()).filter(Boolean);
    if (!nombres.length) return;
    try {
      const res = await Api.post('/tiendas/importar', { nombres });
      toast.success(`${res.creadas} tienda(s) nueva(s) importadas`);
      setImportando(false);
      setTextoImport('');
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  return (
    <div>
      <div className="panel">
        <div className="panel__header">
          <div className="panel__title">Tiendas</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost btn-sm" onClick={() => setImportando(true)}>Importar varias</button>
            <button className="btn btn-primary btn-sm" onClick={() => setEditando({})}><IconPlus size={14} /> Nueva tienda</button>
          </div>
        </div>
        {loading ? <p className="text-muted">Cargando…</p> : (
          <DataTable
            columns={[
              { key: 'nombre', header: 'Nombre' },
              { key: 'estado', header: 'Estado', render: (r) => <span className="tag-chip">{r.estado}</span> },
              { key: 'acciones', header: '', render: (r) => (
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="icon-btn" onClick={() => setEditando(r)}><IconEdit size={14} /></button>
                  <button className="icon-btn" onClick={() => setEliminando(r)}><IconTrash size={14} /></button>
                </div>
              ) },
            ]}
            rows={rows}
            emptyTitle="Sin tiendas registradas"
            emptyHint="Crea tus tiendas para poder seleccionarlas al registrar salidas."
          />
        )}
      </div>

      {editando && <TiendaModal tienda={editando} onClose={() => setEditando(null)} onSave={guardar} />}

      {importando && (
        <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && setImportando(false)}>
          <div className="modal-card">
            <div className="modal-card__header">
              <div className="modal-card__title">Importar tiendas</div>
              <button className="icon-btn" onClick={() => setImportando(false)}><IconX size={16} /></button>
            </div>
            <div className="modal-card__body">
              <div className="field">
                <label>Un nombre de tienda por línea</label>
                <textarea rows={8} value={textoImport} onChange={(e) => setTextoImport(e.target.value)} placeholder={'Tienda Lima Norte\nTienda San Isidro\nTienda Ate'} />
              </div>
            </div>
            <div className="modal-card__footer">
              <button className="btn btn-ghost" onClick={() => setImportando(false)}>Cancelar</button>
              <button className="btn btn-primary" onClick={importarMasivo}>Importar</button>
            </div>
          </div>
        </div>
      )}

      <ConfirmDialog
        open={!!eliminando}
        title="Eliminar tienda"
        message={`¿Eliminar "${eliminando?.nombre}"? Si tiene movimientos registrados, no podrá eliminarse.`}
        danger
        confirmLabel="Eliminar"
        onCancel={() => setEliminando(null)}
        onConfirm={eliminar}
      />
    </div>
  );
}

function TiendaModal({ tienda, onClose, onSave }) {
  const [form, setForm] = React.useState({ id: tienda.id, nombre: tienda.nombre || '', estado: tienda.estado || 'ACTIVO' });
  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card">
        <div className="modal-card__header">
          <div className="modal-card__title">{tienda.id ? 'Editar tienda' : 'Nueva tienda'}</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body">
          <div className="field">
            <label>Nombre</label>
            <input value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} autoFocus />
          </div>
          {tienda.id && (
            <div className="field">
              <label>Estado</label>
              <select value={form.estado} onChange={(e) => setForm({ ...form, estado: e.target.value })}>
                <option value="ACTIVO">Activa</option>
                <option value="INACTIVO">Inactiva</option>
              </select>
            </div>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => onSave(form)} disabled={!form.nombre.trim()}>Guardar</button>
        </div>
      </div>
    </div>
  );
}