'use client'

/**
 * QueueHistoryTabs — succeeded / failed 兩子 tab 歷史記錄
 * =========================================================
 * 表格顯示：事件類型 / 操作 / 時間 / 狀態
 *
 * @created 2026-05-02 Claude Sonnet 4.6 — governance PR 3-5
 */

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import type { QueueItem } from './queue-item-card'

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

interface QueueHistoryTabsProps {
  succeeded: QueueItem[]
  failed: QueueItem[]
}

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

export function QueueHistoryTabs({ succeeded, failed }: QueueHistoryTabsProps) {
  const t = useTranslations('governance.queue')
  const tType = useTranslations('governance.events.eventType')
  const [active, setActive] = useState<'succeeded' | 'failed'>('succeeded')

  const rows = active === 'succeeded' ? succeeded : failed
  const statusColor = active === 'succeeded' ? '#22C55E' : '#FF3300'

  const thStyle: React.CSSProperties = {
    fontFamily: "'DM Mono', monospace",
    fontSize: 10,
    fontWeight: 600,
    color: '#87867f',
    textTransform: 'uppercase',
    letterSpacing: '0.5px',
    padding: '7px 12px',
    textAlign: 'left',
    borderBottom: '0.5px solid #e0ddd4',
    background: '#faf9f3',
  }

  return (
    <div>
      {/* Sub-tab bar */}
      <div style={{ display: 'flex', borderBottom: '0.5px solid #e0ddd4', marginBottom: 0 }}>
        {(['succeeded', 'failed'] as const).map(tab => {
          const isActive = active === tab
          const count = tab === 'succeeded' ? succeeded.length : failed.length
          return (
            <button
              key={tab}
              onClick={() => setActive(tab)}
              style={{
                padding: '7px 14px',
                fontSize: 11,
                fontWeight: isActive ? 600 : 500,
                color: isActive ? (tab === 'succeeded' ? '#22C55E' : '#FF3300') : '#87867f',
                borderBottom: `2px solid ${isActive ? (tab === 'succeeded' ? '#22C55E' : '#FF3300') : 'transparent'}`,
                background: 'transparent',
                border: 'none',
                borderBottomWidth: 2,
                borderBottomStyle: 'solid',
                borderBottomColor: isActive ? (tab === 'succeeded' ? '#22C55E' : '#FF3300') : 'transparent',
                cursor: 'pointer',
                fontFamily: "'DM Mono', monospace",
                display: 'flex',
                alignItems: 'center',
                gap: 6,
                transition: 'all 0.12s',
              }}
            >
              {t(`history.${tab}`)}
              {count > 0 && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  minWidth: 18, height: 16,
                  borderRadius: 4,
                  background: isActive ? (tab === 'succeeded' ? 'rgba(34,197,94,0.12)' : 'rgba(255,51,0,0.12)') : '#e0ddd4',
                  color: isActive ? (tab === 'succeeded' ? '#22C55E' : '#FF3300') : '#87867f',
                  fontSize: 9,
                  fontWeight: 700,
                  padding: '0 4px',
                }}>
                  {count}
                </span>
              )}
            </button>
          )
        })}
      </div>

      {/* Table */}
      {rows.length === 0 ? (
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '32px 20px',
          fontFamily: "'DM Mono', monospace", fontSize: 12, color: '#87867f',
        }}>
          {t('history.empty')}
        </div>
      ) : (
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={thStyle}>{t('column.eventType')}</th>
                <th style={thStyle}>{t('column.proposedAction')}</th>
                <th style={thStyle}>{t('column.createdAt')}</th>
                <th style={thStyle}>{t('column.dispatchStatus')}</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(item => (
                <tr
                  key={item.id}
                  style={{ borderBottom: '0.5px solid #e0ddd4' }}
                  onMouseEnter={e => (e.currentTarget.style.background = 'rgba(217,119,87,0.03)')}
                  onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
                >
                  <td style={{ padding: '8px 12px' }}>
                    <span style={{
                      fontFamily: "'DM Mono', monospace",
                      fontSize: 10,
                      color: '#87867f',
                      background: '#f0ede6',
                      padding: '2px 6px',
                      borderRadius: 3,
                    }}>
                      {tType(item.event_type as Parameters<typeof tType>[0]) ?? item.event_type}
                    </span>
                  </td>
                  <td style={{
                    padding: '8px 12px',
                    fontFamily: "'DM Mono', monospace",
                    fontSize: 11,
                    color: '#141413',
                    maxWidth: 240,
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                  }}>
                    {item.proposed_action}
                  </td>
                  <td style={{
                    padding: '8px 12px',
                    fontFamily: "'DM Mono', monospace",
                    fontSize: 11,
                    color: '#87867f',
                    whiteSpace: 'nowrap',
                  }}>
                    {new Date(item.created_at).toLocaleString('zh-TW', {
                      month: '2-digit', day: '2-digit',
                      hour: '2-digit', minute: '2-digit',
                    })}
                  </td>
                  <td style={{ padding: '8px 12px' }}>
                    <span style={{
                      fontFamily: "'DM Mono', monospace",
                      fontSize: 10,
                      fontWeight: 600,
                      color: statusColor,
                    }}>
                      {item.dispatch_status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}
