'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useAccount } from 'wagmi'

export default function SettingsClient() {
  const { address, isConnected } = useAccount()
  const pathname = usePathname()
  const locale = pathname.split('/')[1] || 'en'
  const href = (path: string) => `/${locale}${path}`

  return (
    <div style={{ maxWidth: 560 }}>
      {/* Account card */}
      <div className="card" style={{ padding: 24, marginBottom: 16 }}>
        <div className="section-title" style={{ marginBottom: 16 }}><h2>Account</h2></div>
        <div className="field">
          <label>Connected wallet</label>
          <input disabled value={isConnected && address ? `${address.slice(0, 10)}…${address.slice(-8)}` : 'Not connected'} />
        </div>
      </div>

      {/* Link to Trades page for bot config */}
      <div className="card" style={{ padding: 24, marginBottom: 16 }}>
        <div className="row between" style={{ alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>Bot &amp; exchange settings</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>
              Position size, leverage, TP/SL, Hyperliquid API key, and subscription are managed on the Trades page.
            </div>
          </div>
          <Link href={href('/trades')} className="btn ghost" style={{ whiteSpace: 'nowrap', marginLeft: 16 }}>
            Go to Trades →
          </Link>
        </div>
      </div>

      {/* Legal links */}
      <div className="card" style={{ padding: 24 }}>
        <div className="section-title" style={{ marginBottom: 16 }}><h2>Legal</h2></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Link href={href('/privacy')} style={{ fontSize: 14, color: 'var(--ink-2)', textDecoration: 'none' }}>Privacy Policy →</Link>
          <Link href={href('/terms')} style={{ fontSize: 14, color: 'var(--ink-2)', textDecoration: 'none' }}>Terms of Service →</Link>
          <Link href={href('/contact')} style={{ fontSize: 14, color: 'var(--ink-2)', textDecoration: 'none' }}>Contact Us →</Link>
        </div>
      </div>
    </div>
  )
}