'use client'

/**
 * ApprovalModal - 全屏審核 Modal
 * ===============================
 * Phase 17: UI/UX 修復 - 取代 SlidePanel
 *
 * 設計決策:
 * - 審核是關鍵決策，需要用戶全神貫注
 * - 全屏遮罩強制用戶注意，防止誤操作
 * - 居中對話框提供足夠空間顯示所有資訊
 * - 符合 Nothing.tech「一次專注一件事」設計哲學
 * - 使用 Portal 渲染到 body，確保不受父容器限制
 *
 * 參考: GitHub PR Review, AWS IAM Console
 */

import { useEffect, useCallback, useState } from 'react'
import { createPortal } from 'react-dom'
import { useTranslations } from 'next-intl'
import { cn } from '@/lib/utils'
import { X, ChevronLeft, ChevronRight, Shield } from 'lucide-react'

interface ApprovalModalProps {
  open: boolean
  onClose: () => void
  children: React.ReactNode
  title?: string
  /** 上一個/下一個導航 */
  onPrev?: () => void
  onNext?: () => void
  /** 當前位置 (1-based) */
  current?: number
  total?: number
}

export function ApprovalModal({
  open,
  onClose,
  children,
  title,
  onPrev,
  onNext,
  current,
  total,
}: ApprovalModalProps) {
  const t = useTranslations('common')
  const tApproval = useTranslations('approval')
  const displayTitle = title ?? tApproval('title')
  // ESC 關閉 + 方向鍵導航
  const handleKeyDown = useCallback((e: KeyboardEvent) => {
    if (e.key === 'Escape') onClose()
    if (e.key === 'ArrowLeft' && onPrev) onPrev()
    if (e.key === 'ArrowRight' && onNext) onNext()
  }, [onClose, onPrev, onNext])

  // Portal 目標
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  // 鎖定背景滾動
  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden'
      document.addEventListener('keydown', handleKeyDown)
    }
    return () => {
      document.body.style.overflow = ''
      document.removeEventListener('keydown', handleKeyDown)
    }
  }, [open, handleKeyDown])

  if (!open || !mounted) return null

  // 使用 Portal 渲染到 body，確保全屏覆蓋
  return createPortal(
    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
      {/* Backdrop - 深色遮罩，強調聚焦 */}
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200"
        onClick={onClose}
      />

      {/* Modal Container */}
      <div
        className={cn(
          'relative z-10 w-full max-w-2xl max-h-[90vh]',
          'bg-white rounded-2xl shadow-2xl',
          'flex flex-col',
          'animate-in zoom-in-95 fade-in duration-200',
          'mx-4' // 手機邊距
        )}
      >
        {/* Header */}
        <div className="flex-shrink-0 flex items-center justify-between px-6 py-4 border-b border-nothing-gray-100">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-claw-blue/10 rounded-xl">
              <Shield className="w-5 h-5 text-claw-blue" />
            </div>
            <div>
              <h2 className="font-heading text-lg font-bold text-nothing-gray-900">
                {displayTitle}
              </h2>
              <p className="text-xs text-nothing-gray-500 font-mono">
                Multi-Sig Authorization Required
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3">
            {/* 導航控制 */}
            {(onPrev || onNext) && current && total && total > 1 && (
              <div className="flex items-center gap-2 px-3 py-1.5 bg-nothing-gray-50 rounded-lg">
                <button
                  onClick={onPrev}
                  disabled={current <= 1}
                  className={cn(
                    'p-1 rounded transition-colors',
                    current <= 1
                      ? 'text-nothing-gray-300 cursor-not-allowed'
                      : 'text-nothing-gray-600 hover:bg-nothing-gray-200'
                  )}
                  title={t('previous')}
                >
                  <ChevronLeft className="w-4 h-4" />
                </button>
                <span className="text-sm font-mono text-nothing-gray-600 tabular-nums min-w-[3rem] text-center">
                  {current} / {total}
                </span>
                <button
                  onClick={onNext}
                  disabled={current >= total}
                  className={cn(
                    'p-1 rounded transition-colors',
                    current >= total
                      ? 'text-nothing-gray-300 cursor-not-allowed'
                      : 'text-nothing-gray-600 hover:bg-nothing-gray-200'
                  )}
                  title={t('next')}
                >
                  <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            )}

            {/* 關閉按鈕 */}
            <button
              onClick={onClose}
              className="p-2 rounded-xl hover:bg-nothing-gray-100 transition-colors"
              title={t('closeEsc')}
            >
              <X className="w-5 h-5 text-nothing-gray-500" />
            </button>
          </div>
        </div>

        {/* Content - 可滾動 */}
        <div className="flex-1 overflow-y-auto p-6">
          {children}
        </div>
      </div>
    </div>,
    document.body
  )
}
