'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useLocale } from 'next-intl'
import { useAccount } from 'wagmi'
import BotConfigPanel from '@/components/trades/BotConfigPanel'
import TelegramCard from '@/components/telegram/TelegramCard'

/**
 * Settings page — the home for all configuration.
 *
 * Previously the BotConfigPanel lived on /trades (alongside the trade history),
 * and /settings was just a redirect card. That made /trades double-duty
 * (configure AND view results) and /settings feel like a dead end. We swap:
 *   - /settings  → all configuration (bot, exchange key, subscription)
 *   - /trades    → pure execution view (open positions + history)
 * Legal links stay here since this is the "everything else" page.
 */
export default function SettingsClient() {
  const localeIntl = useLocale()
  const isZh = false  // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json
  const { address, isConnected } = useAccount()
  const [mounted, setMounted] = useState(false)
  const pathname = usePathname()

  useEffect(() => { setMounted(true) }, [])
  const locale = pathname.split('/')[1] || 'en'
  const href = (path: string) => `/${locale}${path}`

  return (
    <div>
      {/* Account card — quick "who am I logged in as" */}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                      textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>
          {isZh ? '账户' : 'Account'}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: mounted && isConnected ? 'var(--up-soft)' : 'var(--bg-sunk)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: mounted && isConnected ? 'var(--up)' : 'var(--ink-4)', fontSize: 14,
          }}>
            {mounted && isConnected ? '✓' : '○'}
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>
              {mounted && isConnected && address
                ? <span className="mono">{address.slice(0, 10)}…{address.slice(-8)}</span>
                : (isZh ? '未连接' : 'Not connected')}
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-4)' }}>
              {mounted && isConnected ? (isZh ? '钱包是下方所有配置的身份入口' : 'Wallet is the access key for everything below') : (isZh ? '连接钱包后才能配置机器人' : 'Connect a wallet to configure the bot')}
            </div>
          </div>
        </div>
      </div>

      {/* The full bot config UI (subscribe, HL key, risk settings, schedule) */}
      <BotConfigPanel />

      {/* Telegram push alerts — only renders something useful when wallet
          connected + server configured + (eventually) subscribed. */}
      <TelegramCard />

      {/* Legal & support */}
      <div className="card" style={{ padding: 20 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                      textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>
          {isZh ? '法律与支持' : 'Legal & support'}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <Link href={href('/privacy')} style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '隐私政策 →' : 'Privacy Policy →'}</Link>
          <Link href={href('/terms')}   style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '服务条款 →' : 'Terms of Service →'}</Link>
          <Link href={href('/contact')} style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '联系我们 →' : 'Contact Us →'}</Link>
        </div>
      </div>
    </div>
  )
}