{/* Params per type */} {cond.condition_type === 'time_range' && (

Από set('from', e.target.value)} />

Έως set('to', e.target.value)} />

)} {cond.condition_type === 'date_range' && (

Από set('from', e.target.value)} />

Έως set('to', e.target.value)} />

)} {cond.condition_type === 'specific_date' && (

Ημερομηνίες (μία ανά γραμμή)

set('dates', e.target.value.split('\n').map(s => s.trim()).filter(Boolean))} />
        </div>
      )}

{cond.condition_type === 'day_of_week' && (
        <div className="flex flex-wrap gap-1.5">
          {DAYS.map((d, i) => (
            <button type="button" key={i}
              onClick={() => {
                const days = cond.params.days ?? []
                set('days', days.includes(i) ? days.filter(x => x !== i) : [...days, i])
              }}
              className={`px-2.5 py-1 rounded text-[11px] font-medium transition-colors ${
                (cond.params.days ?? []).includes(i) ? 'bg-sky-100 text-sky-700' : 'bg-white border border-slate-200 text-slate-500 hover:bg-slate-50'
              }`}>{d.slice(0, 3)}</button>
          ))}
        </div>
      )}

{cond.condition_type === 'min_item_quantity' && (
        <div>
          <label className="block text-[11px] text-slate-500 mb-0.5">Ελάχιστη ποσότητα</label>
          <input type="number" min={1} className="input w-32 text-[12px]"
            value={cond.params.min ?? 1} onChange={e => set('min', Number(e.target.value))} />
        </div>
      )}

{cond.condition_type === 'min_category_qty' && (
        <div className="flex gap-2">
          <div className="flex-1">
            <label className="block text-[11px] text-slate-500 mb-0.5">Κατηγορία</label>
            <select className="input w-full text-[12px]" value={cond.params.category_id ?? ''}
              onChange={e => set('category_id', Number(e.target.value))}>
              <option value="">— Επιλογή —</option>
              {(categories ?? []).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
          <div className="w-24">
            <label className="block text-[11px] text-slate-500 mb-0.5">Ελάχ.</label>
            <input type="number" min={1} className="input w-full text-[12px]"
              value={cond.params.min ?? 1} onChange={e => set('min', Number(e.target.value))} />
          </div>
        </div>
      )}

{cond.condition_type === 'min_order_value' && (
        <div>
          <label className="block text-[11px] text-slate-500 mb-0.5">Ελάχιστη αξία παραγγελίας (€)</label>
          <input type="number" min={0} step={0.5} className="input w-32 text-[12px]"
            value={cond.params.min ?? 0} onChange={e => set('min', Number(e.target.value))} />
        </div>
      )}

{cond.condition_type === 'order_channel' && (
        <div className="flex flex-wrap gap-1.5">
          {CHANNELS.map(ch => (
            <button type="button" key={ch}
              onClick={() => {
                const channels = cond.params.channels ?? []
                set('channels', channels.includes(ch) ? channels.filter(x => x !== ch) : [...channels, ch])
              }}
              className={`px-2.5 py-1 rounded text-[11px] font-medium transition-colors ${
                (cond.params.channels ?? []).includes(ch) ? 'bg-sky-100 text-sky-700' : 'bg-white border border-slate-200 text-slate-500 hover:bg-slate-50'
              }`}>{ch}</button>
          ))}
        </div>
      )}

{cond.condition_type === 'price_group_active' && (
        <div>
          <label className="block text-[11px] text-slate-500 mb-0.5">Ομάδα τιμής</label>
          <select className="input w-full text-[12px]" value={cond.params.price_group_id ?? ''}
            onChange={e => set('price_group_id', Number(e.target.value))}>
            <option value="">— Επιλογή —</option>
            {(groups ?? []).map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
          </select>
        </div>
      )}

{(cond.condition_type === 'user_tier' || cond.condition_type === 'low_stock') && (
        <p className="text-[11px] text-amber-600 bg-amber-50 rounded px-2 py-1 flex items-center gap-1.5">
          <Info className="w-3.5 h-3.5 shrink-0" />
          Placeholder — θα ενεργοποιηθεί σε μελλοντική έκδοση
        </p>
      )}
    </div>
  )
}

// ─── Shared multi-picker ──────────────────────────────────────────────────────

function MultiPicker({ items, selected, onToggle, labelKey = 'name', valueKey = 'id', placeholder = 'Επιλέξτε...' }) {
  return (
    <div className="border border-slate-200 rounded-lg overflow-hidden">
      {items.length === 0 && (
        <p className="text-[11px] text-slate-400 px-3 py-2">{placeholder}</p>
      )}
      {items.map(item => {
        const val = item[valueKey]
        const checked = selected.includes(val)
        return (
          <div key={val} onClick={() => onToggle(val)}
            className={`flex items-center gap-2.5 px-3 py-1.5 cursor-pointer transition-colors text-[12px] border-b border-slate-100 last:border-0 ${
              checked ? 'bg-sky-50 text-sky-700' : 'hover:bg-slate-50 text-slate-700'
            }`}>
            <div className={`w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors ${
              checked ? 'bg-sky-500 border-sky-500' : 'border-slate-300 bg-white'
            }`}>
              {checked && <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M1 4l3 3 5-6" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
            </div>
            {item[labelKey]}
          </div>
        )
      })}
    </div>
  )
}

function TagPicker({ selected, onToggle, onAdd, allTags }) {
  const [draft, setDraft] = useState('')
  const handleAdd = () => {
    const tag = draft.trim()
    if (tag && !selected.includes(tag)) onAdd(tag)
    setDraft('')
  }
  return (
    <div className="space-y-2">
      {/* Quick-select existing tags */}
      {allTags.length > 0 && (
        <div className="flex flex-wrap gap-1.5">
          {allTags.map(tag => {
            const active = selected.includes(tag)
            return (
              <button type="button" key={tag} onClick={() => onToggle(tag)}
                className={`px-2 py-0.5 rounded-full text-[11px] font-medium border transition-colors ${
                  active ? 'bg-sky-500 border-sky-500 text-white' : 'border-slate-300 text-slate-600 hover:border-sky-400 hover:text-sky-600'
                }`}>{tag}</button>
            )
          })}
        </div>
      )}
      {/* Selected chips */}
      {selected.length > 0 && (
        <div className="flex flex-wrap gap-1.5">
          {selected.map(tag => (
            <span key={tag} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-sky-100 text-sky-700 text-[11px] font-medium">
              {tag}
              <button type="button" onClick={() => onToggle(tag)} className="hover:text-sky-900">
                <X className="w-3 h-3" />
              </button>
            </span>
          ))}
        </div>
      )}
      {/* Manual entry */}
      <div className="flex gap-2">
        <input className="input flex-1 text-[12px]" placeholder="Νέο tag..." value={draft}
          onChange={e => setDraft(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAdd() } }} />
        <button type="button" onClick={handleAdd}
          className="px-3 py-1.5 rounded-lg bg-slate-100 text-slate-600 text-[12px] hover:bg-slate-200 transition-colors">
          +
        </button>
      </div>
    </div>
  )
}

// ─── Target editor ────────────────────────────────────────────────────────────

function TargetEditor({ target, onChange, onRemove, products, categories, prepZones, allTags }) {
  const ids = target.target_ids ?? []
  const tags = target.target_tags ?? []
  const setIds = v => onChange({ ...target, target_ids: v, target_id: v[0] ?? null })
  const setTags = v => onChange({ ...target, target_tags: v, target_tag: v[0] ?? null })
  const toggleId = id => setIds(ids.includes(id) ? ids.filter(x => x !== id) : [...ids, id])
  const toggleTag = tag => setTags(tags.includes(tag) ? tags.filter(x => x !== tag) : [...tags, tag])

return (
    <div className="border border-slate-200 rounded-lg p-3 space-y-2 bg-slate-50">
      <div className="flex items-center gap-2">
        <select className="input flex-1 text-[12px]" value={target.target_type}
          onChange={e => onChange({ target_type: e.target.value, target_id: null, target_tag: null, target_ids: [], target_tags: [] })}>
          <option value="all">Όλα τα προϊόντα</option>
          <option value="item">Προϊόντα</option>
          <option value="category">Κατηγορίες</option>
          <option value="prep_zone">Ζώνες ετοιμασίας</option>
          <option value="tag">Ετικέτες (tags)</option>
        </select>
        <button type="button" onClick={onRemove}
          className="p-1.5 rounded text-slate-400 hover:text-rose-500 hover:bg-rose-50 transition-colors">
          <X className="w-3.5 h-3.5" />
        </button>
      </div>

{target.target_type === 'item' && (
        <MultiPicker items={products} selected={ids} onToggle={toggleId} />
      )}
      {target.target_type === 'category' && (
        <MultiPicker items={categories} selected={ids} onToggle={toggleId} />
      )}
      {target.target_type === 'prep_zone' && (
        <MultiPicker items={prepZones} selected={ids} onToggle={toggleId} />
      )}
      {target.target_type === 'tag' && (
        <TagPicker selected={tags} onToggle={toggleTag} onAdd={tag => setTags([...tags, tag])} allTags={allTags} />
      )}
    </div>
  )
}

// ─── Modifier form ────────────────────────────────────────────────────────────

const MODIFIER_TABS = [
  { key: 'info',      label: 'Πληροφορίες' },
  { key: 'target',   label: 'Στόχος' },
  { key: 'conditions', label: 'Συνθήκες' },
  { key: 'price',    label: 'Τιμή' },
]

function ModifierForm({ initial, onSave, onCancel, saving, groups, activeTab, onTabChange }) {
  const { data: products = [] } = useQuery({
    queryKey: ['products-all-pricing'],
    queryFn: () => client.get('/api/products/', { params: { all: true } }).then(r => r.data),
  })
  const { data: categories = [] } = useQuery({
    queryKey: ['categories'],
    queryFn: () => client.get('/api/products/categories').then(r => r.data),
    staleTime: 60_000,
  })
  const { data: prepZones = [] } = useQuery({
    queryKey: ['prep-zones'],
    queryFn: () => client.get('/api/prep-zones').then(r => r.data),
    staleTime: 60_000,
  })
  const { data: allTags = [] } = useQuery({
    queryKey: ['product-tags'],
    queryFn: () => client.get('/api/products/tags').then(r => r.data),
    staleTime: 60_000,
  })

const normalizeTarget = t => ({
    ...t,
    target_ids: t.target_ids ?? (t.target_id != null ? [t.target_id] : []),
    target_tags: t.target_tags ?? (t.target_tag ? [t.target_tag] : []),
  })

const blank = {
    name: '', description: '', color: COLORS[0], is_active: true, is_favorite: false,
    allow_stack: false, sort_order: 0, scope: 'global', item_id: null,
    action_type: 'add_percent', action_value: -10, round_to: '',
    conditions: [], targets: [{ target_type: 'all', target_id: null, target_tag: null, target_ids: [], target_tags: [] }],
  }
  const [f, setF] = useState(initial ? {
    ...initial,
    action_value: initial.action_value ?? 0,
    round_to: initial.round_to ?? '',
    conditions: initial.conditions ?? [],
    targets: (initial.targets ?? []).map(normalizeTarget),
  } : blank)

const set = (k, v) => setF(p => ({ ...p, [k]: v }))

const addCondition = () => set('conditions', [...f.conditions, { condition_type: 'time_range', params: {} }])
  const updateCondition = (i, c) => set('conditions', f.conditions.map((x, j) => j === i ? c : x))
  const removeCondition = i => set('conditions', f.conditions.filter((_, j) => j !== i))

const addTarget = () => set('targets', [...f.targets, { target_type: 'all', target_id: null, target_tag: null, target_ids: [], target_tags: [] }])
  const updateTarget = (i, t) => set('targets', f.targets.map((x, j) => j === i ? t : x))
  const removeTarget = i => set('targets', f.targets.filter((_, j) => j !== i))

function submit(e) {
    e.preventDefault()
    if (!f.name.trim()) return toast.error('Απαιτείται όνομα')
    if (f.scope === 'item' && !f.item_id) return toast.error('Επιλέξτε προϊόν για item-scope')
    onSave({ ...f, round_to: f.round_to || null })
  }

const actionLabel = f.action_type === 'set' ? 'Νέα τιμή (€)' :
                      f.action_type === 'add_amount' ? 'Ποσό (€, αρνητικό = έκπτωση)' :
                      'Ποσοστό (%, αρνητικό = έκπτωση)'

return (
    <form id="modifier-form" onSubmit={submit} className="space-y-5">

{/* ── Info tab ── */}
      {activeTab === 'info' && (
        <>
          <div className="grid grid-cols-2 gap-3">
            <div className="col-span-2">
              <label className="block text-[12px] font-medium text-slate-600 mb-1">Όνομα</label>
              <input className="input w-full" value={f.name} onChange={e => set('name', e.target.value)}
                placeholder="π.χ. Happy Hour -10%" autoFocus />
            </div>
            <div className="col-span-2">
              <label className="block text-[12px] font-medium text-slate-600 mb-1">Περιγραφή (προαιρετική)</label>
              <input className="input w-full" value={f.description ?? ''} onChange={e => set('description', e.target.value)} />
            </div>
          </div>

<div>
            <label className="block text-[12px] font-medium text-slate-600 mb-1.5">Χρώμα</label>
            <div className="flex flex-wrap gap-2">
              {COLORS.map(c => (
                <button type="button" key={c} onClick={() => set('color', c)}
                  className={`w-6 h-6 rounded-full transition-transform ${f.color === c ? 'ring-2 ring-offset-1 ring-slate-400 scale-110' : 'hover:scale-105'}`}
                  style={{ background: c }} />
              ))}
            </div>
          </div>

<div className="flex flex-wrap gap-4">
            {[
              { key: 'is_active',   label: 'Ενεργός' },
              { key: 'is_favorite', label: 'Αγαπημένος (dashboard)' },
              { key: 'allow_stack', label: 'Επιτρέπει συσσώρευση' },
            ].map(({ key, label }) => (
              <label key={key} className="flex items-center gap-2 cursor-pointer select-none">
                <div onClick={() => set(key, !f[key])}
                  className={`relative rounded-full transition-colors ${f[key] ? 'bg-sky-500' : 'bg-slate-200'}`}
                  style={{ height: '18px', width: '32px' }}>
                  <span className={`absolute top-0.5 left-0.5 w-3.5 h-3.5 rounded-full bg-white shadow transition-transform ${f[key] ? 'translate-x-3.5' : ''}`} />
                </div>
                <span className="text-[12px] text-slate-700">{label}</span>
              </label>
            ))}
          </div>
        </>
      )}

{/* ── Target tab ── */}
      {activeTab === 'target' && (
        <>
          <div>
            <label className="block text-[12px] font-medium text-slate-600 mb-1">Εμβέλεια</label>
            <div className="flex gap-2">
              {[['global','Καθολικός (με στόχους)'],['item','Συγκεκριμένο προϊόν']].map(([v, l]) => (
                <button type="button" key={v} onClick={() => set('scope', v)}
                  className={`flex-1 py-2 rounded-lg border text-[12px] font-medium transition-colors ${
                    f.scope === v ? 'border-sky-500 bg-sky-50 text-sky-700' : 'border-slate-200 text-slate-500 hover:bg-slate-50'
                  }`}>{l}</button>
              ))}
            </div>
            {f.scope === 'item' && (
              <select className="input w-full mt-2 text-[13px]" value={f.item_id ?? ''}
                onChange={e => set('item_id', Number(e.target.value))}>
                <option value="">— Επιλογή προϊόντος —</option>
                {products.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
              </select>
            )}
          </div>

{f.scope === 'global' && (
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-[12px] font-semibold text-slate-600 uppercase tracking-wide">
                  Στόχοι <span className="font-normal text-slate-400 normal-case ml-1">(OR — αρκεί ένας)</span>
                </span>
                <button type="button" onClick={addTarget}
                  className="text-[12px] text-sky-600 hover:text-sky-700 flex items-center gap-1">
                  <Plus className="w-3.5 h-3.5" />Προσθήκη
                </button>
              </div>
              {f.targets.length === 0 && (
                <p className="text-[12px] text-amber-600 bg-amber-50 rounded-lg px-3 py-2.5">
                  Χωρίς στόχο — ο τροποποιητής δεν θα εφαρμοστεί σε κανένα προϊόν.
                </p>
              )}
              {f.targets.map((t, i) => (
                <TargetEditor key={i} target={t}
                  onChange={v => updateTarget(i, v)}
                  onRemove={() => removeTarget(i)}
                  products={products} categories={categories} prepZones={prepZones} allTags={allTags} />
              ))}
            </div>
          )}
        </>
      )}

{/* ── Conditions tab ── */}
      {activeTab === 'conditions' && (
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div>
              <span className="text-[12px] font-semibold text-slate-600 uppercase tracking-wide">Συνθήκες</span>
              <span className="text-[11px] text-slate-400 ml-1.5">AND — όλες πρέπει να ισχύουν</span>
            </div>
            <button type="button" onClick={addCondition}
              className="text-[12px] text-sky-600 hover:text-sky-700 flex items-center gap-1">
              <Plus className="w-3.5 h-3.5" />Προσθήκη
            </button>
          </div>
          {f.conditions.length === 0 && (
            <p className="text-[12px] text-slate-400 bg-slate-50 rounded-lg px-3 py-2.5">
              Χωρίς συνθήκες — ο τροποποιητής εφαρμόζεται χειροκίνητα μέσω ενεργοποίησης.
            </p>
          )}
          {f.conditions.map((c, i) => (
            <ConditionEditor key={i} cond={c}
              onChange={v => updateCondition(i, v)}
              onRemove={() => removeCondition(i)}
              groups={groups} categories={categories} prepZones={prepZones} />
          ))}
        </div>
      )}

{/* ── Price Modifier tab ── */}
      {activeTab === 'price' && (
        <div className="space-y-3">
          <div className="flex gap-2">
            {[['set','Ορισμός τιμής'],['add_amount','± Ποσό €'],['add_percent','± Ποσοστό %']].map(([v,l]) => (
              <button type="button" key={v} onClick={() => set('action_type', v)}
                className={`flex-1 py-1.5 rounded-lg border text-[12px] font-medium transition-colors ${
                  f.action_type === v ? 'border-sky-500 bg-sky-50 text-sky-700' : 'border-slate-200 text-slate-500 hover:bg-slate-50'
                }`}>{l}</button>
            ))}
          </div>
          <div className="flex gap-3 items-end">
            <div className="flex-1">
              <label className="block text-[11px] text-slate-500 mb-0.5">{actionLabel}</label>
              <input type="number" step={f.action_type === 'set' ? 0.01 : f.action_type === 'add_amount' ? 0.1 : 1}
                className="input w-full" value={f.action_value}
                onChange={e => set('action_value', Number(e.target.value))} />
            </div>
            {f.action_type === 'add_percent' && (
              <div className="flex-1">
                <label className="block text-[11px] text-slate-500 mb-0.5">Στρογγυλοποίηση (προαιρ.)</label>
                <select className="input w-full text-[12px]" value={f.round_to ?? ''}
                  onChange={e => set('round_to', e.target.value)}>
                  {ROUND_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
                </select>
              </div>
            )}
          </div>
          <p className="text-[11px] text-slate-400">
            Το σύστημα στρογγυλοποιεί πάντα την τελική τιμή στο κοντινότερο €0,10 ανεξάρτητα από την παραπάνω επιλογή.
          </p>
        </div>
      )}

</form>
  )
}

// ─── Modifier card ────────────────────────────────────────────────────────────

function ModifierCard({ modifier, onEdit, onDelete, dragHandleProps }) {
  const qc = useQueryClient()
  const [expanded, setExpanded] = useState(false)

const toggle = useMutation({
    mutationFn: () => api.toggle(modifier.id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['pricing-modifiers'] }),
    onError: () => toast.error('Σφάλμα'),
  })

const actionText = modifier.action_type === 'set'
    ? `= €${modifier.action_value}`
    : modifier.action_type === 'add_amount'
      ? `${modifier.action_value >= 0 ? '+' : ''}€${modifier.action_value}`
      : `${modifier.action_value >= 0 ? '+' : ''}${modifier.action_value}%`

const condCount = modifier.conditions?.length ?? 0
  const targetSummary = modifier.scope === 'item'
    ? 'item-scope'
    : modifier.targets?.length === 1 && modifier.targets[0]?.target_type === 'all'
      ? 'Όλα τα προϊόντα'
      : `${modifier.targets?.length ?? 0} στόχοι`

return (
    <div className={`bg-white rounded-xl border shadow-sm transition-opacity ${modifier.is_active ? 'border-slate-200' : 'border-slate-100 opacity-60'}`}>
      <div className="flex items-center gap-2 px-3 py-3">
        {/* Drag handle */}
        <div {...dragHandleProps} className="cursor-grab text-slate-300 hover:text-slate-400 shrink-0">
          <GripVertical className="w-4 h-4" />
        </div>

{/* Color bar */}
        <div className="w-1 h-8 rounded-full shrink-0" style={{ background: modifier.color ?? '#64748b' }} />

{/* Name + badges */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-1.5 flex-wrap">
            <span className="text-[13px] font-semibold text-slate-800 truncate">{modifier.name}</span>
            {modifier.is_favorite && <Star className="w-3 h-3 text-amber-400 fill-amber-400 shrink-0" />}
            {modifier.allow_stack && <Layers className="w-3 h-3 text-sky-400 shrink-0" title="Stackable" />}
            <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full ${
              modifier.action_value < 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-sky-100 text-sky-700'
            }`}>{actionText}</span>
            <span className="text-[10px] text-slate-400">{condCount === 0 ? 'χειροκίνητος' : `${condCount} συνθ.`} · {targetSummary}</span>
          </div>
          {modifier.description && <p className="text-[11px] text-slate-400 truncate mt-0.5">{modifier.description}</p>}
        </div>

{/* Actions */}
        <div className="flex items-center gap-0.5 shrink-0">
          <button onClick={() => setExpanded(e => !e)}
            className="p-1.5 rounded text-slate-400 hover:bg-slate-100 transition-colors">
            {expanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
          </button>
          <button onClick={() => toggle.mutate()}
            className={`p-1.5 rounded transition-colors ${
              modifier.is_active ? 'text-emerald-600 hover:bg-emerald-50' : 'text-slate-400 hover:bg-slate-100'
            }`} title={modifier.is_active ? 'Απενεργοποίηση' : 'Ενεργοποίηση'}>
            <Power className="w-3.5 h-3.5" />
          </button>
          <button onClick={() => onEdit(modifier)}
            className="p-1.5 rounded text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
            <Pencil className="w-3.5 h-3.5" />
          </button>
          <button onClick={() => onDelete(modifier)}
            className="p-1.5 rounded text-slate-400 hover:bg-rose-50 hover:text-rose-500 transition-colors">
            <Trash2 className="w-3.5 h-3.5" />
          </button>
        </div>
      </div>

{/* Expanded detail */}
      {expanded && (
        <div className="border-t border-slate-100 px-4 py-3 text-[12px] text-slate-500 space-y-1.5">
          {modifier.conditions?.length === 0 && <p className="italic">Χωρίς αυτόματες συνθήκες — μόνο χειροκίνητη ενεργοποίηση</p>}
          {modifier.conditions?.map((c, i) => (
            <div key={i} className="flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 rounded-full bg-sky-400 shrink-0" />
              <span>{CONDITION_TYPES.find(x => x.value === c.condition_type)?.label ?? c.condition_type}</span>
              <span className="text-slate-400 font-mono text-[11px]">{JSON.stringify(c.params)}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

// ─── Main tab ─────────────────────────────────────────────────────────────────

export default function ModifiersTab() {
  const qc = useQueryClient()
  const [showForm, setShowForm] = useState(false)
  const [editing, setEditing] = useState(null)
  const [deleting, setDeleting] = useState(null)
  const [formTab, setFormTab] = useState('info')
  const [scopeFilter, setScopeFilter] = useState('all')
  const [items, setItems] = useState(null)
  const [dragging, setDragging] = useState(null)

const { data: rawModifiers = [], isLoading } = useQuery({
    queryKey: ['pricing-modifiers'],
    queryFn: () => api.list(),
  })
  const modifiers = items ?? rawModifiers

const { data: groups = [] }    = useQuery({ queryKey: ['pricing-groups'],    queryFn: api.groups,      staleTime: 30_000 })

// Simple drag-to-reorder (no extra library — HTML5 DnD)
  function handleDragStart(e, id) {
    setDragging(id)
    e.dataTransfer.effectAllowed = 'move'
  }
  function handleDragOver(e, id) {
    e.preventDefault()
    if (dragging == null || dragging === id) return
    const from = modifiers.findIndex(m => m.id === dragging)
    const to   = modifiers.findIndex(m => m.id === id)
    if (from === -1 || to === -1) return
    const reordered = [...modifiers]
    const [moved] = reordered.splice(from, 1)
    reordered.splice(to, 0, moved)
    setItems(reordered)
  }
  function handleDrop() {
    setDragging(null)
    const payload = (items ?? modifiers).map((m, i) => ({ id: m.id, sort_order: i }))
    reorder.mutate(payload)
  }

const filtered = scopeFilter === 'all' ? modifiers : modifiers.filter(m => m.scope === scopeFilter)

return (
    <div className="p-6 space-y-4">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h2 className="text-[14px] font-semibold text-slate-800">Τροποποιητές Τιμής</h2>
          <p className="text-[12px] text-slate-500 mt-0.5">
            Κανόνες που αλλάζουν τιμές αυτόματα ή χειροκίνητα. Η σειρά καθορίζει προτεραιότητα.
          </p>
        </div>
        <Button variant="primary" onClick={() => setShowForm(true)}>
          <Plus className="w-4 h-4 mr-1.5" />Νέος Τροποποιητής
        </Button>
      </div>

{/* Filter pills */}
      <div className="flex gap-2">
        {[['all','Όλοι'],['global','Καθολικοί'],['item','Item-scope']].map(([v,l]) => (
          <button key={v} onClick={() => setScopeFilter(v)}
            className={`px-3 py-1 rounded-full text-[12px] font-medium transition-colors ${
              scopeFilter === v ? 'bg-sky-100 text-sky-700' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
            }`}>{l}</button>
        ))}
      </div>

{isLoading ? (
        <div className="flex justify-center py-12">
          <div className="w-5 h-5 rounded-full border-2 border-sky-500 border-t-transparent animate-spin" />
        </div>
      ) : filtered.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-slate-400">
          <Percent className="w-10 h-10 mb-3 opacity-30" />
          <p className="text-[13px]">Δεν υπάρχουν τροποποιητές</p>
          <p className="text-[12px] mt-1">Δημιουργήστε έναν για Happy Hour, εποχιακές τιμές κ.λπ.</p>
        </div>
      ) : (
        <div className="space-y-2" onDragOver={e => e.preventDefault()} onDrop={handleDrop}>
          {filtered.map(m => (
            <div key={m.id} draggable
              onDragStart={e => handleDragStart(e, m.id)}
              onDragOver={e => handleDragOver(e, m.id)}
              className={dragging === m.id ? 'opacity-50' : ''}>
              <ModifierCard modifier={m} onEdit={m => { setEditing(m); setFormTab('info') }} onDelete={setDeleting}
                dragHandleProps={{
                  onMouseDown: () => {},
                  title: 'Σύρετε για αναδιάταξη',
                }} />
            </div>
          ))}
        </div>
      )}

{/* Create */}
      {showForm && (
        <Modal title="Νέος Τροποποιητής Τιμής" onClose={() => { setShowForm(false); setFormTab('info') }}
          maxWidth="max-w-xl" tabs={MODIFIER_TABS} activeTab={formTab} onTabChange={setFormTab}
          footer={<>
            <Button type="button" variant="secondary" onClick={() => { setShowForm(false); setFormTab('info') }}>Ακύρωση</Button>
            <Button type="submit" form="modifier-form" variant="primary" disabled={create.isPending}>
              {create.isPending ? 'Αποθήκευση...' : 'Αποθήκευση'}
            </Button>
          </>}>
          <ModifierForm onSave={body => create.mutate(body)} onCancel={() => { setShowForm(false); setFormTab('info') }}
            saving={create.isPending} groups={groups} activeTab={formTab} onTabChange={setFormTab} />
        </Modal>
      )}

{/* Edit */}
      {editing && (
        <Modal title="Επεξεργασία Τροποποιητή" onClose={() => { setEditing(null); setFormTab('info') }}
          maxWidth="max-w-xl" tabs={MODIFIER_TABS} activeTab={formTab} onTabChange={setFormTab}
          footer={<>
            <Button type="button" variant="secondary" onClick={() => { setEditing(null); setFormTab('info') }}>Ακύρωση</Button>
            <Button type="submit" form="modifier-form" variant="primary" disabled={update.isPending}>
              {update.isPending ? 'Αποθήκευση...' : 'Αποθήκευση'}
            </Button>
          </>}>
          <ModifierForm initial={editing} onSave={body => update.mutate({ id: editing.id, body })}
            onCancel={() => { setEditing(null); setFormTab('info') }} saving={update.isPending}
            groups={groups} activeTab={formTab} onTabChange={setFormTab} />
        </Modal>
      )}

{/* Delete */}
      {deleting && (
        <ConfirmModal title="Διαγραφή Τροποποιητή"
          message={`Θέλετε να διαγράψετε τον τροποποιητή "${deleting.name}";`}
          confirmLabel="Διαγραφή"
          onConfirm={() => remove.mutate(deleting.id)}
          onCancel={() => setDeleting(null)} />
      )}
    </div>
  )
}