import { useEffect, useState } from 'react'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import ProductPicker from '../components/ProductPicker'
import OrderDrawer from '../components/OrderDrawer'
import client from '../api/client'
import { useProductCache } from '../hooks/useProductCache'

export default function AddItemsPage() {
  const { tableId } = useParams()
  const [searchParams] = useSearchParams()
  const isNewTable = searchParams.get('new') === '1'
  const navigate = useNavigate()

  const { products, categories } = useProductCache()

  const [cart, setCart] = useState([])
  const [orderId, setOrderId] = useState(null)
  const [sending, setSending] = useState(false)
  const [retrying, setRetrying] = useState(false)
  const [error, setError] = useState('')
  const [printAck, setPrintAck] = useState(null)
  const [cartOpen, setCartOpen] = useState(false)
  const [editItem, setEditItem] = useState(null) // { cartKey, product, drawerState }
  const [viewAllOpen, setViewAllOpen] = useState(false)
  const [searchOpen, setSearchOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')

  useEffect(() => {
    async function load() {
      const statusRes = await client.get(`/api/tables/${tableId}/status`)
      setOrderId(statusRes.data.active_order_id)

      // Pre-populate cart from "order again" if present
      const stored = sessionStorage.getItem('orderAgainItems')
      if (stored) {
        sessionStorage.removeItem('orderAgainItems')
        try {
          const items = JSON.parse(stored)
          const initialCart = items.map(it => ({
            ...it,
            _key: Date.now() + Math.random(),
          }))
          setCart(initialCart)
        } catch {}
      }
    }
    load()
  }, [tableId])

  // Back button: if this was a new table and nothing was added, leave the table FREE
  function handleBack() {
    if (isNewTable && cart.length === 0) {
      navigate('/tables', { replace: true })
    } else {
      navigate(`/tables/${tableId}`)
    }
  }

  function addToCart(item) {
    setCart(prev => {
      // Try to find an identical item already in the cart to stack onto.
      // Two items are identical when every meaningful field matches exactly.
      const { _key: _k, _drawerState: _ds, ...newCore } = item
      const matchIdx = prev.findIndex(existing => {
        const { _key, _drawerState, ...existCore } = existing
        return JSON.stringify(existCore) === JSON.stringify(newCore)
      })
      if (matchIdx !== -1) {
        const next = [...prev]
        next[matchIdx] = { ...next[matchIdx], quantity: next[matchIdx].quantity + (item.quantity ?? 1) }
        return next
      }
      return [...prev, { ...item, _key: Date.now() + Math.random() }]
    })
  }

  function removeFromCart(key) {
    setCart(prev => prev.filter(i => i._key !== key))
  }

  function changeCartQty(key, newQty) {
    if (newQty <= 0) {
      removeFromCart(key)
    } else {
      setCart(prev => prev.map(i => i._key === key ? { ...i, quantity: newQty } : i))
    }
  }

  function openEditDrawer(cartItem) {
    const product = products.find(p => p.id === cartItem.product_id)
    if (!product) return
    setCartOpen(false)
    setEditItem({ cartKey: cartItem._key, product, drawerState: cartItem._drawerState })
  }

  function handleEditSave(updatedItem) {
    setCart(prev => prev.map(i =>
      i._key === editItem.cartKey ? { ...updatedItem, _key: i._key } : i
    ))
    setEditItem(null)
  }

  async function sendOrder() {
    if (cart.length === 0) return
    setSending(true)
    setError('')
    setPrintAck(null)
    setCartOpen(false)
    try {
      // For new (free) tables, open the order now — lazily
      let activeOrderId = orderId
      if (!activeOrderId) {
        const { data: newOrder } = await client.post('/api/orders/', { table_id: Number(tableId) })
        activeOrderId = newOrder.id
        setOrderId(activeOrderId)
      }

      const res = await client.post(`/api/orders/${activeOrderId}/items`, {
        items: cart.map(({ _key, _drawerState, ...item }) => item),
      })
      const printResults = res.data.print_results ?? []
      const allOk = printResults.length === 0 || printResults.every(r => r.success)
      setPrintAck({ allOk, results: printResults })
      if (allOk) setTimeout(() => navigate('/tables'), 1200)
    } catch (err) {
      setError(err.response?.data?.detail || 'Σφάλμα αποστολής — η παραγγελία δεν στάλθηκε')
    } finally {
      setSending(false)
    }
  }

  async function retryNow() {
    if (!orderId) return
    setRetrying(true)
    try {
      const res = await client.post(`/api/orders/${orderId}/retry-print`)
      const printResults = res.data.print_results ?? []
      const allOk = printResults.length === 0 || printResults.every(r => r.success)
      setPrintAck({ allOk, results: printResults })
      if (allOk) setTimeout(() => navigate('/tables'), 1200)
    } catch { } finally { setRetrying(false) }
  }

  function saveAsDraft() { navigate(`/tables/${tableId}`, { replace: true }) }
  function leaveAndContinue() { navigate(`/tables/${tableId}`, { replace: true }) }

  function getProduct(id) { return products.find(p => p.id === id) }

  // Returns structured sections for the expanded cart view
  function buildItemSections(item, product) {
    const sections = []

    if (item.selected_options?.length) {
      const prefIds = new Set(
        (product?.preference_sets || []).flatMap(ps => ps.choices.map(c => c.id))
      )
      // Build a map: prefChoiceId → preference set name
      const prefSetByChoiceId = {}
      ;(product?.preference_sets || []).forEach(ps => {
        ps.choices.forEach(c => { prefSetByChoiceId[c.id] = ps.name })
      })
      const quickNames = new Set((product?.quick_options || []).map(o => o.name))
      const extraIds = new Set((product?.options || []).map(o => o.id))

      // Group prefs: { prefSetName, choiceName, subName }
      const prefGroups = []
      // Group extras: { name, subName, qty } — one entry per unique (id)
      const extraGroups = []
      const quickLines = []

      let i = 0
      const opts = item.selected_options
      while (i < opts.length) {
        const o = opts[i]
        if (prefIds.has(o.id)) {
          // Collect sub immediately following (id === null)
          const setName = prefSetByChoiceId[o.id] ?? ''
          let subName = null
          if (i + 1 < opts.length && opts[i + 1].id == null) {
            subName = opts[i + 1].name
            i += 2
          } else {
            i++
          }
          // Merge into existing prefGroup for same setName, or create new
          const existing = prefGroups.find(g => g.setName === setName)
          if (existing) {
            // multiple choices from same set (shouldn't normally happen, but handle gracefully)
            existing.values.push(subName ? `${o.name} · ${subName}` : o.name)
          } else {
            prefGroups.push({ setName, values: [subName ? `${o.name} · ${subName}` : o.name] })
          }
        } else if (o.id != null && extraIds.has(o.id)) {
          // Collect sub immediately following
          let subName = null
          if (i + 1 < opts.length && opts[i + 1].id == null) {
            subName = opts[i + 1].name
            i += 2
          } else {
            i++
          }
          // Merge duplicates
          const existing = extraGroups.find(g => g.id === o.id && g.subName === subName)
          if (existing) existing.qty++
          else extraGroups.push({ id: o.id, name: o.name, subName, qty: 1 })
        } else if (quickNames.has(o.name)) {
          quickLines.push(o)
          i++
        } else {
          i++
        }
      }

      // Deduplicate quick lines: multiple entries of same name → single entry with qty
      const quickDeduped = []
      quickLines.forEach(o => {
        const existing = quickDeduped.find(x => x.name === o.name)
        if (existing) existing._qty = (existing._qty || 1) + 1
        else quickDeduped.push({ ...o, _qty: 1 })
      })

      if (prefGroups.length > 0) sections.push({ type: 'prefs', lines: prefGroups })
      if (quickDeduped.length > 0) sections.push({ type: 'quick', lines: quickDeduped })
      if (extraGroups.length > 0) sections.push({ type: 'extras', lines: extraGroups })
    }

    if (item.removed_ingredients?.length) {
      sections.push({ type: 'removed', lines: item.removed_ingredients.map(n => ({ name: n })) })
    }

    if (item.notes) {
      sections.push({ type: 'note', lines: [{ name: item.notes }] })
    }

    return sections
  }

  // Simple flat summary for the collapsed one-liner
  function buildItemSummary(item) {
    const lines = []
    if (item.selected_options?.length) {
      item.selected_options.forEach(o => {
        if (o.price_delta && o.price_delta !== 0)
          lines.push(`${o.name} (${o.price_delta > 0 ? '+' : ''}${o.price_delta.toFixed(2)} €)`)
        else lines.push(o.name)
      })
    }
    if (item.removed_ingredients?.length) lines.push(`Χωρίς: ${item.removed_ingredients.join(', ')}`)
    if (item.notes) lines.push(item.notes)
    return lines
  }

  // Print-failure dialog
  if (printAck && !printAck.allOk) {
    return (
      <div className="page">
        <header className="top-bar">
          <button className="icon-btn" onClick={() => navigate(`/tables/${tableId}`, { replace: true })}>←</button>
          <span className="top-bar__title">Πρόβλημα εκτύπωσης</span>
        </header>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 14, padding: 20, overflowY: 'auto' }}>
          <div style={{ background: '#7f1d1d', borderRadius: 14, padding: '14px 16px', border: '1px solid #ef4444' }}>
            <p style={{ fontWeight: 700, fontSize: 15, color: '#fca5a5', marginBottom: 6 }}>⚠ Η παραγγελία αποθηκεύτηκε</p>
            <p style={{ fontSize: 13, color: '#fca5a5', lineHeight: 1.5 }}>Ένας ή περισσότεροι εκτυπωτές δεν ανταποκρίθηκαν.</p>
          </div>
          {printAck.results.map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, background: r.success ? '#14532d' : '#431407', border: `1px solid ${r.success ? '#22c55e' : '#c2410c'}`, borderRadius: 12, padding: '10px 14px' }}>
              <span style={{ fontSize: 20 }}>{r.success ? '✓' : '✗'}</span>
              <div style={{ flex: 1 }}>
                <p style={{ fontWeight: 600, fontSize: 14, color: r.success ? '#86efac' : '#fdba74' }}>{r.printer_name}</p>
                {!r.success && <p style={{ fontSize: 12, color: '#fdba74', marginTop: 2 }}>Εκτυπωτής μη προσβάσιμος</p>}
              </div>
            </div>
          ))}
          <p style={{ fontSize: 12, color: '#64748b', textAlign: 'center', margin: '4px 0' }}>Επιλέξτε πώς να συνεχίσετε:</p>
          <button className="btn btn--primary" style={{ width: '100%', padding: '14px 16px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 12, opacity: retrying ? 0.7 : 1 }} onClick={retryNow} disabled={retrying}>
            <span style={{ fontSize: 22 }}>🔄</span>
            <div>
              <p style={{ fontWeight: 700, fontSize: 14, margin: 0 }}>{retrying ? 'Επανάληψη…' : 'Επανάληψη τώρα'}</p>
              <p style={{ fontSize: 12, opacity: 0.8, margin: 0, marginTop: 2 }}>Δοκιμή αποστολής στον εκτυπωτή ξανά</p>
            </div>
          </button>
          <button className="btn btn--secondary" style={{ width: '100%', padding: '14px 16px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 12 }} onClick={saveAsDraft}>
            <span style={{ fontSize: 22 }}>📋</span>
            <div>
              <p style={{ fontWeight: 700, fontSize: 14, margin: 0 }}>Αποθήκευση ως προσχέδιο</p>
              <p style={{ fontSize: 12, opacity: 0.75, margin: 0, marginTop: 2 }}>Τα αντικείμενα μένουν στο τραπέζι με πορτοκαλί ένδειξη</p>
            </div>
          </button>
          <button style={{ width: '100%', padding: '14px 16px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 12, background: '#1e293b', border: '1px solid #334155', borderRadius: 12, color: '#cbd5e1', cursor: 'pointer' }} onClick={leaveAndContinue}>
            <span style={{ fontSize: 22 }}>🕐</span>
            <div>
              <p style={{ fontWeight: 700, fontSize: 14, margin: 0 }}>Συνέχεια (προσχέδιο)</p>
              <p style={{ fontSize: 12, opacity: 0.75, margin: 0, marginTop: 2 }}>Τα αντικείμενα εμφανίζονται ως εκκρεμή στο dashboard</p>
            </div>
          </button>
        </div>
      </div>
    )
  }

  // Compact names for the strip preview (max 3 items shown)
  const stripItems = cart.slice(-3).reverse()
  const hiddenCount = cart.length > 3 ? cart.length - 3 : 0

  return (
    <div className="page" style={{ position: 'relative' }}>
      <header className="top-bar">
        <button className="icon-btn" onClick={handleBack}>←</button>
        <span className="top-bar__title">{isNewTable ? 'Νέα Παραγγελία' : 'Προσθήκη'}</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {/* Search button */}
          <button className="icon-btn" onClick={() => { setSearchQuery(''); setSearchOpen(true) }} title="Αναζήτηση">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2.2"/>
              <path d="M16.5 16.5L21 21" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
            </svg>
          </button>
          {/* Categories button */}
          <button className="icon-btn" onClick={() => setViewAllOpen(true)} title="Όλες οι κατηγορίες">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              <rect x="14" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              <rect x="3" y="14" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              <rect x="14" y="14" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
          {/* Cart button with badge */}
          <button
            className="icon-btn"
            style={{ position: 'relative' }}
            onClick={() => setCartOpen(true)}
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4zM3 6h18M16 10a4 4 0 01-8 0" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            {cart.length > 0 && (
              <span style={{
                position: 'absolute', top: -2, right: -2,
                minWidth: 18, height: 18, borderRadius: 9,
                background: 'var(--accent)', color: 'var(--accent-fg)',
                fontSize: 11, fontWeight: 800,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: '0 4px',
              }}>{cart.length}</span>
            )}
          </button>
        </div>
      </header>

      {/* Product picker takes all remaining space */}
      {categories.length > 0 && (
        <ProductPicker
          categories={categories}
          products={products}
          onAdd={addToCart}
          viewAllOpen={viewAllOpen}
          setViewAllOpen={setViewAllOpen}
        />
      )}

      {/* ── Bottom bar: floating mini-cart + full-width ΑΠΟΣΤΟΛΗ ─────────────── */}
      <div style={{
        background: 'var(--bg2)',
        borderTop: '1px solid var(--border)',
        padding: '10px 12px 14px',
        flexShrink: 0,
      }}>
        {/* Floating compact cart — shown only when there are items */}
        {cart.length > 0 && (
          <div
            onClick={() => setCartOpen(true)}
            style={{
              background: 'var(--bg3)',
              border: '1px solid var(--border)',
              borderRadius: 12,
              padding: '8px 12px',
              marginBottom: 10,
              cursor: 'pointer',
              display: 'flex',
              flexDirection: 'column',
              gap: 4,
            }}
          >
            {stripItems.map(item => {
              const p = getProduct(item.product_id)
              return (
                <div key={item._key} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 12, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{p?.name ?? `#${item.product_id}`}</span>
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#f59e0b', fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>×{item.quantity}</span>
                </div>
              )
            })}
            {hiddenCount > 0 && (
              <div style={{ fontSize: 11, color: 'var(--muted)', textAlign: 'right' }}>
                +{hiddenCount} ακόμα — δείτε όλα →
              </div>
            )}
          </div>
        )}

        {/* Full-width send button */}
        <button
          className="btn btn--primary btn--lg"
          style={{ width: '100%', opacity: cart.length === 0 ? 0.4 : 1 }}
          onClick={sendOrder}
          disabled={cart.length === 0 || sending || !!printAck?.allOk}
        >
          {sending ? 'Αποστολή…' : `ΑΠΟΣΤΟΛΗ${cart.length > 0 ? ` (${cart.length})` : ''}`}
        </button>

        {error && <p className="error-msg" style={{ marginTop: 8 }}>{error}</p>}
      </div>

      {/* ── Cart side drawer ────────────────────────────────────────────────── */}
      <>
        {/* Backdrop */}
        <div
          onClick={() => setCartOpen(false)}
          style={{
            position: 'fixed', inset: 0,
            background: 'rgba(0,0,0,0.55)',
            opacity: cartOpen ? 1 : 0,
            pointerEvents: cartOpen ? 'auto' : 'none',
            transition: 'opacity 240ms ease',
            zIndex: 50,
          }}
        />
        {/* Panel */}
        <div style={{
          position: 'fixed', top: 0, right: 0, bottom: 0,
          width: 'min(88vw, 380px)',
          background: 'var(--bg)',
          borderLeft: '1px solid var(--border)',
          transform: cartOpen ? 'translateX(0)' : 'translateX(100%)',
          transition: 'transform 280ms cubic-bezier(0.32, 0.72, 0, 1)',
          zIndex: 51,
          display: 'flex', flexDirection: 'column',
          boxShadow: '-8px 0 32px rgba(0,0,0,0.4)',
        }}>
          {/* Drawer header */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text)' }}>Παραγγελία</div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 1 }}>{cart.length} {cart.length === 1 ? 'προϊόν' : 'προϊόντα'}</div>
            </div>
            <button onClick={() => setCartOpen(false)} style={{ background: 'var(--bg3)', border: 'none', borderRadius: '50%', width: 34, height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--text)' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18M6 18L18 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
            </button>
          </div>

          {/* Item list */}
          <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
            {cart.length === 0 ? (
              <p style={{ color: 'var(--muted)', textAlign: 'center', padding: '40px 0', fontSize: 14 }}>Η παραγγελία είναι κενή.</p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {cart.map(item => {
                  const product = getProduct(item.product_id)
                  const summaryLines = buildItemSummary(item)
                  const sections = buildItemSections(item, product)
                  return (
                    <CartItem
                      key={item._key}
                      item={item}
                      product={product}
                      summaryLines={summaryLines}
                      sections={sections}
                      onEdit={() => openEditDrawer(item)}
                      onRemove={() => removeFromCart(item._key)}
                      onChangeQty={qty => changeCartQty(item._key, qty)}
                    />
                  )
                })}
              </div>
            )}
          </div>

          {/* Drawer footer */}
          <div style={{ padding: '12px 12px 20px', borderTop: '1px solid var(--border)', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
            <button
              className="btn btn--primary btn--lg"
              style={{ width: '100%' }}
              onClick={sendOrder}
              disabled={cart.length === 0 || sending || !!printAck?.allOk}
            >
              {sending ? 'Αποστολή…' : `Αποστολή Παραγγελίας (${cart.length})`}
            </button>
          </div>
        </div>
      </>

      {/* Edit drawer */}
      {editItem && (
        <OrderDrawer
          product={editItem.product}
          isOpen={!!editItem}
          onClose={() => setEditItem(null)}
          onAdd={handleEditSave}
          initialState={editItem.drawerState}
        />
      )}

      {/* ── Search modal ─────────────────────────────────────────────────────── */}
      {searchOpen && (
        <SearchModal
          products={products}
          query={searchQuery}
          setQuery={setSearchQuery}
          onClose={() => setSearchOpen(false)}
          onAdd={item => { addToCart(item); setSearchOpen(false) }}
        />
      )}

      {/* Full-screen success overlay — blocks all interaction while navigating */}
      {printAck?.allOk && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 9999,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(0,0,0,0.72)',
          animation: 'fadeInOverlay 180ms ease',
        }}>
          <div style={{
            background: '#14532d', border: '2px solid #22c55e',
            borderRadius: 20, padding: '36px 48px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16,
            animation: 'popIn 220ms cubic-bezier(0.34,1.56,0.64,1)',
          }}>
            <svg width="56" height="56" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="11" stroke="#22c55e" strokeWidth="2"/>
              <path d="M7 12.5l3.5 3.5 6.5-7" stroke="#22c55e" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <span style={{ color: '#86efac', fontWeight: 700, fontSize: 18, letterSpacing: 0.3 }}>
              Εκτυπώθηκε Επιτυχώς
            </span>
          </div>
          <style>{`
            @keyframes fadeInOverlay { from { opacity: 0 } to { opacity: 1 } }
            @keyframes popIn { from { transform: scale(0.7); opacity: 0 } to { transform: scale(1); opacity: 1 } }
          `}</style>
        </div>
      )}
    </div>
  )
}

// ── Cart Item (used in the side drawer) ───────────────────────────────────────

const SECTION_META = {
  prefs:   { icon: '◉', label: null },
  quick:   { icon: '>', label: null },
  extras:  { icon: '+', label: null },
  removed: { icon: '−', label: null },
  note:    { icon: 'i', label: null },
}

function SectionIcon({ type }) {
  const icons = {
    prefs:   <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4" fill="#f59e0b"/><circle cx="12" cy="12" r="9" stroke="#f59e0b" strokeWidth="2"/></svg>,
    quick:   <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="#a3e635" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    extras:  <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="#60a5fa" strokeWidth="2.5" strokeLinecap="round"/></svg>,
    removed: <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 12h14" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round"/></svg>,
    note:    <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="1.5" fill="#94a3b8"/><path d="M12 7v1M12 16v1" stroke="#94a3b8" strokeWidth="2" strokeLinecap="round"/><circle cx="12" cy="12" r="9" stroke="#94a3b8" strokeWidth="1.5"/></svg>,
  }
  return <span style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}>{icons[type] ?? null}</span>
}

function CartItem({ item, product, summaryLines, sections, onEdit, onRemove, onChangeQty }) {
  const [expanded, setExpanded] = useState(false)
  const hasDetails = sections.length > 0

  return (
    <div style={{ background: 'var(--bg2)', border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden' }}>
      {/* Whole header row is always clickable to expand (qty stepper is always available) */}
      <div
        onClick={() => setExpanded(e => !e)}
        style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', cursor: 'pointer' }}
      >
        {/* Chevron — always shown */}
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" style={{ transform: `rotate(${expanded ? 180 : 0}deg)`, transition: 'transform 180ms', flexShrink: 0, color: 'var(--muted)' }}>
          <path d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
        </svg>

        {/* Name */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {product?.name ?? `#${item.product_id}`}
          </div>
          {!expanded && hasDetails && (
            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {summaryLines[0]}{summaryLines.length > 1 ? ` +${summaryLines.length - 1}` : ''}
            </div>
          )}
        </div>

        {/* Quantity on the right */}
        <span style={{ color: '#f59e0b', fontSize: 13, fontWeight: 700, fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>×{item.quantity}</span>

        {/* Edit — stop propagation so it doesn't toggle expand */}
        <button onClick={e => { e.stopPropagation(); onEdit() }} style={{ background: 'none', border: '1px solid var(--border)', borderRadius: 7, color: 'var(--muted)', cursor: 'pointer', padding: '3px 9px', fontSize: 12, fontWeight: 500, flexShrink: 0 }}>
          Επεξ.
        </button>
        {/* Remove */}
        <button onClick={e => { e.stopPropagation(); onRemove() }} style={{ background: 'none', border: 'none', color: 'var(--danger)', cursor: 'pointer', padding: 4, display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18M6 18L18 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
        </button>
      </div>

      {expanded && (
        <div style={{ paddingBottom: 10 }}>
          {sections.map((sec, si) => (
            <div key={si}>
              <div style={{ margin: '0 12px', height: 1, background: 'var(--border)' }} />
              <div style={{ padding: '6px 12px 2px', display: 'flex', flexDirection: 'column', gap: 4 }}>
                {sec.type === 'prefs' && sec.lines.map((line, li) => (
                  <div key={li} style={{ display: 'flex', alignItems: 'flex-start', gap: 7 }}>
                    <SectionIcon type="prefs" />
                    <span style={{ fontSize: 12, lineHeight: 1.4, flex: 1 }}>
                      <span style={{ color: 'var(--muted)', display: 'block', fontSize: 11 }}>{line.setName}</span>
                      <span style={{ color: 'var(--text)' }}>{line.values.join(' · ')}</span>
                    </span>
                  </div>
                ))}
                {sec.type === 'quick' && sec.lines.map((line, li) => (
                  <div key={li} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                    <SectionIcon type="quick" />
                    <span style={{ fontSize: 12, color: 'var(--text)', flex: 1 }}>
                      {line.name}
                      {line._qty > 1 && <span style={{ color: '#f59e0b', marginLeft: 4, fontWeight: 700 }}>×{line._qty}</span>}
                    </span>
                  </div>
                ))}
                {sec.type === 'extras' && sec.lines.map((line, li) => (
                  <div key={li} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                    <SectionIcon type="extras" />
                    <span style={{ fontSize: 12, color: 'var(--text)', flex: 1 }}>
                      {line.name}
                      {line.subName && <span> · {line.subName}</span>}
                      {line.qty > 1 && <span style={{ color: '#f59e0b', marginLeft: 4, fontWeight: 700 }}>×{line.qty}</span>}
                    </span>
                  </div>
                ))}
                {sec.type === 'removed' && sec.lines.map((line, li) => (
                  <div key={li} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                    <SectionIcon type="removed" />
                    <span style={{ fontSize: 12, color: 'var(--text)', flex: 1 }}>Χωρίς {line.name}</span>
                  </div>
                ))}
                {sec.type === 'note' && sec.lines.map((line, li) => (
                  <div key={li} style={{ display: 'flex', alignItems: 'flex-start', gap: 7 }}>
                    <SectionIcon type="note" />
                    <span style={{ fontSize: 12, color: 'var(--text)', lineHeight: 1.4, flex: 1, whiteSpace: 'pre-wrap' }}>{line.name}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* ── Quick qty row ── */}
          <div style={{ margin: '8px 12px 0', height: 1, background: 'var(--border)' }} />
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16,
            padding: '10px 12px 2px',
          }}>
            <button
              onClick={e => { e.stopPropagation(); onChangeQty(item.quantity - 1) }}
              style={{
                width: 36, height: 36, borderRadius: '50%',
                background: 'var(--bg3)', border: '1px solid var(--border)',
                color: item.quantity <= 1 ? 'var(--muted)' : 'var(--danger)',
                fontSize: 20, fontWeight: 700, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}
            >
              {item.quantity <= 1 ? (
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18M6 18L18 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
              ) : '−'}
            </button>
            <span style={{ fontSize: 16, fontWeight: 700, color: 'var(--text)', minWidth: 28, textAlign: 'center' }}>
              {item.quantity}
            </span>
            <button
              onClick={e => { e.stopPropagation(); onChangeQty(item.quantity + 1) }}
              style={{
                width: 36, height: 36, borderRadius: '50%',
                background: 'var(--bg3)', border: '1px solid var(--border)',
                color: '#22c55e',
                fontSize: 20, fontWeight: 700, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}
            >+</button>
          </div>
        </div>
      )}
    </div>
  )
}

// ── Search Modal ──────────────────────────────────────────────────────────────


function SearchModal({ products, query, setQuery, onClose, onAdd }) {
  const [drawerProduct, setDrawerProduct] = useState(null)
  const activeProducts = products.filter(p => p.lifecycle_status !== 'archived')

  const results = query.trim().length === 0
    ? []
    : activeProducts.filter(p =>
        p.name.toLowerCase().includes(query.trim().toLowerCase())
      )

  function openProduct(p) {
    // Blur the input first so the keyboard dismisses, then open the drawer
    document.activeElement?.blur()
    setDrawerProduct(p)
  }

  // The modal is position:fixed anchored to bottom:0.
  // When the soft keyboard opens on mobile the browser shrinks the visual
  // viewport and fixed elements reposition automatically — the panel sits
  // right on top of the keyboard without any JS measurement needed.
  return (
    <>
      {/* Dim backdrop — tap to close */}
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 200 }} />

      {/* Panel: fixed to bottom, grows upward, capped at 60vh so results don't
          push the input off screen on short viewports */}
      <div style={{
        position: 'fixed', left: 0, right: 0, bottom: 0,
        zIndex: 201,
        background: 'var(--bg)',
        borderTop: '1px solid var(--border)',
        display: 'flex', flexDirection: 'column',
        maxHeight: '60vh',
      }}>
        {/* Results scroll area — flex:1 so it takes space above the input */}
        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
          {query.trim().length === 0 ? (
            <p style={{ textAlign: 'center', color: 'var(--muted)', padding: '16px 20px', fontSize: 14 }}>
              Πληκτρολογήστε για αναζήτηση…
            </p>
          ) : results.length === 0 ? (
            <p style={{ textAlign: 'center', color: 'var(--muted)', padding: '16px 20px', fontSize: 14 }}>
              Δεν βρέθηκαν προϊόντα για «{query}»
            </p>
          ) : results.map(p => {
            const initials = p.name.trim().split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase()
            return (
              <button
                key={p.id}
                onClick={() => openProduct(p)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  width: '100%', padding: '10px 16px',
                  background: 'none', border: 'none', cursor: 'pointer',
                  borderBottom: '1px solid var(--border)',
                  textAlign: 'left',
                }}
              >
                <div style={{
                  width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                  background: 'var(--bg3)', overflow: 'hidden',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {p.image_url
                    ? <img src={p.image_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    : <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--muted)' }}>{initials}</span>
                  }
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {p.name}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>
                    {Number(p.base_price).toFixed(2)} €
                  </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{ color: 'var(--muted)', flexShrink: 0 }}>
                  <path d="M9 18l6-6-6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
            )
          })}
        </div>

        {/* Search input — pinned at the bottom of the panel, above the keyboard */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 12px 12px',
          borderTop: '1px solid var(--border)',
          flexShrink: 0,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ color: 'var(--muted)', flexShrink: 0 }}>
            <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2.2"/>
            <path d="M16.5 16.5L21 21" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
          </svg>
          <input
            autoFocus
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Αναζήτηση προϊόντος…"
            style={{
              flex: 1, height: 44, background: 'var(--bg2)',
              border: '1px solid var(--border)', borderRadius: 12,
              padding: '0 12px', fontSize: 16, color: 'var(--text)',
              fontFamily: 'inherit', outline: 'none',
            }}
          />
          <button
            onClick={onClose}
            style={{
              background: 'var(--bg3)', border: 'none', borderRadius: '50%',
              width: 36, height: 36, flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', color: 'var(--text)',
            }}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </div>

      {/* Product drawer — closes search modal when item is added */}
      {drawerProduct && (
        <OrderDrawer
          product={drawerProduct}
          isOpen
          onClose={() => setDrawerProduct(null)}
          onAdd={item => { onAdd(item); setDrawerProduct(null); onClose() }}
        />
      )}
    </>
  )
}