import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import toast from 'react-hot-toast'
import { Shield, Lock, LogOut, User, KeyRound, ShieldCheck, Copy, RefreshCw, X } from 'lucide-react'
import client from '../../../api/client'
import { PANEL_CLASS } from '../../../ui/tokens'
import Button from '../../../ui/Button'

const INACTIVITY_PRESETS = [
  { label: '5 δευτερόλεπτα',   value: 5 },
  { label: '10 δευτερόλεπτα',  value: 10 },
  { label: '30 δευτερόλεπτα',  value: 30 },
  { label: '1 λεπτό',          value: 60 },
  { label: '2 λεπτά',          value: 120 },
  { label: '5 λεπτά',          value: 300 },
  { label: '10 λεπτά',         value: 600 },
  { label: '15 λεπτά',         value: 900 },
  { label: '30 λεπτά',         value: 1800 },
  { label: '1 ώρα',            value: 3600 },
]

function fmtSeconds(s) {
  const n = parseInt(s, 10)
  if (isNaN(n) || n <= 0) return ''
  if (n < 60) return `${n}s`
  if (n < 3600) return `${Math.round(n / 60)}m`
  return `${Math.round(n / 3600)}h`
}

// ─── Shared primitives ────────────────────────────────────────────────────────

function SectionCard({ icon: Icon, title, description, children }) {
  return (
    <div className={`${PANEL_CLASS} divide-y divide-gray-100`}>
      <div className="flex items-start gap-3 px-5 py-4">
        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 flex-shrink-0 mt-0.5">
          <Icon className="h-4 w-4 text-sky-500" />
        </div>
        <div>
          <p className="font-semibold text-gray-700">{title}</p>
          {description && <p className="text-xs text-gray-400 mt-0.5">{description}</p>}
        </div>
      </div>
      {children}
    </div>
  )
}

function OptionRow({ label, description, children }) {
  return (
    <div className="flex items-center justify-between gap-4 px-5 py-4">
      <div className="min-w-0">
        <p className="text-sm font-medium text-gray-800">{label}</p>
        {description && <p className="text-xs text-gray-500 mt-0.5">{description}</p>}
      </div>
      <div className="flex-shrink-0">{children}</div>
    </div>
  )
}

function Toggle({ checked, onChange, disabled }) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      onClick={() => !disabled && onChange(!checked)}
      disabled={disabled}
      className={`relative w-11 h-6 rounded-full transition-colors duration-200 flex-shrink-0 disabled:opacity-50 ${
        checked ? 'bg-sky-500' : 'bg-slate-200'
      }`}
    >
      <span className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-all duration-200 ${
        checked ? 'left-6' : 'left-1'
      }`} />
    </button>
  )
}

function SegmentedControl({ options, value, onChange, disabled }) {
  return (
    <div className="flex rounded-lg border border-gray-200 overflow-hidden bg-gray-50 p-0.5 gap-0.5">
      {options.map(opt => (
        <button
          key={opt.value}
          type="button"
          onClick={() => !disabled && onChange(opt.value)}
          disabled={disabled}
          className={`px-3 py-1.5 text-xs font-medium rounded-md transition-all ${
            value === opt.value
              ? 'bg-white text-gray-800 shadow-sm'
              : 'text-gray-500 hover:text-gray-700'
          }`}
        >
          {opt.label}
        </button>
      ))}
    </div>
  )
}

function TimeSelect({ value, onChange, disabled }) {
  return (
    <div className="flex items-center gap-2">
      <select
        value={value}
        onChange={e => onChange(e.target.value)}
        disabled={disabled}
        className="h-8 rounded-md border border-gray-200 bg-white px-2 text-sm text-gray-700 focus:outline-none focus:border-sky-400 disabled:opacity-50"
      >
        {INACTIVITY_PRESETS.map(p => (
          <option key={p.value} value={String(p.value)}>{p.label}</option>
        ))}
      </select>
    </div>
  )
}

// ─── Recovery Codes section ───────────────────────────────────────────────────

function RecoveryCodesSection() {
  const [revealedCodes, setRevealedCodes] = useState(null)
  const [confirming, setConfirming] = useState(false)

  const { data: statusData, refetch: refetchStatus } = useQuery({
    queryKey: ['recovery-code-status'],
    queryFn: () => client.get('/api/recovery/status').then(r => r.data),
  })

  const generateMut = useMutation({
    mutationFn: () => client.post('/api/recovery/generate').then(r => r.data),
    onSuccess: (data) => {
      setRevealedCodes(data.codes)
      setConfirming(false)
      refetchStatus()
    },
    onError: () => toast.error('Σφάλμα δημιουργίας κωδικών'),
  })

  const unused = statusData?.unused_count ?? null

  function copyAll() {
    if (!revealedCodes) return
    navigator.clipboard.writeText(revealedCodes.join('\n'))
    toast.success('Οι κωδικοί αντιγράφηκαν!')
  }

  return (
    <SectionCard
      icon={ShieldCheck}
      title="Κωδικοί Ανάκτησης"
      description="Μονόχρηστοι κωδικοί έκτακτης ανάγκης. Κάθε κωδικός χρησιμοποιείται μία φορά και καίγεται."
    >
      <div className="px-5 py-4 space-y-4">

        {/* Status badge */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="text-sm text-gray-700">Διαθέσιμοι κωδικοί:</span>
            {unused === null ? (
              <span className="text-xs text-gray-400">Φόρτωση…</span>
            ) : (
              <span className={`text-sm font-bold ${
                unused === 0 ? 'text-rose-600' : unused <= 2 ? 'text-amber-600' : 'text-emerald-600'
              }`}>
                {unused} / 5
              </span>
            )}
          </div>
          {unused === 0 && (
            <span className="text-[11px] bg-rose-50 text-rose-600 border border-rose-200 rounded-full px-2 py-0.5 font-medium">
              Δεν υπάρχουν κωδικοί!
            </span>
          )}
          {unused > 0 && unused <= 2 && (
            <span className="text-[11px] bg-amber-50 text-amber-600 border border-amber-200 rounded-full px-2 py-0.5 font-medium">
              Λίγοι κωδικοί
            </span>
          )}
        </div>

        {/* Revealed codes (shown once after generation) */}
        {revealedCodes && (
          <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4 space-y-3">
            <div className="flex items-center justify-between">
              <p className="text-[12px] font-semibold text-emerald-800">
                Αντιγράψτε τώρα — δεν θα εμφανιστούν ξανά!
              </p>
              <button onClick={() => setRevealedCodes(null)} className="text-emerald-500 hover:text-emerald-700">
                <X className="h-4 w-4" />
              </button>
            </div>
            <div className="space-y-1.5">
              {revealedCodes.map((code, i) => (
                <div key={i} className="flex items-center justify-between rounded-lg bg-white border border-emerald-200 px-3 py-2">
                  <span className="font-mono text-sm font-semibold text-emerald-900 tracking-wider">{code}</span>
                  <button
                    onClick={() => { navigator.clipboard.writeText(code); toast.success('Αντιγράφηκε') }}
                    className="text-emerald-400 hover:text-emerald-600"
                  >
                    <Copy className="h-3.5 w-3.5" />
                  </button>
                </div>
              ))}
            </div>
            <Button variant="secondary" className="w-full justify-center gap-2 text-[13px]" onClick={copyAll}>
              <Copy className="h-3.5 w-3.5" /> Αντιγραφή όλων
            </Button>
          </div>
        )}

        {/* Generate / confirm */}
        {!revealedCodes && (
          confirming ? (
            <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 space-y-3">
              <p className="text-[13px] text-amber-800">
                Αυτό θα <strong>ακυρώσει</strong> τους {unused} υπάρχοντες κωδικούς και θα δημιουργήσει 5 νέους.
              </p>
              <div className="flex gap-2">
                <Button
                  variant="danger"
                  className="flex-1 justify-center text-[13px]"
                  onClick={() => generateMut.mutate()}
                  disabled={generateMut.isPending}
                >
                  {generateMut.isPending ? 'Δημιουργία…' : 'Ναι, δημιούργησε νέους'}
                </Button>
                <Button variant="secondary" className="flex-1 justify-center text-[13px]" onClick={() => setConfirming(false)}>
                  Άκυρο
                </Button>
              </div>
            </div>
          ) : (
            <Button
              variant={unused === 0 ? 'primary' : 'secondary'}
              className="w-full justify-center gap-2 text-[13px]"
              onClick={() => unused > 0 ? setConfirming(true) : generateMut.mutate()}
              disabled={generateMut.isPending}
            >
              <RefreshCw className="h-3.5 w-3.5" />
              {unused === 0 ? 'Δημιουργία κωδικών ανάκτησης' : 'Αναδημιουργία κωδικών'}
            </Button>
          )
        )}

        <p className="text-[11px] text-gray-400">
          Αποθηκεύστε τους σε ασφαλές μέρος. Κάθε κωδικός δουλεύει μόνο μία φορά.
          Χρησιμοποιείται στη σελίδα σύνδεσης με το όνομα χρήστη + κωδικό ανάκτησης.
        </p>
      </div>
    </SectionCard>
  )
}


// ─── Main tab ─────────────────────────────────────────────────────────────────

export default function SecurityTab() {
  const qc = useQueryClient()

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

  const updateMut = useMutation({
    mutationFn: ({ key, value }) => client.put(`/api/settings/${key}`, { value }),
    onSuccess: () => {
      toast.success('Αποθηκεύτηκε')
      qc.invalidateQueries({ queryKey: ['pos-settings'] })
    },
    onError: () => toast.error('Σφάλμα αποθήκευσης'),
  })

  function get(key, fallback) {
    return settings?.[key]?.value ?? fallback
  }

  function save(key, value) {
    updateMut.mutate({ key, value })
  }

  const busy = updateMut.isPending

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-48 text-slate-400 text-[13px]">
        Φόρτωση…
      </div>
    )
  }

  const loginMethod       = get('security.login_method', 'password')
  const autofill          = get('security.autofill_username', 'true') === 'true'
  const autoLock          = get('security.auto_lock', 'false') === 'true'
  const autoLockSecs      = get('security.auto_lock_seconds', '300')
  const autoLogout        = get('security.auto_logout', 'false') === 'true'
  const autoLogoutSecs    = get('security.auto_logout_seconds', '1800')

  return (
    <div className="space-y-5">

      {/* ── Μέθοδος σύνδεσης ─────────────────────────────────────────────── */}
      <SectionCard
        icon={KeyRound}
        title="Σύνδεση"
        description="Τι διαπιστευτήρια απαιτούνται όταν η εφαρμογή ξεκινά ή μετά από πλήρη αποσύνδεση."
      >
        <OptionRow
          label="Μέθοδος σύνδεσης"
          description="Πώς πιστοποιούνται οι διαχειριστές κατά την πρώτη πρόσβαση."
        >
          <SegmentedControl
            value={loginMethod}
            onChange={v => save('security.login_method', v)}
            disabled={busy}
            options={[
              { value: 'password', label: 'Κωδικός' },
              { value: 'pin',      label: 'PIN' },
              { value: 'none',     label: 'Κανένα' },
            ]}
          />
        </OptionRow>

        {loginMethod === 'none' && (
          <div className="mx-5 mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-[12px] text-amber-700">
            <strong>Προσοχή:</strong> με έναν μόνο λογαριασμό διαχειριστή, η εφαρμογή θα ανοίγει χωρίς πιστοποίηση.
            Χρησιμοποιήστε αυτό μόνο σε φυσικά ασφαλή, ιδιωτική συσκευή.
          </div>
        )}

        <OptionRow
          label="Αυτόματη συμπλήρωση ονόματος χρήστη"
          description="Όταν υπάρχει μόνο ένας διαχειριστής, παράλειψη του πεδίου ονόματος."
        >
          <Toggle
            checked={autofill}
            onChange={v => save('security.autofill_username', v ? 'true' : 'false')}
            disabled={busy}
          />
        </OptionRow>
      </SectionCard>

      {/* ── Αυτόματο κλείδωμα ────────────────────────────────────────────── */}
      <SectionCard
        icon={Lock}
        title="Αυτόματο Κλείδωμα"
        description="Κλειδώνει την οθόνη μετά από αδράνεια. Ξεκλειδώνεται μόνο με PIN — γρήγορο και ασφαλές."
      >
        <OptionRow label="Ενεργοποίηση αυτόματου κλειδώματος" description="Εμφάνιση οθόνης κλειδώματος PIN μετά από αδράνεια.">
          <Toggle
            checked={autoLock}
            onChange={v => save('security.auto_lock', v ? 'true' : 'false')}
            disabled={busy}
          />
        </OptionRow>

        {autoLock && (
          <OptionRow
            label="Κλείδωμα μετά από"
            description={`Η οθόνη κλειδώνει μετά από ${fmtSeconds(autoLockSecs)} αδράνειας.`}
          >
            <TimeSelect
              value={autoLockSecs}
              onChange={v => save('security.auto_lock_seconds', v)}
              disabled={busy}
            />
          </OptionRow>
        )}
      </SectionCard>

      {/* ── Αυτόματη αποσύνδεση ──────────────────────────────────────────── */}
      <SectionCard
        icon={LogOut}
        title="Αυτόματη Αποσύνδεση"
        description="Αποσυνδέεται πλήρως μετά από αδράνεια. Απαιτεί εκ νέου πλήρη εισαγωγή διαπιστευτηρίων."
      >
        <OptionRow label="Ενεργοποίηση αυτόματης αποσύνδεσης" description="Πλήρης αποσύνδεση μετά από αδράνεια.">
          <Toggle
            checked={autoLogout}
            onChange={v => save('security.auto_logout', v ? 'true' : 'false')}
            disabled={busy}
          />
        </OptionRow>

        {autoLogout && (
          <OptionRow
            label="Αποσύνδεση μετά από"
            description={`Πλήρης αποσύνδεση μετά από ${fmtSeconds(autoLogoutSecs)} αδράνειας.`}
          >
            <TimeSelect
              value={autoLogoutSecs}
              onChange={v => save('security.auto_logout_seconds', v)}
              disabled={busy}
            />
          </OptionRow>
        )}

        {autoLock && autoLogout && parseInt(autoLogoutSecs, 10) <= parseInt(autoLockSecs, 10) && (
          <div className="mx-5 mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-[12px] text-amber-700">
            Ο χρόνος αποσύνδεσης είναι μικρότερος ή ίσος με τον χρόνο κλειδώματος — η οθόνη θα αποσυνδεθεί πριν κλειδώσει.
          </div>
        )}
      </SectionCard>

      {/* ── Κωδικοί Ανάκτησης ────────────────────────────────────────────── */}
      <RecoveryCodesSection />

    </div>
  )
}
