'use client'

/**
 * OpenClawStateMachine - 戰情室 AI 狀態機整合
 * ==========================================
 * Phase 5: OpenClaw 實體化升級
 *
 * Features:
 * - 三態狀態機 (idle / thinking / awaiting_approval)
 * - 真實 API 輪詢 (/api/v1/approvals/pending)
 * - ThinkingStream 打字機動畫
 * - ApprovalCard 滑入動畫
 * - 記憶體安全清理
 *
 * 真實性條款：禁止以範例資料掩蓋 API 狀態
 * i18n: 100% next-intl
 */

import { useState, useEffect, useCallback, useRef } from 'react'
import { useTranslations } from 'next-intl'
import { cn } from '@/lib/utils'
import { useCSRF } from '@/hooks/useCSRF'
import { OpenClawPanel, type OpenClawStatus } from './openclaw-panel'
import type { ThinkingStream as _ThinkingStream, DEFAULT_THINKING_MESSAGES as _DEFAULT_THINKING_MESSAGES } from './thinking-stream'
import { ApprovalCard, type ApprovalRequest } from '@/components/approval/approval-card'
import { ApprovalModal } from '@/components/ui/approval-modal'
import { RefreshCw, AlertCircle, CheckCircle2, AlertTriangle, ChevronRight } from 'lucide-react'
import { CURRENT_USER } from '@/lib/constants'

// =============================================================================
// Types
// =============================================================================

export type MachineState = 'idle' | 'thinking' | 'awaiting_approval'

export interface OpenClawStateMachineProps {
  /** 啟用 Demo 模式 (僅供開發測試) */
  demoMode?: boolean
  /** API 輪詢間隔 (ms) */
  pollInterval?: number
  className?: string
}

interface PendingApprovalsResponse {
  count: number
  approvals: ApprovalRequest[]
}

// =============================================================================
// API Helper
// =============================================================================

const getApiBaseUrl = (): string => {
  if (typeof window === 'undefined') return ''
  // 專案鐵律: 禁止任何 Fallback IP
  const url = process.env.NEXT_PUBLIC_API_URL
  if (!url) {
    console.error('[AWOOOI ERROR] Missing NEXT_PUBLIC_API_URL')
    return ''
  }
  return url
}

// API response uses snake_case, frontend uses camelCase
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function transformApiResponse(apiApproval: any): ApprovalRequest {
  return {
    id: apiApproval.id,
    action: apiApproval.action,
    description: apiApproval.description,
    riskLevel: apiApproval.risk_level,
    blastRadius: {
      affectedPods: apiApproval.blast_radius?.affected_pods ?? 0,
      estimatedDowntime: apiApproval.blast_radius?.estimated_downtime ?? '0',
      relatedServices: apiApproval.blast_radius?.related_services ?? [],
      dataImpact: ((apiApproval.blast_radius?.data_impact ?? 'none').toUpperCase()) as 'NONE' | 'READ_ONLY' | 'WRITE' | 'DESTRUCTIVE',
    },
    dryRunChecks: apiApproval.dry_run_checks ?? [],
    requiredSignatures: apiApproval.required_signatures ?? 2,
    currentSignatures: apiApproval.current_signatures ?? 0,
    requestedBy: apiApproval.requested_by ?? 'OpenClaw',
    requestedAt: apiApproval.created_at ?? new Date().toISOString(),
    hitCount: apiApproval.hit_count,
    lastSeenAt: apiApproval.last_seen_at,
    fingerprint: apiApproval.fingerprint,
  }
}

// =============================================================================
// Component
// =============================================================================

export function OpenClawStateMachine({
  demoMode = false,
  pollInterval = 5000,
  className,
}: OpenClawStateMachineProps) {
  const t = useTranslations()
  const { csrfToken } = useCSRF()

  // State
  const [machineState, setMachineState] = useState<MachineState>('idle')
  const [openclawStatus, setOpenclawStatus] = useState<OpenClawStatus>('patrolling')
  const [pendingApprovals, setPendingApprovals] = useState<ApprovalRequest[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [lastFetch, setLastFetch] = useState<Date | null>(null)

  // Slide Panel 狀態
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
  const selectedApproval = selectedIndex !== null ? pendingApprovals[selectedIndex] : null

  // 2026-03-26: 簽核後保留內容顯示 (feedback_approval_preserve_content.md)
  // 儲存剛簽核/拒絕的項目，顯示結果後再清除
  const [processedApproval, setProcessedApproval] = useState<{
    approval: ApprovalRequest
    action: 'approved' | 'rejected'
    timestamp: Date
  } | null>(null)

  // Timer refs for cleanup
  const pollTimerRef = useRef<NodeJS.Timeout | null>(null)

  // 導航
  const handlePrevApproval = useCallback(() => {
    if (selectedIndex !== null && selectedIndex > 0) {
      setSelectedIndex(selectedIndex - 1)
    }
  }, [selectedIndex])

  const handleNextApproval = useCallback(() => {
    if (selectedIndex !== null && selectedIndex < pendingApprovals.length - 1) {
      setSelectedIndex(selectedIndex + 1)
    }
  }, [selectedIndex, pendingApprovals.length])

  // ==========================================================================
  // API: Fetch Pending Approvals
  // ==========================================================================
  const fetchPendingApprovals = useCallback(async (): Promise<number> => {
    const apiBaseUrl = getApiBaseUrl()
    if (!apiBaseUrl) return 0

    setIsLoading(true)
    setError(null)

    try {
      const response = await fetch(`${apiBaseUrl}/api/v1/approvals/pending`, {
        headers: { 'Content-Type': 'application/json' },
      })

      if (!response.ok) {
        throw new Error(`API Error: ${response.status}`)
      }

      const rawData = await response.json()
      const data: PendingApprovalsResponse = {
        count: rawData.count,
        approvals: (rawData.approvals ?? []).map(transformApiResponse),
      }
      setPendingApprovals(data.approvals)
      setLastFetch(new Date())

      // Update machine state based on approvals
      if (data.count > 0) {
        setMachineState('awaiting_approval')
        setOpenclawStatus('complete')
      } else {
        setMachineState('idle')
        setOpenclawStatus('patrolling')
      }

      console.log('[OpenClaw] Fetched approvals:', data.count)
      return data.count
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Unknown error'
      setError(message)
      console.error('[OpenClaw] Fetch error:', message)
      return 0
    } finally {
      setIsLoading(false)
    }
  }, [])

  // ==========================================================================
  // API: Submit Signature
  // ==========================================================================
  // 🔧 修復 Multi-Sig Bug: 每次簽核使用不同的 signer_id
  const signerCounter = useRef(0)

  const handleApprove = useCallback(async (approvalId: string) => {
    const apiBaseUrl = getApiBaseUrl()
    if (!apiBaseUrl) return

    // Multi-Sig: 輪替簽核者身份
    const signers = [
      { id: 'cto-ogt', name: '平台負責人 (CTO)' },
      { id: 'ciso-security', name: '資安長 (CISO)' },
      { id: 'cpo-product', name: '產品長 (CPO)' },
    ]
    const signer = signers[signerCounter.current % signers.length]
    signerCounter.current++

    try {
      const headers: Record<string, string> = { 'Content-Type': 'application/json' }
      if (csrfToken) headers['X-CSRF-Token'] = csrfToken

      const response = await fetch(`${apiBaseUrl}/api/v1/approvals/${approvalId}/sign`, {
        method: 'POST',
        headers,
        credentials: 'include',
        body: JSON.stringify({
          signer_id: signer.id,
          signer_name: signer.name,
          comment: 'Approved via AWOOOI Dashboard',
        }),
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.detail || `Sign failed: ${response.status}`)
      }

      console.log('[OpenClaw] Approval signed by', signer.name, ':', approvalId)
      // Refresh approvals list and return new count
      const newCount = await fetchPendingApprovals()
      return newCount
    } catch (err) {
      console.error('[OpenClaw] Sign error:', err)
      setError(err instanceof Error ? err.message : 'Sign failed')
      return -1
    }
  }, [fetchPendingApprovals, csrfToken])

  // ==========================================================================
  // API: Reject Request
  // ==========================================================================
  const handleReject = useCallback(async (approvalId: string) => {
    const apiBaseUrl = getApiBaseUrl()
    if (!apiBaseUrl) return

    try {
      const response = await fetch(`${apiBaseUrl}/api/v1/approvals/${approvalId}/reject`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          rejector_id: CURRENT_USER.id,
          rejector_name: CURRENT_USER.name,
          reason: 'Rejected via AWOOOI Dashboard',
        }),
      })

      if (!response.ok) {
        throw new Error(`Reject failed: ${response.status}`)
      }

      console.log('[OpenClaw] Approval rejected:', approvalId)
      // Refresh approvals list
      await fetchPendingApprovals()
    } catch (err) {
      console.error('[OpenClaw] Reject error:', err)
      setError(err instanceof Error ? err.message : 'Reject failed')
    }
  }, [fetchPendingApprovals])

  // ==========================================================================
  // Polling Effect
  // ==========================================================================
  useEffect(() => {
    // Skip polling in demo mode
    if (demoMode) return

    // Initial fetch
    fetchPendingApprovals()

    // Start polling
    pollTimerRef.current = setInterval(fetchPendingApprovals, pollInterval)

    // Cleanup
    return () => {
      if (pollTimerRef.current) {
        clearInterval(pollTimerRef.current)
        pollTimerRef.current = null
      }
    }
  }, [demoMode, pollInterval, fetchPendingApprovals])

  // ==========================================================================
  // Render
  // ==========================================================================
  return (
    <div className={cn('space-y-4', className)}>
      {/* Status Bar */}
      <div className="flex items-center justify-between px-1">
        <div className="flex items-center gap-2">
          <span className="font-body text-xs text-nothing-gray-500">
            STATE:
          </span>
          <span
            className={cn(
              'px-2 py-0.5 rounded text-[10px] font-body font-bold uppercase',
              machineState === 'idle' && 'bg-nothing-gray-100 text-nothing-gray-600',
              machineState === 'thinking' && 'bg-status-thinking/10 text-status-thinking',
              machineState === 'awaiting_approval' && 'bg-status-warning/10 text-status-warning'
            )}
          >
            {machineState}
          </span>
        </div>

        <div className="flex items-center gap-2">
          {/* Loading indicator */}
          {isLoading && (
            <RefreshCw className="w-3 h-3 text-nothing-gray-400 animate-spin" />
          )}

          {/* Error indicator */}
          {error && (
            <div className="flex items-center gap-1 text-status-critical">
              <AlertCircle className="w-3 h-3" />
              <span className="text-[10px] font-body">{error}</span>
            </div>
          )}

          {/* Manual refresh button */}
          <button
            onClick={fetchPendingApprovals}
            disabled={isLoading}
            className={cn(
              'flex items-center gap-1 px-2 py-1 rounded text-[10px] font-body',
              'bg-nothing-gray-100 text-nothing-gray-600',
              'hover:bg-nothing-gray-200 transition-colors',
              'disabled:opacity-50 disabled:cursor-not-allowed'
            )}
          >
            <RefreshCw className="w-3 h-3" />
            REFRESH
          </button>
        </div>
      </div>

      {/* OpenClaw Visual */}
      <OpenClawPanel
        status={openclawStatus}
        alertType={pendingApprovals.length > 0 ? 'POD_CRASH' : undefined}
      />

      {/* Pending Approvals List - 緊湊列表模式 */}
      {pendingApprovals.length > 0 && (
        <div className="space-y-2">
          {/* 批次操作提示 */}
          <div className="flex items-center justify-between px-1 mb-2">
            <span className="text-[10px] font-body text-nothing-gray-400">
              {pendingApprovals.length} 筆待簽核
            </span>
            <span className="text-[10px] font-body text-nothing-gray-400">
              點擊查看詳情
            </span>
          </div>

          {/* 緊湊列表 */}
          {pendingApprovals.map((approval, index) => {
            const isCritical = approval.riskLevel === 'critical'
            const isHigh = approval.riskLevel === 'high'
            const title = approval.action.includes('|')
              ? approval.action.split('|')[0].trim()
              : approval.action

            return (
              <div
                key={approval.id}
                onClick={() => setSelectedIndex(index)}
                className={cn(
                  'group flex items-center gap-3 p-3 rounded-xl cursor-pointer',
                  'bg-white border transition-all duration-200',
                  'hover:shadow-md hover:-translate-y-0.5',
                  isCritical && 'border-l-4 border-l-status-critical border-status-critical/30 bg-status-critical/5',
                  isHigh && 'border-l-4 border-l-status-warning border-status-warning/30',
                  !isCritical && !isHigh && 'border-nothing-gray-200 hover:border-nothing-gray-300',
                  selectedIndex === index && 'ring-2 ring-claw-blue'
                )}
              >
                {/* 風險指示器 */}
                <div className={cn(
                  'flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center',
                  isCritical && 'bg-status-critical/10',
                  isHigh && 'bg-status-warning/10',
                  approval.riskLevel === 'medium' && 'bg-status-warning/10',
                  approval.riskLevel === 'low' && 'bg-status-healthy/10'
                )}>
                  {isCritical || isHigh ? (
                    <AlertTriangle className={cn(
                      'w-4 h-4',
                      isCritical ? 'text-status-critical' : 'text-status-warning'
                    )} />
                  ) : (
                    <CheckCircle2 className="w-4 h-4 text-status-healthy" />
                  )}
                </div>

                {/* 標題 */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="font-body text-sm font-medium text-nothing-gray-900 truncate">
                      {title}
                    </span>
                  </div>
                  <div className="flex items-center gap-2 mt-0.5">
                    <span className={cn(
                      'text-[10px] font-body font-bold uppercase px-1.5 py-0.5 rounded',
                      isCritical && 'bg-status-critical/10 text-status-critical',
                      isHigh && 'bg-status-warning/10 text-status-warning',
                      approval.riskLevel === 'medium' && 'bg-status-warning/10 text-status-warning',
                      approval.riskLevel === 'low' && 'bg-status-healthy/10 text-status-healthy'
                    )}>
                      {approval.riskLevel}
                    </span>
                    <span className="text-[10px] font-body text-nothing-gray-400">
                      {approval.currentSignatures}/{approval.requiredSignatures}
                    </span>
                  </div>
                </div>

                {/* 箭頭 */}
                <ChevronRight className="w-4 h-4 text-nothing-gray-400 flex-shrink-0 group-hover:translate-x-0.5 transition-transform" />
              </div>
            )
          })}
        </div>
      )}

      {/* Approval Modal - 全屏審核對話框 (Phase 17 UI/UX 修復) */}
      <ApprovalModal
        open={selectedIndex !== null || processedApproval !== null}
        onClose={() => {
          setSelectedIndex(null)
          setProcessedApproval(null)
        }}
        title={processedApproval ? (processedApproval.action === 'approved' ? '已批准' : '已拒絕') : '審核詳情'}
        onPrev={processedApproval ? undefined : handlePrevApproval}
        onNext={processedApproval ? undefined : handleNextApproval}
        current={selectedIndex !== null && !processedApproval ? selectedIndex + 1 : undefined}
        total={!processedApproval ? pendingApprovals.length : undefined}
      >
        {/* 2026-03-26: 顯示剛處理的項目結果 */}
        {processedApproval && (
          <div className="relative">
            {/* 結果覆蓋層 */}
            <div className={cn(
              "absolute inset-0 z-10 flex items-center justify-center rounded-xl",
              processedApproval.action === 'approved'
                ? "bg-status-healthy/10"
                : "bg-status-critical/10"
            )}>
              <div className={cn(
                "text-center px-6 py-4 rounded-lg backdrop-blur-sm",
                processedApproval.action === 'approved'
                  ? "bg-status-healthy/20 text-status-healthy"
                  : "bg-status-critical/20 text-status-critical"
              )}>
	                <div className="mb-2 flex justify-center">
	                  {processedApproval.action === 'approved'
	                    ? <CheckCircle2 className="h-9 w-9" aria-hidden="true" />
	                    : <AlertCircle className="h-9 w-9" aria-hidden="true" />
	                  }
	                </div>
                <div className="font-bold text-lg">
                  {processedApproval.action === 'approved' ? '已批准執行' : '已拒絕執行'}
                </div>
                <div className="text-sm opacity-75 mt-1">
                  {processedApproval.timestamp.toLocaleTimeString()}
                </div>
              </div>
            </div>
            {/* 原始內容 (保留顯示) */}
            <ApprovalCard
              request={processedApproval.approval}
              onApprove={async () => {}}
              onReject={async () => {}}
              holdDuration={1000}
              fullHeight
            />
          </div>
        )}
        {/* 正常待審核項目 */}
        {selectedApproval && !processedApproval && (
          <ApprovalCard
            request={selectedApproval}
            onApprove={async () => {
              // 2026-03-26: 保留簽核後內容顯示 2 秒
              setProcessedApproval({
                approval: selectedApproval,
                action: 'approved',
                timestamp: new Date(),
              })

              const newCount = await handleApprove(selectedApproval.id) ?? 0

              // 顯示結果 2 秒後導航
              setTimeout(() => {
                setProcessedApproval(null)
                if (newCount > 0 && selectedIndex !== null) {
                  if (selectedIndex >= newCount) {
                    setSelectedIndex(newCount - 1)
                  }
                } else {
                  setSelectedIndex(null)
                }
              }, 2000)
            }}
            onReject={async () => {
              // 2026-03-26: 保留拒絕後內容顯示 2 秒
              setProcessedApproval({
                approval: selectedApproval,
                action: 'rejected',
                timestamp: new Date(),
              })

              await handleReject(selectedApproval.id)

              // 顯示結果 2 秒後關閉
              setTimeout(() => {
                setProcessedApproval(null)
                setSelectedIndex(null)
              }, 2000)
            }}
            holdDuration={1000}
            fullHeight
          />
        )}
      </ApprovalModal>

      {/* Idle state - no pending approvals */}
      {machineState === 'idle' && pendingApprovals.length === 0 && !isLoading && (
        <div className="text-center py-6 border border-dashed border-nothing-gray-200 rounded-lg">
          <CheckCircle2 className="w-8 h-8 mx-auto mb-2 text-status-healthy/50" />
          <p className="font-body text-xs text-nothing-gray-400">
            {t('ai.standby')}
          </p>
          <p className="font-body text-[10px] text-nothing-gray-300 mt-1">
            {lastFetch
              ? `Last check: ${lastFetch.toLocaleTimeString()}`
              : 'Waiting for first fetch...'}
          </p>
        </div>
      )}

      {/* Demo mode warning */}
      {demoMode && (
        <div className="bg-status-warning/10 border border-status-warning/20 rounded-lg p-3">
          <p className="font-body text-xs text-status-warning">
            Demo mode is enabled. Real API polling is disabled.
          </p>
        </div>
      )}
    </div>
  )
}

export default OpenClawStateMachine
