'use client'

/**
 * IncidentCard - AI中心 v6 事件卡片
 * =====================================
 * Anthropic Warmth 米色系 + OpenClaw Blue
 * - 頂邊條顏色 = 嚴重度（P0=紅/P2=橙/P3=藍/OK=綠）
 * - FlowPipeline 7節點 + Q版龍蝦
 * - 授權邏輯從 DualStateIncidentCard (Phase 6.5) 移植
 *   handleApprove / handleReject / CSRF / 30s 超時重試
 *
 * 統帥鐵律: 禁止假數據！無數據顯示 "--"
 * @deprecated dual-state-incident-card.tsx (Phase 6.5 舊風格，此元件取代後刪除)
 */

import React, { useState, useCallback, useRef, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import type { IncidentResponse, DecisionInfo, IncidentTimelineResponse } from '@/lib/api-client'
import { apiClient } from '@/lib/api-client'
import { CURRENT_USER } from '@/lib/constants'
import { useCSRF } from '@/hooks/useCSRF'
import { FlowPipeline, type FlowStage } from './flow-pipeline'

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

type ButtonState = 'idle' | 'loading' | 'approved' | 'rejected' | 'error' | 'timeout'

const EXECUTION_TIMEOUT_MS = 30000

export interface IncidentCardProps {
  incident: IncidentResponse
  decision?: DecisionInfo | null
  onApprovalChange?: (proposalId: string, newStatus: 'approved' | 'rejected') => void
}

// =============================================================================
// Severity / Status Config
// =============================================================================

const SEV_CONFIG = {
  P0: { barColor: '#cc2200',  label: 'P0', labelBg: 'rgba(204,34,0,0.1)',    labelColor: '#cc2200' },
  P1: { barColor: '#F59E0B',  label: 'P1', labelBg: 'rgba(245,158,11,0.12)', labelColor: '#d97000' },
  P2: { barColor: '#4A90D9',  label: 'P2', labelBg: 'rgba(74,144,217,0.12)', labelColor: '#4A90D9' },
  P3: { barColor: '#22C55E',  label: 'P3', labelBg: 'rgba(34,197,94,0.1)',   labelColor: '#16a34a' },
} as const

/** 根據 incident status 對應 FlowStage */
function toFlowStage(status: string, severity: string): FlowStage {
  switch (status) {
    case 'new':                 return 'alert'
    case 'investigating':       return 'detection'
    case 'analyzing':           return 'analysis'
    case 'proposal_generated':  return 'proposal'
    case 'waiting_approval':    return 'approval'
    case 'executing':           return 'execution'
    case 'resolved':            return 'resolved'
    default:                    return severity === 'P0' ? 'alert' : 'detection'
  }
}

/** 格式化持續時間 */
function formatDuration(createdAt: string | undefined): string {
  if (!createdAt) return '--'
  try {
    const ms = Date.now() - new Date(createdAt).getTime()
    const mins = Math.floor(ms / 60000)
    if (mins < 60) return `${mins}m`
    return `${Math.floor(mins / 60)}h${mins % 60}m`
  } catch {
    return '--'
  }
}

function statusColor(status: string): string {
  switch (status) {
    case 'success':
    case 'completed':
      return '#16a34a'
    case 'warning':
      return '#d97000'
    case 'error':
      return '#cc2200'
    case 'pending':
      return '#87867f'
    default:
      return '#4A90D9'
  }
}

function formatTimelineTime(value: string | null): string {
  if (!value) return '--'
  try {
    return new Date(value).toLocaleTimeString('zh-TW', {
      hour: '2-digit',
      minute: '2-digit',
    })
  } catch {
    return '--'
  }
}

// =============================================================================
// 2026-04-02 Claude Code: Phase R-UI2 handleApprove/Reject 重複邏輯抽取
// useApprovalAction — 統一 setup/teardown：loading 狀態、timeout、error 處理
// action callback 負責差異邏輯（API call），並回傳最終 ButtonState
// 若 action 未回傳（void），hook 維持 idle
// =============================================================================

interface ApprovalActionResult {
  execute: () => Promise<void>
  buttonState: ButtonState
  errorMessage: string | null
  reset: () => void
}

function useApprovalAction(
  action: () => Promise<ButtonState | void>,
  timeoutMs: number,
  timeoutMessage: string,
): ApprovalActionResult {
  const [buttonState, setButtonState] = useState<ButtonState>('idle')
  const [errorMessage, setErrorMessage] = useState<string | null>(null)
  const timeoutRef = useRef<NodeJS.Timeout | null>(null)

  useEffect(() => {
    return () => { if (timeoutRef.current) clearTimeout(timeoutRef.current) }
  }, [])

  const execute = useCallback(async () => {
    if (buttonState === 'loading') return
    setButtonState('loading')
    setErrorMessage(null)
    if (timeoutRef.current) clearTimeout(timeoutRef.current)
    timeoutRef.current = setTimeout(() => {
      setButtonState('timeout')
      setErrorMessage(timeoutMessage)
    }, timeoutMs)

    try {
      const finalState = await action()
      if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null }
      setButtonState(finalState ?? 'idle')
    } catch (error) {
      if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null }
      setButtonState('error')
      setErrorMessage(error instanceof Error ? error.message : String(error))
    }
  }, [action, buttonState, timeoutMs, timeoutMessage])

  const reset = useCallback(() => {
    setButtonState('idle')
    setErrorMessage(null)
  }, [])

  return { execute, buttonState, errorMessage, reset }
}

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

export function IncidentCard({ incident, decision, onApprovalChange }: IncidentCardProps) {
  const t = useTranslations('incident.card')
  const { csrfToken } = useCSRF()

  const [currentProposalId, setCurrentProposalId] = useState<string | null>(null)
  const [aiExpanded, setAiExpanded] = useState(false)
  const [timelineExpanded, setTimelineExpanded] = useState(false)
  const [timelineData, setTimelineData] = useState<IncidentTimelineResponse | null>(null)
  const [timelineLoading, setTimelineLoading] = useState(false)
  const [timelineError, setTimelineError] = useState<string | null>(null)

  const incidentStatus = incident.status as string
  const sev = incident.severity as keyof typeof SEV_CONFIG
  const sevCfg = SEV_CONFIG[sev] ?? SEV_CONFIG.P3
  const flowStage = toFlowStage(incidentStatus, incident.severity)
  const isResolved = incidentStatus === 'resolved'
  const isWaitingApproval = incidentStatus === 'waiting_approval'

  const serviceName = incident.affected_services?.[0] ?? '--'
  const duration = formatDuration(incident.created_at)
  const isDecisionReady = decision?.state === 'ready' || !!currentProposalId
  const isAnalyzing = decision?.state === 'analyzing'
  const decisionAction = decision?.proposal_data?.action ?? ''
  const decisionReasoning = decision?.proposal_data?.reasoning ?? ''

  useEffect(() => {
    setTimelineExpanded(false)
    setTimelineData(null)
    setTimelineError(null)
    setTimelineLoading(false)
  }, [incident.incident_id])

  // ── 解析 proposalId（approve/reject 共用前置步驟）─────────────────────────
  const resolveProposalId = useCallback(async (): Promise<string> => {
    let approvalId = currentProposalId
    if (!approvalId && decision?.token) {
      const proposalResult = await apiClient.generateProposal(incident.incident_id)
      if (!proposalResult.success || !proposalResult.proposal) {
        throw new Error(proposalResult.message || 'Failed to generate proposal')
      }
      approvalId = proposalResult.proposal.id
      setCurrentProposalId(approvalId)
    }
    if (!approvalId) throw new Error('No approval ID available')
    return approvalId
  }, [currentProposalId, decision, incident.incident_id])

  // ── approve action（差異邏輯：signApproval + 成功狀態判斷）────────────────
  const approveAction = useCallback(async (): Promise<ButtonState | void> => {
    if (!isDecisionReady) return
    const approvalId = await resolveProposalId()
    const result = await apiClient.signApproval(approvalId, CURRENT_USER.id, 'Authorized via AI Center', csrfToken)
    const approvalStatus = result.approval?.status?.toLowerCase()
    if (approvalStatus === 'approved') {
      onApprovalChange?.(approvalId, 'approved')
      return 'approved'
    }
    // API 回傳非 approved（保持與原始行為一致：回到 idle）
    return 'idle'
  }, [isDecisionReady, resolveProposalId, csrfToken, onApprovalChange])

  // ── reject action（差異邏輯：rejectApproval + 直接 rejected 狀態）─────────
  const rejectAction = useCallback(async (): Promise<ButtonState> => {
    if (!isDecisionReady) return 'idle'
    const approvalId = await resolveProposalId()
    await apiClient.rejectApproval(approvalId, 'Rejected via AI Center', csrfToken)
    onApprovalChange?.(approvalId, 'rejected')
    return 'rejected'
  }, [isDecisionReady, resolveProposalId, csrfToken, onApprovalChange])

  const timeoutMsg = t('timeoutMessage')

  // ── useApprovalAction instances（共用 buttonState / errorMessage 透過 approve hook 主導）
  // approve 和 reject 原本共用同一個 buttonState；為保持原行為，
  // 以 approveHook 的 state 為主，rejectHook 的 execute 直接呼叫（state 不顯示）
  const approveHook = useApprovalAction(approveAction, EXECUTION_TIMEOUT_MS, timeoutMsg)
  const rejectHook = useApprovalAction(rejectAction, EXECUTION_TIMEOUT_MS, timeoutMsg)

  // 顯示優先順序：若任一 hook 處於 non-idle 則優先顯示；否則 idle
  const activeHook = approveHook.buttonState !== 'idle' ? approveHook : rejectHook
  const buttonState = activeHook.buttonState
  const errorMessage = activeHook.errorMessage

  const handleApprove = approveHook.execute
  const handleReject = rejectHook.execute

  const handleTimelineToggle = useCallback(async () => {
    const nextExpanded = !timelineExpanded
    setTimelineExpanded(nextExpanded)
    if (!nextExpanded || timelineData || timelineLoading) return

    setTimelineLoading(true)
    setTimelineError(null)
    try {
      const timeline = await apiClient.getIncidentTimeline(incident.incident_id)
      setTimelineData(timeline)
    } catch (error) {
      setTimelineError(error instanceof Error ? error.message : String(error))
    } finally {
      setTimelineLoading(false)
    }
  }, [incident.incident_id, timelineData, timelineExpanded, timelineLoading])

  // ── 授權按鈕渲染 ───────────────────────────────────────────────────────────
  const renderApproveButtons = () => {
    switch (buttonState) {
      case 'loading':
        return (
          <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: '#87867f' }}>
            <span style={{ width: 8, height: 8, border: '1.5px solid #e0ddd4', borderTopColor: '#d97757', borderRadius: '50%', animation: 'spin 0.8s linear infinite', display: 'inline-block' }} />
            {t('executing')}
          </span>
        )
      case 'approved':
        return <span style={{ fontSize: 12, color: '#22C55E', fontWeight: 700 }}>✓ {t('approved')}</span>
      case 'rejected':
        return <span style={{ fontSize: 12, color: '#cc2200', fontWeight: 700 }}>✗ {t('rejected')}</span>
      case 'error':
      case 'timeout':
        return (
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <span style={{ fontSize: 12, color: buttonState === 'timeout' ? '#F59E0B' : '#cc2200' }}>
              {buttonState === 'timeout' ? t('timeout') : t('error')}
            </span>
            <button
              onClick={() => { approveHook.reset(); rejectHook.reset() }}
              style={{ fontSize: 12, padding: '2px 7px', background: '#f0efe8', border: '0.5px solid #e0ddd4', borderRadius: 10, cursor: 'pointer', color: '#87867f' }}
            >
              {t('retry')}
            </button>
          </div>
        )
      default:
        return (
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <button
              onClick={handleApprove}
              disabled={!isDecisionReady}
              style={{
                padding: '5px 16px',
                background: '#141413',
                color: '#f5f4ed',
                border: 'none',
                borderRadius: 20,
                fontSize: 13,
                cursor: isDecisionReady ? 'pointer' : 'not-allowed',
                opacity: isDecisionReady ? 1 : 0.4,
                fontFamily: 'inherit',
              }}
              title={isAnalyzing ? t('analyzing') : decisionAction || t('authorizeExecution')}
            >
              ✓ {t('authorize')}
            </button>
            <button
              onClick={handleReject}
              disabled={!isDecisionReady}
              style={{
                padding: '5px 16px',
                background: 'transparent',
                color: '#87867f',
                border: '0.5px solid #e0ddd4',
                borderRadius: 20,
                fontSize: 13,
                cursor: isDecisionReady ? 'pointer' : 'not-allowed',
                opacity: isDecisionReady ? 1 : 0.4,
                fontFamily: 'inherit',
              }}
            >
              ✗ {t('reject')}
            </button>
            {isAnalyzing && <span style={{ fontSize: 12, color: '#F59E0B' }}>⏳</span>}
          </div>
        )
    }
  }

  return (
    <div style={{
      background: '#fff',
      border: '0.5px solid #e0ddd4',
      borderRadius: 12,
      overflow: 'hidden',
      boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
    }}>
      {/* 頂邊條 4px */}
      <div style={{ height: 4, background: sevCfg.barColor }} />

      {/* 標頭列：嚴重度 + 服務標籤 + 時間 */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px 4px' }}>
        <span style={{
          fontSize: 10, fontWeight: 700, padding: '2px 7px',
          background: sevCfg.labelBg, color: sevCfg.labelColor,
          borderRadius: 4, flexShrink: 0, textTransform: 'uppercase', letterSpacing: '1px',
        }}>
          {sevCfg.label}
        </span>
        <span style={{
          fontSize: 10, color: '#87867f',
          border: '0.5px solid #e0ddd4', padding: '2px 7px', borderRadius: 4,
          background: '#fff',
        }}>
          {serviceName}
        </span>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: '#b0ad9f' }}>
          {duration}
        </span>
      </div>

      {/* 事件標題 — 從 decision action 或 affected_services 組合 */}
      <div style={{ padding: '4px 14px 2px', fontSize: 15, fontWeight: 600, color: '#141413', lineHeight: 1.3, fontFamily: 'var(--font-body), monospace' }}>
        {incident.decision?.proposal_data?.action
          ?? (incident.affected_services?.length
            ? `${incident.affected_services.join(', ')} ${t('anomaly')}`
            : incident.incident_id)}
      </div>

      {/* INC-ID */}
      <div style={{ padding: '0 14px 6px', fontSize: 12, color: '#b0ad9f', fontFamily: 'var(--font-body), monospace' }}>
        {incident.incident_id}
      </div>

      {/* 流程狀態圖 */}
      <FlowPipeline activeStage={flowStage} isResolved={isResolved} severity={sev} />

      {/* Impact 指標列 */}
      <div style={{
        margin: '0 14px 8px',
        padding: '6px 0',
        borderTop: '0.5px solid #e0ddd4',
        borderBottom: '0.5px solid #e0ddd4',
        display: 'flex',
        gap: 16,
      }}>
        <span style={{ fontSize: 11, color: '#87867f' }}>
          {t('affectedServices')} <strong style={{ color: '#141413' }}>{incident.affected_services?.length ?? 0}</strong>
        </span>
        <span style={{ fontSize: 11, color: '#87867f' }}>
          {t('signalCount')} <strong style={{ color: '#141413' }}>{incident.signal_count ?? '--'}</strong>
        </span>
        <span style={{ fontSize: 11, color: '#87867f' }}>
          {t('statusLabel')} <strong style={{ color: '#141413' }}>{incident.status}</strong>
        </span>
      </div>

      <button
        onClick={handleTimelineToggle}
        style={{
          margin: '0 14px 10px',
          padding: '7px 0',
          background: '#f8f7f1',
          border: '0.5px solid #e0ddd4',
          borderRadius: 6,
          cursor: 'pointer',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 6,
          fontSize: 12,
          color: '#4A90D9',
          width: 'calc(100% - 28px)',
          textAlign: 'center' as const,
          fontFamily: 'inherit',
        }}
      >
        <span>{timelineExpanded ? '▾' : '▸'} 處理歷程</span>
        {timelineData?.ascii_timeline && (
          <span style={{
            color: '#87867f',
            maxWidth: 260,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}>
            {timelineData.ascii_timeline}
          </span>
        )}
      </button>
      {timelineExpanded && (
        <div style={{
          margin: '0 10px 10px',
          padding: '8px',
          background: '#fff',
          border: '0.5px solid #e0ddd4',
          borderLeft: '3px solid #4A90D9',
          borderRadius: 6,
        }}>
          {timelineLoading && (
            <div style={{ fontSize: 12, color: '#87867f' }}>載入處理歷程...</div>
          )}
          {timelineError && (
            <div style={{ fontSize: 12, color: '#cc2200' }}>{timelineError}</div>
          )}
          {!timelineLoading && !timelineError && timelineData && (
            <>
              <div style={{
                fontSize: 11,
                color: '#87867f',
                fontFamily: 'var(--font-body), monospace',
                marginBottom: 7,
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}>
                {timelineData.ascii_timeline}
              </div>
              <div style={{ display: 'grid', gap: 5 }}>
                {timelineData.timeline
                  .filter(stage => stage.status !== 'skipped')
                  .map(stage => (
                    <div
                      key={stage.stage}
                      style={{
                        display: 'grid',
                        gridTemplateColumns: '68px 1fr auto',
                        gap: 6,
                        alignItems: 'center',
                        minHeight: 24,
                        fontSize: 11,
                      }}
                    >
                      <span style={{
                        color: statusColor(stage.status),
                        fontWeight: 700,
                        textTransform: 'uppercase',
                      }}>
                        {stage.stage}
                      </span>
                      <span style={{
                        color: '#141413',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }} title={stage.description ?? stage.title}>
                        {stage.title}
                      </span>
                      <span style={{ color: '#b0ad9f', fontFamily: 'var(--font-body), monospace' }}>
                        {formatTimelineTime(stage.timestamp)}
                      </span>
                    </div>
                  ))}
              </div>
            </>
          )}
        </div>
      )}

      {/* AI 提案行（可展開）*/}
      {decisionAction && (
        <>
          <button
            onClick={() => setAiExpanded(v => !v)}
            style={{
              margin: '0 14px 10px',
              padding: '7px 0',
              background: 'rgba(217,119,87,0.08)',
              border: '0.5px solid rgba(217,119,87,0.3)',
              borderRadius: 6,
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 5,
              fontSize: 12,
              color: '#d97757',
              width: 'calc(100% - 28px)',
              textAlign: 'center' as const,
              fontFamily: 'inherit',
            }}
          >
            <span>▸ {t('aiProposal')}: {decisionAction.slice(0, 50)}{decisionAction.length > 50 ? '...' : ''}</span>
          </button>
          {aiExpanded && (
            <div style={{
              margin: '0 10px 6px',
              padding: '8px',
              background: '#f0efe8',
              border: '0.5px solid #e0ddd4',
              borderLeft: '3px solid #d97757',
              borderRadius: 6,
              fontSize: 13,
              color: '#87867f',
            }}>
              <div style={{ color: '#141413', marginBottom: 4 }}>{decisionAction}</div>
              {decisionReasoning && (
                <div style={{ color: '#87867f', fontStyle: 'italic' }}>
                  💡 {decisionReasoning.slice(0, 150)}{decisionReasoning.length > 150 ? '...' : ''}
                </div>
              )}
            </div>
          )}
        </>
      )}

      {/* 授權按鈕（僅 waiting_approval 狀態）*/}
      {isWaitingApproval && (
        <div style={{ padding: '6px 14px 12px', display: 'flex', justifyContent: 'flex-end' }}>
          {renderApproveButtons()}
          {errorMessage && (
            <span style={{ fontSize: 12, color: '#cc2200', marginLeft: 6, maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={errorMessage}>
              {errorMessage}
            </span>
          )}
        </div>
      )}

    </div>
  )
}

export default IncidentCard
