'use client'

/**
 * EventDetailDrawer — 事件詳情 inline 展開
 * ==========================================
 * 三欄佈局：JSON tree / 修復建議 / 派遣記錄
 * 背景 #faf9f3，左側 4px 豎條依嚴重度色
 *
 * @created 2026-05-02 Claude Sonnet 4.6 — governance PR 3-5
 */

import { useTranslations } from 'next-intl'
import type { GovernanceEvent } from './events-table'

// =============================================================================
// Severity colour
// =============================================================================

const SEVERITY_COLOR: Record<string, string> = {
  critical: '#FF3300',
  warning:  '#F59E0B',
  info:     '#4A90D9',
}

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

interface EventDetailDrawerProps {
  event: GovernanceEvent
}

export function EventDetailDrawer({ event }: EventDetailDrawerProps) {
  const t = useTranslations('governance.events.detail')

  const accentColor = SEVERITY_COLOR[event.severity ?? 'info'] ?? '#4A90D9'
  const jsonString = JSON.stringify(event.raw_data ?? { id: event.id, event_type: event.event_type }, null, 2)

  return (
    <tr>
      <td
        colSpan={5}
        style={{ padding: 0 }}
      >
        <div style={{
          background: '#faf9f3',
          borderLeft: `4px solid ${accentColor}`,
          borderBottom: '0.5px solid #e0ddd4',
          padding: '16px 20px',
        }}>
          {/* Three-column grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 16,
          }}
          className="event-detail-grid"
          >
            {/* Column 1: JSON tree */}
            <div>
              <div style={{
                fontFamily: "'DM Mono', monospace",
                fontSize: 10,
                fontWeight: 600,
                color: '#87867f',
                textTransform: 'uppercase',
                letterSpacing: '0.6px',
                marginBottom: 8,
              }}>
                {t('rawData')}
              </div>
              <pre style={{
                fontFamily: "'JetBrains Mono', 'DM Mono', monospace",
                fontSize: 11,
                color: '#141413',
                background: 'rgba(255,255,255,0.7)',
                border: '0.5px solid #e0ddd4',
                borderRadius: 6,
                padding: '10px 12px',
                overflowX: 'auto',
                margin: 0,
                lineHeight: 1.6,
                maxHeight: 200,
                overflowY: 'auto',
              }}>
                <code>{jsonString}</code>
              </pre>
            </div>

            {/* Column 2: Remediation */}
            <div>
              <div style={{
                fontFamily: "'DM Mono', monospace",
                fontSize: 10,
                fontWeight: 600,
                color: '#87867f',
                textTransform: 'uppercase',
                letterSpacing: '0.6px',
                marginBottom: 8,
              }}>
                {t('remediation')}
              </div>
              <div style={{
                background: 'rgba(255,255,255,0.7)',
                border: '0.5px solid #e0ddd4',
                borderRadius: 6,
                padding: '10px 12px',
                minHeight: 60,
              }}>
                {event.remediation ? (
                  <p style={{
                    fontFamily: "'DM Mono', monospace",
                    fontSize: 12,
                    color: '#141413',
                    lineHeight: 1.6,
                    margin: 0,
                  }}>
                    {event.remediation}
                  </p>
                ) : (
                  <span style={{
                    fontFamily: "'DM Mono', monospace",
                    fontSize: 11,
                    color: '#b8b4aa',
                    fontStyle: 'italic',
                  }}>
                    {t('noRemediation')}
                  </span>
                )}
              </div>
            </div>

            {/* Column 3: Dispatch log */}
            <div>
              <div style={{
                fontFamily: "'DM Mono', monospace",
                fontSize: 10,
                fontWeight: 600,
                color: '#87867f',
                textTransform: 'uppercase',
                letterSpacing: '0.6px',
                marginBottom: 8,
              }}>
                {t('dispatch')}
              </div>
              <div style={{
                background: 'rgba(255,255,255,0.7)',
                border: '0.5px solid #e0ddd4',
                borderRadius: 6,
                padding: '10px 12px',
                minHeight: 60,
              }}>
                {event.dispatch_records && event.dispatch_records.length > 0 ? (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    {event.dispatch_records.map((rec, idx) => (
                      <div key={idx} style={{
                        fontFamily: "'DM Mono', monospace",
                        fontSize: 11,
                        color: '#141413',
                        display: 'flex',
                        alignItems: 'flex-start',
                        gap: 6,
                        lineHeight: 1.5,
                      }}>
                        <span style={{ color: '#87867f', flexShrink: 0 }}>
                          {new Date(rec.created_at).toLocaleTimeString('zh-TW', { hour: '2-digit', minute: '2-digit' })}
                        </span>
                        <span>{rec.action}</span>
                        <span style={{
                          marginLeft: 'auto', flexShrink: 0,
                          fontSize: 10,
                          color: rec.status === 'succeeded' ? '#22C55E'
                            : rec.status === 'failed' ? '#FF3300'
                            : '#87867f',
                        }}>
                          {rec.status}
                        </span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <span style={{
                    fontFamily: "'DM Mono', monospace",
                    fontSize: 11,
                    color: '#b8b4aa',
                    fontStyle: 'italic',
                  }}>
                    {t('noDispatch')}
                  </span>
                )}
              </div>
            </div>
          </div>

          {/* Responsive: stack on mobile via inline style tag override */}
          <style>{`
            @media (max-width: 768px) {
              .event-detail-grid {
                grid-template-columns: 1fr !important;
              }
            }
          `}</style>
        </div>
      </td>
    </tr>
  )
}
