import { useState } from 'react';

function Contador() {
  const [cuenta, setCuenta] = useState(0);
  //     ↑ valor  ↑ setter    ↑ valor inicial

  return (
    <div>
      <p>Clicks: {cuenta}</p>
      <button onClick={() => setCuenta(cuenta + 1)}>
        +1
      </button>
    </div>
  );
}

// MAL — React no se entera, no redibuja
let cuenta = 0;
cuenta++;           // ← invisible para React

// BIEN — React redibuja con el nuevo valor
setCuenta(cuenta + 1);

// Ejemplo — cuenta empieza en 0
function handler() {
  setCuenta(cuenta + 1); // programa: "pon el estado a 0+1 = 1"
  setCuenta(cuenta + 1); // programa: "pon el estado a 0+1 = 1"
  setCuenta(cuenta + 1); // programa: "pon el estado a 0+1 = 1"
  // Resultado: cuenta = 1, no 3
  // 'cuenta' es siempre 0 durante todo este render
}

// Con función — acumula correctamente
function handler() {
  setCuenta(prev => prev + 1); // prev=0 → 1
  setCuenta(prev => prev + 1); // prev=1 → 2
  setCuenta(prev => prev + 1); // prev=2 → 3
  // Resultado: cuenta = 3 ✓
}

// Regla práctica:
// · El nuevo valor no depende del anterior → setCuenta(5)
// · El nuevo valor SÍ depende del anterior → setCuenta(prev => prev + 1)
// · Modificar objetos/arrays               → setCuenta(prev => ({ ...prev, campo: nuevo }))

// Ejemplo real — toggle
setExpandido(prev => !prev);

// Ejemplo real — añadir a array
setItems(prev => [...prev, nuevoItem]);

const [usuario, setUsuario] = useState({ nombre: 'Ana', edad: 25, ciudad: 'Valencia' });

// MAL — muta el objeto existente, React no redibuja
usuario.edad = 26;
setUsuario(usuario);

// BIEN — crea un objeto nuevo con spread
setUsuario({ ...usuario, edad: 26 });
//          ↑ copia todos los campos, luego sobreescribe solo 'edad'

// Con objeto anidado — hay que hacer spread en cada nivel
const [form, setForm] = useState({ nombre: 'Ana', direccion: { ciudad: 'Valencia', cp: '46001' } });
setForm({ ...form, direccion: { ...form.direccion, ciudad: 'Madrid' } });

const [items, setItems] = useState(['Wifi', 'Parking', 'Piscina']);

// ✓ PERMITIDOS — crean array nuevo
setItems([...items, 'Gym']);               // añadir al final
setItems(['Nuevo', ...items]);             // añadir al principio
setItems(items.filter(i => i !== 'Parking')); // eliminar
setItems(items.map(i => i === 'Wifi' ? 'WiFi 6' : i)); // editar
setItems([...items].sort());              // sort (sobre copia)

// ✗ PROHIBIDOS — mutan el array original
items.push('Gym');          // ← React no redibuja
items.splice(1, 1);         // ← React no redibuja
items.sort();               // ← muta in-place
items.reverse();            // ← muta in-place

// onClick — click
<button onClick={() => setCuenta(cuenta + 1)}>+1</button>

// onClick con argumento
<button onClick={() => eliminar(item.id)}>Borrar</button>

// onChange — input (e.target.value = texto escrito)
<input onChange={(e) => setTexto(e.target.value)} value={texto} />

// onSubmit — formulario (siempre preventDefault)
<form onSubmit={(e) => {
  e.preventDefault();   // evita recarga de página
  enviar(texto);
}}>

// Pasar el manejador como prop (event handlers como props)
function Boton({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}
<Boton onClick={() => setCuenta(0)}>Reset</Boton>

// MAL — nombreCompleto es derivado, no estado propio
const [nombre, setNombre] = useState('Ana');
const [apellido, setApellido] = useState('García');
const [nombreCompleto, setNombreCompleto] = useState('Ana García'); // ← innecesario

// BIEN — se calcula en el render, siempre sincronizado
const [nombre, setNombre] = useState('Ana');
const [apellido, setApellido] = useState('García');
const nombreCompleto = `${nombre} ${apellido}`; // ← calculado, no estado

// Otros ejemplos de estado derivado (no usar useState):
const totalItems = carrito.length;          // derivado de carrito
const precioTotal = items.reduce(...);      // derivado de items
const itemsFiltrados = items.filter(...);   // derivado de items + filtro

// 1. Agrupa lo que siempre cambia junto
// MAL:
const [x, setX] = useState(0);
const [y, setY] = useState(0);
// BIEN:
const [pos, setPos] = useState({ x: 0, y: 0 });

// 2. Evita el estado contradictorio
// MAL: cargando=true y error="algo" al mismo tiempo → imposible en prod
// BIEN: un solo campo 'status': 'idle' | 'loading' | 'success' | 'error'

// 3. Evita duplicar datos del padre
// MAL: recibir usuario como prop y también guardarlo en estado propio
// BIEN: usar directamente la prop

// 4. Evita anidado profundo — aplana la estructura
// MAL: { pais: { ciudad: { barrio: { calle: '...' } } } }
// BIEN: { pais: 'ES', ciudad: 'Valencia', barrio: 'Ruzafa', calle: '...' }

// Dos paneles que se sincronizan — solo uno abierto a la vez
function Acordeon() {
  const [abierto, setAbierto] = useState(null); // ← estado en el padre

  return (
    <>
      <Panel titulo="Servicios" esActivo={abierto === 0} onToggle={() => setAbierto(0)} />
      <Panel titulo="Precios"   esActivo={abierto === 1} onToggle={() => setAbierto(1)} />
    </>
  );
}

// Panel no tiene estado propio — recibe todo del padre
function Panel({ titulo, esActivo, onToggle }) {
  return (
    <div>
      <button onClick={onToggle}>{titulo}</button>
      {esActivo && <div>Contenido...</div>}
    </div>
  );
}

// 1. Crear el contexto
const LocaleContext = createContext('es');

// 2. Proveedor — envuelve el árbol donde quieres que esté disponible
function App() {
  const [locale, setLocale] = useState('es');
  return (
    <LocaleContext.Provider value={locale}>
      <Pagina />   {/* Pagina → Seccion → Componente → ... */}
    </LocaleContext.Provider>
  );
}

// 3. Consumir en cualquier descendiente (sin pasar props)
function BotonIdioma() {
  const locale = useContext(LocaleContext);
  return <span>Idioma: {locale}</span>;
}

// El reducer — función pura: (estadoActual, acción) → nuevoEstado
function reducer(state, action) {
  switch (action.type) {
    case 'añadir':   return [...state, action.item];
    case 'eliminar': return state.filter(i => i.id !== action.id);
    case 'limpiar':  return [];
    default: throw new Error(`Acción desconocida: ${action.type}`);
  }
}

function Lista() {
  const [items, dispatch] = useReducer(reducer, []);

  return (
    <>
      <button onClick={() => dispatch({ type: 'añadir', item: nuevoItem })}>
        Añadir
      </button>
      <button onClick={() => dispatch({ type: 'limpiar' })}>
        Limpiar todo
      </button>
    </>
  );
}