import { useState, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import useTableViewStore from '../store/tableViewStore'
import useThemeStore from '../store/themeStore'
import useNotificationSettingsStore from '../store/notificationSettingsStore'
import useOrderingSettingsStore from '../store/orderingSettingsStore'
import usePaymentSettingsStore from '../store/paymentSettingsStore'
import useWaiterFavoritesStore from '../store/waiterFavoritesStore'

const CHIP_STYLE_OPTIONS = [
  { key: 'full',       label: 'Πλήρες κείμενο',       example: 'Εκκρεμούν' },
  { key: 'short',      label: 'Σύντομο κείμενο',       example: 'PND' },
  { key: 'icon_full',  label: 'Εικονίδιο + πλήρες',   example: '⏳ Εκκρεμούν' },
  { key: 'icon_short', label: 'Εικονίδιο + σύντομο',  example: '⏳ PND' },
  { key: 'icon',       label: 'Μόνο εικονίδιο',        example: '⏳' },
]

// ─── Tab definitions (stub future tabs here) ──────────────────────────────────

const TABS = [
  { key: 'layout', label: 'Εμφάνιση' },
  { key: 'leitourgia', label: 'Λειτουργία' },
  { key: 'ploigisi', label: 'Πλοήγηση' },
  { key: 'personalize', label: 'Αγαπημένα' },
]

// ─── Density option data ──────────────────────────────────────────────────────

const DENSITY_OPTIONS = [
  {
    key: '1x1',
    label: '1×1',
    desc: '4 ανά σειρά — μόνο όνομα',
    preview: <Grid4 />,
  },
  {
    key: '2x1',
    label: '2×1',
    desc: '2 ανά σειρά — όνομα + κατάσταση',
    preview: <Grid2H />,
  },
  {
    key: '2x2',
    label: '2×2',
    desc: '2 ανά σειρά — συμπαγής κάρτα',
    preview: <Grid2 />,
  },
  {
    key: '4x1',
    label: '4×1',
    desc: '1 ανά σειρά — οριζόντια λίστα',
    preview: <Grid1H />,
  },
  {
    key: '4x2',
    label: '4×2',
    desc: '1 ανά σειρά — πλήρης κάρτα',
    preview: <Grid1 />,
  },
  {
    key: '4x3',
    label: '4×3',
    desc: '1 ανά σειρά — κάρτα με λίστα παραγγελίας',
    preview: <Grid1Detail />,
  },
]

// ─── Mini grid preview SVGs ───────────────────────────────────────────────────

function Grid4() {
  return (
    <svg viewBox="0 0 56 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
      {[0,1,2,3].map(i => (
        <rect key={i} x={2 + i * 13} y="4" width="11" height="13" rx="2" fill="currentColor" opacity="0.9"/>
      ))}
      {[0,1,2,3].map(i => (
        <rect key={i+4} x={2 + i * 13} y="20" width="11" height="13" rx="2" fill="currentColor" opacity="0.55"/>
      ))}
      {[0,1,2,3].map(i => (
        <rect key={i+8} x={2 + i * 13} y="36" width="11" height="13" rx="2" fill="currentColor" opacity="0.25"/>
      ))}
    </svg>
  )
}

function Grid2H() {
  return (
    <svg viewBox="0 0 56 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
      {[0,1].map(i => (
        <rect key={i} x={2 + i * 27} y="4" width="25" height="11" rx="2" fill="currentColor" opacity="0.9"/>
      ))}
      {[0,1].map(i => (
        <rect key={i+2} x={2 + i * 27} y="19" width="25" height="11" rx="2" fill="currentColor" opacity="0.55"/>
      ))}
      {[0,1].map(i => (
        <rect key={i+4} x={2 + i * 27} y="34" width="25" height="11" rx="2" fill="currentColor" opacity="0.25"/>
      ))}
    </svg>
  )
}

function Grid2() {
  return (
    <svg viewBox="0 0 56 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
      <rect x="2"  y="4" width="24" height="18" rx="2" fill="currentColor" opacity="0.9"/>
      <rect x="30" y="4" width="24" height="18" rx="2" fill="currentColor" opacity="0.9"/>
      <rect x="2"  y="26" width="24" height="18" rx="2" fill="currentColor" opacity="0.45"/>
      <rect x="30" y="26" width="24" height="18" rx="2" fill="currentColor" opacity="0.45"/>
    </svg>
  )
}

function Grid1H() {
  return (
    <svg viewBox="0 0 56 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
      <rect x="2" y="4"  width="52" height="11" rx="2" fill="currentColor" opacity="0.9"/>
      <rect x="2" y="19" width="52" height="11" rx="2" fill="currentColor" opacity="0.55"/>
      <rect x="2" y="34" width="52" height="11" rx="2" fill="currentColor" opacity="0.25"/>
    </svg>
  )
}

function Grid1() {
  return (
    <svg viewBox="0 0 56 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
      <rect x="2" y="4"  width="52" height="18" rx="2" fill="currentColor" opacity="0.9"/>
      <rect x="2" y="27" width="52" height="18" rx="2" fill="currentColor" opacity="0.45"/>
    </svg>
  )
}

function Grid1Detail() {
  return (
    <svg viewBox="0 0 56 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
      <rect x="2" y="4" width="52" height="20" rx="2" fill="currentColor" opacity="0.9"/>
      {/* left section lines */}
      <rect x="5" y="8"  width="14" height="3" rx="1" fill="white" opacity="0.6"/>
      <rect x="5" y="13" width="9"  height="2" rx="1" fill="white" opacity="0.4"/>
      <rect x="5" y="18" width="11" height="2" rx="1" fill="white" opacity="0.4"/>
      {/* vertical divider */}
      <rect x="22" y="7" width="1" height="14" rx="0.5" fill="white" opacity="0.3"/>
      {/* right section lines */}
      <rect x="25" y="8"  width="24" height="2" rx="1" fill="white" opacity="0.5"/>
      <rect x="25" y="12" width="20" height="2" rx="1" fill="white" opacity="0.35"/>
      <rect x="25" y="16" width="22" height="2" rx="1" fill="white" opacity="0.25"/>
      <rect x="2" y="29" width="52" height="15" rx="2" fill="currentColor" opacity="0.45"/>
    </svg>
  )
}

// ─── Layout tab ───────────────────────────────────────────────────────────────

const ORDER_ITEM_LAYOUT_OPTIONS = [
  {
    key: 'compact',
    label: 'Compact',
    desc: 'Μία γραμμή — συμπαγής εμφάνιση, λιγότερο ύψος',
  },
  {
    key: 'expanded',
    label: 'Expanded',
    desc: 'Δύο γραμμές — όνομα + KDS πάνω, τιμολόγηση κάτω',
  },
  {
    key: 'fully_detailed',
    label: 'Fully Detailed',
    desc: 'Πλήρης ανάλυση — όνομα, τιμές, σερβιτόρος, ώρα, options',
  },
]

function LayoutTab() {
  const { density, setDensity, chipStyle, setChipStyle, kdsDisplayStyle, setKdsDisplayStyle, orderItemLayout, setOrderItemLayout, mergePersist, setMergePersist } = useTableViewStore()
  const { dark, toggle } = useThemeStore()

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, padding: '24px 16px' }}>

      {/* Chip style */}
      <section>
        <h2 style={sectionTitle}>Εμφάνιση chips παραγγελιών</h2>
        <p style={sectionSub}>Πώς εμφανίζονται τα φίλτρα στη σελίδα Παραγγελίες.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
          {CHIP_STYLE_OPTIONS.map(opt => {
            const active = (chipStyle || 'icon_short') === opt.key
            return (
              <button
                key={opt.key}
                onClick={() => setChipStyle(opt.key)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '12px 16px', borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)18' : 'var(--bg2)',
                  cursor: 'pointer', textAlign: 'left',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: active ? 'var(--accent)' : 'var(--text)', marginBottom: 2 }}>
                    {opt.label}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{opt.example}</div>
                </div>
                {active && (
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, color: 'var(--accent)' }}>
                    <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M6.5 10l2.5 2.5 4.5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
            )
          })}
        </div>
      </section>

      {/* Card density */}
      <section>
        <h2 style={sectionTitle}>Κάρτες τραπεζιών</h2>
        <p style={sectionSub}>Επίλεξε πόσα στοιχεία εμφανίζονται σε κάθε κάρτα.</p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14 }}>
          {DENSITY_OPTIONS.map(opt => {
            const active = density === opt.key
            return (
              <button
                key={opt.key}
                onClick={() => setDensity(opt.key)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 16,
                  padding: '14px 16px',
                  borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)' + '18' : 'var(--bg2)',
                  cursor: 'pointer',
                  textAlign: 'left',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                {/* Mini preview */}
                <div style={{
                  width: 56, height: 48, flexShrink: 0,
                  color: active ? 'var(--accent)' : 'var(--muted)',
                  transition: 'color 0.12s',
                }}>
                  {opt.preview}
                </div>

                {/* Text */}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 15, fontWeight: 700,
                    color: active ? 'var(--accent)' : 'var(--text)',
                    marginBottom: 2,
                  }}>
                    {opt.label}
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.4 }}>
                    {opt.desc}
                  </div>
                </div>

                {/* Check */}
                {active && (
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, color: 'var(--accent)' }}>
                    <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M6.5 10l2.5 2.5 4.5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
            )
          })}
        </div>
      </section>

      {/* KDS status display */}
      <section>
        <h2 style={sectionTitle}>Εμφάνιση Κατάστασης KDS</h2>
        <p style={sectionSub}>Πώς εμφανίζεται η κατάσταση KDS σε κάθε αντικείμενο παραγγελίας.</p>
        <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
          {[
            { key: 'badge', label: 'Badge', desc: 'Κείμενο σε chip (ΕΚΚΡΕΜΕΙ, READY…)' },
            { key: 'icon',  label: 'Εικονίδιο', desc: 'Μικρό χρωματιστό εικονίδιο — λιγότερος χώρος' },
          ].map(opt => {
            const active = (kdsDisplayStyle || 'badge') === opt.key
            return (
              <button
                key={opt.key}
                onClick={() => setKdsDisplayStyle(opt.key)}
                style={{
                  flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6,
                  padding: '14px 12px', borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)18' : 'var(--bg2)',
                  cursor: 'pointer', textAlign: 'left',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                <span style={{ fontSize: 13, fontWeight: 800, color: active ? 'var(--accent)' : 'var(--text)' }}>{opt.label}</span>
                <span style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.4 }}>{opt.desc}</span>
              </button>
            )
          })}
        </div>
      </section>

      {/* Order item layout */}
      <section>
        <h2 style={sectionTitle}>Layout Αντικειμένων Παραγγελίας</h2>
        <p style={sectionSub}>Πώς εμφανίζεται κάθε αντικείμενο στη λίστα παραγγελίας ενός τραπεζιού.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
          {ORDER_ITEM_LAYOUT_OPTIONS.map(opt => {
            const active = (orderItemLayout || 'compact') === opt.key
            return (
              <button
                key={opt.key}
                onClick={() => setOrderItemLayout(opt.key)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '12px 16px', borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)18' : 'var(--bg2)',
                  cursor: 'pointer', textAlign: 'left',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: active ? 'var(--accent)' : 'var(--text)', marginBottom: 2 }}>
                    {opt.label}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.4 }}>{opt.desc}</div>
                </div>
                {active && (
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, color: 'var(--accent)' }}>
                    <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M6.5 10l2.5 2.5 4.5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
            )
          })}
        </div>
      </section>

      {/* Merge view persistence */}
      <section>
        <h2 style={sectionTitle}>Διατήρηση Προβολής Συγχώνευσης</h2>
        <p style={sectionSub}>Πόσο διατηρείται η επιλεγμένη προβολή συγχώνευσης αντικειμένων.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
          {[
            { key: 'off',       label: 'OFF',                       desc: 'Επαναφορά στην αρχική κατά την πλοήγηση' },
            { key: 'per_order', label: 'ΔΙΑΤΗΡΗΣΗ ΑΝΑ ΠΑΡΑΓΓΕΛΙΑ', desc: 'Διατηρείται μέχρι το κλείσιμο της παραγγελίας' },
            { key: 'global',    label: 'ΔΙΑΤΗΡΗΣΗ ΠΑΝΤΑ',           desc: 'Ίδια ρύθμιση για όλα τα τραπέζια, πάντα' },
          ].map(opt => {
            const active = (mergePersist || 'off') === opt.key
            return (
              <button
                key={opt.key}
                onClick={() => setMergePersist(opt.key)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '12px 16px', borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)18' : 'var(--bg2)',
                  cursor: 'pointer', textAlign: 'left',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: active ? 'var(--accent)' : 'var(--text)', marginBottom: 2 }}>{opt.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{opt.desc}</div>
                </div>
                {active && (
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, color: 'var(--accent)' }}>
                    <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M6.5 10l2.5 2.5 4.5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
            )
          })}
        </div>
      </section>

      {/* Theme */}
      <section>
        <h2 style={sectionTitle}>Θέμα</h2>

        <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
          {[
            { key: false, icon: '☀️', label: 'Φωτεινό' },
            { key: true,  icon: '🌙', label: 'Σκοτεινό' },
          ].map(opt => {
            const active = dark === opt.key
            return (
              <button
                key={String(opt.key)}
                onClick={() => { if (!active) toggle() }}
                style={{
                  flex: 1,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
                  padding: '18px 12px',
                  borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)' + '18' : 'var(--bg2)',
                  cursor: active ? 'default' : 'pointer',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                <span style={{ fontSize: 28 }}>{opt.icon}</span>
                <span style={{
                  fontSize: 14, fontWeight: 600,
                  color: active ? 'var(--accent)' : 'var(--muted)',
                }}>{opt.label}</span>
              </button>
            )
          })}
        </div>
      </section>
    </div>
  )
}

const sectionTitle = {
  fontSize: 13, fontWeight: 700, color: 'var(--muted)',
  letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 4,
}
const sectionSub = {
  fontSize: 14, color: 'var(--muted)', lineHeight: 1.5,
}

// ─── Λειτουργία tab ──────────────────────────────────────────────────────────

const POPUP_MODE_OPTIONS = [
  {
    key: 'all',
    label: 'Popup Everything',
    desc: 'Εμφανίζεται popup για κάθε ειδοποίηση (KDS, μηνύματα, κλπ.)',
  },
  {
    key: 'manager_only',
    label: 'Popup μόνο για μηνύματα διαχειριστή',
    desc: 'KDS ειδοποιήσεις αποθηκεύονται στο κουδούνι χωρίς popup.',
  },
  {
    key: 'never',
    label: 'Never Popup',
    desc: 'Καμία αναδυόμενη ειδοποίηση. Ανοίξτε το κουδούνι για να τις δείτε — και θα σβηστούν αυτόματα.',
  },
]

function ToggleRow({ label, desc, checked, onChange }) {
  return (
    <button
      onClick={onChange}
      style={{
        display: 'flex', alignItems: 'center', gap: 14,
        width: '100%', padding: '14px 16px', borderRadius: 14,
        border: `2px solid ${checked ? 'var(--accent)' : 'var(--border)'}`,
        background: checked ? 'var(--accent)18' : 'var(--bg2)',
        cursor: 'pointer', textAlign: 'left',
        transition: 'border-color 0.12s, background 0.12s',
      }}
    >
      <div style={{
        width: 44, height: 24, borderRadius: 12, flexShrink: 0,
        background: checked ? 'var(--accent)' : 'var(--bg3)', position: 'relative', transition: 'background 0.2s',
      }}>
        <div style={{
          position: 'absolute', top: 3, left: checked ? 23 : 3,
          width: 18, height: 18, borderRadius: '50%', background: 'white',
          transition: 'left 0.2s', boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
        }} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 15, fontWeight: 700, color: checked ? 'var(--accent)' : 'var(--text)' }}>{label}</div>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2, lineHeight: 1.4 }}>{desc}</div>
      </div>
    </button>
  )
}

const PAYMENT_SAFETY_OPTIONS = [
  {
    key: 'off',
    label: 'Απενεργοποιημένο',
    desc: 'Η πληρωμή επιβεβαιώνεται με ένα απλό πάτημα.',
  },
  {
    key: 'second_confirm',
    label: 'Δεύτερη Επιβεβαίωση',
    desc: 'Μετά την επιβεβαίωση πληρωμής, εμφανίζεται ένα επιπλέον παράθυρο ασφαλείας πριν ολοκληρωθεί η πληρωμή.',
  },
  {
    key: 'long_press',
    label: 'Παρατεταμένο Πάτημα',
    desc: 'Για να επιβεβαιωθεί η πληρωμή, πρέπει να κρατήσετε πατημένο το κουμπί για ~1 δευτερόλεπτο.',
  },
]

function LeitourgiaTab() {
  const { popupMode, persistentPopup, setPopupMode, setPersistentPopup } = useNotificationSettingsStore()
  const { summaryBeforeSend, setSummaryBeforeSend } = useOrderingSettingsStore()
  const { paymentSafety, setPaymentSafety } = usePaymentSettingsStore()

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, padding: '24px 16px' }}>

      {/* Popup mode */}
      <section>
        <h2 style={sectionTitle}>Στυλ ειδοποιήσεων</h2>
        <p style={sectionSub}>Πότε εμφανίζονται αναδυόμενα banners κατά την παραλαβή ειδοποίησης.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
          {POPUP_MODE_OPTIONS.map(opt => {
            const active = popupMode === opt.key
            return (
              <button
                key={opt.key}
                onClick={() => setPopupMode(opt.key)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '12px 16px', borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)18' : 'var(--bg2)',
                  cursor: 'pointer', textAlign: 'left',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: active ? 'var(--accent)' : 'var(--text)', marginBottom: 2 }}>
                    {opt.label}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.4 }}>{opt.desc}</div>
                </div>
                {active && (
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, color: 'var(--accent)' }}>
                    <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M6.5 10l2.5 2.5 4.5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
            )
          })}
        </div>
      </section>

      {/* Persistent popup */}
      <section>
        <h2 style={sectionTitle}>Επιμονή Popup</h2>
        <p style={sectionSub}>
          {persistentPopup
            ? 'Τα popups παραμένουν μέχρι να πατήσετε OK.'
            : 'Τα popups κλείνουν αυτόματα μετά από 3 δευτερόλεπτα και η ειδοποίηση σβήνεται αμέσως κατά την παραλαβή.'}
        </p>
        <div style={{ marginTop: 14 }}>
          <ToggleRow
            label="Persistent Popup"
            desc={persistentPopup ? 'Ενεργό — απαιτεί χειροκίνητο κλείσιμο' : 'Ανενεργό — αυτόματο κλείσιμο σε 3 δευτ.'}
            checked={persistentPopup}
            onChange={() => setPersistentPopup(!persistentPopup)}
          />
        </div>
      </section>

      {/* Summary before send */}
      <section>
        <h2 style={sectionTitle}>Σύνοψη πριν την Αποστολή</h2>
        <p style={sectionSub}>
          Αντί για απευθείας αποστολή, εμφανίζεται πρώτα σελίδα επισκόπησης με όλα τα προϊόντα, τις επιλογές, και τη σημείωση παραγγελίας.
        </p>
        <div style={{ marginTop: 14 }}>
          <ToggleRow
            label="Σύνοψη + Αποστολή"
            desc={summaryBeforeSend ? 'Ενεργό — εμφανίζεται modal επισκόπησης πριν την αποστολή' : 'Ανενεργό — άμεση αποστολή'}
            checked={summaryBeforeSend}
            onChange={() => setSummaryBeforeSend(!summaryBeforeSend)}
          />
        </div>
      </section>

      {/* Payment safety switch */}
      <section>
        <h2 style={sectionTitle}>Ασφάλεια Πληρωμών</h2>
        <p style={sectionSub}>
          Προσθέτει ένα επιπλέον βήμα επιβεβαίωσης για να αποφύγετε τυχαίες πληρωμές. Ακόμα κι αν κάνετε λάθος, ο διαχειριστής μπορεί να ενεργοποιήσει την αναίρεση πληρωμής.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
          {PAYMENT_SAFETY_OPTIONS.map(opt => {
            const active = paymentSafety === opt.key
            return (
              <button
                key={opt.key}
                onClick={() => setPaymentSafety(opt.key)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '12px 16px', borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)18' : 'var(--bg2)',
                  cursor: 'pointer', textAlign: 'left',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: active ? 'var(--accent)' : 'var(--text)', marginBottom: 2 }}>
                    {opt.label}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.4 }}>{opt.desc}</div>
                </div>
                {active && (
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, color: 'var(--accent)' }}>
                    <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="1.5"/>
                    <path d="M6.5 10l2.5 2.5 4.5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </button>
            )
          })}
        </div>
      </section>

    </div>
  )
}

// ─── Προσωπικά tab ────────────────────────────────────────────────────────────

function PersonalizeTab() {
  const navigate = useNavigate()
  const { favorites, resetAll } = useWaiterFavoritesStore()
  const [confirmReset, setConfirmReset] = useState(false)

  function handleReset() {
    if (!confirmReset) { setConfirmReset(true); return }
    resetAll()
    setConfirmReset(false)
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, padding: '24px 16px' }}>

      {/* Favorites setup */}
      <section>
        <h2 style={sectionTitle}>Αγαπημένα Προϊόντα</h2>
        <p style={sectionSub}>
          {favorites.length > 0
            ? `${favorites.length} αγαπημένα ενεργά — εμφανίζονται ως πρώτη κατηγορία στο ProductPicker.`
            : 'Δεν έχεις ορίσει αγαπημένα ακόμα. Πάτα παρακάτω για να ξεκινήσεις.'}
        </p>
        <div style={{ marginTop: 14 }}>
          <button
            onClick={() => navigate('/settings/favorites')}
            style={{
              display: 'flex', alignItems: 'center', gap: 14,
              width: '100%', padding: '14px 16px', borderRadius: 14,
              border: '2px solid var(--accent)',
              background: 'var(--accent)18',
              cursor: 'pointer', textAlign: 'left',
            }}
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
            </svg>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--accent)' }}>Ρύθμιση Αγαπημένων</div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>Επίλεξε προϊόντα και άλλαξε σειρά εμφάνισης</div>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{ color: 'var(--accent)', flexShrink: 0 }}>
              <path d="M9 18l6-6-6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>
      </section>

      {/* Reset all */}
      <section>
        <h2 style={sectionTitle}>Επαναφορά</h2>
        <p style={sectionSub}>
          {confirmReset
            ? 'Είσαι σίγουρος; Αυτή η ενέργεια δεν μπορεί να αναιρεθεί.'
            : 'Διαγράφει όλα τα αγαπημένα και επαναφέρει τις προτιμήσεις στις εργοστασιακές τιμές.'}
        </p>
        <div style={{ marginTop: 14 }}>
          <button
            onClick={handleReset}
            onBlur={() => setConfirmReset(false)}
            style={{
              display: 'flex', alignItems: 'center', gap: 12,
              width: '100%', padding: '14px 16px', borderRadius: 14,
              border: `2px solid ${confirmReset ? 'var(--danger)' : 'var(--border)'}`,
              background: confirmReset ? 'var(--danger-dim, #fee2e2)' : 'var(--bg2)',
              cursor: 'pointer', textAlign: 'left',
              transition: 'border-color 0.15s, background 0.15s',
            }}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={confirmReset ? 'var(--danger)' : 'var(--muted)'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
            </svg>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: confirmReset ? 'var(--danger)' : 'var(--text)' }}>
                {confirmReset ? 'Πάτα ξανά για επιβεβαίωση' : 'Επαναφορά Όλων'}
              </div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>Αγαπημένα & ρυθμίσεις</div>
            </div>
          </button>
        </div>
      </section>

    </div>
  )
}

// ─── Πλοήγηση tab ─────────────────────────────────────────────────────────────

const ALL_NAV_ITEMS = [
  {
    key: 'tables',
    label: 'Τραπέζια',
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <rect x="3" y="3" width="7" height="7" rx="1.5" fill="currentColor"/>
        <rect x="14" y="3" width="7" height="7" rx="1.5" fill="currentColor"/>
        <rect x="3" y="14" width="7" height="7" rx="1.5" fill="currentColor"/>
        <rect x="14" y="14" width="7" height="7" rx="1.5" fill="currentColor"/>
      </svg>
    ),
  },
  {
    key: 'orders',
    label: 'Παραγγελίες',
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        <path d="M9 12h6M9 16h4" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    ),
  },
  {
    key: 'messages',
    label: 'Chat',
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
  },
  {
    key: 'standalone',
    label: 'Takeaway',
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M5 12H3l9-9 9 9h-2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M10 22v-6h4v6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
  },
  {
    key: 'shift-overview',
    label: 'Βάρδια',
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2"/>
        <path d="M12 7v5l3 3" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    ),
  },
  {
    key: 'order-log',
    label: 'Αρχείο',
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M6 9V2h12v7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <rect x="6" y="14" width="12" height="8" rx="1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
  },
]

function DragHandle() {
  return (
    <span style={{ color: 'var(--muted)', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 3, padding: '0 2px' }}>
      <span style={{ display: 'block', width: 16, height: 2, background: 'currentColor', borderRadius: 1 }} />
      <span style={{ display: 'block', width: 16, height: 2, background: 'currentColor', borderRadius: 1 }} />
      <span style={{ display: 'block', width: 16, height: 2, background: 'currentColor', borderRadius: 1 }} />
    </span>
  )
}

function Checkbox({ checked }) {
  return (
    <div style={{
      width: 28, height: 28, borderRadius: 8, flexShrink: 0,
      border: `2px solid ${checked ? 'var(--accent)' : 'var(--border)'}`,
      background: checked ? 'var(--accent)' : 'transparent',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      pointerEvents: 'none',
      transition: 'background 0.12s, border-color 0.12s',
    }}>
      {checked && (
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M2.5 7l3 3 6-6" stroke="var(--accent-fg)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      )}
    </div>
  )
}

function PloigisiTab() {
  const { navStyle, setNavStyle, navItems, setNavItems, tripleItems, setTripleItems } = useTableViewStore()

  const NAV_MAP = Object.fromEntries(ALL_NAV_ITEMS.map(i => [i.key, i]))

  // ── Icon Navbar drag state ────────────────────────────────────────────────────
  const dragKey = useRef(null)
  const touchDragKey = useRef(null)
  const itemRefs = useRef({})
  const [dropIndex, setDropIndex] = useState(null)

  // ── Triple Pill drag state ────────────────────────────────────────────────────
  const triDragKey = useRef(null)
  const triTouchDragKey = useRef(null)
  const triItemRefs = useRef({})
  const [triDropIndex, setTriDropIndex] = useState(null)

  function toggleItem(key) {
    if (navItems.includes(key)) {
      if (navItems.length <= 1) return
      setNavItems(navItems.filter(k => k !== key))
    } else {
      if (navItems.length >= 5) return
      setNavItems([...navItems, key])
    }
  }

  function toggleTripleItem(key) {
    if (tripleItems.includes(key)) {
      if (tripleItems.length <= 1) return
      setTripleItems(tripleItems.filter(k => k !== key))
    } else {
      if (tripleItems.length >= 3) return
      setTripleItems([...tripleItems, key])
    }
  }

  function computeDropIndex(y, refs, items) {
    for (let i = 0; i < items.length; i++) {
      const el = refs.current[items[i].key]
      if (!el) continue
      const rect = el.getBoundingClientRect()
      if (y < rect.top + rect.height / 2) return i
    }
    return items.length
  }

  function applyReorder(fromKey, toIdx, items, setter) {
    if (fromKey == null || toIdx == null) return
    const fromIdx = items.findIndex(i => i.key === fromKey)
    if (fromIdx === -1) return
    const adjustedTo = toIdx > fromIdx ? toIdx - 1 : toIdx
    if (fromIdx === adjustedTo) return
    const keys = items.map(i => i.key)
    keys.splice(fromIdx, 1)
    keys.splice(adjustedTo, 0, fromKey)
    setter(keys)
  }

  // ── Icon Navbar drag handlers ────────────────────────────────────────────────
  function onDragStart(key) { dragKey.current = key }
  function onDragOverContainer(e, items) {
    e.preventDefault()
    setDropIndex(computeDropIndex(e.clientY, itemRefs, items))
  }
  function onDropContainer(items) {
    applyReorder(dragKey.current, dropIndex, items, setNavItems)
    dragKey.current = null; setDropIndex(null)
  }
  function onDragEnd() { dragKey.current = null; setDropIndex(null) }
  function onTouchStart(e, key) { touchDragKey.current = key }
  function onTouchMove(e, items) {
    e.preventDefault()
    setDropIndex(computeDropIndex(e.touches[0].clientY, itemRefs, items))
  }
  function onTouchEnd(items) {
    applyReorder(touchDragKey.current, dropIndex, items, setNavItems)
    touchDragKey.current = null; setDropIndex(null)
  }

  // ── Triple Pill drag handlers ────────────────────────────────────────────────
  function triOnDragStart(key) { triDragKey.current = key }
  function triOnDragOver(e, items) {
    e.preventDefault()
    setTriDropIndex(computeDropIndex(e.clientY, triItemRefs, items))
  }
  function triOnDrop(items) {
    applyReorder(triDragKey.current, triDropIndex, items, setTripleItems)
    triDragKey.current = null; setTriDropIndex(null)
  }
  function triOnDragEnd() { triDragKey.current = null; setTriDropIndex(null) }
  function triOnTouchStart(e, key) { triTouchDragKey.current = key }
  function triOnTouchMove(e, items) {
    e.preventDefault()
    setTriDropIndex(computeDropIndex(e.touches[0].clientY, triItemRefs, items))
  }
  function triOnTouchEnd(items) {
    applyReorder(triTouchDragKey.current, triDropIndex, items, setTripleItems)
    triTouchDragKey.current = null; setTriDropIndex(null)
  }

  const enabledItems = navItems.map(k => NAV_MAP[k]).filter(Boolean)
  const disabledItems = ALL_NAV_ITEMS.filter(i => !navItems.includes(i.key))
  const tripleOrderedItems = (tripleItems || ['tables', 'orders', 'messages']).map(k => NAV_MAP[k]).filter(Boolean)

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, padding: '24px 16px' }}>

      {/* Nav style picker */}
      <section>
        <h2 style={sectionTitle}>Στυλ γραμμής πλοήγησης</h2>
        <p style={sectionSub}>Πώς εμφανίζεται η γραμμή πλοήγησης στο κάτω μέρος της οθόνης.</p>
        <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
          {[
            { key: 'triple', label: 'Triple Pill', desc: 'Σταθερά 3 κουμπιά με εικονίδιο + κείμενο σε pill μορφή' },
            { key: 'icon_navbar', label: 'Icon Navbar', desc: 'Android-style με 1–5 εικονίδια που μπορείτε να διαμορφώσετε' },
          ].map(opt => {
            const active = navStyle === opt.key
            return (
              <button
                key={opt.key}
                onClick={() => setNavStyle(opt.key)}
                style={{
                  flex: 1,
                  display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6,
                  padding: '14px 12px', borderRadius: 14,
                  border: `2px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background: active ? 'var(--accent)18' : 'var(--bg2)',
                  cursor: 'pointer', textAlign: 'left',
                  transition: 'border-color 0.12s, background 0.12s',
                }}
              >
                <span style={{ fontSize: 13, fontWeight: 800, color: active ? 'var(--accent)' : 'var(--text)' }}>{opt.label}</span>
                <span style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.4 }}>{opt.desc}</span>
              </button>
            )
          })}
        </div>
      </section>

      {/* Triple Pill item editor */}
      {navStyle === 'triple' && (
        <section>
          <h2 style={sectionTitle}>Στοιχεία Triple Pill</h2>
          <p style={sectionSub}>Επίλεξε ακριβώς 3 κουμπιά και σύρε για να αλλάξεις τη σειρά τους.</p>

          <div
            style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 14 }}
            onDragOver={e => triOnDragOver(e, tripleOrderedItems)}
            onDrop={() => triOnDrop(tripleOrderedItems)}
            onDragEnd={triOnDragEnd}
            onTouchMove={e => triOnTouchMove(e, tripleOrderedItems)}
            onTouchEnd={() => triOnTouchEnd(tripleOrderedItems)}
          >
            <div style={{
              height: triDropIndex === 0 ? 3 : 0,
              background: 'var(--accent)', borderRadius: 2,
              margin: triDropIndex === 0 ? '2px 8px 4px' : '0 8px',
              transition: 'height 0.1s, margin 0.1s',
            }} />
            {tripleOrderedItems.map((item, idx) => (
              <div key={item.key}>
                <div
                  ref={el => { triItemRefs.current[item.key] = el }}
                  draggable
                  onDragStart={() => triOnDragStart(item.key)}
                  onTouchStart={e => triOnTouchStart(e, item.key)}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '12px 14px', borderRadius: 14, marginBottom: 8,
                    border: '2px solid var(--accent)',
                    background: 'var(--accent)18',
                    cursor: 'grab', userSelect: 'none',
                    opacity: (triDragKey.current === item.key || triTouchDragKey.current === item.key) ? 0.4 : 1,
                    transition: 'opacity 0.1s',
                  }}
                >
                  <DragHandle />
                  <span style={{ color: 'var(--accent)', flexShrink: 0 }}>{item.icon}</span>
                  <span style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--accent)' }}>{item.label}</span>
                  <button
                    onClick={() => toggleTripleItem(item.key)}
                    style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
                  >
                    <Checkbox checked />
                  </button>
                </div>
                <div style={{
                  height: triDropIndex === idx + 1 ? 3 : 0,
                  background: 'var(--accent)', borderRadius: 2,
                  margin: triDropIndex === idx + 1 ? '2px 8px 4px' : '0 8px',
                  transition: 'height 0.1s, margin 0.1s',
                }} />
              </div>
            ))}
          </div>

          {/* Divider + disabled items */}
          {ALL_NAV_ITEMS.filter(i => !tripleItems.includes(i.key)).length > 0 && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 0', margin: '4px 0 8px' }}>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
                <span style={{ fontSize: 11, color: 'var(--muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8 }}>
                  Διαθέσιμα
                </span>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
              </div>
              {ALL_NAV_ITEMS.filter(i => !tripleItems.includes(i.key)).map(item => (
                <div
                  key={item.key}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '12px 14px', borderRadius: 14, marginBottom: 8,
                    border: '2px solid var(--border)',
                    background: 'var(--bg2)',
                  }}
                >
                  <span style={{ width: 20, flexShrink: 0 }} />
                  <span style={{ color: 'var(--muted)', flexShrink: 0 }}>{item.icon}</span>
                  <span style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--text)' }}>{item.label}</span>
                  <button
                    onClick={() => toggleTripleItem(item.key)}
                    style={{ background: 'none', border: 'none', cursor: tripleItems.length >= 3 ? 'not-allowed' : 'pointer', padding: 0, opacity: tripleItems.length >= 3 ? 0.4 : 1 }}
                  >
                    <Checkbox checked={false} />
                  </button>
                </div>
              ))}
            </>
          )}

          <p style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4, lineHeight: 1.5 }}>
            {tripleItems.length}/3 κουμπιά ενεργά
            {tripleItems.length >= 3 ? ' — μέγιστο' : ''}
          </p>
        </section>
      )}

      {/* Icon navbar item editor */}
      {navStyle === 'icon_navbar' && (
        <section>
          <h2 style={sectionTitle}>Στοιχεία Icon Navbar</h2>
          <p style={sectionSub}>Επίλεξε ποια εικονίδια εμφανίζονται (1–5). Σύρε για να αλλάξεις τη σειρά.</p>

          <div
            style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 14 }}
            onDragOver={e => onDragOverContainer(e, enabledItems)}
            onDrop={() => onDropContainer(enabledItems)}
            onDragEnd={onDragEnd}
            onTouchMove={e => onTouchMove(e, enabledItems)}
            onTouchEnd={() => onTouchEnd(enabledItems)}
          >
            {/* Enabled items — ordered, draggable */}
            {/* Drop indicator before first item */}
            <div style={{
              height: dropIndex === 0 ? 3 : 0,
              background: 'var(--accent)',
              borderRadius: 2,
              margin: dropIndex === 0 ? '2px 8px 4px' : '0 8px',
              transition: 'height 0.1s, margin 0.1s',
            }} />
            {enabledItems.map((item, idx) => (
              <div key={item.key}>
                <div
                  ref={el => { itemRefs.current[item.key] = el }}
                  draggable
                  onDragStart={() => onDragStart(item.key)}
                  onTouchStart={e => onTouchStart(e, item.key)}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '12px 14px', borderRadius: 14, marginBottom: 8,
                    border: `2px solid var(--accent)`,
                    background: 'var(--accent)18',
                    cursor: 'grab',
                    userSelect: 'none',
                    opacity: (dragKey.current === item.key || touchDragKey.current === item.key) ? 0.4 : 1,
                    transition: 'opacity 0.1s',
                  }}
                >
                  <DragHandle />
                  <span style={{ color: 'var(--accent)', flexShrink: 0 }}>{item.icon}</span>
                  <span style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--accent)' }}>{item.label}</span>
                  <button
                    onClick={() => toggleItem(item.key)}
                    style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
                  >
                    <Checkbox checked />
                  </button>
                </div>
                {/* Drop indicator after this item (= before the next one) */}
                <div style={{
                  height: dropIndex === idx + 1 ? 3 : 0,
                  background: 'var(--accent)',
                  borderRadius: 2,
                  margin: dropIndex === idx + 1 ? '2px 8px 4px' : '0 8px',
                  transition: 'height 0.1s, margin 0.1s',
                }} />
              </div>
            ))}

            {/* Divider */}
            {disabledItems.length > 0 && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 0', marginBottom: 8 }}>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
                <span style={{ fontSize: 11, color: 'var(--muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8 }}>
                  Διαθέσιμα
                </span>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
              </div>
            )}

            {/* Disabled items */}
            {disabledItems.map(item => (
              <div
                key={item.key}
                style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 14px', borderRadius: 14, marginBottom: 8,
                  border: `2px solid var(--border)`,
                  background: 'var(--bg2)',
                }}
              >
                <span style={{ width: 20, flexShrink: 0 }} />
                <span style={{ color: 'var(--muted)', flexShrink: 0 }}>{item.icon}</span>
                <span style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--text)' }}>{item.label}</span>
                <button
                  onClick={() => toggleItem(item.key)}
                  style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
                >
                  <Checkbox checked={false} />
                </button>
              </div>
            ))}
          </div>

          <p style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4, lineHeight: 1.5 }}>
            {navItems.length}/5 εικονίδια ενεργά
            {navItems.length >= 5 ? ' — μέγιστο' : ''}
          </p>
        </section>
      )}

    </div>
  )
}

// ─── Main page ────────────────────────────────────────────────────────────────

export default function SettingsPage() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('layout')

  return (
    <div className="page">
      {/* Top bar */}
      <header className="top-bar">
        <button
          onClick={() => navigate(-1)}
          style={{
            display: 'flex', alignItems: 'center', gap: 6,
            background: 'none', border: 'none', cursor: 'pointer',
            color: 'var(--text)', fontSize: 15, fontWeight: 600,
            padding: '0 4px', minHeight: 44, borderRadius: 8,
          }}
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M12.5 15l-5-5 5-5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Πίσω
        </button>
        <span className="top-bar__title" style={{ textAlign: 'center' }}>Ρυθμίσεις</span>
        {/* spacer to balance the back button */}
        <div style={{ width: 72 }} />
      </header>

      {/* Tab strip — horizontally scrollable so long labels never clip */}
      <div style={{
        borderBottom: '1px solid var(--border)',
        background: 'var(--bg2)',
        overflowX: 'auto',
        WebkitOverflowScrolling: 'touch',
        scrollbarWidth: 'none',
        flexShrink: 0,
      }}>
        <div style={{ display: 'flex', gap: 0, padding: '0 8px', minWidth: 'max-content' }}>
          {TABS.map(tab => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              style={{
                padding: '14px 16px',
                background: 'none', border: 'none',
                borderBottom: activeTab === tab.key ? '2px solid var(--accent)' : '2px solid transparent',
                color: activeTab === tab.key ? 'var(--accent)' : 'var(--text)',
                fontSize: 14, fontWeight: 600,
                cursor: 'pointer',
                marginBottom: -1,
                whiteSpace: 'nowrap',
                transition: 'color 0.12s',
              }}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Tab body */}
      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, overscrollBehavior: 'contain' }}>
        {activeTab === 'layout'      && <LayoutTab />}
        {activeTab === 'leitourgia'  && <LeitourgiaTab />}
        {activeTab === 'ploigisi'    && <PloigisiTab />}
        {activeTab === 'personalize' && <PersonalizeTab />}
      </div>
    </div>
  )
}

