import React, { useEffect, useRef, useState } from 'react'
import { createRoot } from 'react-dom/client'
import {
  ArrowLeft, ArrowRight, Check, ChevronRight, ClipboardList, Edit3,
  Heart, LayoutDashboard, Menu, Package, Palette, Plus, Search, Settings,
  ShoppingBag, Sparkles, Trash2, X
} from 'lucide-react'
import './styles.css'
import { api, API_URL, AUTH_EXPIRED_EVENT } from './api'

const initialCategories = [
  { id: 'canecas', name: 'Canecas', emoji: '☕', color: '#ffe8d8' },
  { id: 'garrafas', name: 'Garrafas', emoji: '🧴', color: '#e4efff' },
  { id: 'imas', name: 'Ímãs de geladeira', emoji: '🧲', color: '#e4f6e9' },
  { id: 'kits', name: 'Kits presente', emoji: '🎁', color: '#f2e8ff' }
]

const initialProducts = [
  { id: 'caneca-classica', category: 'canecas', name: 'Caneca cerâmica clássica', description: 'Caneca branca de cerâmica, impressão frente e verso.', price: 39.9, oldPrice: 49.9, image: 'https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?auto=format&fit=crop&w=900&q=85', badge: 'Mais vendida' },
  { id: 'caneca-colorida', category: 'canecas', name: 'Caneca com interior colorido', description: 'Escolha sua cor favorita e crie algo único.', price: 44.9, image: 'https://images.unsplash.com/photo-1577937927133-66ef06acdf18?auto=format&fit=crop&w=900&q=85', badge: 'Novidade' },
  { id: 'garrafa-termica', category: 'garrafas', name: 'Garrafa térmica 500ml', description: 'Aço inoxidável, mantém a bebida na temperatura ideal.', price: 79.9, oldPrice: 99.9, image: 'https://images.unsplash.com/photo-1602143407151-7111542de6e8?auto=format&fit=crop&w=900&q=85', badge: 'Oferta' },
  { id: 'ima-polaroid', category: 'imas', name: 'Ímã estilo polaroid', description: 'Transforme seus melhores momentos em lembranças.', price: 12.9, image: 'https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=900&q=85', badge: '' },
  { id: 'kit-afeto', category: 'kits', name: 'Kit afeto personalizado', description: 'Caneca, cartão e embalagem especial para presentear.', price: 89.9, image: 'https://images.unsplash.com/photo-1513883049090-d0b7439799bf?auto=format&fit=crop&w=900&q=85', badge: 'Presenteie' }
]

const initialArtworks = [
  { id: 'amor', name: 'Amor em cada detalhe', category: 'Românticas', color: '#f9d4db', accent: '#e86d83', texts: ['Meu amor', 'é você'] },
  { id: 'minimal', name: 'Frase minimalista', category: 'Frases', color: '#e7e2d7', accent: '#2c2c2c', texts: ['Faça', 'acontecer'] },
  { id: 'sun', name: 'Good vibes', category: 'Alegres', color: '#ffe5a6', accent: '#ef8b37', texts: ['Good', 'vibes'] },
  { id: 'family', name: 'Família', category: 'Afeto', color: '#d9eddf', accent: '#4f8f69', texts: ['Lar é onde', 'o amor está'] }
]
const TEXT_FIELD_IDS = ['texto_1', 'texto_2', 'texto_3', 'texto_4']
const LEGACY_TEXT_FIELD_IDS = ['texto-superior', 'frase-principal', 'frase-secundaria', 'nome-personalizavel']
const FONT_OPTIONS = ['Georgia', 'Licorice', 'Indie Flower', 'Playfair Display', 'DM Sans']
const FONT_SIZES = [24, 32, 40, 48, 56, 64, 72, 84, 96, 108]

function textFieldIndex(id, fields) {
  const configuredIndex = fields.findIndex(field => field.id === id)
  if (configuredIndex >= 0) return configuredIndex
  return TEXT_FIELD_IDS.indexOf(id) >= 0
    ? TEXT_FIELD_IDS.indexOf(id)
    : LEGACY_TEXT_FIELD_IDS.indexOf(id)
}

function load(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) || fallback } catch { return fallback }
}

function normalizeProduct(product) {
  if (!product) return null
  const image = product.image || product.image_url
  return {
    ...product,
    category: product.category || product.category_slug || product.category_name,
    price: Number(product.price),
    oldPrice: product.oldPrice === undefined ? (product.old_price === null ? null : Number(product.old_price)) : Number(product.oldPrice),
    active: product.active === 0 || product.active === false ? false : true,
    image: image?.startsWith('/uploads/') ? `${API_URL.replace(/\/api$/, '')}${image}` : image,
    art_width_cm: Number(product.art_width_cm) || null,
    art_height_cm: Number(product.art_height_cm) || null
    ,category_ids: product.category_ids || (product.category_id ? [product.category_id] : [])
  }
}

function normalizeArtwork(artwork) {
  const fields = artwork.text_fields
  const texts = Array.isArray(fields) ? fields.map(field => field.default || '').slice(0, 4) : []
  const fileUrl = artwork.file_url
  return { ...artwork, textFields: Array.isArray(fields) ? fields : [], file_url: fileUrl?.startsWith('/uploads/') ? `${API_URL.replace(/\/api$/, '')}${fileUrl}` : fileUrl, color: artwork.color || '#e8e2da', accent: artwork.accent || '#423b36', texts: texts.length ? texts : ['', '', '', ''], width_cm: Number(artwork.width_cm) || null, height_cm: Number(artwork.height_cm) || null }
}

function App() {
  const [page, setPage] = useState('home')
  const [products, setProducts] = useState(() => load('fp-products', initialProducts))
  const [categories, setCategories] = useState(() => load('fp-categories', initialCategories))
  const [artworks, setArtworks] = useState(() => load('fp-artworks', initialArtworks))
  const [orders, setOrders] = useState(() => load('fp-orders', []))
  const [cart, setCart] = useState(() => load('fp-cart', []))
  const [selectedProduct, setSelectedProduct] = useState(null)
  const [selectedArtwork, setSelectedArtwork] = useState(null)
  const [search, setSearch] = useState('')
  const [adminOpen, setAdminOpen] = useState(false)

  useEffect(() => localStorage.setItem('fp-orders', JSON.stringify(orders)), [orders])
  useEffect(() => localStorage.setItem('fp-cart', JSON.stringify(cart)), [cart])
  useEffect(() => {
    Promise.all([api.getProducts(), api.getCategories(), api.getArtworks()])
      .then(([remoteProducts, remoteCategories, remoteArtworks]) => {
        if (remoteProducts.length) setProducts(remoteProducts.map(normalizeProduct))
        if (remoteCategories.length) setCategories(remoteCategories)
        if (remoteArtworks.length) setArtworks(remoteArtworks.map(normalizeArtwork))
      })
      .catch(error => console.warn('API indisponível; usando catálogo local:', error.message))
  }, [])

  const navigate = (target) => { setPage(target); setAdminOpen(false); window.scrollTo(0, 0) }
  const openProduct = (product) => {
    const compatible = product.art_width_cm && product.art_height_cm
      ? artworks.filter(artwork => artwork.width_cm === Number(product.art_width_cm) && artwork.height_cm === Number(product.art_height_cm))
      : artworks
    setSelectedProduct(product); setSelectedArtwork(compatible[0] || null); navigate('product')
  }
  const addToCart = (item) => setCart(current => [...current, { ...item, cartId: Date.now() }])
  const removeFromCart = (id) => setCart(current => current.filter(item => item.cartId !== id))
  const submitOrder = async (customer) => {
    try {
      const orderItems = cart.map(item => {
        const numericId = Number(item.productId)
        const catalogProduct = Number.isInteger(numericId) && numericId > 0
          ? products.find(product => Number(product.id) === numericId)
          : products.find(product => product.name === item.name && Number.isInteger(Number(product.id)))
        if (!catalogProduct) throw new Error(`O produto "${item.name}" não está disponível no catálogo atual. Remova-o e adicione novamente.`)
        return {
          product_id: Number(catalogProduct.id),
          artwork_name: item.artwork,
          custom_text: item.customText,
          artwork_svg: item.artworkSvg || null,
          quantity: item.quantity
        }
      })
      const order = await api.createOrder({
        customer_name: customer.name, customer_email: customer.email, customer_phone: customer.phone,
        delivery_address: customer.address,
        items: orderItems
      })
      setOrders(current => [{ id: order.order_code, date: new Date().toLocaleDateString('pt-BR'), status: 'Recebido', customer, items: cart, total: order.total }, ...current])
      setCart([]); navigate('success')
    } catch (error) {
      window.alert(`Não foi possível enviar o pedido: ${error.message}`)
    }
  }
  const filteredProducts = products.filter(p => `${p.name} ${p.description}`.toLowerCase().includes(search.toLowerCase()))

  return <div className="app">
    <Header page={page} navigate={navigate} cartCount={cart.length} search={search} setSearch={setSearch} onAdmin={() => setAdminOpen(true)} />
    {adminOpen
      ? <Admin products={products} setProducts={setProducts} categories={categories} setCategories={setCategories} artworks={artworks} setArtworks={setArtworks} orders={orders} close={() => setAdminOpen(false)} />
      : <>
        {page === 'home' && <Home products={products} categories={categories} navigate={navigate} openProduct={openProduct} />}
        {page === 'categories' && <Catalog products={filteredProducts} categories={categories} navigate={navigate} openProduct={openProduct} />}
        {page === 'product' && selectedProduct && <Product product={selectedProduct} artworks={artworks} selectedArtwork={selectedArtwork} setSelectedArtwork={setSelectedArtwork} navigate={navigate} addToCart={addToCart} />}
        {page === 'create' && selectedProduct && <Creator product={selectedProduct} artwork={selectedArtwork || artworks[0]} addToCart={addToCart} navigate={navigate} />}
        {page === 'cart' && <Checkout cart={cart} removeFromCart={removeFromCart} submitOrder={submitOrder} navigate={navigate} />}
        {page === 'success' && <Success navigate={navigate} />}
      </>}
    <Footer />
  </div>
}

function Header({ page, navigate, cartCount, search, setSearch, onAdmin }) {
  return <header className="header">
    <div className="header-inner">
      <button className="brand" onClick={() => navigate('home')}><img src="/assets/src/logo-bridix-light.svg" alt="Bridix" className="brand-logo" /></button>
      <nav><button className={page === 'home' ? 'active' : ''} onClick={() => navigate('home')}>Início</button><button className={page === 'categories' ? 'active' : ''} onClick={() => navigate('categories')}>Categorias</button><button onClick={() => navigate('categories')}>Crie do seu jeito <Sparkles size={14} /></button></nav>
      <div className="header-actions"><label className="search"><Search size={17} /><input value={search} onChange={e => setSearch(e.target.value)} placeholder="Buscar produtos" /></label><button className="icon-button"><Heart size={19} /></button><button className="cart-button" onClick={() => navigate('cart')}><ShoppingBag size={19} /><b>{cartCount}</b></button><button className="admin-trigger" onClick={onAdmin}><Settings size={17} /></button></div>
      <button className="mobile-menu"><Menu /></button>
    </div>
  </header>
}

function Home({ products, categories, navigate, openProduct }) {
  const heroSlides = [
    {
      id: 'bridix-1',
      eyebrow: 'Bridix personalizados',
      title: 'Peças únicas',
      accent: 'com identidade.',
      text: 'Crie presentes, lembranças e detalhes exclusivos que refletem sua personalidade em cada produto.',
      cta: 'Explorar coleção',
      badge: 'Bridix',
      accentIcon: '☕',
      cardText: 'Seu presente,\ndo seu jeito.',
      custom: 'feito para você ♡'
    },
    {
      id: 'bridix-2',
      eyebrow: 'Presentes com sentimento',
      title: 'Tudo com alma',
      accent: 'e história.',
      text: 'Personalize canecas, garrafas e itens especiais para comemorar qualquer momento com charme e exclusividade.',
      cta: 'Ver produtos',
      badge: 'Mais vendidos',
      accentIcon: '🎁',
      cardText: 'Presente com\nmemória.',
      custom: 'feito para celebrar ♡'
    },
    {
      id: 'bridix-3',
      eyebrow: 'Crie do seu jeito',
      title: 'Seu design',
      accent: 'na sua cara.',
      text: 'Escolha a arte, ajuste os textos e transforme cada item em uma peça que surpreende e emociona.',
      cta: 'Personalizar agora',
      badge: 'Custom',
      accentIcon: '✨',
      cardText: 'Seu estilo\nem cada detalhe.',
      custom: 'feito para você ♡'
    }
  ]

  const [currentSlide, setCurrentSlide] = useState(0)
  const [dragOffset, setDragOffset] = useState(0)
  const [dragging, setDragging] = useState(false)
  const dragStartX = useRef(0)

  const goToSlide = (nextIndex) => {
    setCurrentSlide((nextIndex + heroSlides.length) % heroSlides.length)
  }

  const handlePointerDown = (event) => {
    dragStartX.current = event.clientX
    setDragging(true)
  }

  const handlePointerMove = (event) => {
    if (!dragging) return
    setDragOffset(event.clientX - dragStartX.current)
  }

  const handlePointerEnd = () => {
    if (!dragging) return

    if (dragOffset < -60) {
      goToSlide(currentSlide + 1)
    } else if (dragOffset > 60) {
      goToSlide(currentSlide - 1)
    }

    setDragOffset(0)
    setDragging(false)
  }

  return <main>
    <section className="hero" aria-label="Banners promocionais da Bridix">
      <div className="hero-carousel" onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerEnd} onPointerLeave={handlePointerEnd}>
        <div className="hero-track" style={{ transform: `translateX(calc(${currentSlide * -100}% + ${dragOffset}px))`, transition: dragging ? 'none' : 'transform 0.35s ease' }}>
          {heroSlides.map(slide => <article key={slide.id} className="hero-slide">
            <div className="hero-copy">
              <span className="eyebrow">{slide.eyebrow}</span>
              <h1>{slide.title}<br /><em>{slide.accent}</em></h1>
              <p>{slide.text}</p>
              <button className="primary" onClick={() => navigate('categories')}>{slide.cta} <ArrowRight size={17} /></button>
              <div className="hero-proof">
                <div className="avatars"><span>B</span><span>R</span><span>I</span></div>
                <span><strong>+2.500</strong> pedidos personalizados<br />entregues com estilo</span>
              </div>
            </div>
            <div className="hero-art">
              <div className="blob" />
              <div className="hero-card card-back">{slide.badge}</div>
              <div className="hero-card card-front"><span>{slide.accentIcon}</span><strong>{slide.cardText}</strong><small>{slide.custom}</small></div>
              <span className="doodle doodle-one">✦</span>
              <span className="doodle doodle-two">♡</span>
            </div>
          </article>) }
        </div>
      </div>
      <div className="hero-dots" aria-label="Navegação do carrossel">
        {heroSlides.map((slide, index) => <button key={slide.id} className={index === currentSlide ? 'active' : ''} onClick={() => goToSlide(index)} aria-label={`Ir para o banner ${index + 1}`} />)}
      </div>
    </section>
    <section className="section categories-section"><SectionTitle eyebrow="Escolha por categoria" title="Encontre seu próximo favorito" action="Ver tudo" onAction={() => navigate('categories')} /><div className="category-grid">{categories.map(category => <button key={category.id} className="category-card" style={{ background: category.color }} onClick={() => navigate('categories')}><span>{category.emoji}</span><strong>{category.name}</strong><small>ver produtos <ArrowRight size={13} /></small></button>)}</div></section>
    <section className="section products-section"><SectionTitle eyebrow="Mais queridos" title="Feitos para você" action="Ver catálogo" onAction={() => navigate('categories')} /><div className="product-grid">{products.slice(0, 4).map(product => <ProductCard key={product.id} product={product} openProduct={openProduct} />)}</div></section>
    <section className="quote-section"><div><span className="eyebrow">Do seu jeito</span><h2>Tem coisa melhor que<br /><em>presente com história?</em></h2><p>Escolha uma arte, escreva sua mensagem e deixe a gente cuidar do resto.</p><button className="text-button" onClick={() => navigate('categories')}>Começar a criar <ArrowRight size={16} /></button></div><div className="quote-image"><span>“</span><p>As melhores coisas<br />são feitas à mão<br /><b>e com o coração.</b></p></div></section>
  </main>
}

function SectionTitle({ eyebrow, title, action, onAction }) { return <div className="section-title"><div><span className="eyebrow">{eyebrow}</span><h2>{title}</h2></div>{action && <button className="text-button" onClick={onAction}>{action} <ArrowRight size={16} /></button>}</div> }
function ProductCard({ product, openProduct }) { return <article className="product-card" onClick={() => openProduct(product)}><div className="product-image">{product.badge && <span className="badge">{product.badge}</span>}<img src={product.image} alt={product.name} /><button onClick={e => e.stopPropagation()} className="heart"><Heart size={17} /></button></div><div className="product-info"><span className="product-category">{product.category}</span><h3>{product.name}</h3><p>{product.description}</p><div className="price">{product.oldPrice && <del>R$ {product.oldPrice.toFixed(2).replace('.', ',')}</del>}<strong>R$ {product.price.toFixed(2).replace('.', ',')}</strong></div></div></article> }

function Catalog({ products, categories, navigate, openProduct }) { return <main className="page"><div className="page-heading"><span className="eyebrow">Nosso catálogo</span><h1>Produtos que contam<br /><em>uma história.</em></h1><p>Escolha um produto, uma arte e coloque sua personalidade em cada detalhe.</p></div><div className="category-tabs"><button className="selected">Todos</button>{categories.map(c => <button key={c.id}>{c.emoji} {c.name}</button>)}</div><div className="catalog-grid">{products.map(p => <ProductCard key={p.id} product={p} openProduct={openProduct} />)}</div>{!products.length && <div className="empty">Nenhum produto encontrado. Tente outra busca.</div>}</main> }

function Product({ product, artworks, selectedArtwork, setSelectedArtwork, navigate, addToCart }) {
  const [quantity, setQuantity] = useState(1)
  const compatibleArtworks = product.art_width_cm && product.art_height_cm ? artworks.filter(art => Number(art.width_cm) === Number(product.art_width_cm) && Number(art.height_cm) === Number(product.art_height_cm)) : artworks
  return <main className="page product-page"><button className="back-button" onClick={() => navigate('categories')}><ArrowLeft size={16} /> Voltar para produtos</button><div className="product-detail"><div className="detail-visual"><img src={product.image} alt={product.name} /><span className="visual-note">feito pra você ♡</span></div><div className="detail-copy"><span className="product-category">{product.category}</span><h1>{product.name}</h1><p className="detail-description">{product.description}</p><div className="detail-price">R$ {product.price.toFixed(2).replace('.', ',')} <span>à vista</span></div><hr /><div className="step-label"><span>01</span><div><strong>Escolha uma arte</strong><small>{product.art_width_cm ? `Medida compatível: ${product.art_width_cm} × ${product.art_height_cm} cm` : 'Você poderá editar os textos no próximo passo'}</small></div></div><div className="artwork-options">{compatibleArtworks.map(art => <button key={art.id} className={selectedArtwork?.id === art.id ? 'art-option chosen' : 'art-option'} onClick={() => setSelectedArtwork(art)}><ArtPreview artwork={art} /><span>{art.name}</span>{selectedArtwork?.id === art.id && <i><Check size={13} /></i>}</button>)}{!compatibleArtworks.length && <small className="muted">Nenhuma arte cadastrada para este tamanho.</small>}</div><div className="step-label quantity-label"><span>02</span><div><strong>Quantidade</strong><small>Personalize quantas unidades quiser</small></div><div className="quantity"><button onClick={() => setQuantity(Math.max(1, quantity - 1))}>−</button><b>{quantity}</b><button onClick={() => setQuantity(quantity + 1)}>+</button></div></div><button className="primary full" disabled={!selectedArtwork} onClick={() => navigate('create')}>Personalizar minha arte <ArrowRight size={17} /></button><button className="secondary full" onClick={() => addToCart({ productId: product.id, name: product.name, price: product.price, image: product.image, artwork: selectedArtwork?.name, quantity })}>Adicionar sem personalizar</button></div></div></main>
}

function artworkFields(artwork) {
  return artwork.textFields?.length ? artwork.textFields : [
    { id: TEXT_FIELD_IDS[0], default: artwork.texts[0] },
    { id: TEXT_FIELD_IDS[1], default: artwork.texts[1] },
    { id: TEXT_FIELD_IDS[2], default: artwork.texts[2] },
    { id: TEXT_FIELD_IDS[3], default: artwork.texts[3] }
  ]
}
function renderArtworkSource(source, artwork, values, styles = [], positions = []) {
  const fields = artworkFields(artwork)
  const fieldValues = fields.map((field, index) => values[index] === undefined ? field.default || '' : values[index])
  return source.replace(/(<text\b[^>]*>)([\s\S]*?)(<\/text>)/gi, (full, opening, content, closing) => {
    const id = opening.match(/\bid=["']([^"']+)["']/i)?.[1]
    const index = textFieldIndex(id, fields)
    if (index < 0 || index >= fieldValues.length) return full
    const style = styles[index] || {}
    const position = positions[index]
    let nextOpening = opening.replace(/\sdata-artwork-field=["'][^"']*["']/i, '').replace(/>\s*$/, '')
    const setAttribute = (name, value) => {
      const escaped = escapeXml(value)
      const expression = new RegExp(`\\s${name}=(?:"[^"]*"|'[^']*')`, 'i')
      nextOpening = expression.test(nextOpening)
        ? nextOpening.replace(expression, ` ${name}="${escaped}"`)
        : `${nextOpening} ${name}="${escaped}"`
    }
    setAttribute('data-artwork-field', index)
    if (style.font) setAttribute('font-family', style.font)
    if (style.size) setAttribute('font-size', Number(style.size))
    if (style.color) setAttribute('fill', style.color)
    if (position?.x !== undefined) setAttribute('x', Number(position.x))
    if (position?.y !== undefined) setAttribute('y', Number(position.y))
    nextOpening += '>'
    const value = index === 3 ? content.replace(/Ana/g, escapeXml(fieldValues[index])) : escapeXml(fieldValues[index])
    return `${nextOpening}${value}${closing}`
  })
}
function SvgArtwork({ artwork, values, styles = [], positions = [], onPositionsChange }) {
  const [markup, setMarkup] = useState('')
  const containerRef = useRef(null)
  useEffect(() => {
    let active = true
    fetch(artwork.file_url).then(response => response.text()).then(source => {
      if (active) setMarkup(renderArtworkSource(source, artwork, values, styles, positions))
    }).catch(() => { if (active) setMarkup('') })
    return () => { active = false }
  }, [artwork, values, styles, positions])
  useEffect(() => {
    if (!markup || !onPositionsChange) return undefined
    const svg = containerRef.current?.querySelector('svg')
    if (!svg) return undefined
    const viewBox = (svg.getAttribute('viewBox') || '0 0 1000 1000').split(/\s+/).map(Number)
    const onPointerDown = event => {
      const text = event.target.closest('[data-artwork-field]')
      if (!text) return
      event.preventDefault()
      const index = Number(text.getAttribute('data-artwork-field'))
      const rect = svg.getBoundingClientRect()
      const toSvgPoint = pointerEvent => ({
        x: viewBox[0] + ((pointerEvent.clientX - rect.left) / rect.width) * viewBox[2],
        y: viewBox[1] + ((pointerEvent.clientY - rect.top) / rect.height) * viewBox[3]
      })
      const pointerStart = toSvgPoint(event)
      const bounds = text.getBBox()
      const textX = Number(text.getAttribute('x')) || bounds.x + bounds.width / 2
      const textY = Number(text.getAttribute('y')) || bounds.y + bounds.height
      const offsetX = textX - pointerStart.x
      const offsetY = textY - pointerStart.y
      const move = moveEvent => {
        const point = toSvgPoint(moveEvent)
        const x = Math.max(viewBox[0], Math.min(viewBox[0] + viewBox[2], point.x + offsetX))
        const y = Math.max(viewBox[1], Math.min(viewBox[1] + viewBox[3], point.y + offsetY))
        onPositionsChange(index, { x: Math.round(x), y: Math.round(y) })
      }
      const stop = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', stop) }
      window.addEventListener('pointermove', move)
      window.addEventListener('pointerup', stop)
    }
    svg.addEventListener('pointerdown', onPointerDown)
    return () => svg.removeEventListener('pointerdown', onPointerDown)
  }, [markup, onPositionsChange])
  return markup ? <div ref={containerRef} className="svg-artwork draggable-artwork" dangerouslySetInnerHTML={{ __html: markup }} /> : <div className="svg-artwork-loading">Carregando arte...</div>
}
function escapeXml(value) { return String(value).replace(/[<>&'"]/g, character => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;', "'": '&apos;', '"': '&quot;' }[character])) }
async function getArtworkSvg(artwork, values, styles, positions) {
  if (!artwork.file_url) return null
  const source = await fetch(artwork.file_url).then(response => response.text())
  return renderArtworkSource(source, artwork, values, styles, positions)
}
function ArtPreview({ artwork, large = false, text0, text1, text2, text3, styles, positions, onPositionsChange }) { return <div className={`art-preview ${large ? 'large' : ''}`} style={{ background: artwork.color, color: artwork.accent }}>{artwork.file_url ? <SvgArtwork artwork={artwork} values={[text0 ?? artwork.texts[0], text1 ?? artwork.texts[1], text2 ?? artwork.texts[2], text3 ?? artwork.texts[3]]} styles={styles} positions={positions} onPositionsChange={onPositionsChange} /> : <div className="art-preview-text"><span>✦</span><strong>{text1 || artwork.texts[0]}<br />{text2 || artwork.texts[1]}</strong><small>feito pra você</small></div>}</div> }
function Creator({ product, artwork, addToCart, navigate }) {
  const nameDefault = (artwork.texts[2] || '').replace(/^.*?,\s*/, '').replace(/\s*♡.*$/, '').trim() || 'Ana'
  const [texts, setTexts] = useState([artwork.texts[0] || '', artwork.texts[1] || '', artwork.texts[2] || '', nameDefault])
  const [styles, setStyles] = useState(artwork.textFields?.map(field => ({ font: 'Georgia', size: 40, color: '#71384d', ...field.style })) || TEXT_FIELD_IDS.map(() => ({ font: 'Georgia', size: 40, color: '#71384d' })))
  const [positions, setPositions] = useState([])
  const [quantity, setQuantity] = useState(1)
  const updateText = (index, value) => setTexts(current => current.map((text, textIndex) => textIndex === index ? value : text))
  const updateStyle = (index, key, value) => setStyles(current => current.map((style, styleIndex) => styleIndex === index ? { ...style, [key]: value } : style))
  const updatePosition = (index, position) => setPositions(current => { const next = [...current]; next[index] = position; return next })
  const saveCreation = async () => { const artworkSvg = await getArtworkSvg(artwork, texts, styles, positions); addToCart({ productId: product.id, name: product.name, price: product.price, image: product.image, artwork: artwork.name, artworkSvg, customText: texts.join(' / '), quantity }); navigate('cart') }
  return <main className="page creator-page"><button className="back-button" onClick={() => navigate('product')}><ArrowLeft size={16} /> Voltar</button><div className="creator-header"><div><span className="eyebrow">Área de criação</span><h1>Deixe com a <em>sua cara.</em></h1><p>Edite os textos e arraste cada parte na pré-visualização.</p></div><div className="creator-steps"><b>1</b><span></span><b className="on">2</b><span></span><b>3</b></div></div><div className="creator-layout"><div className="editor-panel">{texts.map((text, index) => <div className="text-editor-field" key={index}><label>Texto {index + 1}<input value={text} maxLength="40" onChange={e => updateText(index, e.target.value)} /></label><div className="text-style-controls"><select value={styles[index]?.font || 'Georgia'} onChange={e => updateStyle(index, 'font', e.target.value)}>{FONT_OPTIONS.map(font => <option key={font} value={font}>{font}</option>)}</select><select value={styles[index]?.size || 40} onChange={e => updateStyle(index, 'size', e.target.value)}>{FONT_SIZES.map(size => <option key={size} value={size}>{size}px</option>)}</select><label className="color-control">Cor<input type="color" value={styles[index]?.color || '#71384d'} onChange={e => updateStyle(index, 'color', e.target.value)} /></label><code>{styles[index]?.color || '#71384d'}</code></div></div>)}<div className="editor-tip"><Sparkles size={16} /><span><strong>Uma dica carinhosa</strong><br />Arraste os textos na arte para posicioná-los como preferir.</span></div><div className="selected-product"><img src={product.image} alt="" /><div><small>Seu produto</small><strong>{product.name}</strong><span>R$ {product.price.toFixed(2).replace('.', ',')}</span></div></div><div className="quantity"><button onClick={() => setQuantity(Math.max(1, quantity - 1))}>−</button><b>{quantity}</b><button onClick={() => setQuantity(quantity + 1)}>+</button></div><button className="primary full" onClick={saveCreation}>Salvar e continuar <ArrowRight size={17} /></button></div><div className="preview-panel"><span className="preview-label">Pré-visualização · arraste os textos</span><div className="preview-stage"><div className="preview-product"><img src={product.image} alt="" /><div className="preview-art"><ArtPreview artwork={artwork} large text0={texts[0]} text1={texts[1]} text2={texts[2]} text3={texts[3]} styles={styles} positions={positions} onPositionsChange={updatePosition} /></div></div></div><small>As cores podem variar na impressão.</small></div></div></main>
}

function Checkout({ cart, removeFromCart, submitOrder, navigate }) { const [form, setForm] = useState({ name: '', email: '', phone: '', address: '' }); const total = cart.reduce((s, i) => s + i.price * i.quantity, 0); return <main className="page checkout-page"><div className="page-heading compact"><span className="eyebrow">Quase lá</span><h1>Finalize seu <em>pedido.</em></h1></div>{!cart.length ? <div className="empty"><ShoppingBag size={35} /><h3>Seu carrinho está vazio</h3><p>Encontre algo especial para personalizar.</p><button className="primary" onClick={() => navigate('categories')}>Ver produtos</button></div> : <div className="checkout-layout"><div><div className="checkout-card"><h2>Seus produtos <span>{cart.length} itens</span></h2>{cart.map(item => <div className="cart-item" key={item.cartId}><img src={item.image} alt="" /><div><strong>{item.name}</strong><small>{item.artwork || 'Sem arte'} {item.customText && `· ${item.customText}`}</small><span>Qtd. {item.quantity}</span></div><b>R$ {(item.price * item.quantity).toFixed(2).replace('.', ',')}</b><button onClick={() => removeFromCart(item.cartId)}><Trash2 size={16} /></button></div>)}</div><div className="checkout-card"><h2>Seus dados</h2><div className="form-grid"><label>Nome completo<input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Como podemos te chamar?" /></label><label>E-mail<input value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="voce@email.com" /></label><label>WhatsApp<input value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} placeholder="(00) 00000-0000" /></label><label>Endereço de entrega<input value={form.address} onChange={e => setForm({ ...form, address: e.target.value })} placeholder="Rua, número, cidade" /></label></div></div></div><aside className="summary"><h2>Resumo do pedido</h2><div><span>Subtotal</span><b>R$ {total.toFixed(2).replace('.', ',')}</b></div><div><span>Frete</span><b className="free">A combinar</b></div><hr /><div className="summary-total"><span>Total</span><b>R$ {total.toFixed(2).replace('.', ',')}</b></div><button className="primary full" disabled={!form.name || !form.email} onClick={() => submitOrder(form)}>Enviar pedido <ArrowRight size={17} /></button><small>Você receberá a confirmação pelo WhatsApp ou e-mail.</small></aside></div>}</main> }
function Success({ navigate }) { return <main className="success-page"><div className="success-icon"><Check size={32} /></div><span className="eyebrow">Pedido recebido</span><h1>Que alegria, <em>obrigado!</em></h1><p>Recebemos seu pedido e já vamos começar a preparar tudo com muito carinho. Em breve entraremos em contato para confirmar os detalhes.</p><button className="primary" onClick={() => navigate('home')}>Voltar para a loja <ArrowRight size={17} /></button></main> }

function Admin({ products, setProducts, categories, setCategories, artworks, setArtworks, orders, close }) {
  const [tab, setTab] = useState('overview'); const [notice, setNotice] = useState('')
  const [showArtworkForm, setShowArtworkForm] = useState(false)
  const [token, setToken] = useState(() => localStorage.getItem('fp-admin-token'))
  const [remoteOrders, setRemoteOrders] = useState(orders)
  const notify = (message) => { setNotice(message); setTimeout(() => setNotice(''), 2500) }
  useEffect(() => {
    const handleAuthExpired = () => setToken(null)
    window.addEventListener(AUTH_EXPIRED_EVENT, handleAuthExpired)
    return () => window.removeEventListener(AUTH_EXPIRED_EVENT, handleAuthExpired)
  }, [])
  useEffect(() => {
    if (!token) return
    api.getOrders(token).then(setRemoteOrders).catch(error => notify(error.message))
  }, [token])
  if (!token) return <AdminLogin onLogin={value => { localStorage.setItem('fp-admin-token', value); setToken(value) }} close={close} />
  const addProduct = async () => {
    try {
      const data = new FormData()
      data.append('category_id', categories[0]?.id || '')
      data.append('name', 'Novo produto')
      data.append('description', 'Descrição do novo produto.')
      data.append('price', '39.90')
      data.append('badge', 'Novo')
      const product = await api.createProduct(data, token)
      setProducts([...products, normalizeProduct(product)]); notify('Produto adicionado')
    } catch (error) { notify(error.message) }
  }
  const addCategory = async () => {
    try {
      const category = await api.createCategory({ name: 'Nova categoria', emoji: '✨', color: '#eee8ff' }, token)
      setCategories([...categories, category]); notify('Categoria adicionada')
    } catch (error) { notify(error.message) }
  }
  const addArtwork = async () => {
    setTab('artworks')
    setShowArtworkForm(true)
  }
  return <div className="admin-overlay"><div className="admin-shell"><aside className="admin-sidebar"><button className="brand admin-brand" onClick={close}><span className="brand-mark">✦</span><span>feito<span>pra</span>você<small>gerenciador</small></span></button><div className="admin-nav"><button className={tab === 'overview' ? 'active' : ''} onClick={() => setTab('overview')}><LayoutDashboard size={17} /> Visão geral</button><button className={tab === 'products' ? 'active' : ''} onClick={() => setTab('products')}><Package size={17} /> Produtos <b>{products.length}</b></button><button className={tab === 'artworks' ? 'active' : ''} onClick={() => setTab('artworks')}><Palette size={17} /> Artes <b>{artworks.length}</b></button><button className={tab === 'categories' ? 'active' : ''} onClick={() => setTab('categories')}><ClipboardList size={17} /> Categorias</button><button className={tab === 'orders' ? 'active' : ''} onClick={() => setTab('orders')}><ShoppingBag size={17} /> Pedidos <b>{remoteOrders.length}</b></button></div><button className="back-store" onClick={close}><ArrowLeft size={15} /> Voltar à loja</button></aside><section className="admin-main"><div className="admin-top"><div><span className="eyebrow">Gerenciador</span><h1>{tab === 'overview' ? 'Olá, vamos criar?' : tab === 'orders' ? 'Pedidos feitos' : tab === 'products' ? 'Produtos' : tab === 'artworks' ? 'Artes prontas' : 'Categorias'}</h1></div><button className="admin-close" onClick={() => { localStorage.removeItem('fp-admin-token'); close() }}><X /></button></div>{notice && <div className="notice"><Check size={16} /> {notice}</div>}{tab === 'overview' && <Overview products={products} artworks={artworks} categories={categories} orders={remoteOrders} setTab={setTab} />}{tab === 'products' && <AdminProducts products={products} setProducts={setProducts} categories={categories} addProduct={addProduct} token={token} />}{tab === 'artworks' && <AdminArtworks artworks={artworks} setArtworks={setArtworks} showCreate={showArtworkForm} closeCreate={() => setShowArtworkForm(false)} addArtwork={addArtwork} token={token} />}{tab === 'categories' && <AdminCategories categories={categories} setCategories={setCategories} addCategory={addCategory} token={token} />}{tab === 'orders' && <AdminOrders orders={remoteOrders} />}</section></div></div>
}

function AdminLogin({ onLogin, close }) {
  const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState('')
  const submit = async event => { event.preventDefault(); try { const result = await api.login(email, password); if (result.user.role !== 'admin') throw new Error('Este usuário não é administrador'); onLogin(result.token) } catch (loginError) { setError(loginError.message) } }
  return <div className="admin-overlay"><div className="login-card"><button className="admin-close" onClick={close}><X /></button><span className="brand-mark">✦</span><span className="eyebrow">Área restrita</span><h1>Entrar no gerenciador</h1><p>Use o e-mail e a senha do administrador cadastrados no banco.</p><form onSubmit={submit}><label>E-mail<input type="email" required value={email} onChange={event => setEmail(event.target.value)} /></label><label>Senha<input type="password" required value={password} onChange={event => setPassword(event.target.value)} /></label>{error && <small className="login-error">{error}</small>}<button className="primary full">Entrar <ArrowRight size={17} /></button></form></div></div>
}
function Overview({ products, artworks, categories, orders, setTab }) { return <div className="overview"><div className="stats"><div><Package /><span>Produtos ativos</span><strong>{products.length}</strong></div><div><Palette /><span>Artes prontas</span><strong>{artworks.length}</strong></div><div><ClipboardList /><span>Categorias</span><strong>{categories.length}</strong></div><div><ShoppingBag /><span>Pedidos recebidos</span><strong>{orders.length}</strong></div></div><div className="admin-welcome"><div><span className="eyebrow">Tudo em um só lugar</span><h2>Seu ateliê, mais organizado.</h2><p>Cadastre produtos, prepare artes para seus clientes e acompanhe cada pedido recebido.</p></div><span className="big-sparkle">✦</span></div><div className="quick-actions"><button onClick={() => setTab('products')}><Plus /> Adicionar produto</button><button onClick={() => setTab('artworks')}><Palette /> Cadastrar arte</button><button onClick={() => setTab('orders')}><ClipboardList /> Ver pedidos</button></div></div> }
function AdminProducts({ products, setProducts, categories, addProduct, token }) {
  const [editing, setEditing] = useState(null)
  const remove = async id => { try { await api.deleteProduct(id, token); setProducts(products.filter(item => item.id !== id)) } catch (error) { window.alert(error.message) } }
  const save = async product => {
    try {
      const data = new FormData()
      data.append('category_id', product.category_id || product.categoryId || '')
      data.append('category_ids', JSON.stringify(product.category_ids || [product.category_id || product.categoryId]))
      data.append('name', product.name)
      data.append('description', product.description || '')
      data.append('price', String(product.price))
      data.append('old_price', product.oldPrice ? String(product.oldPrice) : '')
      data.append('badge', product.badge || '')
      data.append('active', product.active === false ? 'false' : 'true')
      data.append('art_width_cm', product.art_width_cm || '')
      data.append('art_height_cm', product.art_height_cm || '')
      if (product.imageFile) data.append('image', product.imageFile)
      const isDatabaseProduct = Number.isInteger(Number(product.id)) && Number(product.id) > 0
      const updated = isDatabaseProduct
        ? await api.updateProduct(product.id, data, token)
        : await api.createProduct(data, token)
      const normalized = normalizeProduct(updated || { ...product, image: product.imagePreview || product.image })
      const refreshed = await api.getProducts()
      setProducts(refreshed.map(normalizeProduct))
      setEditing(null)
    } catch (error) { window.alert(error.message) }
  }
  const changeImage = (event) => {
    const file = event.target.files[0]
    if (!file) return
    const image = new Image()
    image.onload = () => {
      if (image.width !== 1000 || image.height !== 1000) window.alert('A imagem precisa ter exatamente 1000 x 1000 px.')
      else setEditing(current => ({ ...current, imageFile: file, imagePreview: URL.createObjectURL(file) }))
    }
    image.onerror = () => window.alert('Não foi possível ler a imagem selecionada.')
    image.src = URL.createObjectURL(file)
  }
  return <AdminTable title="produtos" onAdd={addProduct}><div className="product-admin-grid">{products.map(p => <article className="product-admin-card" key={p.id} onClick={() => setEditing({ ...p, category_id: p.category_id || categories.find(category => category.slug === p.category)?.id, category_ids: p.category_ids?.length ? p.category_ids : [p.category_id] })}><img src={p.image} alt={p.name} /><div><strong>{p.name}</strong><small>{p.category} · R$ {p.price.toFixed(2).replace('.', ',')}</small></div><button onClick={event => { event.stopPropagation(); remove(p.id) }} aria-label="Excluir produto"><Trash2 size={16} /></button></article>)}</div>{editing && <div className="artwork-modal-overlay"><div className="artwork-modal product-modal" onClick={event => event.stopPropagation()}><div className="artwork-modal-head"><div><span className="eyebrow">Editando produto</span><h2>{editing.name}</h2></div><button onClick={() => setEditing(null)} aria-label="Fechar"><X /></button></div><div className="product-edit-top"><img src={editing.imagePreview || editing.image} alt="" /><div><strong>Imagem do produto</strong><small>A imagem deve ter exatamente 1000 × 1000 px.</small></div></div><div className="product-form-grid"><label>Nome<input value={editing.name} onChange={e => setEditing({ ...editing, name: e.target.value })} /></label><label className="wide">Categorias<select className="category-multi-select" multiple value={(editing.category_ids || []).map(String)} onChange={e => setEditing({ ...editing, category_ids: [...e.target.selectedOptions].map(option => Number(option.value)), category_id: e.target.selectedOptions[0]?.value || '' })}>{categories.map(category => <option key={category.id} value={category.id}>{category.emoji || ''} {category.name}</option>)}</select><small className="field-id">Use Ctrl para selecionar várias categorias.</small></label><label>Preço<input type="number" min="0" step="0.01" value={editing.price} onChange={e => setEditing({ ...editing, price: e.target.value })} /></label><label>Preço anterior<input type="number" min="0" step="0.01" value={editing.oldPrice || ''} onChange={e => setEditing({ ...editing, oldPrice: e.target.value })} /></label><label>Selo<input value={editing.badge || ''} onChange={e => setEditing({ ...editing, badge: e.target.value })} placeholder="Ex.: Oferta" /></label><label>Formato da arte<select value={`${editing.art_width_cm || ''}x${editing.art_height_cm || ''}`} onChange={e => { const [width, height] = e.target.value.split('x'); setEditing({ ...editing, art_width_cm: width, art_height_cm: height }) }}><option value="">Sem medida definida</option><option value="20x9.5">Caneca — 20 × 9,5 cm</option><option value="15x8">15 × 8 cm</option><option value="10x10">10 × 10 cm</option></select></label><label className="file-label">Imagem 1000 × 1000<input type="file" accept="image/png,image/jpeg,image/webp" onChange={changeImage} /></label><label className="wide">Descrição<textarea value={editing.description || ''} onChange={e => setEditing({ ...editing, description: e.target.value })} rows="3" /></label></div><div className="edit-actions"><button className="primary small" onClick={() => save(editing)}><Check size={15} /> Salvar alterações</button><button className="secondary" onClick={() => setEditing(null)}>Cancelar</button></div></div></div>}</AdminTable>
}
function AdminArtworks({ artworks, setArtworks, addArtwork, token, showCreate, closeCreate }) {
  const [editing, setEditing] = useState(null)
  const remove = async id => { try { await api.deleteArtwork(id, token); setArtworks(artworks.filter(item => item.id !== id)) } catch (error) { window.alert(error.message) } }
  const startEditing = artwork => setEditing({
    ...artwork,
    fields: (artwork.textFields?.length ? artwork.textFields : artwork.texts.map((text, index) => ({ id: TEXT_FIELD_IDS[index], default: text }))).map((field, index) => ({ ...field, id: TEXT_FIELD_IDS[index] }))
  })
  const save = async artwork => {
    try {
      const updated = await api.updateArtwork(artwork.id, { name: artwork.name, category: artwork.category, width_cm: artwork.width_cm, height_cm: artwork.height_cm, text_fields: artwork.fields }, token)
      setArtworks(artworks.map(item => item.id === artwork.id ? normalizeArtwork(updated) : item))
      setEditing(null)
    } catch (error) { window.alert(error.message) }
  }
  const [form, setForm] = useState({ name: '', category: 'Frases', text1: '', text2: '', text3: '', text4: '', fieldIds: TEXT_FIELD_IDS, file: null, preview: '', width_cm: '', height_cm: '' })
  const create = async () => {
    if (!form.name.trim() || !form.file) return window.alert('Informe o nome e selecione um arquivo SVG.')
    const data = new FormData()
    data.append('name', form.name); data.append('category', form.category)
    data.append('width_cm', form.width_cm); data.append('height_cm', form.height_cm)
    data.append('text_fields', JSON.stringify([{ id: form.fieldIds[0], default: form.text1 }, { id: form.fieldIds[1], default: form.text2 }, { id: form.fieldIds[2], default: form.text3 }, { id: form.fieldIds[3], default: form.text4 }]))
    data.append('file', form.file)
    try {
      const artwork = await api.createArtwork(data, token)
      setArtworks([...artworks, normalizeArtwork(artwork)])
      setForm({ name: '', category: 'Frases', text1: '', text2: '', text3: '', text4: '', fieldIds: TEXT_FIELD_IDS, file: null, preview: '', width_cm: '', height_cm: '' })
      notify('Arte adicionada')
    } catch (error) { notify(error.message) }
  }
  const selectFile = event => {
    const file = event.target.files[0]
    if (!file) return
    if (file.type !== 'image/svg+xml' && !file.name.toLowerCase().endsWith('.svg')) return window.alert('Selecione um arquivo SVG.')
    const reader = new FileReader()
    reader.onload = () => {
      const source = String(reader.result)
      const ids = [...source.matchAll(/<text\b[^>]*\bid=["']([^"']+)["']/gi)].map(match => match[1]).slice(0, 4)
      const document = new DOMParser().parseFromString(source, 'image/svg+xml')
      const textById = id => document.getElementById(id)?.textContent?.trim() || ''
      const findText = index => {
        const value = textById(TEXT_FIELD_IDS[index]) || textById(LEGACY_TEXT_FIELD_IDS[index])
        if (value) return index === 3 ? value.replace(/^.*?,\s*/, '').replace(/\s*♡.*$/, '').trim() : value
        return [text1, text2, text3, text4][index]
      }
      const opening = source.match(/<svg\b[^>]*>/i)?.[0] || ''
      const width = opening.match(/\bwidth=["']([\d.]+)\s*cm["']/i)?.[1] || (Number(opening.match(/\bviewBox=["'][^"']*\s([\d.]+)\s+([\d.]+)["']/i)?.[1]) / 100 || '')
      const height = opening.match(/\bheight=["']([\d.]+)\s*cm["']/i)?.[1] || (Number(opening.match(/\bviewBox=["'][^"']*\s([\d.]+)\s+([\d.]+)["']/i)?.[2]) / 100 || '')
      setForm({ ...form, file, preview: URL.createObjectURL(file), width_cm: width, height_cm: height, text1: findText(0), text2: findText(1), text3: findText(2), text4: findText(3), fieldIds: ids.length >= 2 ? [...ids, ...form.fieldIds].slice(0, 4) : form.fieldIds })
    }
    reader.readAsText(file)
  }
  const previewArtwork = editing && { ...editing, textFields: editing.fields, texts: editing.fields.map(field => field.default || '') }
  return <AdminTable title="artes prontas" onAdd={addArtwork}><div className="artwork-grid">{artworks.map(a => <article className="artwork-card" key={a.id} onClick={() => startEditing(a)}><div className="artwork-card-preview"><ArtPreview artwork={a} large /></div><div className="artwork-card-info"><div><strong>{a.name}</strong><small>{a.category} · {a.width_cm ? `${a.width_cm} × ${a.height_cm} cm · ` : ''}{a.textFields?.length || a.texts.length} textos editáveis</small></div><button onClick={event => { event.stopPropagation(); remove(a.id) }} aria-label="Excluir arte"><Trash2 size={16} /></button></div></article>)}</div>{showCreate && <div className="artwork-modal-overlay"><div className="artwork-modal artwork-create-modal" onClick={event => event.stopPropagation()}><div className="artwork-modal-head"><div><span className="eyebrow">Nova arte</span><h2>Cadastrar arte SVG</h2></div><button onClick={closeCreate} aria-label="Fechar"><X /></button></div><p className="modal-description">Use um arquivo SVG com textos identificados para personalização.</p><div className="artwork-form-grid"><label>Nome da arte<input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Ex.: Amor com nome" /></label><label>Categoria<input value={form.category} onChange={e => setForm({ ...form, category: e.target.value })} /></label>  <label>Largura da arte (cm)<input type="number" min="0.1" step="0.1" value={form.width_cm} onChange={e => setForm({ ...form, width_cm: e.target.value })} placeholder="Ex.: 20" /></label><label>Altura da arte (cm)<input type="number" min="0.1" step="0.1" value={form.height_cm} onChange={e => setForm({ ...form, height_cm: e.target.value })} placeholder="Ex.: 9,5" /></label><label>Texto principal<input value={form.text1} onChange={e => setForm({ ...form, text1: e.target.value })} /></label><label>Texto secundário<input value={form.text2} onChange={e => setForm({ ...form, text2: e.target.value })} /></label><label>Texto 3<input value={form.text3} onChange={e => setForm({ ...form, text3: e.target.value })} /></label><label>Texto 4 (nome)<input value={form.text4} onChange={e => setForm({ ...form, text4: e.target.value })} placeholder="Ex.: Ana" /></label><label className="file-label">Arquivo SVG<input type="file" accept=".svg,image/svg+xml" onChange={selectFile} /></label></div>{form.preview && <img className="svg-upload-preview" src={form.preview} alt="Pré-visualização da arte" />}<div className="edit-actions"><button className="primary small" onClick={create}><Plus size={15} /> Salvar arte</button><button className="secondary" onClick={closeCreate}>Cancelar</button></div>  </div></div>}{editing && <div className="artwork-modal-overlay"><div className="artwork-modal" onClick={event => event.stopPropagation()}><div className="artwork-modal-head"><div><span className="eyebrow">Editando arte</span><h2>{editing.name}</h2></div><button onClick={() => setEditing(null)} aria-label="Fechar"><X /></button></div><div className="artwork-modal-layout"><div className="artwork-modal-preview"><span>Pré-visualização</span>{previewArtwork && <ArtPreview artwork={previewArtwork} large />}</div><div className="artwork-modal-fields"><label>Nome da arte<input value={editing.name} onChange={e => setEditing({ ...editing, name: e.target.value })} /></label>  <label>Categoria<input value={editing.category || ''} onChange={e => setEditing({ ...editing, category: e.target.value })} /></label><label>Largura da arte (cm)<input type="number" min="0.1" step="0.1" value={editing.width_cm || ''} onChange={e => setEditing({ ...editing, width_cm: e.target.value })} /></label><label>Altura da arte (cm)<input type="number" min="0.1" step="0.1" value={editing.height_cm || ''} onChange={e => setEditing({ ...editing, height_cm: e.target.value })} /></label>{editing.fields.map((field, index) => <label key={field.id}>Texto {index + 1}<input value={field.default || ''} onChange={e => setEditing({ ...editing, fields: editing.fields.map((item, fieldIndex) => fieldIndex === index ? { ...item, default: e.target.value } : item) })} /><small className="field-id">ID: {field.id}</small></label>)}</div></div><div className="edit-actions"><button className="primary small" onClick={() => save(editing)}><Check size={15} /> Salvar alterações</button><button className="secondary" onClick={() => setEditing(null)}>Cancelar</button></div></div></div>}</AdminTable>
}
function AdminCategories({ categories, setCategories, addCategory, token }) {
  const [editing, setEditing] = useState(null)
  const remove = async id => { try { await api.deleteCategory(id, token); setCategories(categories.filter(item => item.id !== id)) } catch (error) { window.alert(error.message) } }
  const save = async category => { try { const updated = await api.updateCategory(category.id, category, token); setCategories(categories.map(item => item.id === category.id ? updated : item)); setEditing(null) } catch (error) { window.alert(error.message) } }
  return <AdminTable title="categorias" onAdd={addCategory}><div className="admin-list">{categories.map(c => editing?.id === c.id ? <div className="admin-row edit-row" key={c.id}><div className="edit-fields"><input value={editing.name} onChange={e => setEditing({ ...editing, name: e.target.value })} /><input value={editing.emoji || ''} onChange={e => setEditing({ ...editing, emoji: e.target.value })} /><input type="color" value={editing.color || '#eeeeee'} onChange={e => setEditing({ ...editing, color: e.target.value })} /></div><button onClick={() => save(editing)}><Check size={16} /></button><button onClick={() => setEditing(null)}><X size={16} /></button></div> : <div className="admin-row category-row" key={c.id}><span style={{ background: c.color }}>{c.emoji}</span><div><strong>{c.name}</strong><small>ID: {c.id}</small></div><button onClick={() => setEditing({ ...c })}><Edit3 size={16} /></button><button onClick={() => remove(c.id)}><Trash2 size={16} /></button></div>)}</div></AdminTable>
}
function AdminTable({ children, title, onAdd }) { return <div className="admin-table-card"><div className="table-head"><strong>{title}</strong><button className="primary small" onClick={onAdd}><Plus size={15} /> Adicionar</button></div>{children}</div> }
function AdminOrders({ orders }) {
  const [selected, setSelected] = useState(null)
  const customerName = order => order.customer_name || order.customer?.name || 'Cliente'
  const customerEmail = order => order.customer_email || order.customer?.email || ''
  const code = order => order.order_code || order.id
  const status = order => order.status || 'received'
  const date = order => order.created_at ? new Date(order.created_at).toLocaleDateString('pt-BR') : order.date
  const money = value => `R$ ${Number(value || 0).toFixed(2).replace('.', ',')}`
  return <div className="admin-table-card"><div className="table-head"><strong>pedidos recentes</strong><span className="muted">{orders.length} pedidos</span></div>{orders.length ? <div className="admin-list">{orders.map(o => <button className="admin-row order-row order-button" key={o.id} onClick={() => setSelected(o)}><div className="order-id"><strong>{code(o)}</strong><small>{date(o)}</small></div><div><strong>{customerName(o)}</strong><small>{o.items?.length || 0} item(ns) · {customerEmail(o)}</small></div><span className="order-status">{status(o)}</span><b>{money(o.total)}</b><ChevronRight size={16} /></button>)}</div> : <div className="empty admin-empty"><ClipboardList size={28} /><p>Quando seus clientes fizerem pedidos, eles aparecerão aqui.</p></div>}{selected && <OrderDetails order={selected} close={() => setSelected(null)} />}</div>
}

function OrderDetails({ order, close }) {
  const customerName = order.customer_name || order.customer?.name || 'Cliente'
  const customerEmail = order.customer_email || order.customer?.email || '-'
  const money = value => `R$ ${Number(value || 0).toFixed(2).replace('.', ',')}`
  const statusLabels = { received: 'Recebido', confirmed: 'Confirmado', in_production: 'Em produção', shipped: 'Enviado', completed: 'Concluído', cancelled: 'Cancelado' }
  return <div className="order-detail-overlay"><div className="order-detail"><div className="order-detail-head"><div><span className="eyebrow">Detalhes do pedido</span><h2>{order.order_code || order.id}</h2></div><button onClick={close}><X size={19} /></button></div><div className="order-detail-grid"><section><h3>Cliente</h3><p><strong>{customerName}</strong><br />{customerEmail}<br />{order.customer_phone || order.customer?.phone || 'Telefone não informado'}</p><h3>Entrega</h3><p>{order.delivery_address || order.customer?.address || 'Endereço não informado'}</p></section><section><h3>Status</h3><span className="order-status large">{statusLabels[order.status] || order.status || 'Recebido'}</span><h3 className="items-title">Itens do pedido</h3>{(order.items || []).map(item => { const rawArtwork = item.artwork_svg ?? item.artworkSvg; const artworkSvg = typeof rawArtwork === 'string' ? rawArtwork : rawArtwork?.data ? new TextDecoder().decode(new Uint8Array(rawArtwork.data)) : rawArtwork?.toString?.(); const artworkUrl = artworkSvg ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(artworkSvg)}` : null; const productUrl = item.product_image_url?.startsWith('/uploads/') ? `${API_URL.replace(/\/api$/, '')}${item.product_image_url}` : item.product_image_url; return <div className="detail-item" key={item.id || `${item.product_name}-${item.quantity}`}><div className="detail-item-content"><div className="order-item-media">{productUrl && <img src={productUrl} alt={item.product_name || 'Produto'} />}{artworkUrl && <img src={artworkUrl} alt="Pré-visualização da arte personalizada" />}</div><strong>{item.product_name || item.name}</strong><small>Quantidade: {item.quantity}</small>{(item.artwork_name || item.artwork) && <small>Arte: {item.artwork_name || item.artwork}</small>}{item.custom_text && <small>Texto: {typeof item.custom_text === 'string' ? item.custom_text : JSON.stringify(item.custom_text)}</small>}{artworkUrl && <div className="order-art-actions"><a className="primary small" download={`${order.order_code || order.id}-arte.svg`} href={artworkUrl}>Baixar arte SVG</a></div>}</div><b>{money(item.subtotal || Number(item.unit_price) * Number(item.quantity))}</b></div>})}<div className="detail-total"><span>Total</span><strong>{money(order.total)}</strong></div></section></div></div></div>
}
function Footer() { return <footer><div className="footer-brand"><span className="brand-mark">✦</span><strong>feito<span>pra</span>você</strong><p>Presentes que carregam<br />um pedacinho de você.</p></div><div><strong>Atendimento</strong><span>WhatsApp</span><span>Instagram</span><span>Dúvidas frequentes</span></div><div><strong>Sobre a loja</strong><span>Quem somos</span><span>Como funciona</span><span>Política de privacidade</span></div><div className="footer-note">feito com carinho<br />♡ em cada detalhe</div><small className="copyright">© 2024 Feito Pra Você. Todos os direitos reservados.</small></footer> }

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