'use client'

/**
 * IwoooSReadOnlyBridge — 既有資安頁面到 IwoooS 的只讀橋接
 * @created 2026-05-20 Codex Asia/Taipei
 */

import Link from 'next/link'
import { ArrowRight, ShieldCheck } from 'lucide-react'
import { useTranslations } from 'next-intl'

const metrics = [
  { key: 'overall', value: '64%' },
  { key: 'framework', value: '92%' },
  { key: 'runtimeGates', value: '0' },
  { key: 'actions', value: '0' },
] as const

const boundaries = [
  'runtime_execution_authorized=false',
  'active_runtime_gate_count=0',
  'action_buttons_allowed=false',
  'not_authorization=true',
] as const

type IwoooSReadOnlyBridgeProps = {
  variant?: 'light' | 'dark'
}

export function IwoooSReadOnlyBridge({ variant = 'light' }: IwoooSReadOnlyBridgeProps) {
  const t = useTranslations('security.iwooosBridge')
  const isDark = variant === 'dark'
  const panelBackground = isDark ? '#111827' : '#fff'
  const headerBackground = isDark ? '#0f172a' : '#faf9f3'
  const borderColor = isDark ? '#374151' : '#e0ddd4'
  const softBorderColor = isDark ? '#1f2937' : '#f0ede4'
  const primaryText = isDark ? '#f9fafb' : '#141413'
  const bodyText = isDark ? '#d1d5db' : '#5f5d56'
  const mutedText = isDark ? '#9ca3af' : '#87867f'
  const linkBackground = isDark ? '#111827' : '#fff'

  return (
    <>
      <style jsx>{`
        @media (max-width: 640px) {
          .iwooos-bridge-full {
            display: none !important;
          }
          .iwooos-bridge-compact {
            display: flex !important;
          }
        }
      `}</style>

      <section
        className="iwooos-bridge-compact"
        data-testid="iwooos-read-only-bridge"
        style={{
          display: 'none',
          flexDirection: 'column',
          alignItems: 'stretch',
          gap: 6,
          background: panelBackground,
          border: `0.5px solid ${borderColor}`,
          borderRadius: 8,
          marginBottom: 12,
          padding: '10px 8px',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
          <ShieldCheck size={15} strokeWidth={1.8} color="#d97757" style={{ flex: '0 0 auto' }} />
          <div style={{ fontSize: 12, fontWeight: 700, color: primaryText, lineHeight: 1.2, minWidth: 0 }}>
            {t('compactTitle')}
          </div>
        </div>
        <div style={{ fontSize: 10, color: mutedText, lineHeight: 1.35 }}>
          {t('compactDetail')}
        </div>
        <Link
          href="/iwooos"
          title={t('openIwooos')}
          aria-label={t('openIwooos')}
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            minWidth: 0,
            height: 26,
            border: '0.5px solid #d97757',
            background: linkBackground,
            color: primaryText,
            textDecoration: 'none',
          }}
        >
          <ArrowRight size={14} strokeWidth={1.8} />
        </Link>
      </section>

      <section
        className="iwooos-bridge-full"
        data-testid="iwooos-read-only-bridge"
        style={{
          background: panelBackground,
          border: `0.5px solid ${borderColor}`,
          borderRadius: 12,
          marginBottom: 16,
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            alignItems: 'flex-start',
            justifyContent: 'space-between',
            gap: 12,
            padding: '14px 16px',
            borderBottom: `0.5px solid ${borderColor}`,
            background: headerBackground,
          }}
        >
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, minWidth: 0 }}>
            <ShieldCheck size={18} strokeWidth={1.8} color="#d97757" style={{ marginTop: 2, flex: '0 0 auto' }} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: primaryText, lineHeight: 1.4 }}>
                {t('title')}
              </div>
              <p style={{ fontSize: 12, color: bodyText, margin: '4px 0 0', lineHeight: 1.65 }}>
                {t('subtitle')}
              </p>
            </div>
          </div>
          <Link
            href="/iwooos"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
              minHeight: 32,
              padding: '0 10px',
              border: '0.5px solid #d97757',
              background: linkBackground,
              color: primaryText,
              textDecoration: 'none',
              fontSize: 12,
              fontWeight: 700,
              whiteSpace: 'nowrap',
            }}
          >
            {t('openIwooos')}
            <ArrowRight size={14} strokeWidth={1.8} />
          </Link>
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
            gap: 0,
            borderBottom: `0.5px solid ${borderColor}`,
          }}
        >
          {metrics.map(metric => (
            <div key={metric.key} style={{ padding: '12px 16px', borderRight: `0.5px solid ${softBorderColor}` }}>
              <div style={{ fontSize: 10, color: mutedText, textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 4 }}>
                {t(`metrics.${metric.key}.label`)}
              </div>
              <div style={{ fontSize: 20, fontWeight: 700, color: primaryText, lineHeight: 1.2 }}>
                {metric.value}
              </div>
              <div style={{ fontSize: 11, color: mutedText, marginTop: 4, lineHeight: 1.5 }}>
                {t(`metrics.${metric.key}.detail`)}
              </div>
            </div>
          ))}
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: 0,
          }}
        >
          <div style={{ padding: '12px 16px', borderRight: `0.5px solid ${softBorderColor}` }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: primaryText, marginBottom: 8 }}>
              {t('sourceLabel')}
            </div>
            <p style={{ fontSize: 12, color: bodyText, margin: 0, lineHeight: 1.65 }}>
              {t('sourceDetail')}
            </p>
          </div>
          <div style={{ padding: '12px 16px' }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: primaryText, marginBottom: 8 }}>
              {t('boundaryLabel')}
            </div>
            <div style={{ display: 'grid', gap: 5 }}>
              {boundaries.map(boundary => (
                <code key={boundary} style={{ fontSize: 11, color: primaryText, wordBreak: 'break-word' }}>
                  {boundary}
                </code>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
