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

function Toggle({ checked, onChange, disabled }) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      onClick={() => !disabled && onChange(!checked)}
      style={{
        width: 44, height: 24, borderRadius: 999, border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
        background: checked ? '#16a34a' : '#d1d5db',
        position: 'relative', transition: 'background 150ms', flexShrink: 0, opacity: disabled ? 0.5 : 1,
      }}
    >
      <span style={{
        position: 'absolute', top: 3, left: checked ? 23 : 3,
        width: 18, height: 18, borderRadius: '50%', background: 'white',
        transition: 'left 150ms', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
      }} />
    </button>
  )
}

const COMMON_TIMEZONES = [
  'Europe/Athens', 'Europe/London', 'Europe/Berlin', 'Europe/Paris', 'Europe/Rome',
  'Europe/Madrid', 'Europe/Amsterdam', 'Europe/Brussels', 'Europe/Bucharest',
  'Europe/Helsinki', 'Europe/Istanbul', 'America/New_York', 'America/Chicago',
  'America/Denver', 'America/Los_Angeles', 'UTC',
]

function TimezoneSection() {
  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('Σφάλμα αποθήκευσης'),
  })
  const currentTz = settings?.['system.timezone']?.value ?? 'Europe/Athens'
  const browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone
  return (
    <div className="card divide-y divide-gray-100">
      <div className="px-5 py-4">
        <h2 className="font-semibold text-gray-700">Ζώνη Ώρας</h2>
        <p className="text-xs text-gray-400 mt-0.5">
          Η ζώνη ώρας που χρησιμοποιεί το backend για χρονοσφραγίδες. Αν οι ώρες έναρξης βάρδιας εμφανίζονται λανθασμένες, ρυθμίστε αυτό να ταιριάζει με την τοπική σας ζώνη.
        </p>
      </div>
      {isLoading && <p className="px-5 py-4 text-sm text-gray-400">Φόρτωση…</p>}
      {!isLoading && (
        <div className="px-5 py-4 space-y-3">
          <div className="flex items-center gap-3">
            <select
              value={currentTz}
              onChange={e => updateMut.mutate({ key: 'system.timezone', value: e.target.value })}
              disabled={updateMut.isPending}
              className="h-10 rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-800 focus:outline-none flex-1 max-w-xs"
            >
              {COMMON_TIMEZONES.map(tz => <option key={tz} value={tz}>{tz}</option>)}
            </select>
            {updateMut.isPending && <span className="text-xs text-gray-400">Αποθήκευση…</span>}
          </div>
          <p className="text-xs text-gray-400">
            Ζώνη ώρας browser: <span className="font-medium text-gray-600">{browserTz}</span>
            {browserTz !== currentTz && (
              <span className="ml-2 text-amber-600 font-medium">⚠ Διαφέρει από τη ρύθμιση backend</span>
            )}
          </p>
          <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
            Η αλλαγή ζώνης ώρας αποθηκεύεται και εφαρμόζεται στο frontend αμέσως. Για πλήρη εφαρμογή στον backend server (χρονοσφραγίδες), απαιτείται επανεκκίνηση του container.
          </p>
        </div>
      )}
    </div>
  )
}

const LOCK_TIMEOUT_OPTIONS = [
  { label: 'Απενεργοποιημένο', value: 0 },
  { label: '1 λεπτό', value: 1 },
  { label: '5 λεπτά', value: 5 },
  { label: '10 λεπτά', value: 10 },
  { label: '15 λεπτά', value: 15 },
  { label: '30 λεπτά', value: 30 },
  { label: '60 λεπτά', value: 60 },
]

const LOCK_SETTINGS_KEY = 'manager_lock_timeout'

function AutoLockSection() {
  const raw = parseInt(localStorage.getItem(LOCK_SETTINGS_KEY) || '0', 10)
  const [timeout, setTimeout_] = useState(isNaN(raw) ? 0 : raw)

  function handleChange(val) {
    const n = parseInt(val, 10)
    setTimeout_(n)
    if (n > 0) {
      localStorage.setItem(LOCK_SETTINGS_KEY, String(n))
    } else {
      localStorage.removeItem(LOCK_SETTINGS_KEY)
    }
  }

  return (
    <div className="card divide-y divide-gray-100">
      <div className="px-5 py-4">
        <h2 className="font-semibold text-gray-700">Αυτόματο Κλείδωμα Διαχειριστή</h2>
        <p className="text-xs text-gray-400 mt-0.5">
          Αν δεν υπάρξει δραστηριότητα για το παρακάτω διάστημα, η οθόνη κλειδώνει και ζητάει PIN.
          Το 0 απενεργοποιεί το αυτόματο κλείδωμα.
        </p>
      </div>
      <div className="px-5 py-4 flex items-center gap-4">
        <select
          value={timeout}
          onChange={e => handleChange(e.target.value)}
          className="h-10 rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-800 focus:outline-none w-52"
        >
          {LOCK_TIMEOUT_OPTIONS.map(o => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </select>
        {timeout > 0 && (
          <span className="text-xs text-green-700 font-medium bg-green-50 border border-green-200 rounded-lg px-3 py-1.5">
            Κλείδωμα μετά από {timeout} {timeout === 1 ? 'λεπτό' : 'λεπτά'} αδράνειας
          </span>
        )}
        {timeout === 0 && (
          <span className="text-xs text-gray-500">Μόνο χειροκίνητο κλείδωμα (κουμπί 🔒)</span>
        )}
      </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'
  return (
    <div className="card divide-y divide-gray-100">
      <div className="px-5 py-4">
        <h2 className="font-semibold text-gray-700">Ρυθμίσεις Βάρδιας</h2>
        <p className="text-xs text-gray-400 mt-0.5">Έλεγχος του τι επιτρέπεται να κάνουν οι σερβιτόροι μόνοι τους</p>
      </div>
      {isLoading && <p className="px-5 py-4 text-sm text-gray-400">Φόρτωση…</p>}
      {!isLoading && (
        <>
          <div className="flex items-center justify-between px-5 py-4">
            <div>
              <p className="text-sm font-medium text-gray-800">Αυτόματη Έναρξη Βάρδιας</p>
              <p className="text-xs text-gray-500 mt-0.5">Οι σερβιτόροι μπορούν να ξεκινούν μόνοι τους τη βάρδια τους</p>
            </div>
            <Toggle checked={selfStart === 'true'} onChange={() => toggle('shifts.waiter_self_start', selfStart)} disabled={updateMut.isPending} />
          </div>
          <div className="flex items-center justify-between px-5 py-4">
            <div>
              <p className="text-sm font-medium text-gray-800">Αυτόματο Κλείσιμο Βάρδιας</p>
              <p className="text-xs text-gray-500 mt-0.5">Οι σερβιτόροι μπορούν να κλείνουν μόνοι τους τη βάρδια τους</p>
            </div>
            <Toggle checked={selfEnd === 'true'} onChange={() => toggle('shifts.waiter_self_end', selfEnd)} disabled={updateMut.isPending} />
          </div>
        </>
      )}
    </div>
  )
}

// ─── 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 FlagDisplayModeSection() {
  const qc = useQueryClient()
  const { data: settings } = 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('Σφάλμα αποθήκευσης'),
  })
  const current = settings?.['flags.display_mode']?.value ?? 'both'
  const options = [
    { value: 'icon', label: '😀 Μόνο εικονίδιο' },
    { value: 'text', label: 'Aa Μόνο κείμενο' },
    { value: 'both', label: '😀 Aa Και τα δύο' },
  ]
  return (
    <div style={{ padding: '14px 20px', borderTop: '1px solid #f4f4f2' }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: '#5a6169', marginBottom: 8, textTransform: 'uppercase', letterSpacing: 0.5 }}>
        Εμφάνιση σημαιών στις κάρτες τραπεζιών
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        {options.map(o => (
          <button key={o.value} onClick={() => updateMut.mutate({ key: 'flags.display_mode', value: o.value })} style={{
            height: 32, padding: '0 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer',
            border: `1.5px solid ${current === o.value ? '#3758c9' : '#dfe2e6'}`,
            background: current === o.value ? '#eff3ff' : 'white',
            color: current === o.value ? '#3758c9' : '#374151',
          }}>{o.label}</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 deleteMut = useMutation({
    mutationFn: (id) => client.delete(`/api/flags/defs/${id}`),
    onSuccess: () => { toast.success('Απενεργοποιήθηκε'); qc.invalidateQueries({ queryKey: ['flag-defs'] }) },
    onError: () => toast.error('Σφάλμα'),
  })
  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' }
  return (
    <div className="card divide-y divide-gray-100">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px' }}>
        <div>
          <h2 className="font-semibold text-gray-700">Σημαίες Τραπεζιών</h2>
          <p className="text-xs text-gray-400 mt-0.5">Χρησιμοποιούνται για να επισημαίνετε καταστάσεις στα τραπέζια</p>
        </div>
        <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>
      </div>
      <FlagDisplayModeSection />
      {showNew && (
        <div style={{ padding: '14px 20px', background: '#f9fafb', display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'flex-end' }}>
          <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>
              {flag.is_active && (
                <button onClick={() => deleteMut.mutate(flag.id)} style={{ height: 28, padding: '0 10px', borderRadius: 6, border: '1px solid #fee2e2', background: '#fff5f5', fontSize: 12, cursor: 'pointer', color: '#dc2626' }}>Διαγραφή</button>
              )}
            </>
          )}
        </div>
      ))}
    </div>
  )
}

// ─── 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/messages/templates').then(r => r.data),
    staleTime: 30_000,
  })
  const createMut = useMutation({
    mutationFn: (body) => client.post('/api/messages/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/messages/templates/${id}`, { body }),
    onSuccess: () => { toast.success('Αποθηκεύτηκε'); qc.invalidateQueries({ queryKey: ['quick-templates'] }); setEditingId(null) },
    onError: () => toast.error('Σφάλμα αποθήκευσης'),
  })
  const deleteMut = useMutation({
    mutationFn: (id) => client.delete(`/api/messages/templates/${id}`),
    onSuccess: () => { toast.success('Διαγράφηκε'); qc.invalidateQueries({ queryKey: ['quick-templates'] }) },
    onError: () => toast.error('Σφάλμα'),
  })
  return (
    <div className="card divide-y divide-gray-100">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px' }}>
        <div>
          <h2 className="font-semibold text-gray-700">Γρήγορα Μηνύματα</h2>
          <p className="text-xs text-gray-400 mt-0.5">Πρότυπα μηνυμάτων για γρήγορη αποστολή στο προσωπικό</p>
        </div>
        <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>
      </div>
      {showNew && (
        <div style={{ padding: '14px 20px', background: '#f9fafb', display: 'flex', gap: 10, alignItems: 'center' }}>
          <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>
      ))}
    </div>
  )
}

function formatUptime(seconds) {
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = seconds % 60
  return `${h}ω ${m}λ ${s}δ`
}

export default function AppInfoTab() {
  const user = useAuthStore(s => s.user)
  const qc = useQueryClient()
  const { data: status, isLoading } = useQuery({
    queryKey: ['system-status'],
    queryFn: () => client.get('/api/system/status').then(r => r.data),
    refetchInterval: 30_000,
  })
  const testPrint = useMutation({
    mutationFn: (id) => client.post(`/api/system/printers/test?printer_id=${id}`),
    onSuccess: (res) => {
      const d = res.data
      d.success ? toast.success('Test print στάλθηκε!') : toast.error(`Σφάλμα: ${d.error}`)
    },
    onError: () => toast.error('Σφάλμα επικοινωνίας'),
  })
  if (isLoading) return <div className="flex items-center justify-center h-64 text-gray-400">Φόρτωση…</div>
  return (
    <div className="space-y-6">
      {/* System info */}
      <div className="card p-5 space-y-3">
        <h2 className="font-semibold text-gray-700">Σύστημα</h2>
        <div className="grid grid-cols-2 gap-3 text-sm">
          <div className="text-gray-500">Uptime</div>
          <div className="font-medium text-gray-800">{formatUptime(status?.uptime_seconds ?? 0)}</div>
          <div className="text-gray-500">Άδεια χρήσης</div>
          <div className={`font-medium ${status?.licensed ? 'text-green-700' : 'text-red-600'}`}>
            {status?.licensed ? 'Ενεργή' : 'Ανενεργή'}
          </div>
          <div className="text-gray-500">Κατάσταση</div>
          <div className={`font-medium ${status?.locked ? 'text-red-600' : 'text-green-700'}`}>
            {status?.locked ? 'Κλειδωμένο' : 'Λειτουργικό'}
          </div>
          {status?.expires_at && (
            <>
              <div className="text-gray-500">Λήξη άδειας</div>
              <div className="font-medium text-gray-800">{new Date(status.expires_at).toLocaleDateString('el-GR')}</div>
            </>
          )}
        </div>
      </div>

      {/* Printers */}
      <div className="card divide-y divide-gray-100">
        <div className="px-5 py-4">
          <h2 className="font-semibold text-gray-700">Εκτυπωτές</h2>
        </div>
        {(!status?.printers || status.printers.length === 0) && (
          <p className="px-5 py-6 text-center text-gray-400 text-sm">Δεν βρέθηκαν εκτυπωτές.</p>
        )}
        {status?.printers?.map(p => (
          <div key={p.id} className="flex items-center gap-4 px-5 py-3">
            <div className="flex-1">
              <p className="font-medium text-gray-800">{p.name}</p>
            </div>
            <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${p.reachable ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'}`}>
              {p.reachable ? 'Προσβάσιμος' : 'Μη προσβάσιμος'}
            </span>
            <button onClick={() => testPrint.mutate(p.id)} disabled={testPrint.isPending} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-9">
              Test Print
            </button>
          </div>
        ))}
      </div>

      <ShiftSettingsSection />
      <AutoLockSection />
      <TimezoneSection />
      <FlagDefsSection />
      <QuickTemplatesSection />

      {user?.role === 'sysadmin' && (
        <div className="card p-5 space-y-3 border-amber-200 bg-amber-50">
          <h2 className="font-semibold text-amber-800">Sysadmin</h2>
          <p className="text-sm text-amber-700">Έλεγχος κλειδώματος συστήματος.</p>
          <div className="flex gap-3">
            <button onClick={() => client.post('/api/system/unlock').then(() => { toast.success('Ξεκλειδώθηκε'); qc.invalidateQueries({ queryKey: ['system-status'] }) })}
              className="btn btn-primary text-sm">Ξεκλείδωμα</button>
            <button onClick={() => client.post('/api/system/lock').then(() => { toast.success('Κλειδώθηκε'); qc.invalidateQueries({ queryKey: ['system-status'] }) })}
              className="btn btn-danger text-sm">Κλείδωμα</button>
          </div>
        </div>
      )}
    </div>
  )
}