import { useState, useEffect } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import toast from 'react-hot-toast'
import client from '../api/client'
import ConfirmModal from '../components/ConfirmModal'

const EMPTY_PRODUCT = {
  name: '', category_id: '', base_price: '', is_available: true, lifecycle_status: 'active',
  printer_zone_id: '', quick_options: [], options: [], ingredients: [], preference_sets: [],
}

const COLORS = ['#6366f1','#0ea5e9','#10b981','#f59e0b','#ef4444','#ec4899','#8b5cf6','#14b8a6','#f97316','#64748b']

function ColorPicker({ value, onChange }) {
  return (
    <div className="flex flex-wrap gap-2 mt-1">
      {COLORS.map(c => (
        <button key={c} type="button" onClick={() => onChange(c)}
          className="w-7 h-7 rounded-full border-2 transition-all"
          style={{ background: c, borderColor: value === c ? '#000' : 'transparent' }}
        />
      ))}
    </div>
  )
}

function IconBase({ className = '', viewBox, strokeWidth = '1.5', children }) {
  return (
    <svg
      aria-hidden="true"
      viewBox={viewBox}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={`inline-block shrink-0 ${className}`}
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  )
}

function AddIcon({ className = '' }) {
  return (
    <IconBase className={className} viewBox="0 0 24 24">
      <path d="M15 12H9" />
      <path d="M12 9V15" />
      <path d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C21.5093 4.43821 21.8356 5.80655 21.9449 8" />
    </IconBase>
  )
}

function MoveUpIcon({ className = '' }) {
  return (
    <IconBase className={className} viewBox="-0.5 0 25 25">
      <path d="M12 22.4199C17.5228 22.4199 22 17.9428 22 12.4199C22 6.89707 17.5228 2.41992 12 2.41992C6.47715 2.41992 2 6.89707 2 12.4199C2 17.9428 6.47715 22.4199 12 22.4199Z" />
      <path d="M8 13.8599L10.87 10.8C11.0125 10.6416 11.1868 10.5149 11.3815 10.4282C11.5761 10.3415 11.7869 10.2966 12 10.2966C12.2131 10.2966 12.4239 10.3415 12.6185 10.4282C12.8132 10.5149 12.9875 10.6416 13.13 10.8L16 13.8599" />
    </IconBase>
  )
}

function MoveDownIcon({ className = '' }) {
  return (
    <IconBase className={className} viewBox="-0.5 0 25 25">
      <path d="M12 22.4199C17.5228 22.4199 22 17.9428 22 12.4199C22 6.89707 17.5228 2.41992 12 2.41992C6.47715 2.41992 2 6.89707 2 12.4199C2 17.9428 6.47715 22.4199 12 22.4199Z" />
      <path d="M16 10.99L13.13 14.05C12.9858 14.2058 12.811 14.3298 12.6166 14.4148C12.4221 14.4998 12.2122 14.5437 12 14.5437C11.7878 14.5437 11.5779 14.4998 11.3834 14.4148C11.189 14.3298 11.0142 14.2058 10.87 14.05L8 10.99" />
    </IconBase>
  )
}

function EditIcon({ className = '' }) {
  return (
    <IconBase className={className} viewBox="0 0 24 24">
      <path d="M18 10L14 6M18 10L21 7L17 3L14 6M18 10L17 11M14 6L8 12V16H12L14.5 13.5M20 14V20H12M10 4L4 4L4 20H7" />
    </IconBase>
  )
}

function DeleteIcon({ className = '' }) {
  return (
    <IconBase className={className} viewBox="0 0 24 24" strokeWidth="2">
      <path d="M10 11V17" />
      <path d="M14 11V17" />
      <path d="M4 7H20" />
      <path d="M6 7H12H18V18C18 19.6569 16.6569 21 15 21H9C7.34315 21 6 19.6569 6 18V7Z" />
      <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" />
    </IconBase>
  )
}

function HeartIcon({ filled, className = '' }) {
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24" className={`inline-block shrink-0 ${className}`}
      fill={filled ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.8"
      strokeLinecap="round" strokeLinejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
    </svg>
  )
}

function ReorderBtns({ onUp, onDown, disableUp, disableDown }) {
  return (
    <div className="flex flex-col shrink-0">
      <button type="button" onClick={onUp} disabled={disableUp}
        className="text-gray-400 hover:text-gray-600 disabled:opacity-20 leading-none px-1 py-0.5 text-xs">▲</button>
      <button type="button" onClick={onDown} disabled={disableDown}
        className="text-gray-400 hover:text-gray-600 disabled:opacity-20 leading-none px-1 py-0.5 text-xs">▼</button>
    </div>
  )
}

function DefaultBtn({ isDefault, onClick, title }) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={title ?? (isDefault ? 'Κλικ για αποεπιλογή' : 'Ορισμός ως προεπιλογή')}
      className={`w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-all ${
        isDefault
          ? 'border-primary-600 bg-primary-600'
          : 'border-gray-300 bg-white hover:border-primary-400'
      }`}
    >
      {isDefault && <span className="w-2.5 h-2.5 rounded-full bg-white block" />}
    </button>
  )
}

function FavoriteBtn({ isFavorite, onClick, title }) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={title ?? (isFavorite ? 'Αφαίρεση από αγαπημένα' : 'Προσθήκη στα αγαπημένα')}
      className={`w-7 h-7 rounded-full flex items-center justify-center shrink-0 transition-all ${
        isFavorite
          ? 'text-rose-500 hover:text-rose-400'
          : 'text-gray-300 hover:text-rose-400'
      }`}
    >
      <HeartIcon filled={isFavorite} className="w-4 h-4" />
    </button>
  )
}

function PriceInput({ value, onChange, placeholder, className = '', allowNegative = false }) {
  const step = 0.10
  const num = parseFloat(value) || 0
  function inc() { onChange(Math.round((num + step) * 100) / 100) }
  function dec() {
    const next = Math.round((num - step) * 100) / 100
    onChange(allowNegative ? next : Math.max(0, next))
  }
  return (
    <div className={`flex items-center border border-gray-300 rounded-lg overflow-hidden h-10 ${className}`}>
      <button type="button" onClick={dec}
        className="px-2 h-full text-gray-500 hover:bg-gray-100 border-r border-gray-300 text-sm font-bold shrink-0">−</button>
      <input
        type="number" step="0.10" value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder ?? '0.00'}
        className="flex-1 min-w-0 text-center text-sm outline-none bg-transparent px-1"
      />
      <button type="button" onClick={inc}
        className="px-2 h-full text-gray-500 hover:bg-gray-100 border-l border-gray-300 text-sm font-bold shrink-0">+</button>
    </div>
  )
}

function moveItem(arr, i, dir) {
  const j = i + dir
  if (j < 0 || j >= arr.length) return arr
  const next = [...arr]
  ;[next[i], next[j]] = [next[j], next[i]]
  return next
}

function SubChoiceRows({ subChoices, onMove, onToggleDefault, onChange, onRemove, onAdd, parentLabel }) {
  if (!subChoices || subChoices.length === 0) return null
  return (
    <div className="border-t border-gray-100 bg-indigo-50/40 px-3 py-2 space-y-2">
      <p className="text-xs text-indigo-500 font-medium mb-1">
        Υπο-επιλογές του «{parentLabel || '…'}» — εμφανίζονται μόνο αν επιλεγεί
      </p>
      {subChoices.map((sc, sci) => (
        <div key={sci} className="flex items-center gap-2 ml-4">
          <ReorderBtns
            onUp={() => onMove(sci, -1)} onDown={() => onMove(sci, 1)}
            disableUp={sci === 0} disableDown={sci === subChoices.length - 1}
          />
          <DefaultBtn isDefault={sc.is_default} onClick={() => onToggleDefault(sci)} />
          <input className="input flex-1 text-sm" placeholder="π.χ. Καραμέλα"
            value={sc.name} onChange={e => onChange(sci, 'name', e.target.value)} />
          <PriceInput value={sc.extra_cost} onChange={v => onChange(sci, 'extra_cost', v)}
            allowNegative className="w-28 text-sm" />
          <button onClick={() => onRemove(sci)} className="btn btn-danger px-2 min-h-0 h-9 text-sm shrink-0">✕</button>
        </div>
      ))}
      <button onClick={onAdd} className="ml-4 btn btn-secondary text-xs px-2 py-1 min-h-0 h-7">
        + Υπο-επιλογή
      </button>
    </div>
  )
}

// Build the ordered list of sub-category-like rows for a parent:
// interleaves the "General" virtual row at its general_sort_order position
function buildSubList(parent, subcategories) {
  const subs = [...subcategories].sort((a, b) => a.sort_order - b.sort_order)
  const generalRow = { _isGeneral: true, sort_order: parent.general_sort_order }
  const all = [...subs, generalRow].sort((a, b) => a.sort_order - b.sort_order)
  return all
}

export default function ProductsPage() {
  const qc = useQueryClient()
  const [selectedCat, setSelectedCat] = useState(null)
  const [editProduct, setEditProduct] = useState(null)
  const [editCat, setEditCat] = useState(null)
  const [confirmDelete, setConfirmDelete] = useState(null)
  const [showInactive, setShowInactive] = useState(false)
  const [showArchived, setShowArchived] = useState(false)
  const [multiSelect, setMultiSelect] = useState(false)
  const [selected, setSelected] = useState(new Set())
  const [sortMode, setSortMode] = useState('custom')

  const { data: categories = [] } = useQuery({
    queryKey: ['categories'],
    queryFn: () => client.get('/api/products/categories').then(r => r.data),
  })
  const { data: allProducts = [] } = useQuery({
    queryKey: ['products-all'],
    queryFn: () => client.get('/api/products/?all=true').then(r => r.data),
  })
  const { data: statusData } = useQuery({
    queryKey: ['system-status'],
    queryFn: () => client.get('/api/system/status').then(r => r.data),
    staleTime: 60_000,
  })
  const printers = statusData?.printers ?? []

  // selectedCat can be:
  //   null                  → all products
  //   number                → specific category (if top-level: includes all sub-cats too)
  //   '__general_<id>'      → only direct products of that top-level category (no sub-cat)
  const isGeneralSel = typeof selectedCat === 'string' && selectedCat.startsWith('__general_')
  const generalParentId = isGeneralSel ? Number(selectedCat.replace('__general_', '')) : null
  const selectedCatObj = isGeneralSel ? null : categories.find(c => c.id === selectedCat)
  const visibleCatIds = isGeneralSel
    ? [generalParentId]  // only direct products on the parent
    : selectedCat
      ? selectedCatObj?.parent_id == null
        ? [selectedCat, ...categories.filter(c => c.parent_id === selectedCat).map(c => c.id)]
        : [selectedCat]
      : null
  const filteredByCat = visibleCatIds ? allProducts.filter(p => visibleCatIds.includes(p.category_id)) : allProducts
  const baseList = filteredByCat.filter(p => {
    if (p.lifecycle_status === 'archived') return showArchived
    if (!p.is_available) return showInactive
    return true
  })
  const products = [...baseList].sort((a, b) => {
    if (sortMode === 'name') return a.name.localeCompare(b.name, 'el')
    if (sortMode === 'price') return a.base_price - b.base_price
    return (a.sort_order ?? 0) - (b.sort_order ?? 0) || a.id - b.id
  })

  const invalidate = () => {
    qc.invalidateQueries({ queryKey: ['products-all'] })
    qc.invalidateQueries({ queryKey: ['categories'] })
  }

  const saveCat = useMutation({
    mutationFn: b => editCat?.id ? client.put(`/api/products/categories/${editCat.id}`, b) : client.post('/api/products/categories', b),
    onSuccess: () => { toast.success('Κατηγορία αποθηκεύτηκε'); setEditCat(null); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })
  const deleteCat = useMutation({
    mutationFn: id => client.delete(`/api/products/categories/${id}`),
    onSuccess: () => { toast.success('Διαγράφηκε'); setConfirmDelete(null); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })
  const reorderCats = useMutation({
    mutationFn: items => client.put('/api/products/categories/reorder', items),
    onSuccess: () => invalidate(),
  })
  const reorderSubcats = useMutation({
    mutationFn: items => client.put('/api/products/categories/reorder-subcategories', items),
    onSuccess: () => invalidate(),
  })
  const reorderGeneral = useMutation({
    mutationFn: items => client.put('/api/products/categories/reorder-general', items),
    onSuccess: () => invalidate(),
  })
  const toggleAutoExpanded = useMutation({
    mutationFn: ({ id, auto_expanded }) => client.put(`/api/products/categories/${id}`, { auto_expanded }),
    onSuccess: () => invalidate(),
  })
  const saveProduct = useMutation({
    mutationFn: b => editProduct?.id ? client.put(`/api/products/${editProduct.id}`, b) : client.post('/api/products/', b),
    onSuccess: () => { toast.success('Προϊόν αποθηκεύτηκε'); setEditProduct(null); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })
  const toggleAvail = useMutation({
    mutationFn: ({ id, is_available }) => client.put(`/api/products/${id}`, { is_available }),
    onSuccess: () => invalidate(),
    onError: () => toast.error('Σφάλμα'),
  })
  const archiveProduct = useMutation({
    mutationFn: id => client.delete(`/api/products/${id}`),
    onSuccess: () => { toast.success('Αρχειοθετήθηκε'); setConfirmDelete(null); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })
  const hardDeleteProduct = useMutation({
    mutationFn: id => client.delete(`/api/products/${id}?hard=true`),
    onSuccess: () => { toast.success('Διαγράφηκε οριστικά'); setConfirmDelete(null); invalidate() },
    onError: err => toast.error(err.response?.data?.detail || 'Σφάλμα'),
  })
  const reorderProducts = useMutation({
    mutationFn: items => client.put('/api/products/reorder', items),
    onSuccess: () => invalidate(),
  })

  function moveProd(prod, dir) {
    const sorted = [...baseList].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0) || a.id - b.id)
    const idx = sorted.findIndex(p => p.id === prod.id)
    const swapIdx = idx + dir
    if (swapIdx < 0 || swapIdx >= sorted.length) return
    const normalised = sorted.map((p, i) => ({ id: p.id, sort_order: i }))
    ;[normalised[idx].sort_order, normalised[swapIdx].sort_order] = [normalised[swapIdx].sort_order, normalised[idx].sort_order]
    reorderProducts.mutate(normalised)
  }

  function moveCat(cat, dir) {
    const sorted = categories.filter(c => !c.parent_id).sort((a, b) => a.sort_order - b.sort_order)
    const idx = sorted.findIndex(c => c.id === cat.id)
    const swapIdx = idx + dir
    if (swapIdx < 0 || swapIdx >= sorted.length) return
    const updates = sorted.map((c, i) => {
      if (i === idx) return { id: c.id, sort_order: sorted[swapIdx].sort_order }
      if (i === swapIdx) return { id: c.id, sort_order: sorted[idx].sort_order }
      return { id: c.id, sort_order: c.sort_order }
    })
    reorderCats.mutate(updates)
  }

  // Shared helper: move any row (sub-cat or General) in the mixed sub-list.
  // Normalises the whole list to 0-based sequential indices, swaps the two positions,
  // then writes all updated values. This avoids colliding sort_order values.
  function _moveInSubList(parent, itemIdx, dir) {
    const subs = categories.filter(c => c.parent_id === parent.id).sort((a, b) => a.sort_order - b.sort_order)
    const subList = buildSubList(parent, subs)
    const swapIdx = itemIdx + dir
    if (itemIdx < 0 || swapIdx < 0 || swapIdx >= subList.length) return
    // Normalise to clean sequential indices
    const normalised = subList.map((row, i) => ({ ...row, _normOrder: i }))
    ;[normalised[itemIdx]._normOrder, normalised[swapIdx]._normOrder] =
      [normalised[swapIdx]._normOrder, normalised[itemIdx]._normOrder]
    // Write subcats and general separately
    const subcatUpdates = normalised
      .filter(r => !r._isGeneral)
      .map(r => ({ id: r.id, sort_order: r._normOrder }))
    const generalRow = normalised.find(r => r._isGeneral)
    if (subcatUpdates.length) reorderSubcats.mutate(subcatUpdates)
    if (generalRow) reorderGeneral.mutate([{ id: parent.id, general_sort_order: generalRow._normOrder }])
  }

  function moveSubcat(parent, subcat, dir) {
    const subs = categories.filter(c => c.parent_id === parent.id).sort((a, b) => a.sort_order - b.sort_order)
    const subList = buildSubList(parent, subs)
    const idx = subList.findIndex(r => !r._isGeneral && r.id === subcat.id)
    _moveInSubList(parent, idx, dir)
  }

  function moveGeneral(parent, dir) {
    const subs = categories.filter(c => c.parent_id === parent.id).sort((a, b) => a.sort_order - b.sort_order)
    const subList = buildSubList(parent, subs)
    const idx = subList.findIndex(r => r._isGeneral)
    _moveInSubList(parent, idx, dir)
  }

  function toggleSelect(id) {
    setSelected(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n })
  }
  function selectAll() { setSelected(new Set(products.map(p => p.id))) }
  function clearSelect() { setSelected(new Set()) }
  function exitMultiSelect() { setMultiSelect(false); setSelected(new Set()) }

  async function bulkAction(action) {
    const ids = [...selected]
    if (!ids.length) return
    try {
      if (action === 'available') { await Promise.all(ids.map(id => client.put(`/api/products/${id}`, { is_available: true }))); toast.success(`${ids.length} διαθέσιμα`) }
      else if (action === 'unavailable') { await Promise.all(ids.map(id => client.put(`/api/products/${id}`, { is_available: false }))); toast.success(`${ids.length} μη διαθέσιμα`) }
      else if (action === 'archive') { setConfirmDelete({ type: 'bulk-archive', ids }); return }
      invalidate(); exitMultiSelect()
    } catch { toast.error('Σφάλμα') }
  }

  async function confirmBulkArchive(ids) {
    const results = await Promise.allSettled(ids.map(id => client.delete(`/api/products/${id}`)))
    const ok = results.filter(r => r.status === 'fulfilled').length
    const fail = results.filter(r => r.status === 'rejected').length
    if (ok) toast.success(`${ok} αρχειοθετήθηκαν ή διαγράφηκαν`)
    if (fail) toast.error(`${fail} απέτυχαν`)
    setConfirmDelete(null); invalidate(); exitMultiSelect()
  }

  function handleConfirmDelete() {
    if (!confirmDelete) return
    if (confirmDelete.type === 'category') deleteCat.mutate(confirmDelete.id)
    if (confirmDelete.type === 'product-archive') archiveProduct.mutate(confirmDelete.id)
    if (confirmDelete.type === 'product-hard') hardDeleteProduct.mutate(confirmDelete.id)
    if (confirmDelete.type === 'bulk-archive') confirmBulkArchive(confirmDelete.ids)
  }

  const printerName = id => printers.find(p => p.id === id)?.name ?? `#${id}`
  const categoryIconClass = 'w-4 h-4'
  const categoryActionBtnClass = 'p-1 rounded-md hover:bg-black/5 disabled:opacity-30 disabled:cursor-not-allowed'
  const categoryMoveBtnClass = `${categoryActionBtnClass} text-primary-700 hover:text-primary-800`
  const categoryEditBtnClass = `${categoryActionBtnClass} text-orange-500 hover:text-orange-600`
  const categoryDeleteBtnClass = `${categoryActionBtnClass} text-red-600 hover:text-red-700`

  const topLevelCats = categories.filter(c => !c.parent_id).sort((a, b) => a.sort_order - b.sort_order)

  return (
    <div className="flex gap-6 h-full">
      {/* Left: Categories */}
      <aside className="w-96 shrink-0 space-y-1 overflow-y-auto">
        <div className="flex items-center justify-between mb-3">
          <h2 className="font-semibold text-gray-700">Κατηγορίες</h2>
          <button
            onClick={() => setEditCat({ _isNew: true })}
            className="btn btn-primary px-2 py-1 min-h-0 h-8 text-white"
            title="Προσθήκη κατηγορίας"
            aria-label="Προσθήκη κατηγορίας"
          >
            <AddIcon className={categoryIconClass} />
          </button>
        </div>
        <button onClick={() => setSelectedCat(null)}
          className={`w-full text-left px-3 py-2.5 rounded-xl text-sm font-medium transition-colors ${!selectedCat ? 'bg-primary-700 text-white' : 'hover:bg-gray-100 text-gray-700'}`}>
          Όλα
        </button>

        {topLevelCats.map((cat, idx) => {
          const subs = categories.filter(c => c.parent_id === cat.id).sort((a, b) => a.sort_order - b.sort_order)
          const subList = buildSubList(cat, subs)
          const isParentActive = selectedCat === cat.id
          return (
            <div key={cat.id}>
              {/* Top-level category row */}
              <div className={`flex items-center gap-1 rounded-xl ${isParentActive ? 'bg-primary-700 text-white' : 'hover:bg-gray-100'}`}>
                {cat.color && <span className="w-2.5 h-2.5 rounded-full ml-2 shrink-0" style={{ background: cat.color }} />}
                <button onClick={() => setSelectedCat(cat.id)} className="flex-1 text-left px-2 py-2.5 text-sm font-medium truncate">{cat.name}</button>
                {/* Add sub-category button */}
                <button
                  onClick={() => setEditCat({ _isNew: true, parent_id: cat.id })}
                  className={`${categoryActionBtnClass} text-green-600 hover:text-green-700`}
                  title="Προσθήκη υποκατηγορίας"
                >
                  <AddIcon className={categoryIconClass} />
                </button>
                <button onClick={() => moveCat(cat, -1)} disabled={idx === 0} className={categoryMoveBtnClass} title="Μετακίνηση πάνω">
                  <MoveUpIcon className={categoryIconClass} />
                </button>
                <button onClick={() => moveCat(cat, 1)} disabled={idx === topLevelCats.length - 1} className={categoryMoveBtnClass} title="Μετακίνηση κάτω">
                  <MoveDownIcon className={categoryIconClass} />
                </button>
                <button onClick={() => setEditCat(cat)} className={categoryEditBtnClass} title="Επεξεργασία">
                  <EditIcon className={categoryIconClass} />
                </button>
                <button onClick={() => setConfirmDelete({ type: 'category', id: cat.id })} className={`${categoryDeleteBtnClass} mr-1`} title="Διαγραφή">
                  <DeleteIcon className={categoryIconClass} />
                </button>
              </div>

              {/* Sub-category rows (indented), interleaved with General group */}
              {subList.map((row, subIdx) => {
                if (row._isGeneral) {
                  // Virtual "General" row — products directly on the parent
                  const isGeneralActive = selectedCat === `__general_${cat.id}`
                  return (
                    <div key="__general__" className={`flex items-center gap-1 ml-4 rounded-xl ${isGeneralActive ? 'bg-primary-600 text-white' : 'hover:bg-gray-100'}`}>
                      <span className="w-1.5 h-1.5 rounded-full ml-2 shrink-0 bg-gray-300" />
                      <button
                        onClick={() => setSelectedCat(`__general_${cat.id}`)}
                        className={`flex-1 text-left px-2 py-2 text-xs italic truncate ${selectedCat === `__general_${cat.id}` ? 'font-semibold' : 'text-gray-400'}`}
                      >Γενικά</button>
                      <button onClick={() => moveGeneral(cat, -1)} disabled={subIdx === 0} className={`${categoryMoveBtnClass} opacity-60`} title="Μετακίνηση Γενικά πάνω">
                        <MoveUpIcon className={categoryIconClass} />
                      </button>
                      <button onClick={() => moveGeneral(cat, 1)} disabled={subIdx === subList.length - 1} className={`${categoryMoveBtnClass} opacity-60 mr-1`} title="Μετακίνηση Γενικά κάτω">
                        <MoveDownIcon className={categoryIconClass} />
                      </button>
                    </div>
                  )
                }
                const isSubActive = selectedCat === row.id
                return (
                  <div key={row.id} className={`flex items-center gap-1 ml-4 rounded-xl ${isSubActive ? 'bg-primary-600 text-white' : 'hover:bg-gray-100'}`}>
                    {row.color
                      ? <span className="w-1.5 h-1.5 rounded-full ml-2 shrink-0" style={{ background: row.color }} />
                      : <span className="w-1.5 h-1.5 rounded-full ml-2 shrink-0 bg-gray-400" />
                    }
                    <button onClick={() => setSelectedCat(row.id)} className="flex-1 text-left px-2 py-2 text-xs font-medium truncate">{row.name}</button>
                    {/* Auto-expanded toggle */}
                    <button
                      type="button"
                      onClick={() => toggleAutoExpanded.mutate({ id: row.id, auto_expanded: !row.auto_expanded })}
                      title={row.auto_expanded ? 'Auto-expanded: ON — κλικ για απενεργοποίηση' : 'Auto-expanded: OFF — κλικ για ενεργοποίηση'}
                      className={`px-1.5 py-0.5 rounded text-xs font-bold shrink-0 transition-colors ${
                        row.auto_expanded
                          ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
                          : 'bg-gray-100 text-gray-400 hover:bg-gray-200'
                      }`}
                    >
                      ↕
                    </button>
                    <button onClick={() => moveSubcat(cat, row, -1)} disabled={subIdx === 0} className={categoryMoveBtnClass} title="Μετακίνηση πάνω">
                      <MoveUpIcon className={categoryIconClass} />
                    </button>
                    <button onClick={() => moveSubcat(cat, row, 1)} disabled={subIdx === subList.length - 1} className={categoryMoveBtnClass} title="Μετακίνηση κάτω">
                      <MoveDownIcon className={categoryIconClass} />
                    </button>
                    <button onClick={() => setEditCat(row)} className={categoryEditBtnClass} title="Επεξεργασία">
                      <EditIcon className={categoryIconClass} />
                    </button>
                    <button onClick={() => setConfirmDelete({ type: 'category', id: row.id })} className={`${categoryDeleteBtnClass} mr-1`} title="Διαγραφή">
                      <DeleteIcon className={categoryIconClass} />
                    </button>
                  </div>
                )
              })}
            </div>
          )
        })}
      </aside>

      {/* Right: Products */}
      <div className="flex-1 space-y-4 min-w-0">
        <div className="flex items-center gap-3 flex-wrap">
          <h2 className="font-semibold text-gray-700 flex-1">
            {isGeneralSel
              ? (() => {
                  const parent = categories.find(c => c.id === generalParentId)
                  return `Προϊόντα — ${parent?.name ?? '?'} / Γενικά`
                })()
              : selectedCat
                ? (() => {
                    const cat = categories.find(c => c.id === selectedCat)
                    if (!cat) return 'Προϊόντα'
                    if (cat.parent_id) {
                      const parent = categories.find(c => c.id === cat.parent_id)
                      return `Προϊόντα — ${parent?.name ?? '?'} / ${cat.name}`
                    }
                    return `Προϊόντα — ${cat.name}`
                  })()
                : 'Προϊόντα'
            }
          </h2>
          <label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
            <input type="checkbox" checked={showInactive} onChange={e => setShowInactive(e.target.checked)} className="accent-primary-700" />
            Ανενεργά
          </label>
          <label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
            <input type="checkbox" checked={showArchived} onChange={e => setShowArchived(e.target.checked)} className="accent-primary-700" />
            Αρχειοθετημένα
          </label>
          <select value={sortMode} onChange={e => setSortMode(e.target.value)} className="input text-sm py-1 h-9 min-h-0 w-auto pr-8">
            <option value="custom">Σειρά: Προσαρμοσμένη</option>
            <option value="name">Σειρά: Αλφαβητικά</option>
            <option value="price">Σειρά: Τιμή</option>
          </select>
          {!multiSelect && <button onClick={() => setMultiSelect(true)} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-9">Πολλαπλή επιλογή</button>}
          {multiSelect && (
            <div className="flex gap-2 flex-wrap">
              <span className="text-sm text-gray-500 self-center">{selected.size} επιλεγμένα</span>
              <button onClick={selectAll} className="btn btn-secondary text-xs px-2 py-1 min-h-0 h-8">Όλα</button>
              <button onClick={clearSelect} className="btn btn-secondary text-xs px-2 py-1 min-h-0 h-8">Καθαρισμός</button>
              <button onClick={() => bulkAction('available')} disabled={!selected.size} className="btn btn-secondary text-xs px-2 py-1 min-h-0 h-8 text-green-600">Διαθέσιμο</button>
              <button onClick={() => bulkAction('unavailable')} disabled={!selected.size} className="btn btn-secondary text-xs px-2 py-1 min-h-0 h-8 text-amber-600">Μη διαθέσιμο</button>
              <button onClick={() => bulkAction('archive')} disabled={!selected.size} className="btn btn-danger text-xs px-2 py-1 min-h-0 h-8">Αρχειοθέτηση</button>
              <button onClick={exitMultiSelect} className="btn btn-secondary text-xs px-2 py-1 min-h-0 h-8">Ακύρωση</button>
            </div>
          )}
          {!multiSelect && <button onClick={() => setEditProduct({ ...EMPTY_PRODUCT })} className="btn btn-primary">+ Νέο προϊόν</button>}
        </div>

        {products.length === 0 && <p className="text-center text-gray-400 py-16">Δεν υπάρχουν προϊόντα.</p>}

        <div className="space-y-3">
          {products.map((p, idx) => {
            const isArchived = p.lifecycle_status === 'archived'
            return (
              <div key={p.id}
                onClick={multiSelect ? () => toggleSelect(p.id) : undefined}
                className={`card p-4 flex items-center gap-3 transition-opacity ${(!p.is_available || isArchived) ? 'opacity-60' : ''} ${multiSelect ? 'cursor-pointer select-none' : ''} ${multiSelect && selected.has(p.id) ? 'ring-2 ring-primary-500 bg-primary-50' : ''}`}
              >
                {multiSelect && (
                  <input type="checkbox" checked={selected.has(p.id)} onChange={() => toggleSelect(p.id)}
                    onClick={e => e.stopPropagation()} className="w-4 h-4 accent-primary-700 shrink-0" />
                )}
                {p.image_url && (
                  <img src={`${import.meta.env.VITE_API_URL || ''}${p.image_url}`} alt={p.name}
                    className="w-12 h-12 rounded-lg object-cover shrink-0" />
                )}
                <div className="flex-1 min-w-0">
                  <p className="font-semibold text-gray-800 flex items-center gap-2">
                    {p.name}
                    {isArchived && (
                      <span className="text-xs bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded font-normal">Αρχείο</span>
                    )}
                    {!isArchived && !p.is_available && (
                      <span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-normal">Ανενεργό</span>
                    )}
                  </p>
                  <p className="text-sm text-gray-500">
                    {(() => {
                      const cat = categories.find(c => c.id === p.category_id)
                      if (!cat) return '—'
                      if (cat.parent_id) {
                        const parent = categories.find(c => c.id === cat.parent_id)
                        return `${parent?.name ?? '?'} / ${cat.name}`
                      }
                      return cat.name
                    })()} · €{p.base_price.toFixed(2)}
                    {p.printer_zone_id && ` · ${printerName(p.printer_zone_id)}`}
                  </p>
                </div>
                {!multiSelect && (
                  <>
                    {/* Availability toggle — only for non-archived products */}
                    {!isArchived && (
                      <button
                        onClick={e => { e.stopPropagation(); toggleAvail.mutate({ id: p.id, is_available: !p.is_available }) }}
                        className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-colors shrink-0 ${
                          p.is_available
                            ? 'bg-green-50 border-green-300 text-green-700 hover:bg-green-100'
                            : 'bg-gray-100 border-gray-300 text-gray-500 hover:bg-gray-200'
                        }`}
                      >
                        <span className={`w-2 h-2 rounded-full ${p.is_available ? 'bg-green-500' : 'bg-gray-400'}`} />
                        {p.is_available ? 'Διαθέσιμο' : 'Ανενεργό'}
                      </button>
                    )}
                    <button onClick={() => setEditProduct(p)} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-9 shrink-0">Επεξεργασία</button>
                    {/* Archive/delete button — context-sensitive */}
                    {isArchived ? (
                      <button
                        onClick={() => setConfirmDelete({ type: 'product-hard', id: p.id })}
                        className="btn btn-danger text-sm px-3 py-1.5 min-h-0 h-9 shrink-0"
                        title="Οριστική διαγραφή"
                      >
                        Διαγραφή
                      </button>
                    ) : (
                      <button
                        onClick={() => setConfirmDelete({ type: 'product-archive', id: p.id })}
                        className="btn btn-danger text-sm px-3 py-1.5 min-h-0 h-9 shrink-0"
                        title="Αρχειοθέτηση (διατηρείται για ιστορικό)"
                      >
                        Αρχειοθέτηση
                      </button>
                    )}
                    {sortMode === 'custom' && !isArchived && (
                      <div className="flex flex-col gap-0.5 shrink-0">
                        <button onClick={() => moveProd(p, -1)} disabled={idx === 0} className="text-gray-400 hover:text-gray-600 disabled:opacity-20 text-xs leading-none">▲</button>
                        <button onClick={() => moveProd(p, 1)} disabled={idx === products.length - 1} className="text-gray-400 hover:text-gray-600 disabled:opacity-20 text-xs leading-none">▼</button>
                      </div>
                    )}
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>

      {editCat !== null && (
        <CategoryFormModal
          cat={editCat}
          parentName={editCat.parent_id ? categories.find(c => c.id === editCat.parent_id)?.name : null}
          onSave={(name, color) => saveCat.mutate({ name, color, parent_id: editCat.parent_id ?? null })}
          onClose={() => setEditCat(null)}
        />
      )}
      {editProduct !== null && (
        <ProductFormModal
          product={editProduct} categories={categories} printers={printers}
          onSave={b => saveProduct.mutate(b)}
          onCopy={formData => setEditProduct({ ...EMPTY_PRODUCT, ...formData, id: undefined, image_url: undefined, name: formData.name + ' (αντίγραφο)' })}
          onClose={() => setEditProduct(null)}
        />
      )}
      {confirmDelete && (
        <ConfirmModal
          title="Επιβεβαίωση"
          message={
            confirmDelete.type === 'category'
              ? 'Η κατηγορία θα διαγραφεί.'
              : confirmDelete.type === 'bulk-archive'
              ? `${confirmDelete.ids.length} προϊόντα θα αρχειοθετηθούν (αν υπάρχουν σε παραγγελίες) ή θα διαγραφούν.`
              : confirmDelete.type === 'product-archive'
              ? 'Το προϊόν θα αρχειοθετηθεί. Αν δεν υπάρχει σε παλαιές παραγγελίες θα διαγραφεί οριστικά, αλλιώς θα κρατηθεί για ιστορικό.'
              : 'Οριστική διαγραφή. Το προϊόν θα χαθεί μόνιμα.'
          }
          confirmLabel={confirmDelete.type === 'category' ? 'Επιβεβαίωση' : confirmDelete.type === 'product-hard' ? 'Διαγραφή' : 'Αρχειοθέτηση'}
          confirmClass="btn-danger"
          onConfirm={handleConfirmDelete}
          onCancel={() => setConfirmDelete(null)}
        />
      )}
    </div>
  )
}

function CategoryFormModal({ cat, parentName, onSave, onClose }) {
  const [name, setName] = useState(cat.name || '')
  const [color, setColor] = useState(cat.color || '')
  const isNew = !cat.id
  const isSub = !!cat.parent_id
  const title = isNew
    ? isSub ? `Νέα υποκατηγορία${parentName ? ` σε «${parentName}»` : ''}` : 'Νέα κατηγορία'
    : isSub ? 'Επεξεργασία υποκατηγορίας' : 'Επεξεργασία κατηγορίας'
  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-xs p-6 space-y-4">
        <h2 className="font-bold text-gray-800">{title}</h2>
        {isSub && parentName && (
          <p className="text-xs text-gray-400 -mt-2">Κατηγορία: <span className="font-medium text-gray-600">{parentName}</span></p>
        )}
        <div>
          <label className="label">Όνομα</label>
          <input className="input" value={name} onChange={e => setName(e.target.value)} autoFocus />
        </div>
        <div>
          <label className="label">Χρώμα</label>
          <ColorPicker value={color} onChange={setColor} />
        </div>
        <div className="flex gap-3 pt-2">
          <button onClick={onClose} className="flex-1 btn btn-secondary">Ακύρωση</button>
          <button onClick={() => onSave(name, color || null)} disabled={!name.trim()} className="flex-1 btn btn-primary">Αποθήκευση</button>
        </div>
      </div>
    </div>
  )
}

// ─── Product Form Modal ───────────────────────────────────────────────────────

function buildFormFromProduct(product) {
  return {
    name: product.name || '',
    category_id: product.category_id ?? '',
    base_price: product.base_price ?? '',
    is_available: product.is_available ?? true,
    lifecycle_status: product.lifecycle_status ?? 'active',
    printer_zone_id: product.printer_zone_id ?? '',
    quick_options: product.quick_options?.map(q => ({
      name: q.name,
      price: q.price ?? 0,
      allow_multiple: q.allow_multiple ?? false,
      sort_order: q.sort_order ?? 0,
      is_favorite: q.is_favorite ?? false,
      favorite_sort_order: q.favorite_sort_order ?? 0,
    })) ?? [],
    options: product.options?.map(o => ({
      name: o.name,
      extra_cost: o.extra_cost ?? 0,
      allow_multiple: o.allow_multiple ?? false,
      sub_choices: o.sub_choices?.map(s => ({ name: s.name, extra_cost: s.extra_cost ?? 0, is_default: s.is_default ?? false })) ?? [],
      is_favorite: o.is_favorite ?? false,
      favorite_sort_order: o.favorite_sort_order ?? 0,
    })) ?? [],
    ingredients: product.ingredients?.map(i => ({
      name: i.name,
      extra_cost: i.extra_cost ?? 0,
      is_favorite: i.is_favorite ?? false,
      favorite_sort_order: i.favorite_sort_order ?? 0,
    })) ?? [],
    preference_sets: product.preference_sets?.map(ps => ({
      name: ps.name,
      default_choice_index: ps.choices ? ps.choices.findIndex(c => c.id === ps.default_choice_id) : -1,
      choices: ps.choices?.map(c => ({
        name: c.name,
        extra_cost: c.extra_cost ?? 0,
        disables_subset: c.disables_subset ?? false,
        sub_choices: c.sub_choices?.map(s => ({ name: s.name, extra_cost: s.extra_cost ?? 0, is_default: s.is_default ?? false })) ?? [],
      })) ?? [],
      shared_subset: ps.shared_subset ? {
        name: ps.shared_subset.name,
        choices: ps.shared_subset.choices?.map(s => ({ name: s.name, extra_cost: s.extra_cost ?? 0, is_default: s.is_default ?? false })) ?? [],
      } : null,
      is_favorite: ps.is_favorite ?? false,
      favorite_sort_order: ps.favorite_sort_order ?? 0,
    })) ?? [],
  }
}

// Build a flat sorted list of all favorited items across all types
function buildFavoritesList(form) {
  const items = []
  form.quick_options.forEach((q, i) => {
    if (q.is_favorite) items.push({ type: 'quick', idx: i, favorite_sort_order: q.favorite_sort_order ?? 0 })
  })
  form.ingredients.forEach((ing, i) => {
    if (ing.is_favorite) items.push({ type: 'ingredient', idx: i, favorite_sort_order: ing.favorite_sort_order ?? 0 })
  })
  form.options.forEach((o, i) => {
    if (o.is_favorite) items.push({ type: 'option', idx: i, favorite_sort_order: o.favorite_sort_order ?? 0 })
  })
  form.preference_sets.forEach((ps, i) => {
    if (ps.is_favorite) items.push({ type: 'pref', idx: i, favorite_sort_order: ps.favorite_sort_order ?? 0 })
  })
  return items.sort((a, b) => a.favorite_sort_order - b.favorite_sort_order)
}

function getFavSortField(form, type, idx) {
  if (type === 'quick') return form.quick_options[idx]?.favorite_sort_order ?? 0
  if (type === 'ingredient') return form.ingredients[idx]?.favorite_sort_order ?? 0
  if (type === 'option') return form.options[idx]?.favorite_sort_order ?? 0
  if (type === 'pref') return form.preference_sets[idx]?.favorite_sort_order ?? 0
  return 0
}

function setFavSortField(form, type, idx, value) {
  if (type === 'quick') return { ...form, quick_options: form.quick_options.map((q, i) => i === idx ? { ...q, favorite_sort_order: value } : q) }
  if (type === 'ingredient') return { ...form, ingredients: form.ingredients.map((ing, i) => i === idx ? { ...ing, favorite_sort_order: value } : ing) }
  if (type === 'option') return { ...form, options: form.options.map((o, i) => i === idx ? { ...o, favorite_sort_order: value } : o) }
  if (type === 'pref') return { ...form, preference_sets: form.preference_sets.map((ps, i) => i === idx ? { ...ps, favorite_sort_order: value } : ps) }
  return form
}

function getItemLabel(form, type, idx) {
  if (type === 'quick') return form.quick_options[idx]?.name || '(χωρίς όνομα)'
  if (type === 'ingredient') return form.ingredients[idx]?.name || '(χωρίς όνομα)'
  if (type === 'option') return form.options[idx]?.name || '(χωρίς όνομα)'
  if (type === 'pref') return form.preference_sets[idx]?.name || '(χωρίς όνομα)'
  return ''
}

function getItemTypeLabel(type) {
  if (type === 'quick') return 'Γρήγορη'
  if (type === 'ingredient') return 'Υλικό'
  if (type === 'option') return 'Έξτρα'
  if (type === 'pref') return 'Προτίμηση'
  return ''
}

function ProductFormModal({ product, categories, printers, onSave, onCopy, onClose }) {
  const [form, setForm] = useState(() => buildFormFromProduct(product))
  const [activeTab, setActiveTab] = useState('favorites')
  const [imageFile, setImageFile] = useState(null)
  const [uploading, setUploading] = useState(false)
  const qc = useQueryClient()

  useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') onClose() }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [onClose])

  useEffect(() => {
    setForm(buildFormFromProduct(product))
    setActiveTab('favorites')
    setImageFile(null)
  }, [product.id, product.name])

  function setField(k, v) { setForm(f => ({ ...f, [k]: v })) }

  // ── Favorites reorder ──
  function moveFavorite(favList, favIdx, dir) {
    const newList = [...favList]
    const swapIdx = favIdx + dir
    if (swapIdx < 0 || swapIdx >= newList.length) return
    // Swap favorite_sort_order values
    const aOrder = newList[favIdx].favorite_sort_order
    const bOrder = newList[swapIdx].favorite_sort_order
    setForm(f => {
      let next = setFavSortField(f, newList[favIdx].type, newList[favIdx].idx, bOrder)
      next = setFavSortField(next, newList[swapIdx].type, newList[swapIdx].idx, aOrder)
      return next
    })
  }

  function toggleFavorite(type, idx) {
    setForm(f => {
      const currentFavs = buildFavoritesList(f)
      const isFav = (() => {
        if (type === 'quick') return f.quick_options[idx]?.is_favorite
        if (type === 'ingredient') return f.ingredients[idx]?.is_favorite
        if (type === 'option') return f.options[idx]?.is_favorite
        if (type === 'pref') return f.preference_sets[idx]?.is_favorite
      })()
      // Assign next available sort order when adding
      const newSortOrder = isFav ? 0 : (currentFavs.length > 0 ? Math.max(...currentFavs.map(x => x.favorite_sort_order)) + 1 : 0)
      if (type === 'quick') return { ...f, quick_options: f.quick_options.map((q, i) => i === idx ? { ...q, is_favorite: !isFav, favorite_sort_order: isFav ? 0 : newSortOrder } : q) }
      if (type === 'ingredient') return { ...f, ingredients: f.ingredients.map((ing, i) => i === idx ? { ...ing, is_favorite: !isFav, favorite_sort_order: isFav ? 0 : newSortOrder } : ing) }
      if (type === 'option') return { ...f, options: f.options.map((o, i) => i === idx ? { ...o, is_favorite: !isFav, favorite_sort_order: isFav ? 0 : newSortOrder } : o) }
      if (type === 'pref') return { ...f, preference_sets: f.preference_sets.map((ps, i) => i === idx ? { ...ps, is_favorite: !isFav, favorite_sort_order: isFav ? 0 : newSortOrder } : ps) }
      return f
    })
  }

  // ── Quick Options ──
  function addQuickOption() { setForm(f => ({ ...f, quick_options: [...f.quick_options, { name: '', price: 0, allow_multiple: false, sort_order: f.quick_options.length, is_favorite: false, favorite_sort_order: 0 }] })) }
  function removeQuickOption(i) { setForm(f => ({ ...f, quick_options: f.quick_options.filter((_, idx) => idx !== i) })) }
  function setQuickOption(i, k, v) { setForm(f => ({ ...f, quick_options: f.quick_options.map((q, idx) => idx === i ? { ...q, [k]: v } : q) })) }
  function moveQuickOption(i, dir) { setForm(f => ({ ...f, quick_options: moveItem(f.quick_options, i, dir) })) }

  // ── Options ──
  function addOption() { setForm(f => ({ ...f, options: [...f.options, { name: '', extra_cost: 0, allow_multiple: false, sub_choices: [], is_favorite: false, favorite_sort_order: 0 }] })) }
  function removeOption(i) { setForm(f => ({ ...f, options: f.options.filter((_, idx) => idx !== i) })) }
  function setOption(i, k, v) { setForm(f => ({ ...f, options: f.options.map((o, idx) => idx === i ? { ...o, [k]: v } : o) })) }
  function moveOption(i, dir) { setForm(f => ({ ...f, options: moveItem(f.options, i, dir) })) }

  function addOptionSubChoice(oi) {
    setForm(f => ({ ...f, options: f.options.map((o, idx) =>
      idx !== oi ? o : { ...o, sub_choices: [...(o.sub_choices || []), { name: '', extra_cost: 0, is_default: false }] }
    )}))
  }
  function removeOptionSubChoice(oi, sci) {
    setForm(f => ({ ...f, options: f.options.map((o, idx) =>
      idx !== oi ? o : { ...o, sub_choices: o.sub_choices.filter((_, i) => i !== sci) }
    )}))
  }
  function setOptionSubChoice(oi, sci, k, v) {
    setForm(f => ({ ...f, options: f.options.map((o, idx) =>
      idx !== oi ? o : {
        ...o, sub_choices: o.sub_choices.map((sc, scidx) => {
          if (scidx !== sci) return k === 'is_default' && v === true ? { ...sc, is_default: false } : sc
          return { ...sc, [k]: v }
        })
      }
    )}))
  }
  function moveOptionSubChoice(oi, sci, dir) {
    setForm(f => ({ ...f, options: f.options.map((o, idx) =>
      idx !== oi ? o : { ...o, sub_choices: moveItem(o.sub_choices, sci, dir) }
    )}))
  }
  function toggleOptionSubDefault(oi, sci) {
    const sc = form.options[oi]?.sub_choices?.[sci]
    setOptionSubChoice(oi, sci, 'is_default', !sc?.is_default)
  }

  // ── Ingredients ──
  function addIngredient() { setForm(f => ({ ...f, ingredients: [...f.ingredients, { name: '', extra_cost: 0, is_favorite: false, favorite_sort_order: 0 }] })) }
  function removeIngredient(i) { setForm(f => ({ ...f, ingredients: f.ingredients.filter((_, idx) => idx !== i) })) }
  function setIngredient(i, k, v) { setForm(f => ({ ...f, ingredients: f.ingredients.map((ing, idx) => idx === i ? { ...ing, [k]: v } : ing) })) }
  function moveIngredient(i, dir) { setForm(f => ({ ...f, ingredients: moveItem(f.ingredients, i, dir) })) }

  // ── Preference sets ──
  function addPrefSet() {
    const newIdx = form.preference_sets.length
    setForm(f => ({ ...f, preference_sets: [...f.preference_sets, { name: '', default_choice_index: -1, choices: [], shared_subset: null, is_favorite: false, favorite_sort_order: 0 }] }))
    setActiveTab(newIdx)
  }
  function removePrefSet(si) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.filter((_, idx) => idx !== si) }))
    setActiveTab('favorites')
  }
  function setPrefSetField(si, k, v) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) => idx === si ? { ...ps, [k]: v } : ps) }))
  }
  function addChoice(si) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) =>
      idx === si ? { ...ps, choices: [...ps.choices, { name: '', extra_cost: 0, disables_subset: false, sub_choices: [] }] } : ps
    )}))
  }
  function removeChoice(si, ci) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) => {
      if (idx !== si) return ps
      const newChoices = ps.choices.filter((_, cidx) => cidx !== ci)
      const d = ps.default_choice_index
      const newDefault = d === ci ? -1 : d > ci ? d - 1 : d
      return { ...ps, choices: newChoices, default_choice_index: newDefault }
    })}))
  }
  function setChoice(si, ci, k, v) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) =>
      idx === si ? { ...ps, choices: ps.choices.map((ch, cidx) => cidx === ci ? { ...ch, [k]: v } : ch) } : ps
    )}))
  }
  function moveChoice(si, ci, dir) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) => {
      if (idx !== si) return ps
      const newChoices = moveItem(ps.choices, ci, dir)
      const j = ci + dir
      let nd = ps.default_choice_index
      if (nd === ci) nd = j; else if (nd === j) nd = ci
      return { ...ps, choices: newChoices, default_choice_index: nd }
    })}))
  }
  function toggleDefaultChoice(si, ci) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) =>
      idx !== si ? ps : { ...ps, default_choice_index: ps.default_choice_index === ci ? -1 : ci }
    )}))
  }
  function addSubChoice(si, ci) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, pidx) =>
      pidx !== si ? ps : { ...ps, choices: ps.choices.map((ch, cidx) =>
        cidx !== ci ? ch : { ...ch, sub_choices: [...(ch.sub_choices || []), { name: '', extra_cost: 0, is_default: false }] }
      )}
    )}))
  }
  function removeSubChoice(si, ci, sci) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, pidx) =>
      pidx !== si ? ps : { ...ps, choices: ps.choices.map((ch, cidx) =>
        cidx !== ci ? ch : { ...ch, sub_choices: ch.sub_choices.filter((_, i) => i !== sci) }
      )}
    )}))
  }
  function setSubChoice(si, ci, sci, k, v) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, pidx) =>
      pidx !== si ? ps : { ...ps, choices: ps.choices.map((ch, cidx) =>
        cidx !== ci ? ch : { ...ch, sub_choices: ch.sub_choices.map((sc, scidx) => {
          if (scidx !== sci) return k === 'is_default' && v === true ? { ...sc, is_default: false } : sc
          return { ...sc, [k]: v }
        })}
      )}
    )}))
  }
  function moveSubChoice(si, ci, sci, dir) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, pidx) =>
      pidx !== si ? ps : { ...ps, choices: ps.choices.map((ch, cidx) =>
        cidx !== ci ? ch : { ...ch, sub_choices: moveItem(ch.sub_choices, sci, dir) }
      )}
    )}))
  }

  function setSharedSubsetName(si, name) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) => {
      if (idx !== si) return ps
      return { ...ps, shared_subset: ps.shared_subset ? { ...ps.shared_subset, name } : { name, choices: [] } }
    })}))
  }
  function addSharedSubsetChoice(si) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) => {
      if (idx !== si) return ps
      const ss = ps.shared_subset || { name: '', choices: [] }
      return { ...ps, shared_subset: { ...ss, choices: [...ss.choices, { name: '', extra_cost: 0, is_default: false }] } }
    })}))
  }
  function removeSharedSubsetChoice(si, sci) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) => {
      if (idx !== si) return ps
      const newChoices = ps.shared_subset.choices.filter((_, i) => i !== sci)
      return { ...ps, shared_subset: newChoices.length ? { ...ps.shared_subset, choices: newChoices } : null }
    })}))
  }
  function setSharedSubsetChoice(si, sci, k, v) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) => {
      if (idx !== si) return ps
      const newChoices = ps.shared_subset.choices.map((sc, scidx) => {
        if (scidx !== sci) return k === 'is_default' && v === true ? { ...sc, is_default: false } : sc
        return { ...sc, [k]: v }
      })
      return { ...ps, shared_subset: { ...ps.shared_subset, choices: newChoices } }
    })}))
  }
  function moveSharedSubsetChoice(si, sci, dir) {
    setForm(f => ({ ...f, preference_sets: f.preference_sets.map((ps, idx) =>
      idx !== si ? ps : { ...ps, shared_subset: { ...ps.shared_subset, choices: moveItem(ps.shared_subset.choices, sci, dir) } }
    )}))
  }

  function buildBody() {
    return {
      name: form.name,
      category_id: form.category_id ? Number(form.category_id) : null,
      base_price: parseFloat(form.base_price),
      is_available: form.is_available,
      lifecycle_status: form.lifecycle_status,
      printer_zone_id: form.printer_zone_id ? Number(form.printer_zone_id) : null,
      quick_options: form.quick_options.map((q, i) => ({
        name: q.name,
        price: parseFloat(q.price) || 0,
        allow_multiple: q.allow_multiple ?? false,
        sort_order: i,
        is_favorite: q.is_favorite ?? false,
        favorite_sort_order: q.favorite_sort_order ?? 0,
      })),
      options: form.options.map(o => ({
        name: o.name,
        extra_cost: parseFloat(o.extra_cost) || 0,
        allow_multiple: o.allow_multiple ?? false,
        sub_choices: (o.sub_choices || []).map(s => ({ name: s.name, extra_cost: parseFloat(s.extra_cost) || 0, is_default: s.is_default ?? false })),
        is_favorite: o.is_favorite ?? false,
        favorite_sort_order: o.favorite_sort_order ?? 0,
      })),
      ingredients: form.ingredients.map(i => ({
        name: i.name,
        extra_cost: parseFloat(i.extra_cost) || 0,
        is_favorite: i.is_favorite ?? false,
        favorite_sort_order: i.favorite_sort_order ?? 0,
      })),
      preference_sets: form.preference_sets.map(ps => ({
        name: ps.name,
        default_choice_index: ps.default_choice_index >= 0 ? ps.default_choice_index : null,
        shared_subset: ps.shared_subset?.choices?.length ? {
          name: ps.shared_subset.name || '',
          choices: ps.shared_subset.choices.map(s => ({ name: s.name, extra_cost: parseFloat(s.extra_cost) || 0, is_default: s.is_default ?? false })),
        } : null,
        choices: ps.choices.map(c => ({
          name: c.name,
          extra_cost: parseFloat(c.extra_cost) || 0,
          disables_subset: c.disables_subset ?? false,
          sub_choices: (c.sub_choices || []).map(s => ({ name: s.name, extra_cost: parseFloat(s.extra_cost) || 0, is_default: s.is_default ?? false })),
        })),
        is_favorite: ps.is_favorite ?? false,
        favorite_sort_order: ps.favorite_sort_order ?? 0,
      })),
    }
  }

  async function submit() {
    if (!imageFile) {
      onSave(buildBody())
      return
    }
    if (!isNew) {
      onSave(buildBody())
      setUploading(true)
      try {
        const fd = new FormData(); fd.append('file', imageFile)
        await client.post(`/api/products/${product.id}/image`, fd)
        qc.invalidateQueries({ queryKey: ['products-all'] })
      } catch { toast.error('Σφάλμα ανεβάσματος εικόνας') }
      finally { setUploading(false) }
    } else {
      setUploading(true)
      try {
        const res = await client.post('/api/products/', buildBody())
        const newId = res.data.id
        const fd = new FormData(); fd.append('file', imageFile)
        await client.post(`/api/products/${newId}/image`, fd)
        qc.invalidateQueries({ queryKey: ['products-all'] })
        onClose()
      } catch { toast.error('Σφάλμα αποθήκευσης') }
      finally { setUploading(false) }
    }
  }

  const isNew = !product.id
  const canSave = form.name.trim() && form.base_price

  const favCount = buildFavoritesList(form).length

  const tabs = [
    { key: 'favorites', label: 'Αγαπημένα', count: favCount, isFavTab: true },
    { key: 'quick', label: 'Γρήγορες', count: form.quick_options.length },
    { key: 'ingredients', label: 'Υλικά', count: form.ingredients.length },
    { key: 'options', label: 'Έξτρα', count: form.options.length },
    ...form.preference_sets.map((ps, i) => ({ key: i, label: ps.name || `Προτ. ${i + 1}`, count: ps.choices.length })),
    { key: '__add_pref__', label: '＋ Προτίμηση', isAdd: true },
  ]

  const favList = buildFavoritesList(form)

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden" style={{ width: '90vw', height: '92vh' }}>

        {/* ── Header ── */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 shrink-0">
          <h2 className="font-bold text-gray-800 text-lg">
            {isNew ? 'Νέο προϊόν' : `Επεξεργασία — ${product.name}`}
          </h2>
          <button onClick={onClose} className="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center text-gray-500 text-lg">✕</button>
        </div>

        {/* ── Body: left/right split ── */}
        <div className="flex-1 flex overflow-hidden">

          {/* LEFT: product info */}
          <div className="w-80 shrink-0 border-r border-gray-100 bg-gray-50/50 px-5 py-5 flex flex-col gap-3">
            <p className="text-xs font-semibold text-gray-400 uppercase tracking-widest">Στοιχεία προϊόντος</p>

            <div>
              <label className="label">Όνομα *</label>
              <input className="input" value={form.name} onChange={e => setField('name', e.target.value)} autoFocus placeholder="π.χ. Espresso" />
            </div>

            <div>
              <label className="label">Τιμή βάσης (€) *</label>
              <PriceInput value={form.base_price} onChange={v => setField('base_price', v)} className="w-full" />
            </div>

            <div>
              <label className="label">Κατηγορία</label>
              <select className="input" value={form.category_id} onChange={e => setField('category_id', e.target.value)}>
                <option value="">— Χωρίς κατηγορία —</option>
                {categories.filter(c => !c.parent_id).sort((a, b) => a.sort_order - b.sort_order).flatMap(parent => {
                  const subs = categories.filter(c => c.parent_id === parent.id).sort((a, b) => a.sort_order - b.sort_order)
                  return [
                    <option key={parent.id} value={parent.id}>{parent.name}</option>,
                    ...subs.map(s => <option key={s.id} value={s.id}>&nbsp;&nbsp;↳ {s.name}</option>),
                  ]
                })}
              </select>
            </div>

            <div>
              <label className="label">Ζώνη εκτυπωτή</label>
              <select className="input" value={form.printer_zone_id} onChange={e => setField('printer_zone_id', e.target.value)}>
                <option value="">— Χωρίς εκτυπωτή —</option>
                {printers.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
              </select>
            </div>

            {/* Availability toggle */}
            <button
              type="button"
              onClick={() => setField('is_available', !form.is_available)}
              className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
                form.is_available
                  ? 'bg-green-50 border-green-300 text-green-700 hover:bg-green-100'
                  : 'bg-gray-100 border-gray-300 text-gray-500 hover:bg-gray-200'
              }`}
            >
              <span className={`w-2.5 h-2.5 rounded-full ${form.is_available ? 'bg-green-500' : 'bg-gray-400'}`} />
              {form.is_available ? 'Διαθέσιμο' : 'Μη διαθέσιμο'}
            </button>

            {/* Image upload */}
            <div>
              <label className="label">Εικόνα προϊόντος</label>
              {product.image_url && (
                <img src={`${import.meta.env.VITE_API_URL || ''}${product.image_url}`}
                  className="w-16 h-16 rounded-xl object-cover border border-gray-200 mb-2" alt="" />
              )}
              {imageFile && (
                <div className="text-xs text-primary-700 font-medium mb-1 break-all">{imageFile.name}</div>
              )}
              <label className="cursor-pointer inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 text-sm text-gray-600 transition-colors">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                {imageFile ? 'Αλλαγή εικόνας' : 'Επιλογή εικόνας'}
                <input type="file" accept="image/*" className="sr-only"
                  onChange={e => setImageFile(e.target.files[0] ?? null)} />
              </label>
              {isNew && imageFile && (
                <p className="text-xs text-gray-400 mt-1">Η εικόνα θα ανέβει μαζί με την αποθήκευση.</p>
              )}
            </div>
          </div>

          {/* RIGHT: tabs */}
          <div className="flex-1 flex flex-col overflow-hidden">
            {/* Tab bar */}
            <div className="flex border-b border-gray-200 overflow-x-auto shrink-0 bg-white">
              {tabs.map(tab => {
                if (tab.isAdd) return (
                  <button key="__add_pref__" onClick={addPrefSet}
                    className="px-4 py-3 text-sm font-medium text-primary-600 hover:bg-primary-50 whitespace-nowrap border-b-2 border-transparent transition-colors">
                    {tab.label}
                  </button>
                )
                const isActive = activeTab === tab.key
                return (
                  <button key={String(tab.key)} onClick={() => setActiveTab(tab.key)}
                    className={`px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors flex items-center gap-1.5 ${
                      isActive ? 'border-primary-600 text-primary-700 bg-primary-50/50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50'
                    }`}>
                    {tab.isFavTab && <HeartIcon filled={favCount > 0} className={`w-3.5 h-3.5 ${favCount > 0 ? 'text-rose-500' : 'text-gray-400'}`} />}
                    {tab.label}
                    {tab.count > 0 && (
                      <span className={`text-xs px-1.5 py-0.5 rounded-full font-mono ${isActive ? 'bg-primary-100 text-primary-700' : 'bg-gray-100 text-gray-500'}`}>
                        {tab.count}
                      </span>
                    )}
                  </button>
                )
              })}
            </div>

            {/* Tab content */}
            <div className="flex-1 overflow-y-auto px-6 py-5">

              {/* ── Favorites tab ── */}
              {activeTab === 'favorites' && (
                <div>
                  <p className="text-sm text-gray-500 mb-4">
                    Αγαπημένα — εμφανίζονται πρώτα στον σερβιτόρο. Σημειώστε ως αγαπημένο οποιοδήποτε στοιχείο από τις άλλες καρτέλες. Εδώ μπορείτε να τα αναδιατάξετε.
                  </p>
                  {favList.length === 0 && (
                    <p className="text-sm text-gray-400 text-center py-12">
                      Δεν υπάρχουν αγαπημένα. Χρησιμοποιήστε το <HeartIcon className="w-4 h-4 inline text-gray-400" /> σε γρήγορες επιλογές, υλικά, έξτρα ή προτιμήσεις.
                    </p>
                  )}
                  <div className="space-y-2">
                    {favList.map((fav, fi) => {
                      const label = getItemLabel(form, fav.type, fav.idx)
                      const typeLabel = getItemTypeLabel(fav.type)
                      return (
                        <div key={`${fav.type}-${fav.idx}`} className="flex items-center gap-3 border border-rose-100 bg-rose-50/30 rounded-xl p-3">
                          <ReorderBtns
                            onUp={() => moveFavorite(favList, fi, -1)}
                            onDown={() => moveFavorite(favList, fi, 1)}
                            disableUp={fi === 0}
                            disableDown={fi === favList.length - 1}
                          />
                          <HeartIcon filled className="w-4 h-4 text-rose-400 shrink-0" />
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium text-gray-800 truncate">{label}</p>
                            <p className="text-xs text-gray-400">{typeLabel}</p>
                          </div>
                          <button
                            type="button"
                            onClick={() => toggleFavorite(fav.type, fav.idx)}
                            className="text-xs text-gray-400 hover:text-red-500 transition-colors px-2 py-1 rounded hover:bg-red-50"
                          >
                            Αφαίρεση
                          </button>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )}

              {/* ── Quick Options tab ── */}
              {activeTab === 'quick' && (
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <p className="text-sm text-gray-500">Γρήγορες επιλογές — χωρίς υπο-επιλογές.</p>
                    <button onClick={addQuickOption} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-9">+ Επιλογή</button>
                  </div>
                  {!form.quick_options.length && <p className="text-sm text-gray-400 text-center py-8">Δεν υπάρχουν γρήγορες επιλογές.</p>}
                  <div className="space-y-2">
                    {form.quick_options.map((q, i) => (
                      <div key={i} className={`flex gap-2 items-center border rounded-xl p-3 bg-white ${q.is_favorite ? 'border-rose-200' : 'border-gray-200'}`}>
                        <ReorderBtns onUp={() => moveQuickOption(i, -1)} onDown={() => moveQuickOption(i, 1)}
                          disableUp={i === 0} disableDown={i === form.quick_options.length - 1} />
                        <FavoriteBtn isFavorite={q.is_favorite} onClick={() => toggleFavorite('quick', i)} />
                        <input className="input flex-1" placeholder="Όνομα (π.χ. Extra Bacon)"
                          value={q.name} onChange={e => setQuickOption(i, 'name', e.target.value)} />
                        <PriceInput value={q.price} onChange={v => setQuickOption(i, 'price', v)}
                          className="w-32" placeholder="0.00" />
                        <label className="flex items-center gap-1.5 text-sm text-gray-600 cursor-pointer shrink-0 select-none">
                          <input type="checkbox" checked={q.allow_multiple}
                            onChange={e => setQuickOption(i, 'allow_multiple', e.target.checked)}
                            className="accent-primary-700 w-4 h-4" />
                          Πολλαπλά
                        </label>
                        <button onClick={() => removeQuickOption(i)} className="btn btn-danger px-3 min-h-0 h-10">✕</button>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* ── Ingredients tab ── */}
              {activeTab === 'ingredients' && (
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <p className="text-sm text-gray-500">Υλικά που ο πελάτης μπορεί να αφαιρέσει.</p>
                    <button onClick={addIngredient} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-9">+ Υλικό</button>
                  </div>
                  {!form.ingredients.length && <p className="text-sm text-gray-400 text-center py-8">Δεν υπάρχουν υλικά.</p>}
                  <div className="space-y-2">
                    {form.ingredients.map((ing, i) => (
                      <div key={i} className={`flex gap-2 items-center border rounded-xl p-3 bg-white ${ing.is_favorite ? 'border-rose-200' : 'border-gray-200'}`}>
                        <ReorderBtns onUp={() => moveIngredient(i, -1)} onDown={() => moveIngredient(i, 1)}
                          disableUp={i === 0} disableDown={i === form.ingredients.length - 1} />
                        <FavoriteBtn isFavorite={ing.is_favorite} onClick={() => toggleFavorite('ingredient', i)} />
                        <input className="input flex-1" placeholder="Όνομα υλικού" value={ing.name}
                          onChange={e => setIngredient(i, 'name', e.target.value)} />
                        <PriceInput value={ing.extra_cost} onChange={v => setIngredient(i, 'extra_cost', v)}
                          allowNegative className="w-32" />
                        <button onClick={() => removeIngredient(i)} className="btn btn-danger px-3 min-h-0 h-10">✕</button>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* ── Extras tab ── */}
              {activeTab === 'options' && (
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <p className="text-sm text-gray-500">Έξτρα (checkbox). Κάθε extra μπορεί να έχει υπο-επιλογές.</p>
                    <button onClick={addOption} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-9">+ Έξτρα</button>
                  </div>
                  {!form.options.length && <p className="text-sm text-gray-400 text-center py-8">Δεν υπάρχουν extras.</p>}
                  <div className="space-y-3">
                    {form.options.map((opt, i) => (
                      <div key={i} className={`border rounded-xl overflow-hidden ${opt.is_favorite ? 'border-rose-200' : 'border-gray-200'}`}>
                        <div className="flex gap-2 items-center p-3 bg-white flex-wrap">
                          <ReorderBtns onUp={() => moveOption(i, -1)} onDown={() => moveOption(i, 1)}
                            disableUp={i === 0} disableDown={i === form.options.length - 1} />
                          <FavoriteBtn isFavorite={opt.is_favorite} onClick={() => toggleFavorite('option', i)} />
                          <input className="input flex-1 min-w-40" placeholder="Όνομα extra (π.χ. Κανέλα)"
                            value={opt.name} onChange={e => setOption(i, 'name', e.target.value)} />
                          <PriceInput value={opt.extra_cost} onChange={v => setOption(i, 'extra_cost', v)}
                            allowNegative className="w-32" />
                          <label className="flex items-center gap-1.5 text-sm text-gray-600 cursor-pointer shrink-0 select-none">
                            <input type="checkbox" checked={opt.allow_multiple}
                              onChange={e => setOption(i, 'allow_multiple', e.target.checked)}
                              className="accent-primary-700 w-4 h-4" />
                            Πολλαπλά
                          </label>
                          <button onClick={() => addOptionSubChoice(i)}
                            className="btn btn-secondary text-xs px-2 min-h-0 h-9 shrink-0 whitespace-nowrap">
                            + Υπο-επιλογές
                          </button>
                          <button onClick={() => removeOption(i)} className="btn btn-danger px-3 min-h-0 h-10">✕</button>
                        </div>
                        <SubChoiceRows
                          subChoices={opt.sub_choices}
                          parentLabel={opt.name}
                          onMove={(sci, dir) => moveOptionSubChoice(i, sci, dir)}
                          onToggleDefault={sci => toggleOptionSubDefault(i, sci)}
                          onChange={(sci, k, v) => setOptionSubChoice(i, sci, k, v)}
                          onRemove={sci => removeOptionSubChoice(i, sci)}
                          onAdd={() => addOptionSubChoice(i)}
                        />
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* ── Preference set tabs ── */}
              {typeof activeTab === 'number' && form.preference_sets[activeTab] && (() => {
                const si = activeTab
                const ps = form.preference_sets[si]
                const hasSharedSubset = !!(ps.shared_subset)
                return (
                  <div>
                    <div className="flex items-center gap-3 mb-4">
                      <input className="input flex-1 font-semibold text-base"
                        placeholder="Όνομα προτίμησης (π.χ. Ζάχαρη)" value={ps.name}
                        onChange={e => setPrefSetField(si, 'name', e.target.value)} autoFocus />
                      <FavoriteBtn isFavorite={ps.is_favorite} onClick={() => toggleFavorite('pref', si)} />
                      <button onClick={() => removePrefSet(si)} className="btn btn-danger px-3 min-h-0 h-10 shrink-0">Διαγραφή</button>
                    </div>

                    <p className="text-xs text-gray-400 mb-3">
                      ● = προεπιλογή (κλικ ξανά για αποεπιλογή) · ⊘ = απενεργοποιεί το κοινό υπο-σύνολο
                    </p>

                    <div className="space-y-3 mb-5">
                      {ps.choices.map((ch, ci) => (
                        <div key={ci} className="border border-gray-200 rounded-xl overflow-hidden">
                          <div className="flex items-center gap-2 p-3 bg-white">
                            <ReorderBtns onUp={() => moveChoice(si, ci, -1)} onDown={() => moveChoice(si, ci, 1)}
                              disableUp={ci === 0} disableDown={ci === ps.choices.length - 1} />
                            <DefaultBtn isDefault={ps.default_choice_index === ci} onClick={() => toggleDefaultChoice(si, ci)} />
                            <input className="input flex-1" placeholder="Όνομα επιλογής (π.χ. Σκέτος)"
                              value={ch.name} onChange={e => setChoice(si, ci, 'name', e.target.value)} />
                            <PriceInput value={ch.extra_cost} onChange={v => setChoice(si, ci, 'extra_cost', v)}
                              allowNegative className="w-32" />
                            {hasSharedSubset && (
                              <button type="button"
                                onClick={() => setChoice(si, ci, 'disables_subset', !ch.disables_subset)}
                                title={ch.disables_subset ? 'Εμφάνιση κοινού υπο-συνόλου' : 'Απόκρυψη κοινού υπο-συνόλου'}
                                className={`w-7 h-7 rounded-full flex items-center justify-center shrink-0 text-sm transition-colors ${
                                  ch.disables_subset ? 'bg-red-100 text-red-500' : 'text-gray-300 hover:text-red-400'
                                }`}>⊘</button>
                            )}
                            <button onClick={() => addSubChoice(si, ci)}
                              className="btn btn-secondary text-xs px-2 min-h-0 h-9 shrink-0 whitespace-nowrap">
                              + Υπο-επιλογές
                            </button>
                            <button onClick={() => removeChoice(si, ci)} className="btn btn-danger px-2 min-h-0 h-9 shrink-0">✕</button>
                          </div>
                          <SubChoiceRows
                            subChoices={ch.sub_choices}
                            parentLabel={ch.name}
                            onMove={(sci, dir) => moveSubChoice(si, ci, sci, dir)}
                            onToggleDefault={sci => setSubChoice(si, ci, sci, 'is_default', !ch.sub_choices[sci]?.is_default)}
                            onChange={(sci, k, v) => setSubChoice(si, ci, sci, k, v)}
                            onRemove={sci => removeSubChoice(si, ci, sci)}
                            onAdd={() => addSubChoice(si, ci)}
                          />
                        </div>
                      ))}
                    </div>

                    <button onClick={() => addChoice(si)} className="btn btn-secondary text-sm px-4 py-1.5 min-h-0 h-9">
                      + Επιλογή
                    </button>

                    <div className="mt-6 border-t border-gray-100 pt-5">
                      <div className="flex items-center justify-between mb-3">
                        <div>
                          <p className="text-sm font-semibold text-gray-700">Κοινό υπο-σύνολο</p>
                          <p className="text-xs text-gray-400">Εμφανίζεται για όλες τις επιλογές εκτός αυτών με ⊘</p>
                        </div>
                        {!ps.shared_subset ? (
                          <button onClick={() => setSharedSubsetName(si, '')} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-9">
                            + Κοινό υπο-σύνολο
                          </button>
                        ) : (
                          <button onClick={() => setPrefSetField(si, 'shared_subset', null)} className="btn btn-danger text-sm px-3 py-1.5 min-h-0 h-9">
                            Αφαίρεση
                          </button>
                        )}
                      </div>
                      {ps.shared_subset && (
                        <div className="border border-indigo-200 rounded-xl p-4 bg-indigo-50/30 space-y-3">
                          <div>
                            <label className="label text-xs">Όνομα (π.χ. Είδος ζάχαρης)</label>
                            <input className="input text-sm" placeholder="π.χ. Είδος ζάχαρης"
                              value={ps.shared_subset.name || ''}
                              onChange={e => setSharedSubsetName(si, e.target.value)} />
                          </div>
                          <div className="space-y-2">
                            {(ps.shared_subset.choices || []).map((sc, sci) => (
                              <div key={sci} className="flex items-center gap-2">
                                <ReorderBtns onUp={() => moveSharedSubsetChoice(si, sci, -1)} onDown={() => moveSharedSubsetChoice(si, sci, 1)}
                                  disableUp={sci === 0} disableDown={sci === ps.shared_subset.choices.length - 1} />
                                <DefaultBtn isDefault={sc.is_default} onClick={() => setSharedSubsetChoice(si, sci, 'is_default', !sc.is_default)} />
                                <input className="input flex-1 text-sm" placeholder="π.χ. Λευκή"
                                  value={sc.name} onChange={e => setSharedSubsetChoice(si, sci, 'name', e.target.value)} />
                                <PriceInput value={sc.extra_cost} onChange={v => setSharedSubsetChoice(si, sci, 'extra_cost', v)}
                                  allowNegative className="w-32 text-sm" />
                                <button onClick={() => removeSharedSubsetChoice(si, sci)} className="btn btn-danger px-2 min-h-0 h-9 text-sm shrink-0">✕</button>
                              </div>
                            ))}
                          </div>
                          <button onClick={() => addSharedSubsetChoice(si)} className="btn btn-secondary text-xs px-3 py-1 min-h-0 h-7">
                            + Επιλογή υπο-συνόλου
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                )
              })()}
            </div>
          </div>
        </div>

        {/* ── Footer ── */}
        <div className="flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50/50 shrink-0 gap-3">
          <button onClick={onClose} className="btn btn-secondary px-6">Ακύρωση</button>
          <div className="flex gap-3">
            {!isNew && (
              <button onClick={() => onCopy({ ...form })} className="btn btn-secondary px-6 text-indigo-600 border-indigo-200 hover:bg-indigo-50">
                📋 Αντιγραφή
              </button>
            )}
            <button onClick={submit} disabled={!canSave || uploading} className="btn btn-primary px-8">
              {uploading ? 'Ανέβασμα…' : isNew ? 'Δημιουργία' : 'Αποθήκευση'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}