import { useEffect, useState } from 'react'
import { ShieldAlert, X, Edit3, Lock } from 'lucide-react'
import { getOrgOverride, setOrgOverride, getEditMode, enableEditMode, disableEditMode } from '@/lib/api'
import { useMe } from '@/lib/useMe'

/** Полоса сверху страницы, видна только когда SuperAdmin вошёл в режим
 * «открыть как…» — все запросы летят с X-Org-Override, мутации заблокированы
 * на стороне API (ReadonlyOverrideMiddleware). По умолчанию read-only;
 * Phase 3: можно включить edit-mode на 30 минут с указанием причины — все
 * мутации в этом режиме пишутся в SuperAdminAuditLog.
 *
 * Защита от orphan-override: если в localStorage остался ключ
 * superAdminAsOrg от прошлого SuperAdmin-сеанса, а текущий юзер не
 * SuperAdmin — баннер не рендерим и сам override чистим из localStorage. */
export function SuperAdminAsOrgBanner() {
  const me = useMe()
  const ov = getOrgOverride()
  const edit = getEditMode()
  const [askReason, setAskReason] = useState(false)
  const [reason, setReason] = useState('')
  const isSuper = !!me.data?.roles?.includes('SuperAdmin')

  useEffect(() => {
    if (!me.data) return
    if (!isSuper && ov) {
      // Юзер не SuperAdmin, но lingering override остался — чистим тихо.
      setOrgOverride(null)
    }
  }, [isSuper, ov, me.data])

  if (!ov || !isSuper) return null

  const baseColor = edit ? 'bg-red-600' : 'bg-amber-500'
  const minutesLeft = edit ? Math.max(1, Math.round((edit.expiresAt - Date.now()) / 60000)) : 0

  return (
    <>
      <div className={`${baseColor} text-white text-sm flex items-center justify-between gap-3 px-4 py-2 shadow`}>
        <div className="flex items-center gap-2 min-w-0">
          <ShieldAlert className="w-4 h-4 flex-shrink-0" />
          <span className="truncate">
            🛡️ ВЫ В РЕЖИМЕ СУПЕР-АДМИНА — ОРГАНИЗАЦИЯ <strong>«{ov.name}»</strong>
            {edit
              ? <> — <strong>EDIT-MODE</strong> ({minutesLeft} мин), мутации пишутся в журнал</>
              : <> — ТОЛЬКО ПРОСМОТР</>}
          </span>
        </div>
        <div className="flex items-center gap-2 flex-shrink-0">
          {!edit ? (
            <button onClick={() => setAskReason(true)}
              className="flex items-center gap-1 px-2 py-0.5 rounded bg-white/20 hover:bg-white/30 text-xs">
              <Edit3 className="w-3.5 h-3.5" /> Включить редактирование
            </button>
          ) : (
            <button onClick={disableEditMode}
              className="flex items-center gap-1 px-2 py-0.5 rounded bg-white/20 hover:bg-white/30 text-xs">
              <Lock className="w-3.5 h-3.5" /> Снять edit
            </button>
          )}
          <button onClick={() => setOrgOverride(null, { redirectTo: '/super-admin/organizations' })}
            className="flex items-center gap-1 px-2 py-0.5 rounded bg-white/20 hover:bg-white/30">
            <X className="w-3.5 h-3.5" /> Выйти
          </button>
        </div>
      </div>

      {askReason && (
        <div className="fixed inset-0 z-[200] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm" onClick={() => setAskReason(false)}>
          <div className="w-full max-w-md bg-white dark:bg-slate-900 rounded-xl shadow-xl p-5 m-4" onClick={(e) => e.stopPropagation()}>
            <h2 className="text-lg font-semibold mb-2">Включить редактирование на 30 минут</h2>
            <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
              Каждое изменение будет записано в журнал супер-админа с этой причиной.
              Минимум 10 символов.
            </p>
            <textarea
              value={reason} onChange={(e) => setReason(e.target.value)}
              rows={3} placeholder="Например: запрос клиента в тикете #42 — поправить цены"
              className="w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)]"
            />
            <label className="flex items-start gap-2 mt-3 text-xs text-slate-600 dark:text-slate-400">
              <input type="checkbox" id="ack-audit" className="mt-0.5" />
              <span>Я понимаю что мои действия будут записаны в журнал и доступны для аудита.</span>
            </label>
            <div className="flex justify-end gap-2 mt-4">
              <button onClick={() => setAskReason(false)} className="px-3 py-1.5 rounded-md border border-slate-300 dark:border-slate-600 text-sm">Отмена</button>
              <button
                disabled={reason.trim().length < 10}
                onClick={() => {
                  const ack = (document.getElementById('ack-audit') as HTMLInputElement | null)?.checked
                  if (!ack) { alert('Подтвердите согласие на аудит'); return }
                  enableEditMode(reason)
                }}
                className="px-3 py-1.5 rounded-md bg-red-600 text-white text-sm disabled:opacity-50">
                Включить на 30 мин
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}
