'use client'

/**
 * 通知設定 Page
 * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
 * @updated 2026-04-02 ogt - 升級為真實 UI，串接 /api/v1/notifications/channels
 */

import { useEffect, useState } from 'react'
import { useTranslations } from 'next-intl'
import { AppLayout } from '@/components/layout'

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

interface Channel {
  name: string
  type: string
  status: string
}

const statusColor = (s: string) => {
  if (s === 'active' || s === 'enabled') return '#4caf50'
  if (s === 'warning') return '#ff9800'
  if (s === 'error' || s === 'disabled') return '#f44336'
  return '#87867f'
}

export default function NotificationsPage({ params }: { params: { locale: string } }) {
  const t = useTranslations('notifications')
  const tc = useTranslations('common')
  const [channels, setChannels] = useState<Channel[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    fetch(`${API_BASE}/api/v1/notifications/channels`)
      .then(r => {
        if (!r.ok) throw new Error('not found')
        return r.json()
      })
      .then(data => { setChannels(Array.isArray(data) ? data : (data?.channels ?? [])) })
      .catch(() => { setChannels([]) })
      .finally(() => setLoading(false))
  }, [])

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

        <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 700, padding: '10px 14px', borderBottom: '0.5px solid #e0ddd4', background: '#faf9f3', fontFamily: 'var(--font-body), monospace', color: '#141413' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', display: 'inline-block' }} />
            {t('title')}
          </div>

          {loading && (
            <div style={{ padding: '32px', textAlign: 'center', color: '#87867f', fontFamily: 'var(--font-body), monospace', fontSize: 13 }}>{tc('loading')}</div>
          )}

          {!loading && channels.length === 0 && (
            <div style={{ padding: '32px', textAlign: 'center', color: '#87867f', fontFamily: 'var(--font-body), monospace', fontSize: 13 }}>{t('noChannels')}</div>
          )}

          {!loading && channels.length > 0 && (
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-body), monospace', fontSize: 13 }}>
              <thead>
                <tr style={{ background: '#faf9f3' }}>
                  {[t('channel'), t('type'), t('status')].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>
                {channels.map((ch, i) => (
                  <tr key={i} style={{ borderBottom: '0.5px solid #e0ddd4' }}>
                    <td style={{ padding: '10px 14px', color: '#141413', fontWeight: 500 }}>{ch.name}</td>
                    <td style={{ padding: '10px 14px', color: '#87867f' }}>{ch.type}</td>
                    <td style={{ padding: '10px 14px' }}>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                        <span style={{ width: 6, height: 6, borderRadius: '50%', background: statusColor(ch.status), display: 'inline-block' }} />
                        <span style={{ color: '#141413' }}>{ch.status}</span>
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </AppLayout>
  )
}
