import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { useState, useEffect, useRef, createContext } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Lock, AlertTriangle, ShieldAlert, Search, Bell, ChevronRight } from 'lucide-react'
import Sidebar from '../components/Sidebar'
import useAuthStore from '../store/authStore'
import client from '../api/client'
import UserMenuButton from '../components/UserMenuButton'
import EditProfileModal from '../components/EditProfileModal'
import useLicenseStatus from '../hooks/useLicenseStatus'
import PhoneListener from '../components/PhoneListener'

export const LicenseContext = createContext(null)

const DIGITS = ['1','2','3','4','5','6','7','8','9','','0','⌫']

// ─── Route → title/breadcrumb map ────────────────────────────────────────────

const ROUTE_META = {
  '/dashboard':             { title: 'Εικόνα' },
  '/tables':                { title: 'Τραπέζια' },
  '/online-orders':         { title: 'Online Παραγγελίες' },
  '/crm/contacts':          { title: 'Επαφές',          crumbs: ['CRM', 'Επαφές'] },
  '/crm/customers':         { title: 'Πελάτες',         crumbs: ['CRM', 'Πελάτες'] },
  '/financials/expenses':   { title: 'Έξοδα',           crumbs: ['Οικονομικά', 'Έξοδα'] },
  '/financials/tabs':       { title: 'Καρτέλες Πελατών', crumbs: ['Οικονομικά', 'Καρτέλες Πελατών'] },
  '/management/products':   { title: 'Προϊόντα',        crumbs: ['Διαχείριση', 'Προϊόντα'] },
  '/management/tables':     { title: 'Τραπέζια',        crumbs: ['Διαχείριση', 'Τραπέζια'] },
  '/management/staff':      { title: 'Προσωπικό',       crumbs: ['Διαχείριση', 'Προσωπικό'] },
  '/management/schedule':   { title: 'Πρόγραμμα',       crumbs: ['Διαχείριση', 'Πρόγραμμα'] },
  '/inventory/throwaways':  { title: 'Απορρίμματα',     crumbs: ['Αποθήκη', 'Απορρίμματα'] },
  '/inventory/stock':       { title: 'Απόθεμα',         crumbs: ['Αποθήκη', 'Απόθεμα'] },
  '/reports/today':         { title: 'Σήμερα',          crumbs: ['Αναφορές', 'Σήμερα'] },
  '/reports/store':         { title: 'Κατάστημα',       crumbs: ['Αναφορές', 'Κατάστημα'] },
  '/reports/staff':         { title: 'Προσωπικό',       crumbs: ['Αναφορές', 'Προσωπικό'] },
  '/reports/products':      { title: 'Προϊόντα',        crumbs: ['Αναφορές', 'Προϊόντα'] },
  '/reports/prep-zones':    { title: 'Ζώνες Ετοιμασίας', crumbs: ['Αναφορές', 'Ζώνες Ετοιμασίας'] },
  '/reports/expenses':      { title: 'Έξοδα',           crumbs: ['Αναφορές', 'Έξοδα'] },
  '/reports/technical':     { title: 'Τεχνικά',         crumbs: ['Αναφορές', 'Τεχνικά'] },
  '/reports/misc':          { title: 'Λοιπά',           crumbs: ['Αναφορές', 'Λοιπά'] },
  '/apps':                  { title: 'Εφαρμογές' },
  '/apps/phone':            { title: 'Τηλέφωνο',          crumbs: ['Εφαρμογές', 'Τηλέφωνο'] },
  '/settings':              { title: 'Ρυθμίσεις' },
  '/notes':                 { title: 'Σημειώσεις' },
}

function PageTitle() {
  const { pathname } = useLocation()

  // Match exact first, then try prefix for dynamic routes like /orders/:id
  let meta = ROUTE_META[pathname]
  if (!meta && pathname.startsWith('/orders/')) {
    meta = { title: 'Order Detail', crumbs: ['Order Detail'] }
  }

  if (!meta) return <span className="text-[15px] font-semibold text-slate-800">XeniaPOS</span>

  if (!meta.crumbs) {
    return <span className="text-[15px] font-semibold text-slate-800">{meta.title}</span>
  }

  return (
    <nav className="flex items-center gap-1.5">
      {meta.crumbs.map((crumb, i) => {
        const isLast = i === meta.crumbs.length - 1
        return (
          <span key={i} className="flex items-center gap-1.5">
            {i > 0 && <ChevronRight size={13} className="text-slate-300 shrink-0" />}
            <span className={isLast
              ? 'text-[14px] font-semibold text-slate-800'
              : 'text-[13px] text-slate-400 font-medium'
            }>
              {crumb}
            </span>
          </span>
        )
      })}
    </nav>
  )
}

// ─── License Banner ───────────────────────────────────────────────────────────

function LicenseBanner({ license }) {
  const { lock_reason, locked, lock_pending, days_until_expiry, expires_at,
    grace_days_remaining, showExpiryWarning, inGracePeriod, isBlocked } = license

  function fmtDate(iso) {
    if (!iso) return ''
    try {
      return new Date(iso).toLocaleDateString('el-GR', { day: '2-digit', month: '2-digit', year: 'numeric' })
    } catch { return iso }
  }

  if (lock_reason === 'admin') {
    return (
      <div className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-[13px] font-medium">
        <ShieldAlert className="h-4 w-4 shrink-0" />
        {locked
          ? 'Το σύστημα έχει κλειδωθεί από διαχειριστή. Επικοινωνήστε με την υποστήριξη.'
          : 'Εκκρεμεί κλείδωμα από διαχειριστή — θα ενεργοποιηθεί μετά το κλείσιμο της τρέχουσας ημέρας.'}
      </div>
    )
  }

  if (isBlocked && lock_reason === 'expired') {
    const daysAgo = days_until_expiry != null ? Math.abs(days_until_expiry) : '?'
    return (
      <div className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-[13px] font-medium">
        <ShieldAlert className="h-4 w-4 shrink-0" />
        Η άδεια χρήσης έληξε πριν {daysAgo} {daysAgo === 1 ? 'μέρα' : 'μέρες'} ({fmtDate(expires_at)}). Ανανεώστε την άδεια ή επικοινωνήστε με την υποστήριξη.
      </div>
    )
  }

  if (inGracePeriod) {
    const daysAgo = days_until_expiry != null ? Math.abs(days_until_expiry) : '?'
    const remaining = grace_days_remaining ?? '?'
    return (
      <div className="flex items-center gap-2 px-4 py-2 bg-orange-500 text-white text-[13px] font-medium">
        <AlertTriangle className="h-4 w-4 shrink-0" />
        Η άδεια χρήσης έληξε στις {fmtDate(expires_at)} (πριν {daysAgo} {daysAgo === 1 ? 'μέρα' : 'μέρες'}). Απομένουν {remaining} {remaining === 1 ? 'μέρα' : 'μέρες'} περιόδου χάριτος. Ανανεώστε την άδεια για να αποφύγετε το κλείδωμα.
      </div>
    )
  }

  if (showExpiryWarning) {
    const days = days_until_expiry
    return (
      <div className="flex items-center gap-2 px-4 py-2 bg-amber-50 border-b border-amber-200 text-amber-700 text-[13px] font-medium">
        <AlertTriangle className="h-4 w-4 shrink-0" />
        Η άδεια χρήσης λήγει σε {days} {days === 1 ? 'μέρα' : 'μέρες'} ({fmtDate(expires_at)}). Ανανεώστε έγκαιρα.
      </div>
    )
  }

  return null
}

// ─── Lock Screen ──────────────────────────────────────────────────────────────

function LockScreen({ username, displayName, onUnlock, onLogout }) {
  const [pin, setPin] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  function pressDigit(d) {
    if (loading) return
    if (d === '⌫') { setPin(p => p.slice(0, -1)); setError(''); return }
    if (d === '') return
    if (pin.length >= 6) return
    setPin(p => p + d)
  }

  async function submitPin(usedPin) {
    if (usedPin.length < 4) return
    setError('')
    setLoading(true)
    try {
      const { data } = await client.post('/api/auth/login', { username, pin: usedPin })
      if (!data.user.perm_access_dashboard) {
        setError('Not a manager account.')
        setPin('')
        return
      }
      onUnlock(data.user, data.access_token)
    } catch {
      setError('Wrong PIN')
      setPin('')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (pin.length === 4) submitPin(pin)
  }, [pin])

  useEffect(() => {
    function onKeyDown(e) {
      if (loading) return
      if (e.key >= '0' && e.key <= '9') pressDigit(e.key)
      else if (e.key === 'Backspace') pressDigit('⌫')
    }
    window.addEventListener('keydown', onKeyDown)
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [pin, loading])

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-md">
      <div className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-xs text-center space-y-5">
        <div className="space-y-1">
          <div className="flex justify-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100">
              <Lock className="h-6 w-6 text-slate-500" />
            </div>
          </div>
          <p className="text-[15px] font-bold text-slate-900">Locked</p>
          <p className="text-[13px] text-slate-500">{displayName}</p>
        </div>

        <div className="space-y-3">
          <div className="flex justify-center gap-3">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className={`w-3.5 h-3.5 rounded-full border-2 transition-colors ${
                i < pin.length ? 'bg-sky-500 border-sky-500' : 'border-slate-300'
              }`} />
            ))}
          </div>
          <div className="grid grid-cols-3 gap-2">
            {DIGITS.map((d, i) => (
              <button
                key={i}
                type="button"
                onClick={() => pressDigit(d)}
                disabled={d === '' || loading}
                className={`h-12 rounded-xl text-lg font-semibold transition-colors ${
                  d === '' ? 'invisible'
                    : d === '⌫' ? 'bg-slate-100 hover:bg-slate-200 text-slate-600'
                    : 'bg-slate-100 hover:bg-sky-100 active:bg-sky-200 text-slate-800'
                } disabled:opacity-50`}
              >
                {d}
              </button>
            ))}
          </div>
        </div>

        {error && <p className="text-[12px] text-rose-500">{error}</p>}
        {loading && <p className="text-[12px] text-slate-400">Verifying…</p>}

        <button
          onClick={onLogout}
          className="text-[12px] text-slate-400 hover:text-slate-600 transition-colors"
        >
          Sign out instead
        </button>
      </div>
    </div>
  )
}

// ─── AppLayout ────────────────────────────────────────────────────────────────

export default function AppLayout() {
  const { user, savedUsername, logout, lock, unlock, locked } = useAuthStore()
  const [profileOpen, setProfileOpen] = useState(false)
  const navigate = useNavigate()
  const license = useLicenseStatus()

  const { data: securitySettings = null } = useQuery({
    queryKey: ['pos-settings'],
    queryFn: () => client.get('/api/settings/').then(r => r.data),
    staleTime: 10_000,
  })

  const stateRef = useRef({})
  stateRef.current = { user, locked, securitySettings, logout, lock, navigate }

  const lastActivityRef = useRef(Date.now())

  useEffect(() => {
    function onActivity() { lastActivityRef.current = Date.now() }

    const EVENTS = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll', 'click']
    EVENTS.forEach(ev => window.addEventListener(ev, onActivity, { passive: true }))

    const id = setInterval(() => {
      const { user, locked, securitySettings, logout, lock, navigate } = stateRef.current
      const idle = (Date.now() - lastActivityRef.current) / 1000
      if (!user || !securitySettings) return

      const get = (key, fb) => securitySettings?.[key]?.value ?? fb
      const autoLock    = get('security.auto_lock',    'false') === 'true'
      const autoLogout  = get('security.auto_logout',  'false') === 'true'
      if (!autoLock && !autoLogout) return

      const lockSecs   = autoLock   ? parseInt(get('security.auto_lock_seconds',   '300'),  10) : Infinity
      const logoutSecs = autoLogout ? parseInt(get('security.auto_logout_seconds', '1800'), 10) : Infinity

      if (idle >= logoutSecs) {
        logout()
        navigate('/login', { replace: true, state: { manualLogout: true } })
        return
      }

      if (!locked && idle >= lockSecs) {
        lock()
      }
    }, 1_000)

    return () => {
      clearInterval(id)
      EVENTS.forEach(ev => window.removeEventListener(ev, onActivity))
    }
  }, [])

  function handleLogout() {
    logout()
    navigate('/login', { replace: true, state: { manualLogout: true } })
  }

  function handleUnlock(u, t) {
    unlock(u, t)
    lastActivityRef.current = Date.now()
  }

  const loginUsername = user?.username || savedUsername || ''
  const displayName = user?.full_name || loginUsername

  return (
    <LicenseContext.Provider value={license}>
      <div className="flex h-screen overflow-hidden">
        {locked && loginUsername && (
          <LockScreen
            username={loginUsername}
            displayName={displayName || loginUsername}
            onUnlock={handleUnlock}
            onLogout={handleLogout}
          />
        )}

        <Sidebar />

        <div className="flex flex-col flex-1 min-w-0">
          <LicenseBanner license={license} />

          {/* ── Header ── */}
          <header className="flex items-center justify-between px-6 py-3 bg-white border-b border-slate-200 shrink-0 gap-4">
            {/* Left: page title / breadcrumbs */}
            <div className="flex items-center min-w-0">
              <PageTitle />
            </div>

            {/* Right: search + bell + lock + user */}
            <div className="flex items-center gap-2 shrink-0">
              {/* Search (placeholder) */}
              <div className="relative hidden sm:flex items-center">
                <Search className="absolute left-2.5 h-3.5 w-3.5 text-slate-400 pointer-events-none" />
                <input
                  type="text"
                  placeholder="Search…"
                  className="pl-8 pr-3 py-1.5 text-[13px] bg-slate-50 border border-slate-200 rounded-lg w-44 focus:outline-none focus:ring-2 focus:ring-sky-500/30 focus:border-sky-400 transition placeholder:text-slate-400"
                  readOnly
                />
              </div>

              {/* Notifications (placeholder) */}
              <button
                className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-50 hover:text-slate-700"
                title="Notifications"
              >
                <Bell className="h-3.5 w-3.5" />
              </button>

              {/* Divider */}
              <div className="h-5 w-px bg-slate-200" />

              {/* Lock */}
              <button
                onClick={lock}
                title="Lock"
                className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-50 hover:text-slate-700"
              >
                <Lock className="h-3.5 w-3.5" />
              </button>

              {/* User menu */}
              <UserMenuButton
                displayName={displayName}
                onEditProfile={() => setProfileOpen(true)}
                onSignOut={handleLogout}
              />
              {profileOpen && <EditProfileModal onClose={() => setProfileOpen(false)} />}
            </div>
          </header>

          <main className="flex-1 overflow-hidden flex flex-col min-h-0">
            <Outlet />
          </main>
        </div>

        <PhoneListener />
      </div>
    </LicenseContext.Provider>
  )
}
