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

function Toggle({ checked, onChange, disabled }) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      onClick={() => !disabled && onChange(!checked)}
      disabled={disabled}
      className={`relative w-11 h-6 rounded-full transition-colors duration-200 flex-shrink-0 disabled:opacity-50 ${
        checked ? 'bg-sky-500' : 'bg-slate-200'
      }`}
    >
      <span className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-all duration-200 ${
        checked ? 'left-6' : 'left-1'
      }`} />
    </button>
  )
}

function SectionCard({ title, description, children, action }) {
  return (
    <div className="card divide-y divide-gray-100">
      <div className="flex items-center justify-between px-5 py-4">
        <div>
          <h2 className="font-semibold text-gray-700">{title}</h2>
          {description && <p className="text-xs text-gray-400 mt-0.5">{description}</p>}
        </div>
        {action}
      </div>
      {children}
    </div>
  )
}

function OptionRow({ label, description, children }) {
  return (
    <div className="flex items-center justify-between gap-4 px-5 py-4">
      <div className="min-w-0">
        <p className="text-sm font-medium text-gray-800">{label}</p>
        {description && <p className="text-xs text-gray-500 mt-0.5">{description}</p>}
      </div>
      <div className="flex-shrink-0">{children}</div>
    </div>
  )
}

function ShiftSettingsSection() {
  const qc = useQueryClient()
  const { data: settings, isLoading } = useQuery({
    queryKey: ['pos-settings'],
    queryFn: () => client.get('/api/settings/').then(r => r.data),
    staleTime: 30_000,
  })
  const updateMut = useMutation({
    mutationFn: ({ key, value }) => client.put(`/api/settings/${key}`, { value }),
    onSuccess: () => { toast.success('Αποθηκεύτηκε'); qc.invalidateQueries({ queryKey: ['pos-settings'] }) },
    onError: () => toast.error('Σφάλμα αποθήκευσης'),
  })
  function toggle(key, current) {
    updateMut.mutate({ key, value: current === 'true' ? 'false' : 'true' })
  }
  const selfStart       = settings?.['shifts.waiter_self_start']?.value ?? 'true'
  const selfEnd         = settings?.['shifts.waiter_self_end']?.value   ?? 'true'
  const cancelAllowed   = settings?.['orders.waiter_cancellations_allowed']?.value ?? 'false'
  const hideRevenue     = settings?.['shifts.hide_revenue_from_waiters']?.value   ?? 'false'
  const revertAllowed   = settings?.['payments.waiter_revert_allowed']?.value ?? 'false'
  const priceAdjAllowed = settings?.['orders.waiter_price_adjust_allowed']?.value ?? 'false'
  return (
    <SectionCard title="Ρυθμίσεις Προσωπικού" description="Έλεγχος του τι επιτρέπεται να κάνουν οι σερβιτόροι μόνοι τους">
      {isLoading && <p className="px-5 py-4 text-sm text-gray-400">Φόρτωση…</p>}
      {!isLoading && (
        <>
          <OptionRow label="Αυτόματη Έναρξη Βάρδιας" description="Οι σερβιτόροι μπορούν να ξεκινούν μόνοι τους τη βάρδια τους">
            <Toggle checked={selfStart === 'true'} onChange={() => toggle('shifts.waiter_self_start', selfStart)} disabled={updateMut.isPending} />
          </OptionRow>
          <OptionRow label="Αυτόματο Κλείσιμο Βάρδιας" description="Οι σερβιτόροι μπορούν να κλείνουν μόνοι τους τη βάρδια τους">
            <Toggle checked={selfEnd === 'true'} onChange={() => toggle('shifts.waiter_self_end', selfEnd)} disabled={updateMut.isPending} />
          </OptionRow>
          <OptionRow
            label="Ακυρώσεις Παραγγελιών από Σερβιτόρους"
            description="Επιτρέπει σε εξουσιοδοτημένους σερβιτόρους να ακυρώνουν παραγγελίες ή αντικείμενα. Αν είναι ΚΛΕΙΣΤΌ, κανένας σερβιτόρος δεν μπορεί να ακυρώσει — ανεξάρτητα από τις ατομικές ρυθμίσεις."
          >
            <Toggle checked={cancelAllowed === 'true'} onChange={() => toggle('orders.waiter_cancellations_allowed', cancelAllowed)} disabled={updateMut.isPending} />
          </OptionRow>
          <OptionRow
            label="Απόκρυψη Εισπράξεων από Σερβιτόρους"
            description="Όταν είναι ΕΝΕΡΓΌ, οι σερβιτόροι δεν βλέπουν το ποσό είσπραξης και το ποσό παράδοσης στην Επισκόπηση Βάρδιας — αποτρέπει παραποίηση των ταμειακών."
          >
            <Toggle checked={hideRevenue === 'true'} onChange={() => toggle('shifts.hide_revenue_from_waiters', hideRevenue)} disabled={updateMut.isPending} />
          </OptionRow>
          <OptionRow
            label="Αναίρεση Πληρωμής από Σερβιτόρους"
            description="Επιτρέπει στους σερβιτόρους να αναιρούν μεμονωμένες πληρωμένες χρεώσεις από την καρτέλα ΠΛΗΡΩΜΕΝΑ, επαναφέροντάς τες σε μη πληρωμένες. Χρήσιμο για διόρθωση λαθών χωρίς παρέμβαση διαχειριστή."
          >
            <Toggle checked={revertAllowed === 'true'} onChange={() => toggle('payments.waiter_revert_allowed', revertAllowed)} disabled={updateMut.isPending} />
          </OptionRow>
          <OptionRow
            label="Προσαρμογή Τιμής από Σερβιτόρους"
            description="Επιτρέπει στους σερβιτόρους να αλλάζουν την τιμή ενός αντικειμένου κατά την παραγγελία ή μετά. Αν είναι ΚΛΕΙΣΤΌ, κανένας σερβιτόρος δεν μπορεί να τροποποιήσει τιμή — ανεξάρτητα από τις ατομικές ρυθμίσεις."
          >
            <Toggle checked={priceAdjAllowed === 'true'} onChange={() => toggle('orders.waiter_price_adjust_allowed', priceAdjAllowed)} disabled={updateMut.isPending} />
          </OptionRow>
        </>
      )}
    </SectionCard>
  )
}

function PaymentSettingsSection() {
  const qc = useQueryClient()
  const { data: settings, isLoading } = useQuery({
    queryKey: ['pos-settings'],
    queryFn: () => client.get('/api/settings/').then(r => r.data),
    staleTime: 30_000,
  })
  const updateMut = useMutation({
    mutationFn: ({ key, value }) => client.put(`/api/settings/${key}`, { value }),
    onSuccess: () => { toast.success('Αποθηκεύτηκε'); qc.invalidateQueries({ queryKey: ['pos-settings'] }) },
    onError: () => toast.error('Σφάλμα αποθήκευσης'),
  })
  function toggle(key, current) {
    updateMut.mutate({ key, value: current === 'true' ? 'false' : 'true' })
  }
  const cardEnabled = settings?.['payments.card_enabled']?.value ?? 'false'
  return (
    <SectionCard title="Ρυθμίσεις Πληρωμών" description="Μέθοδοι πληρωμής που είναι διαθέσιμες στους σερβιτόρους">
      {isLoading && <p className="px-5 py-4 text-sm text-gray-400">Φόρτωση…</p>}
      {!isLoading && (
        <OptionRow
          label="Πληρωμή με Κάρτα"
          description="Επιτρέπει στους σερβιτόρους να καταχωρούν πληρωμές με κάρτα. Το σύστημα δεν επικοινωνεί με POS μηχάνημα — η επιλογή καταγράφεται μόνο για αναφορά."
        >
          <Toggle checked={cardEnabled === 'true'} onChange={() => toggle('payments.card_enabled', cardEnabled)} disabled={updateMut.isPending} />
        </OptionRow>
      )}
    </SectionCard>
  )
}

const COURSE_COLORS = ['#ef4444','#f97316','#eab308','#22c55e','#3b82f6','#8b5cf6','#ec4899','#06b6d4','#64748b','#10b981']

function CoursesSection({ settings, updateMut }) {
  const coursesEnabled = settings?.['orders.courses_enabled']?.value === 'true'
  const [courses, setCourses] = useState(() => {
    try { return JSON.parse(settings?.['orders.courses']?.value || '[]') }
    catch { return [] }
  })

  // Sync courses from settings when settings change (e.g. after save)
  const settingsCoursesStr = settings?.['orders.courses']?.value
  useEffect(() => {
    try { setCourses(JSON.parse(settingsCoursesStr || '[]')) }
    catch { setCourses([]) }
  }, [settingsCoursesStr])

  const dragItem = useRef(null)
  const dragOverItem = useRef(null)

  function saveCourses(next) {
    setCourses(next)
    updateMut.mutate({ key: 'orders.courses', value: JSON.stringify(next) })
  }

  function addCourse() {
    const newId = Math.max(...courses.map(c => c.id), 0) + 1
    const colorIdx = courses.length % COURSE_COLORS.length
    saveCourses([...courses, { id: newId, name: `Course ${newId}`, color: COURSE_COLORS[colorIdx] }])
  }

  function deleteCourse(id) {
    saveCourses(courses.filter(c => c.id !== id))
  }

  function updateName(id, name) {
    saveCourses(courses.map(c => c.id === id ? { ...c, name } : c))
  }

  function cycleColor(id) {
    saveCourses(courses.map(c => {
      if (c.id !== id) return c
      const idx = COURSE_COLORS.indexOf(c.color)
      const next = COURSE_COLORS[(idx + 1) % COURSE_COLORS.length]
      return { ...c, color: next }
    }))
  }

  function handleDragStart(e, idx) {
    dragItem.current = idx
    e.dataTransfer.effectAllowed = 'move'
  }

  function handleDragOver(e, idx) {
    e.preventDefault()
    dragOverItem.current = idx
  }

  function handleDrop() {
    if (dragItem.current === null || dragOverItem.current === null) return
    if (dragItem.current === dragOverItem.current) return
    const next = [...courses]
    const dragged = next.splice(dragItem.current, 1)[0]
    next.splice(dragOverItem.current, 0, dragged)
    dragItem.current = null
    dragOverItem.current = null
    saveCourses(next)
  }

  const rowStyle = { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 20px', borderBottom: '1px solid #f4f4f2' }

  return (
    <div>
      {coursesEnabled && (
        <div>
          {courses.map((course, idx) => (
            <div
              key={course.id}
              draggable
              onDragStart={e => handleDragStart(e, idx)}
              onDragOver={e => handleDragOver(e, idx)}
              onDrop={handleDrop}
              style={{ ...rowStyle, cursor: 'grab' }}
            >
              {/* Drag handle */}
              <span style={{ color: '#9ca3af', fontSize: 14, flexShrink: 0, cursor: 'grab' }}>⠿</span>
              {/* Color swatch */}
              <button
                onClick={() => cycleColor(course.id)}
                title="Click to change color"
                style={{
                  width: 20, height: 20, borderRadius: '50%',
                  background: course.color,
                  border: '2px solid rgba(0,0,0,0.12)',
                  cursor: 'pointer', flexShrink: 0,
                  padding: 0,
                }}
              />
              {/* Name input */}
              <input
                value={course.name}
                onChange={e => setCourses(cs => cs.map(c => c.id === course.id ? { ...c, name: e.target.value } : c))}
                onBlur={e => updateName(course.id, e.target.value)}
                style={{
                  flex: 1, height: 32, borderRadius: 6, border: '1px solid #dfe2e6',
                  padding: '0 10px', fontSize: 13, fontFamily: 'inherit',
                }}
              />
              {/* Delete */}
              <button
                onClick={() => deleteCourse(course.id)}
                style={{
                  height: 28, padding: '0 10px', borderRadius: 6,
                  border: '1px solid #fee2e2', background: '#fff5f5',
                  fontSize: 12, cursor: 'pointer', color: '#dc2626', flexShrink: 0,
                }}
              >Διαγραφή</button>
            </div>
          ))}
          <div style={{ padding: '10px 20px' }}>
            <button
              onClick={addCourse}
              style={{
                height: 32, padding: '0 14px', borderRadius: 8,
                border: '1px solid #dfe2e6', background: 'white',
                fontSize: 12, fontWeight: 600, cursor: 'pointer', color: '#374151',
              }}
            >+ Add course</button>
          </div>
        </div>
      )}
    </div>
  )
}

const DEFAULT_QUICK_NOTES = ['Χωρίς αλάτι', 'Βγάλτε γρήγορα', 'Αλλεργία!', 'Κόψτε σε μικρά κομμάτια', 'Έξτρα χαρτοπετσέτες']

function QuickNotesSection({ settings, updateMut }) {
  const raw = settings?.['orders.quick_notes']?.value
  const [notes, setNotes] = useState(() => {
    try { return JSON.parse(raw || 'null') ?? DEFAULT_QUICK_NOTES }
    catch { return DEFAULT_QUICK_NOTES }
  })
  const [newNote, setNewNote] = useState('')

  const settingsRaw = settings?.['orders.quick_notes']?.value
  useEffect(() => {
    try { setNotes(JSON.parse(settingsRaw || 'null') ?? DEFAULT_QUICK_NOTES) }
    catch { setNotes(DEFAULT_QUICK_NOTES) }
  }, [settingsRaw])

  function saveNotes(next) {
    setNotes(next)
    updateMut.mutate({ key: 'orders.quick_notes', value: JSON.stringify(next) })
  }

  function updateNote(idx, val) {
    const next = notes.map((n, i) => i === idx ? val : n)
    setNotes(next)
  }

  function commitNote(idx) {
    saveNotes(notes.map((n, i) => i === idx ? n.trim() : n).filter(n => n.length > 0))
  }

  function deleteNote(idx) {
    saveNotes(notes.filter((_, i) => i !== idx))
  }

  function addNote() {
    const trimmed = newNote.trim()
    if (!trimmed) return
    setNewNote('')
    saveNotes([...notes, trimmed])
  }

  const rowStyle = { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 20px', borderBottom: '1px solid #f4f4f2' }

  return (
    <div>
      <div style={{ padding: '12px 20px 4px', fontSize: 12, fontWeight: 600, color: '#6b7280', textTransform: 'uppercase', letterSpacing: 0.5 }}>
        Quick Note Options
      </div>
      {notes.map((note, idx) => (
        <div key={idx} style={rowStyle}>
          <input
            value={note}
            onChange={e => updateNote(idx, e.target.value)}
            onBlur={() => commitNote(idx)}
            style={{ flex: 1, height: 32, borderRadius: 6, border: '1px solid #dfe2e6', padding: '0 10px', fontSize: 13, fontFamily: 'inherit' }}
          />
          <button
            onClick={() => deleteNote(idx)}
            style={{ height: 28, padding: '0 10px', borderRadius: 6, border: '1px solid #fee2e2', background: '#fff5f5', fontSize: 12, cursor: 'pointer', color: '#dc2626', flexShrink: 0 }}
          >Διαγραφή</button>
        </div>
      ))}
      <div style={{ display: 'flex', gap: 8, padding: '10px 20px' }}>
        <input
          value={newNote}
          onChange={e => setNewNote(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && addNote()}
          placeholder="Νέα γρήγορη σημείωση…"
          style={{ flex: 1, height: 32, borderRadius: 6, border: '1px solid #dfe2e6', padding: '0 10px', fontSize: 13, fontFamily: 'inherit' }}
        />
        <button
          onClick={addNote}
          style={{ height: 32, padding: '0 14px', borderRadius: 8, border: '1px solid #dfe2e6', background: 'white', fontSize: 12, fontWeight: 600, cursor: 'pointer', color: '#374151' }}
        >+ Προσθήκη</button>
      </div>
    </div>
  )
}

function TableOrderSettingsSection() {
  const qc = useQueryClient()
  const { data: settings, isLoading } = useQuery({
    queryKey: ['pos-settings'],
    queryFn: () => client.get('/api/settings/').then(r => r.data),
    staleTime: 30_000,
  })
  const updateMut = useMutation({
    mutationFn: ({ key, value }) => client.put(`/api/settings/${key}`, { value }),
    onSuccess: () => { toast.success('Αποθηκεύτηκε'); qc.invalidateQueries({ queryKey: ['pos-settings'] }) },
    onError: () => toast.error('Σφάλμα αποθήκευσης'),
  })
  function toggle(key, current) {
    updateMut.mutate({ key, value: current === 'true' ? 'false' : 'true' })
  }
  const autoClose = settings?.['orders.auto_close_on_full_payment']?.value ?? 'false'
  const bypassKds = settings?.['orders.bypass_kds_serve']?.value ?? 'false'
  return (
    <SectionCard title="Ρυθμίσεις Τραπεζιών και Παραγγελιών" description="Συμπεριφορά τραπεζιών και παραγγελιών">
      {isLoading && <p className="px-5 py-4 text-sm text-gray-400">Φόρτωση…</p>}
      {!isLoading && (
        <>
          <OptionRow
            label="Αυτόματο Κλείσιμο Τραπεζιού μετά την πλήρη πληρωμή"
            description="Το τραπέζι κλείνει αυτόματα όταν πληρωθούν όλα τα αντικείμενα"
          >
            <Toggle checked={autoClose === 'true'} onChange={() => toggle('orders.auto_close_on_full_payment', autoClose)} disabled={updateMut.isPending} />
          </OptionRow>
          <OptionRow
            label="Παράκαμψη KDS και Κατάστασης Σερβιρίσματος"
            description="Οι νέες παραγγελίες σημειώνονται άμεσα ως σερβιρισμένες — δεν απαιτείται επιβεβαίωση από σερβιτόρο"
          >
            <Toggle checked={bypassKds === 'true'} onChange={() => toggle('orders.bypass_kds_serve', bypassKds)} disabled={updateMut.isPending} />
          </OptionRow>
          <OptionRow
            label="Courses"
            description="Enable course-based ordering — assign items to courses (Starter, Main, Dessert, etc.) for sequenced firing"
          >
            <Toggle
              checked={settings?.['orders.courses_enabled']?.value === 'true'}
              onChange={() => toggle('orders.courses_enabled', settings?.['orders.courses_enabled']?.value ?? 'false')}
              disabled={updateMut.isPending}
            />
          </OptionRow>
          <CoursesSection settings={settings} updateMut={updateMut} />
          <QuickNotesSection settings={settings} updateMut={updateMut} />
        </>
      )}
    </SectionCard>
  )
}

// ─── Flag definitions ─────────────────────────────────────────────────────────

const FLAG_COLORS = [
  '#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6',
  '#8b5cf6', '#ec4899', '#06b6d4', '#6b7280', '#dc2626',
]
const RESTAURANT_EMOJIS = [
  '🧹', '⭐', '📝', '🛎️', '💎',
  '🤵🏻', '🔒', '🛒', '🗣️', '⛔',
  '🥳', '🎂', '🎉', '🍰', '🤩',
  '☕', '🥂', '🍾', '🍹', '💦',
  '🍖', '🥩', '🍽️', '🥓', '🍳',
  '♿', '👶', '🤬', '🐶', '🐱',
  '🚧', '🔥', '❄️', '⏳', '⚠️',
]

function EmojiPicker({ value, onChange }) {
  const [open, setOpen] = useState(false)
  return (
    <div style={{ position: 'relative' }}>
      <button type="button" onClick={() => setOpen(o => !o)} style={{
        width: 60, height: 36, borderRadius: 8, border: '1px solid #dfe2e6',
        background: 'white', fontSize: 20, textAlign: 'center', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{value || '＋'}</button>
      {open && (
        <div style={{
          position: 'absolute', top: '110%', left: 0, zIndex: 200,
          background: 'white', border: '1px solid #e2e8f0', borderRadius: 12,
          boxShadow: '0 8px 24px rgba(0,0,0,0.12)', padding: 8,
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 2, width: 180,
        }}>
          {RESTAURANT_EMOJIS.map(e => (
            <button key={e} type="button" onClick={() => { onChange(e); setOpen(false) }} style={{
              fontSize: 20, background: value === e ? '#eff3ff' : 'none',
              border: 'none', borderRadius: 6, padding: '4px 0', cursor: 'pointer',
            }}>{e}</button>
          ))}
          <button type="button" onClick={() => { onChange(''); setOpen(false) }} style={{
            fontSize: 11, color: '#9ca3af', background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0', borderRadius: 6,
          }}>✕ clear</button>
        </div>
      )}
    </div>
  )
}

function FlagDefsSection() {
  const qc = useQueryClient()
  const [editingId, setEditingId] = useState(null)
  const [editForm, setEditForm] = useState({})
  const [newForm, setNewForm] = useState({ name: '', emoji: '', color: '#6b7280', text_color: null })
  const [showNew, setShowNew] = useState(false)
  const { data: flags = [], isLoading } = useQuery({
    queryKey: ['flag-defs'],
    queryFn: () => client.get('/api/flags/defs?include_inactive=true').then(r => r.data),
    staleTime: 30_000,
  })
  const createMut = useMutation({
    mutationFn: (body) => client.post('/api/flags/defs', body),
    onSuccess: () => { toast.success('Δημιουργήθηκε'); qc.invalidateQueries({ queryKey: ['flag-defs'] }); setShowNew(false); setNewForm({ name: '', emoji: '', color: '#6b7280', text_color: null }) },
    onError: () => toast.error('Σφάλμα'),
  })
  const updateMut = useMutation({
    mutationFn: ({ id, ...body }) => client.put(`/api/flags/defs/${id}`, body),
    onSuccess: () => { toast.success('Αποθηκεύτηκε'); qc.invalidateQueries({ queryKey: ['flag-defs'] }); setEditingId(null) },
    onError: () => toast.error('Σφάλμα αποθήκευσης'),
  })
  const toggleMut = useMutation({
    mutationFn: (id) => client.patch(`/api/flags/defs/${id}/toggle-active`),
    onSuccess: (res) => { toast.success(res.data.is_active ? 'Ενεργοποιήθηκε' : 'Απενεργοποιήθηκε'); qc.invalidateQueries({ queryKey: ['flag-defs'] }) },
    onError: () => toast.error('Σφάλμα'),
  })
  const deleteMut = useMutation({
    mutationFn: (id) => client.delete(`/api/flags/defs/${id}`),
    onSuccess: () => { toast.success('Διαγράφηκε'); qc.invalidateQueries({ queryKey: ['flag-defs'] }) },
    onError: (err) => toast.error(err.response?.data?.detail || 'Σφάλμα'),
  })
  function startEdit(flag) {
    setEditingId(flag.id)
    setEditForm({ name: flag.name, emoji: flag.emoji || '', color: flag.color || '#6b7280', text_color: flag.text_color || null, sort_order: flag.sort_order })
  }
  const rowStyle = { display: 'flex', alignItems: 'center', gap: 10, padding: '10px 20px', borderBottom: '1px solid #f4f4f2' }
  const newRowButton = (
    <button onClick={() => setShowNew(v => !v)} style={{
      height: 32, padding: '0 14px', borderRadius: 8, border: '1px solid #dfe2e6', background: 'white', fontSize: 12, fontWeight: 600, cursor: 'pointer', color: '#374151',
    }}>+ Νέα</button>
  )
  return (
    <SectionCard title="Σημάνσεις Τραπεζιών" description="Χρησιμοποιούνται για να επισημαίνετε καταστάσεις στα τραπέζια" action={newRowButton}>
      {showNew && (
        <div style={{ padding: '14px 20px', background: '#f9fafb', display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'flex-end', borderTop: '1px solid #f4f4f2' }}>
          <EmojiPicker value={newForm.emoji} onChange={v => setNewForm(f => ({ ...f, emoji: v }))} />
          <input placeholder="Όνομα σημαίας" value={newForm.name} onChange={e => setNewForm(f => ({ ...f, name: e.target.value }))}
            style={{ flex: 1, minWidth: 160, height: 36, borderRadius: 8, border: '1px solid #dfe2e6', padding: '0 12px', fontSize: 13, fontFamily: 'inherit' }} />
          <div style={{ display: 'flex', gap: 4 }}>
            {FLAG_COLORS.map(c => (
              <button key={c} onClick={() => setNewForm(f => ({ ...f, color: c }))}
                style={{ width: 24, height: 24, borderRadius: '50%', background: c, border: newForm.color === c ? '3px solid #111' : '2px solid transparent', cursor: 'pointer' }} />
            ))}
          </div>
          <div style={{ display: 'flex', gap: 3, alignItems: 'center' }}>
            <span style={{ fontSize: 11, color: '#6b7280', fontWeight: 600 }}>Χρώμα γραφής:</span>
            {[{ val: null, label: 'Α', bg: newForm.color || '#6b7280', text: '#ffffff' }, { val: '#000000', label: 'Α', bg: newForm.color || '#6b7280', text: '#000000' }].map(opt => (
              <button key={opt.label + opt.text} onClick={() => setNewForm(f => ({ ...f, text_color: opt.val }))}
                style={{ width: 28, height: 28, borderRadius: 6, background: opt.bg, color: opt.text, fontSize: 14, fontWeight: 700, border: newForm.text_color === opt.val ? '3px solid #111' : '2px solid #dfe2e6', cursor: 'pointer' }}>{opt.label}</button>
            ))}
          </div>
          <button onClick={() => createMut.mutate(newForm)} disabled={!newForm.name.trim() || createMut.isPending}
            style={{ height: 36, padding: '0 16px', borderRadius: 8, background: '#3758c9', color: 'white', border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Αποθήκευση</button>
          <button onClick={() => setShowNew(false)} style={{ height: 36, padding: '0 14px', borderRadius: 8, border: '1px solid #dfe2e6', background: 'white', fontSize: 13, cursor: 'pointer' }}>Άκυρο</button>
        </div>
      )}
      {isLoading && <p style={{ padding: '16px 20px', color: '#9ca3af', fontSize: 13 }}>Φόρτωση…</p>}
      {!isLoading && flags.length === 0 && (
        <p style={{ padding: '24px 20px', textAlign: 'center', color: '#b8bdc4', fontSize: 13 }}>Δεν υπάρχουν σημαίες ακόμα.</p>
      )}
      {flags.map(flag => (
        <div key={flag.id} style={{ ...rowStyle, opacity: flag.is_active ? 1 : 0.45 }}>
          {editingId === flag.id ? (
            <div style={{ display: 'flex', flex: 1, flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
              <EmojiPicker value={editForm.emoji} onChange={v => setEditForm(f => ({ ...f, emoji: v }))} />
              <input value={editForm.name} onChange={e => setEditForm(f => ({ ...f, name: e.target.value }))}
                style={{ flex: 1, minWidth: 120, height: 32, borderRadius: 6, border: '1px solid #dfe2e6', padding: '0 10px', fontSize: 13, fontFamily: 'inherit' }} />
              <div style={{ display: 'flex', gap: 3 }}>
                {FLAG_COLORS.map(c => (
                  <button key={c} onClick={() => setEditForm(f => ({ ...f, color: c }))}
                    style={{ width: 20, height: 20, borderRadius: '50%', background: c, border: editForm.color === c ? '3px solid #111' : '2px solid transparent', cursor: 'pointer' }} />
                ))}
              </div>
              <div style={{ display: 'flex', gap: 3, alignItems: 'center' }}>
                {[{ val: null, text: '#ffffff' }, { val: '#000000', text: '#000000' }].map(opt => (
                  <button key={opt.text} onClick={() => setEditForm(f => ({ ...f, text_color: opt.val }))}
                    style={{ width: 24, height: 24, borderRadius: 6, background: editForm.color || '#6b7280', color: opt.text, fontSize: 13, fontWeight: 700, border: editForm.text_color === opt.val ? '3px solid #111' : '2px solid #dfe2e6', cursor: 'pointer' }}>Α</button>
                ))}
              </div>
              <button onClick={() => updateMut.mutate({ id: flag.id, ...editForm })} disabled={updateMut.isPending}
                style={{ height: 32, padding: '0 12px', borderRadius: 6, background: '#16a34a', color: 'white', border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>✓</button>
              <button onClick={() => setEditingId(null)}
                style={{ height: 32, padding: '0 10px', borderRadius: 6, border: '1px solid #dfe2e6', background: 'white', fontSize: 12, cursor: 'pointer' }}>✕</button>
            </div>
          ) : (
            <>
              <div style={{ width: 32, height: 32, borderRadius: '50%', background: flag.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, flexShrink: 0 }}>
                {flag.emoji || '🏷️'}
              </div>
              <span style={{ flex: 1, fontSize: 14, fontWeight: 500, color: '#111315' }}>{flag.name}</span>
              {!flag.is_active && <span style={{ fontSize: 11, color: '#9ca3af', fontStyle: 'italic' }}>Ανενεργή</span>}
              <button onClick={() => startEdit(flag)} style={{ height: 28, padding: '0 10px', borderRadius: 6, border: '1px solid #dfe2e6', background: 'white', fontSize: 12, cursor: 'pointer', color: '#374151' }}>Επεξεργασία</button>
              <button
                onClick={() => toggleMut.mutate(flag.id)}
                disabled={toggleMut.isPending}
                style={{ height: 28, padding: '0 10px', borderRadius: 6, border: '1px solid #fed7aa', background: '#fff7ed', fontSize: 12, cursor: 'pointer', color: '#c2410c' }}
              >{flag.is_active ? 'Απενεργοποίηση' : 'Ενεργοποίηση'}</button>
              <button
                onClick={() => {
                  if (window.confirm(`Να διαγραφεί οριστικά η σήμανση "${flag.name}";`)) deleteMut.mutate(flag.id)
                }}
                disabled={deleteMut.isPending}
                style={{ height: 28, padding: '0 10px', borderRadius: 6, border: '1px solid #fee2e2', background: '#fff5f5', fontSize: 12, cursor: 'pointer', color: '#dc2626' }}
              >Διαγραφή</button>
            </>
          )}
        </div>
      ))}
    </SectionCard>
  )
}

// ─── Quick message templates ──────────────────────────────────────────────────

function QuickTemplatesSection() {
  const qc = useQueryClient()
  const [editingId, setEditingId] = useState(null)
  const [editBody, setEditBody] = useState('')
  const [newBody, setNewBody] = useState('')
  const [showNew, setShowNew] = useState(false)
  const { data: templates = [], isLoading } = useQuery({
    queryKey: ['quick-templates'],
    queryFn: () => client.get('/api/notifications/templates').then(r => r.data),
    staleTime: 30_000,
  })
  const createMut = useMutation({
    mutationFn: (body) => client.post('/api/notifications/templates', body),
    onSuccess: () => { toast.success('Δημιουργήθηκε'); qc.invalidateQueries({ queryKey: ['quick-templates'] }); setShowNew(false); setNewBody('') },
    onError: () => toast.error('Σφάλμα'),
  })
  const updateMut = useMutation({
    mutationFn: ({ id, body }) => client.put(`/api/notifications/templates/${id}`, { body }),
    onSuccess: () => { toast.success('Αποθηκεύτηκε'); qc.invalidateQueries({ queryKey: ['quick-templates'] }); setEditingId(null) },
    onError: () => toast.error('Σφάλμα αποθήκευσης'),
  })
  const deleteMut = useMutation({
    mutationFn: (id) => client.delete(`/api/notifications/templates/${id}`),
    onSuccess: () => { toast.success('Διαγράφηκε'); qc.invalidateQueries({ queryKey: ['quick-templates'] }) },
    onError: () => toast.error('Σφάλμα'),
  })
  const newButton = (
    <button onClick={() => setShowNew(v => !v)} style={{
      height: 32, padding: '0 14px', borderRadius: 8, border: '1px solid #dfe2e6', background: 'white', fontSize: 12, fontWeight: 600, cursor: 'pointer', color: '#374151',
    }}>+ Νέο</button>
  )
  return (
    <SectionCard title="Γρήγορα Μηνύματα" description="Πρότυπα μηνυμάτων για γρήγορη αποστολή στο προσωπικό" action={newButton}>
      {showNew && (
        <div style={{ padding: '14px 20px', background: '#f9fafb', display: 'flex', gap: 10, alignItems: 'center', borderTop: '1px solid #f4f4f2' }}>
          <input placeholder="Κείμενο μηνύματος…" value={newBody} onChange={e => setNewBody(e.target.value)}
            style={{ flex: 1, height: 36, borderRadius: 8, border: '1px solid #dfe2e6', padding: '0 12px', fontSize: 13, fontFamily: 'inherit' }} />
          <button onClick={() => createMut.mutate({ body: newBody, sort_order: templates.length + 1 })}
            disabled={!newBody.trim() || createMut.isPending}
            style={{ height: 36, padding: '0 16px', borderRadius: 8, background: '#3758c9', color: 'white', border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Αποθήκευση</button>
          <button onClick={() => setShowNew(false)} style={{ height: 36, padding: '0 14px', borderRadius: 8, border: '1px solid #dfe2e6', background: 'white', fontSize: 13, cursor: 'pointer' }}>Άκυρο</button>
        </div>
      )}
      {isLoading && <p style={{ padding: '16px 20px', color: '#9ca3af', fontSize: 13 }}>Φόρτωση…</p>}
      {!isLoading && templates.length === 0 && (
        <p style={{ padding: '24px 20px', textAlign: 'center', color: '#b8bdc4', fontSize: 13 }}>Δεν υπάρχουν πρότυπα ακόμα.</p>
      )}
      {templates.map((t, idx) => (
        <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 20px', borderBottom: '1px solid #f4f4f2' }}>
          <span style={{ width: 22, fontSize: 12, color: '#9ca3af', fontWeight: 600, flexShrink: 0 }}>{idx + 1}.</span>
          {editingId === t.id ? (
            <>
              <input value={editBody} onChange={e => setEditBody(e.target.value)}
                style={{ flex: 1, height: 32, borderRadius: 6, border: '1px solid #dfe2e6', padding: '0 10px', fontSize: 13, fontFamily: 'inherit' }} />
              <button onClick={() => updateMut.mutate({ id: t.id, body: editBody })} disabled={updateMut.isPending}
                style={{ height: 32, padding: '0 12px', borderRadius: 6, background: '#16a34a', color: 'white', border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>✓</button>
              <button onClick={() => setEditingId(null)}
                style={{ height: 32, padding: '0 10px', borderRadius: 6, border: '1px solid #dfe2e6', background: 'white', fontSize: 12, cursor: 'pointer' }}>✕</button>
            </>
          ) : (
            <>
              <span style={{ flex: 1, fontSize: 14, color: '#111315' }}>{t.body}</span>
              <button onClick={() => { setEditingId(t.id); setEditBody(t.body) }}
                style={{ height: 28, padding: '0 10px', borderRadius: 6, border: '1px solid #dfe2e6', background: 'white', fontSize: 12, cursor: 'pointer', color: '#374151' }}>Επεξεργασία</button>
              <button onClick={() => deleteMut.mutate(t.id)}
                style={{ height: 28, padding: '0 10px', borderRadius: 6, border: '1px solid #fee2e2', background: '#fff5f5', fontSize: 12, cursor: 'pointer', color: '#dc2626' }}>Διαγραφή</button>
            </>
          )}
        </div>
      ))}
    </SectionCard>
  )
}

// ─── Auto schedule settings ───────────────────────────────────────────────────

const SCHED_STORAGE_KEY = 'xenia_schedule_settings_v1'
const SCHED_DEFAULTS = {
  autoStartWorkday: false,
  autoCloseWorkday: false,
  autoCloseShiftsOnWorkday: false,
  autoStartStaffShift: false,
  autoCloseStaffShift: false,
}

function loadSchedSettings() {
  try { return { ...SCHED_DEFAULTS, ...JSON.parse(localStorage.getItem(SCHED_STORAGE_KEY) || '{}') } }
  catch { return { ...SCHED_DEFAULTS } }
}

function AutoScheduleSection() {
  const [s, setS] = useState(loadSchedSettings)

  function toggle(key) {
    setS(prev => {
      const next = { ...prev, [key]: !prev[key] }
      const stored = JSON.parse(localStorage.getItem(SCHED_STORAGE_KEY) || '{}')
      localStorage.setItem(SCHED_STORAGE_KEY, JSON.stringify({ ...stored, ...next }))
      return next
    })
  }

  return (
    <SectionCard title="Αυτόματο Πρόγραμμα Καταστήματος" description="Ρυθμίσεις αυτόματης έναρξης/κλεισίματος εργάσιμης και βαρδιών">
      <OptionRow label="Αυτόματη Έναρξη Εργάσιμης" description="Η εργάσιμη ξεκινά αυτόματα σύμφωνα με το πρόγραμμα">
        <Toggle checked={s.autoStartWorkday} onChange={() => toggle('autoStartWorkday')} />
      </OptionRow>
      <OptionRow label="Αυτόματο Κλείσιμο Εργάσιμης" description="Η εργάσιμη κλείνει αυτόματα σύμφωνα με το πρόγραμμα">
        <Toggle checked={s.autoCloseWorkday} onChange={() => toggle('autoCloseWorkday')} />
      </OptionRow>
      {s.autoCloseWorkday && (
        <div className="pl-8">
          <OptionRow label="Κλείσιμο βαρδιών προσωπικού" description="Κλείνουν αυτόματα αν δεν υπάρχουν ανοιχτές παραγγελίες">
            <Toggle checked={s.autoCloseShiftsOnWorkday} onChange={() => toggle('autoCloseShiftsOnWorkday')} />
          </OptionRow>
        </div>
      )}
      <OptionRow label="Αυτόματη Έναρξη Βάρδιας Προσωπικού" description="Οι βάρδιες ξεκινούν αυτόματα σύμφωνα με το πρόγραμμα">
        <Toggle checked={s.autoStartStaffShift} onChange={() => toggle('autoStartStaffShift')} />
      </OptionRow>
      <OptionRow label="Αυτόματο Κλείσιμο Βάρδιας Προσωπικού" description="Οι βάρδιες κλείνουν αυτόματα σύμφωνα με το πρόγραμμα">
        <Toggle checked={s.autoCloseStaffShift} onChange={() => toggle('autoCloseStaffShift')} />
      </OptionRow>
    </SectionCard>
  )
}

export default function OperationTab() {
  return (
    <div className="space-y-6">
      <ShiftSettingsSection />
      <PaymentSettingsSection />
      <TableOrderSettingsSection />
      <AutoScheduleSection />
      <FlagDefsSection />
      <QuickTemplatesSection />
    </div>
  )
}
