import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import useTableViewStore from '../store/tableViewStore'
import useThemeStore from '../store/themeStore'

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

const TABS = [
  { key: 'layout', label: 'Εμφάνιση' },
  { key: 'favorites', label: 'Αγαπημένα', disabled: true },
]

// ─── 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 ───────────────────────────────────────────────────────────────

function LayoutTab() {
  const { density, setDensity } = useTableViewStore()
  const { dark, toggle } = useThemeStore()

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

      {/* 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>

      {/* 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,
}

// ─── Favorites stub tab ───────────────────────────────────────────────────────

function FavoritesTab() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, padding: 40, flex: 1 }}>
      <span style={{ fontSize: 40 }}>⭐</span>
      <p style={{ fontSize: 16, fontWeight: 700, color: 'var(--text)' }}>Σύντομα διαθέσιμο</p>
      <p style={{ fontSize: 14, color: 'var(--muted)', textAlign: 'center', lineHeight: 1.5 }}>
        Τα αγαπημένα προϊόντα θα εμφανίζονται εδώ για γρήγορη παραγγελία.
      </p>
    </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 */}
      <div style={{
        display: 'flex', gap: 0,
        borderBottom: '1px solid var(--border)',
        background: 'var(--bg2)',
        padding: '0 16px',
      }}>
        {TABS.map(tab => (
          <button
            key={tab.key}
            disabled={tab.disabled}
            onClick={() => !tab.disabled && setActiveTab(tab.key)}
            style={{
              padding: '14px 16px',
              background: 'none', border: 'none',
              borderBottom: activeTab === tab.key ? '2px solid var(--accent)' : '2px solid transparent',
              color: tab.disabled
                ? 'var(--muted)'
                : activeTab === tab.key
                  ? 'var(--accent)'
                  : 'var(--text)',
              fontSize: 14, fontWeight: 600,
              cursor: tab.disabled ? 'not-allowed' : 'pointer',
              opacity: tab.disabled ? 0.45 : 1,
              marginBottom: -1,  // overlap the border-bottom
              whiteSpace: 'nowrap',
              transition: 'color 0.12s',
            }}
          >
            {tab.label}
            {tab.disabled && (
              <span style={{
                marginLeft: 6, fontSize: 10, fontWeight: 700,
                background: 'var(--bg3)', color: 'var(--muted)',
                borderRadius: 4, padding: '1px 5px',
                verticalAlign: 'middle',
              }}>σύντομα</span>
            )}
          </button>
        ))}
      </div>

      {/* Tab body */}
      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, overscrollBehavior: 'contain' }}>
        {activeTab === 'layout'    && <LayoutTab />}
        {activeTab === 'favorites' && <FavoritesTab />}
      </div>
    </div>
  )
}

