'use client'

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

// BotConfigPanel is 867 lines and only needed after wallet connect — lazy load it.
const BotConfigPanel = dynamic(() => import('@/components/trades/BotConfigPanel'), {
  ssr: false,
  loading: () => <div style={{ height: 200, background: 'var(--bg-sunk)', borderRadius: 12, marginBottom: 16 }} />,
})

/**
 * 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}`
  const walletLabel = mounted && isConnected && address
    ? `${address.slice(0, 6)}…${address.slice(-4)}`
    : 'Not connected'

  return (
    <>
      <div className="settings-control-center">
        <div>
          <div className="settings-control-kicker">Control center</div>
          <div className="settings-control-title">One place to arm, limit, and verify the bot</div>
          <div className="settings-control-copy">
            Subscription, execution permissions, per-system risk, and alert delivery all live here.
          </div>
        </div>
        <div className="settings-control-meta">
          <div className="settings-meta-card">
            <span className="settings-meta-label">Wallet</span>
            <strong className="mono">{walletLabel}</strong>
          </div>
          <div className="settings-meta-card">
            <span className="settings-meta-label">Private data</span>
            <strong>{mounted && isConnected ? 'Ready to unlock' : 'Connect first'}</strong>
          </div>
          <div className="settings-meta-card">
            <span className="settings-meta-label">Main actions</span>
            <strong>Load settings, save limits, link API</strong>
          </div>
        </div>
      </div>

      <div className="settings-scope-intro">
        <PageHint>
          Everything that controls your account — subscription, Hyperliquid
          API key, bot risk parameters, and Telegram alerts.
        </PageHint>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 8 }}>
          Trump settings control event-driven entries. Macro Vibes settings control BTC manage-only behavior. Global limits apply account-wide.
        </div>
      </div>

      <div className="settings-scope-grid" style={{ marginBottom: 16 }}>
        <section id="trump-settings" className="settings-scope-card trump">
          <div className="settings-scope-eyebrow">Trump Signal</div>
          <div className="settings-scope-title">Event-driven entry settings</div>
          <div className="settings-scope-copy">
            Position size, Trump leverage, and minimum AI confidence used when a Truth Social post becomes actionable.
          </div>
          <a href="#config-trump" className="settings-scope-link">Configure Trump ↓</a>
        </section>

        <section id="macro-settings" className="settings-scope-card btc">
          <div className="settings-scope-eyebrow">Macro Vibes</div>
          <div className="settings-scope-title">BTC manage-only settings</div>
          <div className="settings-scope-copy">
            Strategy mode, BTC leverage, and de-risk behavior used by the Macro Vibes sleeve.
          </div>
          <a href="#config-macro" className="settings-scope-link">Configure Macro Vibes ↓</a>
        </section>

        <section id="global-settings" className="settings-scope-card global">
          <div className="settings-scope-eyebrow">Global</div>
          <div className="settings-scope-title">Account-wide execution controls</div>
          <div className="settings-scope-copy">
            Subscription, Hyperliquid API wallet, manual window, schedule, and guardrails that apply across the account.
          </div>
          <a href="#config-global" className="settings-scope-link">Configure global ↓</a>
        </section>
      </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>

      <div id="bot-config" className="settings-section-shell">
        <div className="settings-section-head">
          <div>
            <div className="settings-section-kicker">Execution setup</div>
            <div className="settings-section-title">Trading permissions and risk controls</div>
          </div>
          <div className="settings-section-note">
            Load once, then adjust by module without leaving the page.
          </div>
        </div>

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

      <div className="settings-section-shell">
        <div className="settings-section-head">
          <div>
            <div className="settings-section-kicker">Delivery</div>
            <div className="settings-section-title">Telegram alerts</div>
          </div>
          <div className="settings-section-note">
            Bind notifications after the trading path is configured.
          </div>
        </div>
        <TelegramCard />
      </div>

      <div className="settings-section-shell">
        <div className="settings-section-head">
          <div>
            <div className="settings-section-kicker">Support</div>
            <div className="settings-section-title">Legal and contact</div>
          </div>
        </div>

        {/* 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>
    </>
  )
}