'use client'

/**
 * SecurityPanel — 安全監控面板 (不含 AppLayout)
 * Sprint 5R: 從 /security/page.tsx 抽取
 * @updated 2026-04-09 Claude Opus 4.6 Asia/Taipei
 */

import { useState, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { IwoooSReadOnlyBridge } from '@/components/security/iwooos-read-only-bridge'

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

interface IssueStats {
  total_issues: number
  unresolved_issues: number
  critical_count: number
  error_count_24h: number
}

interface SentryIssue {
  id: string
  title: string
  culprit: string | null
  level: string
  count: number
  first_seen: string
  last_seen: string
}

const LEVEL_COLOR: Record<string, string> = {
  fatal: '#cc2200', error: '#cc2200', warning: '#F59E0B', info: '#4A90D9', debug: '#87867f',
}

export function SecurityPanel() {
  const t = useTranslations('security')
  const [stats, setStats] = useState<IssueStats | null>(null)
  const [issues, setIssues] = useState<SentryIssue[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    Promise.all([
      fetch(`${API_BASE}/api/v1/errors/stats`).then(r => r.ok ? r.json() : null).catch(() => null),
      fetch(`${API_BASE}/api/v1/errors/issues?limit=20`).then(r => r.ok ? r.json() : { issues: [] }).catch(() => ({ issues: [] })),
    ])
      .then(([statsData, listData]) => {
        if (statsData) setStats(statsData)
        setIssues(listData?.issues ?? [])
      })
      .catch(() => setError('load_failed'))
      .finally(() => setLoading(false))
  }, [])

  const cardStyle = { background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '16px 18px' }

  return (
    <div style={{ padding: '24px', background: '#f5f4ed', minHeight: '100%' }}>
      <div style={{ marginBottom: '20px' }}>
        <h1 style={{ fontSize: 18, fontWeight: 700, color: '#141413', margin: 0 }}>{t('title')}</h1>
        <p style={{ fontSize: 12, color: '#87867f', margin: '4px 0 0' }}>{t('subtitle')}</p>
      </div>

      <IwoooSReadOnlyBridge />

      {loading ? (
        <div style={{ padding: '32px', textAlign: 'center', color: '#87867f', fontSize: 13 }}>{t('loading')}</div>
      ) : error ? (
        <div style={{ ...cardStyle, textAlign: 'center', color: '#cc2200', fontSize: 13 }}>{t('error')}</div>
      ) : (
        <>
          {stats && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 12, marginBottom: 16 }}>
              {[
                { label: t('totalIssues'), value: stats.total_issues, color: '#141413' },
                { label: t('criticalIssues'), value: stats.critical_count, color: stats.critical_count > 0 ? '#cc2200' : '#22C55E' },
                { label: t('unresolvedIssues'), value: stats.unresolved_issues, color: stats.unresolved_issues > 0 ? '#F59E0B' : '#22C55E' },
                { label: t('errorRate'), value: stats.error_count_24h != null ? `${stats.error_count_24h}/24h` : '—', color: '#141413' },
              ].map(card => (
                <div key={card.label} style={cardStyle}>
                  <div style={{ fontSize: 11, color: '#87867f', marginBottom: 4, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{card.label}</div>
                  <div style={{ fontSize: 24, fontWeight: 700, color: card.color }}>{card.value}</div>
                </div>
              ))}
            </div>
          )}

          <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, overflow: 'hidden' }}>
            <div style={{ fontSize: 13, fontWeight: 700, padding: '10px 14px', borderBottom: '0.5px solid #e0ddd4', background: '#faf9f3', color: '#141413' }}>
              {t('recentIssues')} ({issues.length})
            </div>
            {issues.length === 0 ? (
              <div style={{ padding: '32px', textAlign: 'center', color: '#87867f', fontSize: 13 }}>{t('noData')}</div>
            ) : (
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
                <thead>
                  <tr style={{ background: '#faf9f3' }}>
                    {[t('issue'), t('level'), t('count'), t('lastSeen')].map(col => (
                      <th key={col} style={{ padding: '8px 14px', textAlign: 'left', fontWeight: 600, color: '#87867f', borderBottom: '0.5px solid #e0ddd4', fontSize: 11 }}>{col}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {issues.map(issue => (
                    <tr key={issue.id} style={{ borderBottom: '0.5px solid #f0ede4' }}>
                      <td style={{ padding: '8px 14px', maxWidth: 300 }}>
                        <div style={{ fontWeight: 500, color: '#141413', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{issue.title}</div>
                        {issue.culprit && <div style={{ fontSize: 11, color: '#87867f', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{issue.culprit}</div>}
                      </td>
                      <td style={{ padding: '8px 14px' }}>
                        <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', color: LEVEL_COLOR[issue.level] ?? '#87867f' }}>{issue.level}</span>
                      </td>
                      <td style={{ padding: '8px 14px', color: '#87867f' }}>{issue.count}</td>
                      <td style={{ padding: '8px 14px', color: '#87867f', fontSize: 11 }}>
                        {new Date(issue.last_seen).toLocaleString('zh-TW', { timeZone: 'Asia/Taipei', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </>
      )}
    </div>
  )
}
