'use client'

/**
 * TicketsPanel — 工單追蹤面板 (不含 AppLayout)
 * ==============================================
 * Sprint 5: 從 /tickets/page.tsx 抽取
 * 供原始頁面和整合頁面 (/operations) 共用
 *
 * 2026-05-31 Codex: 接上 Incident status-chain / timeline，讓 Tickets 不再只是清單。
 */

import { useEffect, useMemo, useState } from 'react'
import { useSearchParams } from 'next/navigation'
import { useTranslations } from 'next-intl'
import {
  ArrowRight,
  GitBranch,
  ListChecks,
  RefreshCw,
  SearchCheck,
  ShieldCheck,
  TriangleAlert,
} from 'lucide-react'

import { Link } from '@/i18n/routing'
import {
  AwoooPStatusChainPanel,
  type AwoooPStatusChain,
} from '@/components/awooop/status-chain'
import { cn } from '@/lib/utils'

const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''

interface Incident {
  incident_id?: string
  id?: string
  title?: string | null
  severity: string
  status: string
  signal_count?: number
  proposal_count?: number
  created_at: string
  updated_at?: string
  affected_services?: string[]
  affected_service?: string | null
}

interface IncidentListResponse {
  incidents: Incident[]
  count?: number
  total?: number
}

interface IncidentTimelineEvent {
  stage: string
  status: string
  title: string
  description?: string | null
  actor?: string | null
  timestamp?: string | null
  source_table?: string | null
  data?: Record<string, unknown>
}

type IncidentTimelineStage = IncidentTimelineEvent & {
  label: string
  events?: IncidentTimelineEvent[]
}

interface IncidentTimelineResponse {
  incident_id: string
  title: string
  status: string
  severity: string
  started_at?: string | null
  updated_at?: string | null
  resolved_at?: string | null
  affected_services?: string[]
  approval_ids?: string[]
  timeline: IncidentTimelineStage[]
  events: IncidentTimelineEvent[]
  ascii_timeline: string
}

const SEV_COLOR: Record<string, string> = {
  P0: '#cc2200',
  P1: '#F59E0B',
  P2: '#4A90D9',
  P3: '#22C55E',
}

const STATUS_COLOR: Record<string, string> = {
  open: '#cc2200',
  investigating: '#F59E0B',
  in_progress: '#F59E0B',
  mitigating: '#4A90D9',
  resolved: '#22C55E',
  closed: '#87867f',
}

async function fetchJson<T>(url: string, timeoutMs = 10_000): Promise<T | null> {
  const controller = new AbortController()
  const timeout = window.setTimeout(() => controller.abort(), timeoutMs)
  try {
    const response = await fetch(url, {
      cache: 'no-store',
      signal: controller.signal,
    })
    if (!response.ok) return null
    return (await response.json()) as T
  } catch {
    return null
  } finally {
    window.clearTimeout(timeout)
  }
}

function incidentId(incident?: Incident | null) {
  return incident?.incident_id ?? incident?.id ?? ''
}

function incidentServices(incident?: Incident | null) {
  const services = incident?.affected_services?.filter(Boolean) ?? []
  if (services.length > 0) return services
  return incident?.affected_service ? [incident.affected_service] : []
}

function formatLocalTime(value?: string | null) {
  if (!value) return '--'
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return '--'
  return date.toLocaleString('zh-TW', {
    timeZone: 'Asia/Taipei',
    month: 'numeric',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

function timelineStatusClass(status?: string | null) {
  const normalized = String(status ?? '').toLowerCase()
  if (normalized.includes('success') || normalized.includes('ok') || normalized.includes('resolved')) {
    return 'border-[#9bc7a4] bg-[#f0faf2] text-[#17602a]'
  }
  if (normalized.includes('fail') || normalized.includes('block') || normalized.includes('error')) {
    return 'border-[#e2a29b] bg-[#fff0ef] text-[#9f2f25]'
  }
  if (normalized.includes('warn') || normalized.includes('pending') || normalized.includes('investigating')) {
    return 'border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]'
  }
  return 'border-[#d8d3c7] bg-[#faf9f3] text-[#5f5b52]'
}

function FocusedIncidentTruthPanel({
  projectId,
  incident,
  incidentId,
  chain,
  timeline,
  loading,
  error,
}: {
  projectId: string
  incident?: Incident | null
  incidentId: string | null
  chain: AwoooPStatusChain | null
  timeline: IncidentTimelineResponse | null
  loading: boolean
  error: string | null
}) {
  const t = useTranslations('tickets.truth')
  const stages = timeline?.timeline?.filter((stage) => stage.status !== 'skipped') ?? []
  const verifier = timeline?.timeline?.find((stage) => stage.stage === 'verifier')
  const sourceCorrelation = chain?.source_refs?.correlation
  const importantEvents = (timeline?.events ?? [])
    .filter((event) => (
      event.source_table === 'automation_operation_log' ||
      event.source_table === 'knowledge_entries' ||
      event.source_table === 'incident_evidence' ||
      event.source_table === 'alert_operation_log' ||
      event.stage === 'executor' ||
      event.stage === 'verifier' ||
      event.stage === 'km' ||
      event.stage === 'ai_router'
    ))
    .slice(-5)
    .reverse()
  const title = incident?.title || timeline?.title || incidentServices(incident).join(' / ') || t('unknownTitle')
  const selectedIncidentId = incidentId || timeline?.incident_id || incidentId
  const encodedProjectId = encodeURIComponent(projectId)
  const encodedIncidentId = selectedIncidentId ? encodeURIComponent(selectedIncidentId) : ''

  return (
    <section className="border border-[#e0ddd4] bg-white" aria-busy={loading}>
      <div className="flex flex-wrap items-start justify-between gap-3 border-b border-[#e0ddd4] bg-[#faf9f3] px-4 py-3">
        <div className="flex min-w-0 items-start gap-3">
          <span className="flex h-9 w-9 shrink-0 items-center justify-center border border-[#9bb6d9] bg-[#eef5ff] text-[#1f5b9b]">
            <SearchCheck className="h-4 w-4" aria-hidden="true" />
          </span>
          <div className="min-w-0">
            <h2 className="text-sm font-semibold text-[#141413]">{t('title')}</h2>
            <p className="mt-1 truncate font-mono text-xs text-[#77736a]">
              {selectedIncidentId || t('emptyIncident')}
            </p>
            <p className="mt-1 truncate text-xs text-[#5f5b52]" title={title}>
              {title}
            </p>
          </div>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {loading ? (
            <span className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2 py-1 text-xs font-semibold text-[#5f5b52]">
              <RefreshCw className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
              {t('loading')}
            </span>
          ) : null}
          {selectedIncidentId ? (
            <>
              <Link
                href={`/awooop/work-items?project_id=${encodedProjectId}&incident_id=${encodedIncidentId}` as never}
                className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2.5 py-1 text-xs font-semibold text-[#141413] hover:border-[#d97757]"
              >
                {t('openWorkItems')}
                <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
              </Link>
              <Link
                href={`/awooop/runs?project_id=${encodedProjectId}&incident_id=${encodedIncidentId}` as never}
                className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2.5 py-1 text-xs font-semibold text-[#141413] hover:border-[#1f6feb]"
              >
                {t('openRuns')}
                <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
              </Link>
            </>
          ) : null}
        </div>
      </div>

      {error ? (
        <div className="flex items-start gap-2 border-b border-[#ead9b4] bg-[#fff7e8] px-4 py-3 text-xs leading-5 text-[#8a5a08]">
          <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
          {error}
        </div>
      ) : null}

      <div className="grid gap-px bg-[#e0ddd4] md:grid-cols-4">
        <div className="min-w-0 bg-white px-4 py-3">
          <p className="text-xs font-semibold text-[#77736a]">{t('metrics.stages')}</p>
          <p className="mt-2 font-mono text-xl font-semibold text-[#141413]">
            {timeline ? stages.length : '--'}
          </p>
        </div>
        <div className="min-w-0 bg-white px-4 py-3">
          <p className="text-xs font-semibold text-[#77736a]">{t('metrics.events')}</p>
          <p className="mt-2 font-mono text-xl font-semibold text-[#141413]">
            {timeline ? timeline.events.length : '--'}
          </p>
        </div>
        <div className="min-w-0 bg-white px-4 py-3">
          <p className="text-xs font-semibold text-[#77736a]">{t('metrics.source')}</p>
          <p className="mt-2 truncate font-mono text-sm font-semibold text-[#141413]">
            {sourceCorrelation
              ? `${sourceCorrelation.direct_ref_total ?? 0}/${sourceCorrelation.candidate_total ?? 0}/${sourceCorrelation.applied_link_total ?? 0}`
              : '--'}
          </p>
        </div>
        <div className="min-w-0 bg-white px-4 py-3">
          <p className="text-xs font-semibold text-[#77736a]">{t('metrics.verification')}</p>
          <span className={cn('mt-2 inline-flex border px-2 py-0.5 text-xs font-semibold', timelineStatusClass(verifier?.status ?? chain?.verification))}>
            {verifier?.status ?? chain?.verification ?? '--'}
          </span>
        </div>
      </div>

      <AwoooPStatusChainPanel chain={chain} className="border-x-0 border-t-0" />

      <div className="grid gap-px bg-[#e0ddd4] lg:grid-cols-[1.15fr_0.85fr]">
        <div className="min-w-0 bg-white p-4">
          <div className="flex items-center gap-2">
            <GitBranch className="h-4 w-4 text-brand-accent" aria-hidden="true" />
            <h3 className="text-sm font-semibold text-[#141413]">{t('flowTitle')}</h3>
          </div>
          {timeline?.ascii_timeline ? (
            <p className="mt-3 break-words border border-[#eee9dd] bg-[#faf9f3] px-3 py-2 font-mono text-xs leading-6 text-[#5f5b52]">
              {timeline.ascii_timeline}
            </p>
          ) : (
            <p className="mt-3 text-sm text-[#77736a]">
              {loading ? t('loading') : t('timelineEmpty')}
            </p>
          )}
          {stages.length > 0 ? (
            <div className="mt-3 grid gap-2 md:grid-cols-2">
              {stages.slice(0, 6).map((stage) => (
                <div key={stage.stage} className="min-w-0 border border-[#eee9dd] bg-white px-3 py-2">
                  <div className="flex items-center justify-between gap-2">
                    <span className="truncate text-xs font-semibold text-[#77736a]">{stage.label}</span>
                    <span className={cn('shrink-0 border px-2 py-0.5 text-[11px] font-semibold', timelineStatusClass(stage.status))}>
                      {stage.status}
                    </span>
                  </div>
                  <p className="mt-1 truncate text-xs font-semibold text-[#141413]" title={stage.title}>
                    {stage.title}
                  </p>
                </div>
              ))}
            </div>
          ) : null}
        </div>

        <div className="min-w-0 bg-white p-4">
          <div className="flex items-center gap-2">
            <ListChecks className="h-4 w-4 text-brand-accent" aria-hidden="true" />
            <h3 className="text-sm font-semibold text-[#141413]">{t('evidenceTitle')}</h3>
          </div>
          <div className="mt-3 grid gap-px border border-[#e0ddd4] bg-[#e0ddd4]">
            {[
              [t('executor'), timeline?.timeline?.find((stage) => stage.stage === 'executor')?.title ?? chain?.execution?.latest_operation_type ?? '--'],
              [t('ansible'), chain?.execution?.ansible?.latest_playbook_path ?? chain?.execution?.ansible?.latest_catalog_id ?? '--'],
              [t('mcp'), timeline?.timeline?.find((stage) => stage.stage === 'investigator')?.title ?? '--'],
              [t('km'), timeline?.timeline?.find((stage) => stage.stage === 'km')?.title ?? '--'],
            ].map(([label, value]) => (
              <div key={label} className="min-w-0 bg-white px-3 py-2">
                <p className="text-xs font-semibold text-[#77736a]">{label}</p>
                <p className="mt-1 truncate font-mono text-xs text-[#141413]" title={value}>
                  {value}
                </p>
              </div>
            ))}
          </div>
          {importantEvents.length > 0 ? (
            <div className="mt-3 divide-y divide-[#eee9dd] border border-[#eee9dd]">
              {importantEvents.map((event, index) => (
                <div key={`${event.stage}-${event.timestamp}-${index}`} className="px-3 py-2">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className={cn('border px-2 py-0.5 text-[11px] font-semibold', timelineStatusClass(event.status))}>
                      {event.status}
                    </span>
                    <span className="font-mono text-[11px] text-[#77736a]">{event.source_table ?? '--'}</span>
                  </div>
                  <p className="mt-1 truncate text-xs font-semibold text-[#141413]" title={event.title}>
                    {event.title}
                  </p>
                </div>
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </section>
  )
}

export function TicketsPanel() {
  const t = useTranslations('tickets')
  const searchParams = useSearchParams()
  const queryIncidentId = searchParams.get('incident_id')
  const projectId = searchParams.get('project_id') ?? 'awoooi'
  const [incidents, setIncidents] = useState<Incident[]>([])
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [chain, setChain] = useState<AwoooPStatusChain | null>(null)
  const [timeline, setTimeline] = useState<IncidentTimelineResponse | null>(null)
  const [detailLoading, setDetailLoading] = useState(false)
  const [detailError, setDetailError] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false
    setLoading(true)
    setError(null)
    fetchJson<IncidentListResponse>(`${API_BASE}/api/v1/incidents`, 12_000)
      .then((data) => {
        if (cancelled) return
        if (!data) {
          setError(t('error'))
          setIncidents([])
          setTotal(0)
          return
        }
        setIncidents(data.incidents ?? [])
        setTotal(data.count ?? data.total ?? data.incidents?.length ?? 0)
      })
      .catch((err) => {
        if (!cancelled) setError(err instanceof Error ? err.message : t('error'))
      })
      .finally(() => {
        if (!cancelled) setLoading(false)
      })
    return () => {
      cancelled = true
    }
  }, [t])

  const selectedIncidentId = useMemo(() => {
    if (queryIncidentId) return queryIncidentId
    return incidentId(incidents[0]) || null
  }, [incidents, queryIncidentId])

  const selectedIncident = useMemo(
    () => incidents.find((incident) => incidentId(incident) === selectedIncidentId) ?? null,
    [incidents, selectedIncidentId]
  )

  useEffect(() => {
    let cancelled = false
    if (!selectedIncidentId) {
      setChain(null)
      setTimeline(null)
      setDetailError(null)
      setDetailLoading(false)
      return () => {
        cancelled = true
      }
    }
    const targetIncidentId = selectedIncidentId

    async function loadIncidentTruth() {
      setDetailLoading(true)
      setDetailError(null)
      const encodedProjectId = encodeURIComponent(projectId)
      const encodedIncidentId = encodeURIComponent(targetIncidentId)
      const [statusChain, incidentTimeline] = await Promise.all([
        fetchJson<AwoooPStatusChain>(
          `${API_BASE}/api/v1/platform/status-chain?project_id=${encodedProjectId}&incident_id=${encodedIncidentId}`,
          12_000
        ),
        fetchJson<IncidentTimelineResponse>(
          `${API_BASE}/api/v1/incidents/${encodedIncidentId}/timeline`,
          12_000
        ),
      ])
      if (cancelled) return
      setChain(statusChain)
      setTimeline(incidentTimeline)
      if (!statusChain && !incidentTimeline) {
        setDetailError(t('truth.loadFailed'))
      }
      setDetailLoading(false)
    }

    loadIncidentTruth()
    return () => {
      cancelled = true
    }
  }, [projectId, selectedIncidentId, t])

  return (
    <div className="min-h-full space-y-5 bg-[#f5f4ed] p-6">
      <div>
        <h1 className="m-0 text-lg font-bold text-[#141413]">{t('title')}</h1>
        <p className="mt-1 text-xs text-[#87867f]">{t('subtitle')}</p>
      </div>

      <FocusedIncidentTruthPanel
        projectId={projectId}
        incident={selectedIncident}
        incidentId={selectedIncidentId}
        chain={chain}
        timeline={timeline}
        loading={detailLoading}
        error={detailError}
      />

      <section className="overflow-hidden border border-[#e0ddd4] bg-white">
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#e0ddd4] bg-[#faf9f3] px-4 py-3">
          <div className="flex items-center gap-2 text-sm font-bold text-[#141413]">
            <span className="h-1.5 w-1.5 rounded-full bg-[#d97757]" />
            {t('title')} ({loading ? '...' : total})
          </div>
          <span className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2 py-1 text-xs font-semibold text-[#5f5b52]">
            <ShieldCheck className="h-3.5 w-3.5" aria-hidden="true" />
            {t('readOnly')}
          </span>
        </div>
        {loading ? (
          <div className="px-8 py-10 text-center text-sm text-[#87867f]">{t('loading')}</div>
        ) : error ? (
          <div className="px-8 py-10 text-center text-sm text-[#cc2200]">{error}</div>
        ) : incidents.length === 0 ? (
          <div className="px-8 py-10 text-center text-sm text-[#87867f]">{t('noTickets')}</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full border-collapse text-sm">
              <thead>
                <tr className="bg-[#faf9f3]">
                  {[t('id'), t('title_col'), t('priority'), t('status'), t('signals'), t('createdAt'), t('actions')].map((col) => (
                    <th key={col} className="border-b border-[#e0ddd4] px-4 py-3 text-left text-xs font-semibold text-[#87867f]">
                      {col}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {incidents.map((incident) => {
                  const rowIncidentId = incidentId(incident)
                  const isSelected = rowIncidentId === selectedIncidentId
                  const services = incidentServices(incident)
                  const title = incident.title || services.join(' / ') || t('unknownService')
                  return (
                    <tr
                      key={rowIncidentId || `${incident.created_at}-${title}`}
                      className={cn(
                        'border-b border-[#f0ede4]',
                        isSelected && 'bg-[#fff7e8]'
                      )}
                    >
                      <td className="px-4 py-3 align-top font-mono text-xs text-[#5f5b52]">
                        <Link
                          href={`/tickets?project_id=${encodeURIComponent(projectId)}&incident_id=${encodeURIComponent(rowIncidentId)}` as never}
                          className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2 py-1 font-semibold text-[#141413] hover:border-[#d97757]"
                        >
                          {rowIncidentId.slice(0, 16)}
                          <ArrowRight className="h-3 w-3" aria-hidden="true" />
                        </Link>
                      </td>
                      <td className="max-w-[360px] px-4 py-3 align-top font-medium text-[#141413]">
                        <div className="truncate" title={title}>{title}</div>
                        {services.length > 1 ? (
                          <div className="mt-1 truncate text-xs text-[#87867f]">
                            {t('serviceCount', { count: services.length })}
                          </div>
                        ) : null}
                      </td>
                      <td className="px-4 py-3 align-top">
                        <span
                          style={{
                            color: SEV_COLOR[incident.severity] ?? '#87867f',
                            background: `${SEV_COLOR[incident.severity] ?? '#87867f'}18`,
                            borderColor: `${SEV_COLOR[incident.severity] ?? '#87867f'}40`,
                          }}
                          className="inline-flex border px-2 py-0.5 text-xs font-bold"
                        >
                          {incident.severity}
                        </span>
                      </td>
                      <td className="px-4 py-3 align-top">
                        <span
                          style={{ color: STATUS_COLOR[incident.status] ?? '#87867f' }}
                          className="text-xs font-semibold"
                        >
                          {incident.status}
                        </span>
                      </td>
                      <td className="px-4 py-3 align-top font-mono text-xs text-[#5f5b52]">
                        {t('signalProposal', {
                          signals: incident.signal_count ?? 0,
                          proposals: incident.proposal_count ?? 0,
                        })}
                      </td>
                      <td className="px-4 py-3 align-top text-xs text-[#87867f]">
                        {formatLocalTime(incident.created_at)}
                      </td>
                      <td className="px-4 py-3 align-top">
                        <Link
                          href={`/awooop/work-items?project_id=${encodeURIComponent(projectId)}&incident_id=${encodeURIComponent(rowIncidentId)}` as never}
                          className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2 py-1 text-xs font-semibold text-[#2e2b26] hover:border-[#1f6feb] hover:bg-[#edf4ff] hover:text-[#0f4fa8]"
                        >
                          <SearchCheck className="h-3.5 w-3.5" aria-hidden="true" />
                          {t('openTruth')}
                        </Link>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </div>
  )
}