'use client'

import { useEffect, useState } from 'react'
import { Shield, Gauge, Loader2, Save, Info, Clock, Hash, CreditCard, Building2, Receipt, HandCoins, Package, Printer, FileText, UtensilsCrossed, Settings, Wallet, Palette, RotateCcw, Image } from 'lucide-react'
import toast from 'react-hot-toast'
import ReceiptPreview from '@/components/ReceiptPreview'

const SESSION_DURATION_OPTIONS = [
  { value: '1', label: '1 Jam' },
  { value: '2', label: '2 Jam' },
  { value: '3', label: '3 Jam' },
  { value: '4', label: '4 Jam' },
  { value: '6', label: '6 Jam' },
  { value: '8', label: '8 Jam' },
  { value: '12', label: '12 Jam' },
]

const TABS = [
  { id: 'general', label: 'Umum', icon: Settings },
  { id: 'finance', label: 'Keuangan', icon: Wallet },
  { id: 'pos', label: 'POS & Inventori', icon: UtensilsCrossed },
  { id: 'printer', label: 'Printer & Struk', icon: Printer },
  { id: 'appearance', label: 'Tampilan Menu', icon: Palette },
] as const

const FONT_OPTIONS = [
  { value: 'default', label: 'Default (System)' },
  { value: 'Poppins', label: 'Poppins' },
  { value: 'Inter', label: 'Inter' },
  { value: 'Nunito', label: 'Nunito' },
  { value: 'Playfair Display', label: 'Playfair Display' },
  { value: 'Lato', label: 'Lato' },
]

const LAYOUT_OPTIONS = [
  { value: 'card', label: 'Card', desc: 'Kartu dengan gambar besar (default)' },
  { value: 'list', label: 'List', desc: 'Daftar compact, gambar kecil di kiri' },
  { value: 'grid', label: 'Grid', desc: 'Grid 2 kolom, gambar atas' },
]

type TabId = typeof TABS[number]['id']

export default function SettingsPage() {
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [tenantName, setTenantName] = useState('')
  const [activeTab, setActiveTab] = useState<TabId>('general')
  const [settings, setSettings] = useState({
    order_protection_enabled: 'false',
    session_duration_hours: '4',
    rate_limit_enabled: 'false',
    rate_limit_max_orders: '5',
    online_payment_enabled: 'true',
    bank_name: '',
    bank_account: '',
    bank_holder: '',
    tax_enabled: 'true',
    tax_rate: '11',
    service_charge_enabled: 'false',
    service_charge_rate: '5',
    auto_disable_menu_on_stock_out: 'false',
    dine_in_require_table: 'false',
    pos_order_flow: 'default',
    thermal_printer_enabled: 'false',
    thermal_paper_width: '80mm',
    thermal_auto_print_receipt: 'false',
    thermal_auto_print_kitchen: 'false',
    receipt_show_browser_popup: 'true',
    receipt_header_line1: '',
    receipt_header_line2: '',
    receipt_header_line3: '',
    receipt_footer_line1: 'Terima kasih!',
    receipt_footer_line2: 'Silahkan datang lagi',
    receipt_footer_line3: '',
    receipt_feedback_qr: 'true',
    menu_primary_color: '#4F46E5',
    menu_bg_color: '#F9FAFB',
    menu_card_color: '#FFFFFF',
    menu_text_color: '#111827',
    menu_banner_image: '',
    menu_font: 'default',
    menu_layout: 'card',
  })

  useEffect(() => {
    fetch('/api/settings')
      .then(r => r.json())
      .then(d => {
        if (d.settings) setSettings(d.settings)
        if (d.tenantName) setTenantName(d.tenantName)
      })
      .catch(() => toast.error('Gagal memuat pengaturan'))
      .finally(() => setLoading(false))
  }, [])

  const handleSave = async () => {
    setSaving(true)
    try {
      const res = await fetch('/api/settings', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(settings),
      })
      if (!res.ok) throw new Error((await res.json()).error)
      toast.success('Pengaturan disimpan')
    } catch (err: any) { toast.error(err.message || 'Gagal menyimpan') }
    finally { setSaving(false) }
  }

  const toggleSetting = (key: string) => {
    setSettings(s => ({ ...s, [key]: s[key as keyof typeof s] === 'true' ? 'false' : 'true' }))
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
      </div>
    )
  }

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Pengaturan</h1>
        <p className="text-gray-600 dark:text-gray-300 mt-1">Konfigurasi restoran Anda.</p>
      </div>

      {/* Tab Navigation */}
      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
        <nav className="flex gap-1 -mb-px overflow-x-auto">
          {TABS.map((tab) => {
            const Icon = tab.icon
            const isActive = activeTab === tab.id
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                  isActive
                    ? 'border-primary-600 text-primary-600'
                    : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-500'
                }`}
              >
                <Icon className="w-4 h-4" />
                {tab.label}
              </button>
            )
          })}
        </nav>
      </div>

      {/* Tab Content */}
      <div className="space-y-6">

        {/* ============ TAB: Umum ============ */}
        {activeTab === 'general' && (
          <>
            {/* Order Protection Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <Shield className="w-5 h-5 text-primary-600" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <div>
                      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Proteksi Pesanan</h2>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Cegah pesanan palsu dengan kode akses per customer.</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('order_protection_enabled')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.order_protection_enabled === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.order_protection_enabled === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>
                </div>
              </div>

              {settings.order_protection_enabled === 'true' && (
                <div className="ml-14 space-y-4">
                  <div>
                    <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">
                      <Clock className="w-4 h-4 text-gray-400 dark:text-gray-500" />
                      Durasi Kode Akses
                    </label>
                    <select
                      className="input-field max-w-xs dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                      value={settings.session_duration_hours}
                      onChange={(e) => setSettings(s => ({ ...s, session_duration_hours: e.target.value }))}
                    >
                      {SESSION_DURATION_OPTIONS.map(opt => (
                        <option key={opt.value} value={opt.value}>{opt.label}</option>
                      ))}
                    </select>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Kode akses akan kedaluwarsa setelah durasi ini. Kode juga otomatis expired saat pembayaran.</p>
                  </div>

                  <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                    <div className="flex gap-2">
                      <Info className="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                      <div className="text-xs text-blue-800 dark:text-blue-300 space-y-1">
                        <p className="font-medium">Cara kerja proteksi pesanan:</p>
                        <ol className="list-decimal list-inside space-y-0.5">
                          <li>Customer datang, waiter generate kode di halaman <strong>QR & Meja</strong></li>
                          <li>Print kode dan berikan ke customer</li>
                          <li>Customer scan QR meja dan masukkan kode outlet</li>
                          <li>Customer bisa memesan selama kode aktif</li>
                          <li>Saat pembayaran selesai, kode otomatis expired</li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Rate Limiting Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <Gauge className="w-5 h-5 text-orange-600" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <div>
                      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Pembatasan Pesanan</h2>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Batasi jumlah pesanan per perangkat untuk mencegah spam.</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('rate_limit_enabled')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.rate_limit_enabled === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.rate_limit_enabled === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>
                </div>
              </div>

              {settings.rate_limit_enabled === 'true' && (
                <div className="ml-14 space-y-4">
                  <div>
                    <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">
                      <Hash className="w-4 h-4 text-gray-400 dark:text-gray-500" />
                      Maksimal Pesanan per Jam
                    </label>
                    <input
                      type="number"
                      className="input-field max-w-[120px] dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                      min="1"
                      max="20"
                      value={settings.rate_limit_max_orders}
                      onChange={(e) => setSettings(s => ({ ...s, rate_limit_max_orders: e.target.value }))}
                    />
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Jumlah maksimal pesanan yang bisa dikirim per IP address per jam per cabang.</p>
                  </div>

                  <div className="bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
                    <div className="flex gap-2">
                      <Info className="w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
                      <p className="text-xs text-amber-800 dark:text-amber-300">
                        <strong>Catatan:</strong> Di restoran, beberapa customer mungkin berbagi WiFi yang sama (IP sama).
                        Atur limit cukup longgar (5-10) agar tidak mengganggu customer yang sah.
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Online Payment Toggle */}
            <div className="card">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <CreditCard className="w-5 h-5 text-green-600" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <div>
                      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Pembayaran Online</h2>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Aktifkan pembayaran online (QRIS & Virtual Account) untuk pelanggan Anda.</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('online_payment_enabled')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.online_payment_enabled === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.online_payment_enabled === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>
                  {settings.online_payment_enabled === 'false' && (
                    <div className="mt-3 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
                      <div className="flex gap-2">
                        <Info className="w-4 h-4 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
                        <p className="text-xs text-yellow-800 dark:text-yellow-300">
                          Pembayaran online dinonaktifkan. Pelanggan hanya bisa membayar di kasir.
                        </p>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </>
        )}

        {/* ============ TAB: Keuangan ============ */}
        {activeTab === 'finance' && (
          <>
            {/* Tax & Service Charge Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <Receipt className="w-5 h-5 text-yellow-600" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Pajak & Biaya Layanan</h2>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Konfigurasi pajak (PPN) dan biaya layanan yang diterapkan pada setiap pesanan.</p>
                </div>
              </div>

              <div className="ml-14 space-y-5">
                {/* Tax (PPN) */}
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <div>
                      <p className="font-medium text-gray-900 dark:text-white">Pajak (PPN)</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Pajak akan ditambahkan ke subtotal pesanan</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('tax_enabled')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.tax_enabled === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.tax_enabled === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>
                  {settings.tax_enabled === 'true' && (
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Persentase Pajak (%)</label>
                      <input
                        type="number"
                        step="0.5"
                        min="0"
                        max="100"
                        className="input-field max-w-[120px] dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                        value={settings.tax_rate}
                        onChange={(e) => setSettings(s => ({ ...s, tax_rate: e.target.value }))}
                      />
                    </div>
                  )}
                </div>

                <div className="border-t border-gray-100 dark:border-gray-700" />

                {/* Service Charge */}
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <div>
                      <p className="font-medium text-gray-900 dark:text-white">Biaya Layanan</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Biaya layanan akan ditambahkan ke subtotal pesanan</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('service_charge_enabled')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.service_charge_enabled === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.service_charge_enabled === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>
                  {settings.service_charge_enabled === 'true' && (
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Persentase Biaya Layanan (%)</label>
                      <input
                        type="number"
                        step="0.5"
                        min="0"
                        max="100"
                        className="input-field max-w-[120px] dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                        value={settings.service_charge_rate}
                        onChange={(e) => setSettings(s => ({ ...s, service_charge_rate: e.target.value }))}
                      />
                    </div>
                  )}
                </div>

                <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                  <div className="flex gap-2">
                    <Info className="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                    <p className="text-xs text-blue-800 dark:text-blue-300">
                      Pajak dan biaya layanan akan otomatis dihitung dan ditampilkan pada setiap pesanan (POS, menu online, dan struk).
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Bank Account Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <Building2 className="w-5 h-5 text-blue-600" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Informasi Rekening Bank</h2>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Data rekening untuk penarikan dana. Akan otomatis terisi saat penarikan.</p>
                </div>
              </div>

              <div className="ml-14 space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Nama Bank</label>
                  <select
                    className="input-field max-w-xs dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                    value={settings.bank_name}
                    onChange={(e) => setSettings(s => ({ ...s, bank_name: e.target.value }))}
                  >
                    <option value="">Pilih Bank</option>
                    <option value="BCA">BCA</option>
                    <option value="BNI">BNI</option>
                    <option value="BRI">BRI</option>
                    <option value="Mandiri">Mandiri</option>
                    <option value="CIMB Niaga">CIMB Niaga</option>
                    <option value="Permata">Permata</option>
                    <option value="BSI">BSI</option>
                    <option value="Danamon">Danamon</option>
                    <option value="Lainnya">Lainnya</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Nomor Rekening</label>
                  <input
                    type="text"
                    className="input-field max-w-xs dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                    placeholder="Masukkan nomor rekening"
                    value={settings.bank_account}
                    onChange={(e) => setSettings(s => ({ ...s, bank_account: e.target.value.replace(/[^0-9]/g, '') }))}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Nama Pemilik Rekening</label>
                  <input
                    type="text"
                    className="input-field max-w-xs dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                    placeholder="Sesuai buku tabungan"
                    value={settings.bank_holder}
                    onChange={(e) => setSettings(s => ({ ...s, bank_holder: e.target.value }))}
                  />
                </div>
                <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                  <div className="flex gap-2">
                    <Info className="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                    <p className="text-xs text-blue-800 dark:text-blue-300">
                      Data rekening ini akan otomatis terisi saat Anda mengajukan penarikan dana di halaman Dompet.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </>
        )}

        {/* ============ TAB: POS & Inventori ============ */}
        {activeTab === 'pos' && (
          <>
            {/* POS Settings Section */}
            <div className="card">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <UtensilsCrossed className="w-5 h-5 text-orange-600" />
                </div>
                <div className="flex-1">
                  <div className="mb-5">
                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">POS</h2>
                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Pengaturan Point of Sale.</p>
                  </div>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">
                        Alur Pemesanan
                      </label>
                      <select
                        className="input-field max-w-md dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                        value={settings.pos_order_flow}
                        onChange={(e) => setSettings(s => ({ ...s, pos_order_flow: e.target.value }))}
                      >
                        <option value="default">Default — Pilih meja dulu, lalu pesan</option>
                        <option value="cashier_first">Kasir Dulu — Pesan & bayar di kasir, assign meja setelahnya</option>
                      </select>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        {settings.pos_order_flow === 'cashier_first'
                          ? 'Customer pesan & bayar di kasir, lalu diberi nomor antrian. Meja bisa di-assign setelah order dibuat.'
                          : 'Customer memilih meja terlebih dahulu saat checkout (alur standar restoran).'
                        }
                      </p>
                    </div>

                    {settings.pos_order_flow === 'default' && (
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium text-gray-900 dark:text-white">Wajib Pilih Meja untuk Dine-In</p>
                          <p className="text-sm text-gray-500 dark:text-gray-400">Order dine-in tidak bisa dibuat tanpa memilih meja terlebih dahulu</p>
                        </div>
                        <button
                          onClick={() => toggleSetting('dine_in_require_table')}
                          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                            settings.dine_in_require_table === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                          }`}
                        >
                          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                            settings.dine_in_require_table === 'true' ? 'translate-x-6' : 'translate-x-1'
                          }`} />
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* Inventory Section */}
            <div className="card">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <Package className="w-5 h-5 text-purple-600" />
                </div>
                <div className="flex-1">
                  <div className="mb-5">
                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Inventori</h2>
                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Konfigurasi fitur inventori dan manajemen stok.</p>
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-medium text-gray-900 dark:text-white">Auto Nonaktifkan Menu</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Otomatis tandai menu sebagai tidak tersedia jika bahan baku habis</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('auto_disable_menu_on_stock_out')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.auto_disable_menu_on_stock_out === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.auto_disable_menu_on_stock_out === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </>
        )}

        {/* ============ TAB: Printer & Struk ============ */}
        {activeTab === 'printer' && (
          <>
            {/* Thermal Printer Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <Printer className="w-5 h-5 text-purple-600" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <div>
                      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Printer Termal</h2>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Konfigurasi printer termal ESC/POS untuk cetak struk langsung.</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('thermal_printer_enabled')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.thermal_printer_enabled === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.thermal_printer_enabled === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>
                </div>
              </div>

              {settings.thermal_printer_enabled === 'true' && (
                <div className="ml-14 space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">
                      Lebar Kertas
                    </label>
                    <select
                      className="input-field max-w-xs dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                      value={settings.thermal_paper_width}
                      onChange={(e) => setSettings(s => ({ ...s, thermal_paper_width: e.target.value }))}
                    >
                      <option value="58mm">58mm</option>
                      <option value="80mm">80mm</option>
                    </select>
                  </div>

                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-medium text-gray-900 dark:text-white">Auto Cetak Nota Customer</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Cetak nota otomatis setelah order berhasil dibuat</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('thermal_auto_print_receipt')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.thermal_auto_print_receipt === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.thermal_auto_print_receipt === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>

                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-medium text-gray-900 dark:text-white">Auto Cetak Tiket Dapur</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Cetak tiket dapur otomatis setelah order berhasil dibuat</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('thermal_auto_print_kitchen')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.thermal_auto_print_kitchen === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.thermal_auto_print_kitchen === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>

                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-medium text-gray-900 dark:text-white">Tampilkan Popup Cetak Browser</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Jika OFF, struk langsung dicetak tanpa menampilkan dialog print browser</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('receipt_show_browser_popup')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.receipt_show_browser_popup === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.receipt_show_browser_popup === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>

                  <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                    <div className="flex gap-2">
                      <Info className="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                      <div className="text-xs text-blue-800 dark:text-blue-300 space-y-1">
                        <p>Printer termal menggunakan WebUSB/Serial dan hanya bisa digunakan di browser Chrome/Edge.</p>
                        <p>Hubungkan printer di halaman POS menggunakan tombol printer di toolbar.</p>
                        <p>Jika printer termal tidak terhubung, cetak akan menggunakan dialog print browser.</p>
                        <p>Jika &quot;Tampilkan Popup Cetak&quot; OFF, struk langsung dicetak ke printer default tanpa dialog.</p>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Receipt Template Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <FileText className="w-5 h-5 text-teal-600" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Template Struk</h2>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Kustomisasi header dan footer struk customer.</p>
                </div>
              </div>

              <div className="ml-14 grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Left: Form */}
                <div className="space-y-5">
                  {/* Header */}
                  <div>
                    <p className="font-medium text-gray-900 dark:text-white mb-3">Header Tambahan</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Ditampilkan di bawah nama restoran & cabang</p>
                    <div className="space-y-2">
                      <input
                        type="text"
                        className="input-field w-full dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                        placeholder="Baris 1 — contoh: Jl. Sudirman No. 123, Jakarta"
                        maxLength={100}
                        value={settings.receipt_header_line1}
                        onChange={(e) => setSettings(s => ({ ...s, receipt_header_line1: e.target.value }))}
                      />
                      <input
                        type="text"
                        className="input-field w-full dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                        placeholder="Baris 2 — contoh: Telp: 021-123456 | IG: @resto"
                        maxLength={100}
                        value={settings.receipt_header_line2}
                        onChange={(e) => setSettings(s => ({ ...s, receipt_header_line2: e.target.value }))}
                      />
                      <input
                        type="text"
                        className="input-field w-full dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                        placeholder="Baris 3 — contoh: Masakan Nusantara Sejak 1990"
                        maxLength={100}
                        value={settings.receipt_header_line3}
                        onChange={(e) => setSettings(s => ({ ...s, receipt_header_line3: e.target.value }))}
                      />
                    </div>
                  </div>

                  <div className="border-t border-gray-100 dark:border-gray-700" />

                  {/* Footer */}
                  <div>
                    <p className="font-medium text-gray-900 dark:text-white mb-3">Footer Kustom</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Ditampilkan di bagian bawah struk</p>
                    <div className="space-y-2">
                      <div>
                        <label className="block text-xs text-gray-500 dark:text-gray-400 mb-1">Ucapan (bold)</label>
                        <input
                          type="text"
                          className="input-field w-full dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                          placeholder="Terima kasih!"
                          maxLength={100}
                          value={settings.receipt_footer_line1}
                          onChange={(e) => setSettings(s => ({ ...s, receipt_footer_line1: e.target.value }))}
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-gray-500 dark:text-gray-400 mb-1">Sub-teks</label>
                        <input
                          type="text"
                          className="input-field w-full dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                          placeholder="Silahkan datang lagi"
                          maxLength={100}
                          value={settings.receipt_footer_line2}
                          onChange={(e) => setSettings(s => ({ ...s, receipt_footer_line2: e.target.value }))}
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-gray-500 dark:text-gray-400 mb-1">Info tambahan</label>
                        <input
                          type="text"
                          className="input-field w-full dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                          placeholder="contoh: IG: @restoname | www.resto.com"
                          maxLength={100}
                          value={settings.receipt_footer_line3}
                          onChange={(e) => setSettings(s => ({ ...s, receipt_footer_line3: e.target.value }))}
                        />
                      </div>
                    </div>
                  </div>

                  <div className="border-t border-gray-100 dark:border-gray-700" />

                  {/* QR Feedback Toggle */}
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-medium text-gray-900 dark:text-white">QR Code Feedback</p>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Tampilkan QR code feedback pelanggan di bagian bawah struk</p>
                    </div>
                    <button
                      onClick={() => toggleSetting('receipt_feedback_qr')}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
                        settings.receipt_feedback_qr === 'true' ? 'bg-primary-600' : 'bg-gray-300 dark:bg-gray-600'
                      }`}
                    >
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.receipt_feedback_qr === 'true' ? 'translate-x-6' : 'translate-x-1'
                      }`} />
                    </button>
                  </div>

                  <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                    <div className="flex gap-2">
                      <Info className="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                      <div className="text-xs text-blue-800 dark:text-blue-300 space-y-1">
                        <p>Header ditampilkan di bawah nama restoran. Footer di bagian akhir struk.</p>
                        <p>Baris yang dikosongkan tidak akan ditampilkan pada struk.</p>
                        <p>Untuk printer thermal, teks akan dipotong sesuai lebar kertas (32 karakter untuk 58mm, 48 untuk 80mm).</p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Right: Preview */}
                <div className="lg:sticky lg:top-4 self-start">
                  <ReceiptPreview
                    restaurantName={tenantName}
                    storeName="Cabang Utama"
                    headerLine1={settings.receipt_header_line1}
                    headerLine2={settings.receipt_header_line2}
                    headerLine3={settings.receipt_header_line3}
                    footerLine1={settings.receipt_footer_line1}
                    footerLine2={settings.receipt_footer_line2}
                    footerLine3={settings.receipt_footer_line3}
                    showFeedbackQr={settings.receipt_feedback_qr === 'true'}
                  />
                </div>
              </div>
            </div>
          </>
        )}

        {/* ============ TAB: Tampilan Menu ============ */}
        {activeTab === 'appearance' && (
          <>
            {/* Warna Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-pink-100 dark:bg-pink-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <Palette className="w-5 h-5 text-pink-600" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Warna Menu</h2>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Sesuaikan warna halaman menu publik restoran Anda.</p>
                </div>
              </div>

              <div className="ml-14 grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">Warna Utama</label>
                  <div className="flex items-center gap-3">
                    <input
                      type="color"
                      value={settings.menu_primary_color}
                      onChange={(e) => setSettings(s => ({ ...s, menu_primary_color: e.target.value }))}
                      className="w-10 h-10 rounded-lg border border-gray-300 cursor-pointer"
                    />
                    <input
                      type="text"
                      value={settings.menu_primary_color}
                      onChange={(e) => setSettings(s => ({ ...s, menu_primary_color: e.target.value }))}
                      className="input-field w-28 text-sm font-mono dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                      maxLength={7}
                    />
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Tombol, tab aktif, aksen</p>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">Background Halaman</label>
                  <div className="flex items-center gap-3">
                    <input
                      type="color"
                      value={settings.menu_bg_color}
                      onChange={(e) => setSettings(s => ({ ...s, menu_bg_color: e.target.value }))}
                      className="w-10 h-10 rounded-lg border border-gray-300 cursor-pointer"
                    />
                    <input
                      type="text"
                      value={settings.menu_bg_color}
                      onChange={(e) => setSettings(s => ({ ...s, menu_bg_color: e.target.value }))}
                      className="input-field w-28 text-sm font-mono dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                      maxLength={7}
                    />
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Latar belakang halaman</p>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">Warna Card</label>
                  <div className="flex items-center gap-3">
                    <input
                      type="color"
                      value={settings.menu_card_color}
                      onChange={(e) => setSettings(s => ({ ...s, menu_card_color: e.target.value }))}
                      className="w-10 h-10 rounded-lg border border-gray-300 cursor-pointer"
                    />
                    <input
                      type="text"
                      value={settings.menu_card_color}
                      onChange={(e) => setSettings(s => ({ ...s, menu_card_color: e.target.value }))}
                      className="input-field w-28 text-sm font-mono dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                      maxLength={7}
                    />
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Background kartu menu</p>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">Warna Teks</label>
                  <div className="flex items-center gap-3">
                    <input
                      type="color"
                      value={settings.menu_text_color}
                      onChange={(e) => setSettings(s => ({ ...s, menu_text_color: e.target.value }))}
                      className="w-10 h-10 rounded-lg border border-gray-300 cursor-pointer"
                    />
                    <input
                      type="text"
                      value={settings.menu_text_color}
                      onChange={(e) => setSettings(s => ({ ...s, menu_text_color: e.target.value }))}
                      className="input-field w-28 text-sm font-mono dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                      maxLength={7}
                    />
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Teks utama & judul</p>
                </div>
              </div>
            </div>

            {/* Font & Layout Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <FileText className="w-5 h-5 text-indigo-600" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Font & Layout</h2>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Pilih font dan tata letak menu.</p>
                </div>
              </div>

              <div className="ml-14 space-y-5">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">Font</label>
                  <select
                    className="input-field max-w-xs dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                    value={settings.menu_font}
                    onChange={(e) => setSettings(s => ({ ...s, menu_font: e.target.value }))}
                  >
                    {FONT_OPTIONS.map(opt => (
                      <option key={opt.value} value={opt.value}>{opt.label}</option>
                    ))}
                  </select>
                  {settings.menu_font !== 'default' && (
                    <p className="text-sm text-gray-600 dark:text-gray-300 mt-2" style={{ fontFamily: settings.menu_font }}>
                      Preview: Selamat datang di restoran kami! 🍽️
                    </p>
                  )}
                </div>

                <div className="border-t border-gray-100 dark:border-gray-700" />

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">Layout Menu</label>
                  <div className="grid grid-cols-3 gap-3">
                    {LAYOUT_OPTIONS.map(opt => (
                      <button
                        key={opt.value}
                        onClick={() => setSettings(s => ({ ...s, menu_layout: opt.value }))}
                        className={`p-3 rounded-xl border-2 transition-all text-left ${
                          settings.menu_layout === opt.value
                            ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
                            : 'border-gray-200 dark:border-gray-600 hover:border-gray-300'
                        }`}
                      >
                        <p className={`text-sm font-medium ${settings.menu_layout === opt.value ? 'text-primary-700 dark:text-primary-400' : 'text-gray-900 dark:text-white'}`}>{opt.label}</p>
                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{opt.desc}</p>
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Banner Section */}
            <div className="card">
              <div className="flex items-start gap-4 mb-5">
                <div className="w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                  <Image className="w-5 h-5 text-amber-600" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Banner Menu</h2>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Tampilkan gambar banner di bagian atas halaman menu.</p>
                </div>
              </div>

              <div className="ml-14 space-y-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1.5">URL Gambar Banner</label>
                  <input
                    type="text"
                    className="input-field w-full dark:bg-gray-800 dark:border-gray-600 dark:text-white"
                    placeholder="https://example.com/banner.jpg"
                    value={settings.menu_banner_image}
                    onChange={(e) => setSettings(s => ({ ...s, menu_banner_image: e.target.value }))}
                    maxLength={500}
                  />
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Rekomendasi ukuran 1200x300px. Kosongkan jika tidak ingin menampilkan banner.</p>
                </div>
                {settings.menu_banner_image && (
                  <div className="rounded-lg overflow-hidden border border-gray-200 dark:border-gray-600">
                    <img
                      src={settings.menu_banner_image}
                      alt="Banner preview"
                      className="w-full h-32 object-cover"
                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                    />
                  </div>
                )}
              </div>
            </div>

            {/* Reset Button */}
            <div className="flex justify-start">
              <button
                onClick={() => setSettings(s => ({
                  ...s,
                  menu_primary_color: '#4F46E5',
                  menu_bg_color: '#F9FAFB',
                  menu_card_color: '#FFFFFF',
                  menu_text_color: '#111827',
                  menu_banner_image: '',
                  menu_font: 'default',
                  menu_layout: 'card',
                }))}
                className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
              >
                <RotateCcw className="w-4 h-4" />
                Reset ke Default
              </button>
            </div>

            <div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
              <div className="flex gap-2">
                <Info className="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                <div className="text-xs text-blue-800 dark:text-blue-300 space-y-1">
                  <p>Perubahan tampilan akan langsung terlihat di halaman menu publik setelah disimpan.</p>
                  <p>Font Google akan di-load secara otomatis di halaman menu customer.</p>
                </div>
              </div>
            </div>
          </>
        )}

      </div>

      {/* Save button — always visible */}
      <div className="flex justify-end mt-6">
        <button
          onClick={handleSave}
          disabled={saving}
          className="btn-primary flex items-center gap-2"
        >
          {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
          Simpan Pengaturan
        </button>
      </div>
    </div>
  )
}