import { useCollection, useIdentity, useNotify } from '@deplixo/sdk';
import Header from './components/Header.jsx';
import Shop from './components/Shop.jsx';
import Cart from './components/Cart.jsx';
import Orders from './components/Orders.jsx';
import About from './components/About.jsx';

const SEED_PRODUCTS = [
  { id: 'p1', name: 'Bolso de Macramé', price: 45, category: 'Textil', artisan: 'Lucía Mendoza', emoji: '👜', desc: 'Tejido a mano con algodón natural. Perfecto para el día a día.' },
  { id: 'p2', name: 'Taza de Cerámica Rústica', price: 18, category: 'Cerámica', artisan: 'Mateo Rivas', emoji: '☕', desc: 'Hecha en torno con esmalte artesanal color terracota.' },
  { id: 'p3', name: 'Jabón de Lavanda', price: 8, category: 'Belleza', artisan: 'Ana Flores', emoji: '🧼', desc: 'Jabón natural con aceites esenciales de lavanda francesa.' },
  { id: 'p4', name: 'Vela de Soya Aromática', price: 22, category: 'Hogar', artisan: 'Carla Núñez', emoji: '🕯️', desc: 'Cera de soya 100% natural, aroma a vainilla y canela.' },
  { id: 'p5', name: 'Aretes de Plata Martillada', price: 35, category: 'Joyería', artisan: 'Diego Vargas', emoji: '💎', desc: 'Plata 925 trabajada a mano con técnica tradicional.' },
  { id: 'p6', name: 'Cuaderno de Cuero', price: 28, category: 'Papelería', artisan: 'Rosa Herrera', emoji: '📓', desc: 'Encuadernado a mano con cuero genuino y papel reciclado.' },
  { id: 'p7', name: 'Manta de Lana', price: 85, category: 'Textil', artisan: 'Lucía Mendoza', emoji: '🧶', desc: 'Lana de oveja hilada y tejida en telar tradicional.' },
  { id: 'p8', name: 'Maceta de Barro', price: 24, category: 'Cerámica', artisan: 'Mateo Rivas', emoji: '🪴', desc: 'Barro cocido con acabado mate, ideal para suculentas.' },
  { id: 'p9', name: 'Collar de Semillas', price: 19, category: 'Joyería', artisan: 'Diego Vargas', emoji: '📿', desc: 'Semillas naturales ensartadas con hilo encerado.' },
  { id: 'p10', name: 'Tabla de Cortar de Madera', price: 32, category: 'Hogar', artisan: 'Pablo Luna', emoji: '🪵', desc: 'Madera de olivo tallada y aceitada a mano.' },
  { id: 'p11', name: 'Bálsamo Labial de Miel', price: 6, category: 'Belleza', artisan: 'Ana Flores', emoji: '🍯', desc: 'Miel orgánica y cera de abeja local.' },
  { id: 'p12', name: 'Agenda Floral 2025', price: 24, category: 'Papelería', artisan: 'Rosa Herrera', emoji: '🌸', desc: 'Portada ilustrada a mano, 200 páginas en papel crema.' },
];

const CATEGORIES = ['Todo', 'Textil', 'Cerámica', 'Joyería', 'Hogar', 'Belleza', 'Papelería'];

function App() {
  const [view, setView] = useState('shop');
  const [category, setCategory] = useState('Todo');
  const [cart, setCart] = useState([]);
  const { user } = useIdentity();
  const { items: allOrders, add: addOrder } = useCollection('orders');
  const notify = useNotify();

  const myOrders = (allOrders || []).filter((o) => o.author?.id === user?.id);

  const addToCart = (product) => {
    setCart((prev) => {
      const existing = prev.find((i) => i.id === product.id);
      if (existing) {
        return prev.map((i) => (i.id === product.id ? { ...i, qty: i.qty + 1 } : i));
      }
      return [...prev, { ...product, qty: 1 }];
    });
    if (typeof notify === 'function') {
      try { notify(`${product.name} añadido al carrito`); } catch (e) {}
    }
  };

  const updateQty = (id, qty) => {
    if (qty <= 0) {
      setCart((prev) => prev.filter((i) => i.id !== id));
    } else {
      setCart((prev) => prev.map((i) => (i.id === id ? { ...i, qty } : i)));
    }
  };

  const removeFromCart = (id) => {
    setCart((prev) => prev.filter((i) => i.id !== id));
  };

  const checkout = async (shipping) => {
    const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
    await addOrder({
      items: cart,
      total,
      shipping,
      status: 'Confirmado',
      placedAt: new Date().toISOString(),
    });
    setCart([]);
    setView('orders');
  };

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  return (
    <div className="app">
      <Header view={view} setView={setView} cartCount={cartCount} />
      <main className="main">
        {view === 'shop' && (
          <Shop
            products={SEED_PRODUCTS}
            categories={CATEGORIES}
            category={category}
            setCategory={setCategory}
            addToCart={addToCart}
          />
        )}
        {view === 'cart' && (
          <Cart
            cart={cart}
            updateQty={updateQty}
            removeFromCart={removeFromCart}
            checkout={checkout}
            setView={setView}
          />
        )}
        {view === 'orders' && <Orders orders={myOrders} />}
        {view === 'about' && <About />}
      </main>
      <footer className="footer">
        <p>MAKITA · Hecho con cariño por manos artesanas 🤍</p>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);