'use client'

/**
 * Errors Page - #44 錯誤追蹤頁面
 * ==============================
 * Phase 10: Sentry + OpenClaw + UI 整合
 *
 * Nothing.tech 視覺規範:
 * - 純白底色 (bg-white)
 * - 極細淺灰邊框 (border border-gray-200)
 * - 無圓角或微圓角 (rounded-sm)
 * - 嚴禁陰影 (shadow-none)
 *
 * 佈局:
 * - 左側: 統計卡片 + 趨勢圖
 * - 右側: 問題列表
 *
 * i18n: 100% next-intl，零硬編碼
 *
 * 建立: 2026-03-26 (台北時區)
 * 建立者: Claude Code (#44 Error UI)
 */

import { useTranslations } from 'next-intl'
import { AppLayout } from '@/components/layout'
import { useErrors } from '@/hooks/useErrors'
import { useUXAudit } from '@/hooks/useUXAudit'
import {
  ErrorOverviewCard,
  RecentIssuesList,
  ErrorTrendChart,
  UXAuditCard,
} from '@/components/errors'
import { Bug, RefreshCw } from 'lucide-react'
import type { SentryIssue } from '@/lib/api-client'

// =============================================================================
// Page Component
// =============================================================================

export default function ErrorsPage({
  params,
}: {
  params: { locale: string }
}) {
  const t = useTranslations('errors')
  const {
    stats,
    issues,
    trends,
    loading,
    error,
    activePeriod,
    refetch,
    setPeriod,
  } = useErrors()

  // #126: UX Audit / Session Replay 數據
  const {
    data: uxAuditData,
    loading: uxAuditLoading,
    error: uxAuditError,
  } = useUXAudit()

  const handleIssueClick = (issue: SentryIssue) => {
    // Open in new tab if permalink available
    if (issue.permalink) {
      window.open(issue.permalink, '_blank', 'noopener,noreferrer')
    }
  }

  return (
    <AppLayout locale={params.locale}>
      <div className="p-6 max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <Bug className="h-6 w-6 text-gray-700" />
            <div>
              <h1 className="text-xl font-semibold text-gray-900">
                {t('title')}
              </h1>
              <p className="text-sm text-gray-500">
                {t('subtitle')}
              </p>
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-3">
            <button
              onClick={refetch}
              disabled={loading}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm
                       bg-gray-100 hover:bg-gray-200 rounded transition-colors
                       disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
              {loading ? t('loading') : t('refresh')}
            </button>

{/*
              Sentry Dashboard 連結已移除
              原因: 內網 IP 會觸發瀏覽器「存取區域網路」權限對話框
              2026-03-30 ogt: 參考 feedback_sentry_local_network.md
              未來: 可透過 VPN 或反向代理公開 Sentry UI
            */}
          </div>
        </div>

        {/* Error State */}
        {error && (
          <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-sm">
            <p className="text-sm text-red-700">{error}</p>
          </div>
        )}

        {/* Main Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Stats & Trends */}
          <div className="lg:col-span-1 space-y-6">
            {/* Overview Card */}
            <ErrorOverviewCard
              stats={stats}
              loading={loading}
              changePercent={trends?.change_percent}
            />

            {/* Trend Chart */}
            <ErrorTrendChart
              data={trends}
              loading={loading}
              activePeriod={activePeriod}
              onPeriodChange={setPeriod}
            />

            {/* #126: UX Audit / Session Replay */}
            <UXAuditCard
              data={uxAuditData}
              loading={uxAuditLoading}
              error={uxAuditError}
            />
          </div>

          {/* Right Column - Issues List */}
          <div className="lg:col-span-2">
            <RecentIssuesList
              issues={issues}
              loading={loading}
              onIssueClick={handleIssueClick}
            />
          </div>
        </div>

        {/* Footer Info */}
        <div className="mt-6 pt-4 border-t border-gray-100">
          <p className="text-xs text-gray-400 text-center">
            {t('footerInfo')}
          </p>
        </div>
      </div>
    </AppLayout>
  )
}
