'use client'

import { useState, useEffect } from 'react'
import { useAccount, useConnect, useSignMessage } from 'wagmi'
import type { BotTrade, TrumpPost } from '@/types'
import { getTrades, getPosts, getUserPublic, getUser, setUserSettings, setHlApiKey, subscribe, type UserSettings } from '@/lib/api'
import { useDashboardStore } from '@/store/dashboard'
import { signRequest, getOrCreateViewEnvelope, getCachedViewEnvelope } from '@/lib/signedRequest'

// ─── helpers ──────────────────────────────────────────────────────────────────
function fmtMoney(n: number, opts: { sign?: boolean; decimals?: number } = {}) {
  const { decimals = 2, sign = false } = opts
  if (n == null || isNaN(n)) return '—'
  const abs = Math.abs(n)
  const s = abs.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
  if (n < 0) return '-$' + s
  if (sign && n > 0) return '+$' + s
  return '$' + s
}
function fmtPct(n: number) { return (n >= 0 ? '+' : '') + n.toFixed(2) + '%' }
function fmtHold(s: number) {
  if (s < 60) return s + 's'
  const m = Math.floor(s / 60)
  if (m < 60) return m + 'm'
  return Math.floor(m / 60) + 'h ' + (m % 60) + 'm'
}

// Defaults shown to a brand-new, un-configured wallet. take_profit_pct,
// stop_loss_pct and daily_budget_usd are all REQUIRED before the bot will
// trade — we still initialise them so the inputs have sensible placeholders.
const DEFAULT_SETTINGS: UserSettings = {
  leverage: 3, position_size_usd: 20, take_profit_pct: 2, stop_loss_pct: 1.5,
  min_confidence: 70, daily_budget_usd: 15,
  active_from: null, active_until: null,
}

// ── datetime-local helpers (browser local tz ↔ ISO UTC) ──
function isoToLocalInput(iso: string | null): string {
  if (!iso) return ''
  const d = new Date(iso)
  if (isNaN(d.getTime())) return ''
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
}
function localInputToIso(v: string): string | null {
  if (!v) return null
  const d = new Date(v) // interpreted as local time
  if (isNaN(d.getTime())) return null
  return d.toISOString()
}

// ─── Bot config panel ─────────────────────────────────────────────────────────
function BotConfigPanel() {
  const { address, isConnected } = useAccount()
  const { connect, connectors } = useConnect()
  const { signMessageAsync } = useSignMessage()
  const { isSubscribed, hlApiKeySet, hlApiKeyMasked, botReadiness, setSubscribed, setBotReadiness, setHlApiKeySet } = useDashboardStore()

  const [settings, setSettings] = useState<UserSettings>(DEFAULT_SETTINGS)
  // Tracks whether the SERVER already has values for these required fields.
  // Used to flag "setup incomplete" until the user saves for the first time.
  const [tpConfigured, setTpConfigured] = useState(false)
  const [slConfigured, setSlConfigured] = useState(false)
  const [budgetConfigured, setBudgetConfigured] = useState(false)
  const [useSchedule, setUseSchedule] = useState(false)
  const [fromLocal, setFromLocal] = useState('')
  const [untilLocal, setUntilLocal] = useState('')
  const [dirty, setDirty] = useState(false)
  const [saveState, setSaveState] = useState<'idle'|'signing'|'saving'|'ok'|'err'>('idle')
  const [saveErr, setSaveErr] = useState('')

  // HL key state
  const [apiKey, setApiKey] = useState('')
  const [keyState, setKeyState] = useState<'idle'|'signing'|'saving'|'ok'|'err'>('idle')
  const [keyErr, setKeyErr] = useState('')

  // Subscribe state
  const [subState, setSubState] = useState<'idle'|'signing'|'saving'|'err'>('idle')
  const [subErr, setSubErr] = useState('')

  // Mounted flag: avoid SSR/CSR mismatch since wagmi state differs between the two.
  const [mounted, setMounted] = useState(false)
  useEffect(() => { setMounted(true) }, [])

  // Settings-load state ("idle" | "loading" | "loaded" | "err"). We do NOT
  // auto-pop MetaMask — only fetch with a cached signature; otherwise wait
  // for the user to click "Load settings".
  const [loadState, setLoadState] = useState<'idle'|'loading'|'loaded'|'err'>('idle')
  const [loadErr, setLoadErr] = useState('')

  // Apply a fetched user payload into local form state.
  function applyUserPayload(u: { active: boolean; hl_api_key_set: boolean; hl_api_key_masked: string | null; settings: UserSettings }) {
    setSubscribed(u.active)
    setHlApiKeySet(u.hl_api_key_set, u.hl_api_key_masked ?? undefined)
    if (u.settings) {
      // Fall back to defaults when server returns null so the inputs are
      // still usable, but remember which required fields weren't configured
      // so we can show the "Setup incomplete" warning.
      const s = u.settings
      setTpConfigured(s.take_profit_pct != null)
      setSlConfigured(s.stop_loss_pct != null)
      setBudgetConfigured(s.daily_budget_usd != null)
      setBotReadiness(u.hl_api_key_set ? 'saved' : 'unknown')
      setSettings({
        ...s,
        take_profit_pct: s.take_profit_pct ?? 2,
        stop_loss_pct: s.stop_loss_pct ?? 1.5,
        daily_budget_usd: s.daily_budget_usd ?? 15,
      })
      const hasSched = s.active_from != null && s.active_until != null
      setUseSchedule(hasSched)
      setFromLocal(isoToLocalInput(s.active_from))
      setUntilLocal(isoToLocalInput(s.active_until))
    }
  }

  // On connect: fetch public state only (no signature). If a fresh view
  // envelope is already cached in sessionStorage, silently hydrate full data.
  useEffect(() => {
    if (!mounted || !isConnected || !address) return
    let cancelled = false
    ;(async () => {
      const pub = await getUserPublic(address.toLowerCase()).catch(() => null)
      if (!pub || cancelled) return
      setSubscribed(pub.active)
      setHlApiKeySet(pub.hl_api_key_set)
      setBotReadiness(pub.hl_api_key_set ? 'saved' : 'unknown')
      if (!pub.active) return
      // Silent rehydrate: only if an unexpired cached envelope exists.
      const cached = getCachedViewEnvelope('view_user', address)
      if (!cached) return
      const u = await getUser(address, cached).catch(() => null)
      if (!u || cancelled) return
      applyUserPayload(u)
      setLoadState('loaded')
    })()
    return () => { cancelled = true }
  }, [address, isConnected, mounted])

  // Explicit "Load settings" — the only place that may pop MetaMask.
  async function handleLoadSettings() {
    if (!address) return
    setLoadErr(''); setLoadState('loading')
    try {
      const env = await getOrCreateViewEnvelope({ action: 'view_user', wallet: address, signMessageAsync })
      const u = await getUser(address, env)
      applyUserPayload(u)
      setLoadState('loaded')
    } catch (e: unknown) {
      const m = e instanceof Error ? e.message : ''
      setLoadErr(m.includes('rejected') || m.includes('denied') ? 'Cancelled' : m.slice(0, 120))
      setLoadState('err')
    }
  }

  async function refreshUserState(wallet: string) {
    const pub = await getUserPublic(wallet.toLowerCase())
    setSubscribed(pub.active)
    setHlApiKeySet(pub.hl_api_key_set)
    setBotReadiness(pub.hl_api_key_set ? 'saved' : 'unknown')
    return pub
  }

  function updateSettings(patch: Partial<UserSettings>) {
    setSettings(s => ({ ...s, ...patch }))
    setDirty(true)
  }

  async function handleSubscribe() {
    if (!address) return
    setSubErr(''); setSubState('signing')
    try {
      const env = await signRequest({ action: 'subscribe', wallet: address, body: null, signMessageAsync })
      setSubState('saving')
      await subscribe(env)
      setSubscribed(true)
      void refreshUserState(address)
      setSubState('idle')
      // Fresh subscribers have no settings/trades/api-key yet — skip the
      // view_user fetch entirely so they don't have to sign a SECOND popup
      // immediately after subscribing. The defaults in local state are fine;
      // we mark loadState='loaded' so the UI shows the configuration form.
      setTpConfigured(false)
      setSlConfigured(false)
      setBudgetConfigured(false)
      setLoadState('loaded')
    } catch (e: unknown) {
      const m = e instanceof Error ? e.message : ''
      setSubErr(m.includes('rejected') || m.includes('denied') ? 'Cancelled' : m.slice(0, 100))
      setSubState('err')
    }
  }

  async function handleSaveSettings() {
    if (!address) return
    setSaveErr(''); setSaveState('signing')
    try {
      let schedFrom: string | null = null
      let schedUntil: string | null = null
      if (useSchedule) {
        schedFrom = localInputToIso(fromLocal)
        schedUntil = localInputToIso(untilLocal)
        if (!schedFrom || !schedUntil) {
          setSaveErr('Pick both a start and end time'); setSaveState('err'); return
        }
        if (new Date(schedUntil).getTime() <= new Date(schedFrom).getTime()) {
          setSaveErr('End must be after start'); setSaveState('err'); return
        }
      }
      // TP, SL and daily budget are mandatory; enforce here before signing.
      const tp = settings.take_profit_pct, sl = settings.stop_loss_pct, bd = settings.daily_budget_usd
      if (tp == null || tp < 0.1 || tp > 50) { setSaveErr('Take profit must be 0.1 – 50%'); setSaveState('err'); return }
      if (sl == null || sl < 0.1 || sl > 50) { setSaveErr('Stop loss must be 0.1 – 50%'); setSaveState('err'); return }
      if (bd == null || bd <= 0 || bd > 100000) { setSaveErr('Daily budget must be > $0'); setSaveState('err'); return }
      const payload: UserSettings = {
        ...settings,
        take_profit_pct: tp,
        stop_loss_pct: sl,
        daily_budget_usd: bd,
        active_from: schedFrom,
        active_until: schedUntil,
      }
      const env = await signRequest({ action: 'set_settings', wallet: address, body: payload, signMessageAsync })
      setSaveState('saving')
      await setUserSettings(env, payload)
      setSettings(payload)
      setTpConfigured(true); setSlConfigured(true); setBudgetConfigured(true)
      setBotReadiness('saved')
      setDirty(false)
      setSaveState('ok')
      setTimeout(() => setSaveState('idle'), 2000)
    } catch (e: unknown) {
      const m = e instanceof Error ? e.message : ''
      setSaveErr(m.includes('rejected') ? 'Cancelled' : m.slice(0, 100))
      setSaveState('err')
    }
  }

  async function handleSaveKey() {
    if (!address || !apiKey.trim()) return
    const trimmed = apiKey.trim()
    if (!trimmed.startsWith('0x') || trimmed.length !== 66) {
      setKeyErr('Must be 0x + 64 hex chars'); setKeyState('err'); return
    }
    setKeyErr(''); setKeyState('signing')
    try {
      const env = await signRequest({ action: 'set_hl_api_key', wallet: address, body: { api_key: trimmed }, signMessageAsync })
      setKeyState('saving')
      const res = await setHlApiKey(env, trimmed)
      setHlApiKeySet(true, res.masked_key)
      setBotReadiness('saved')
      void refreshUserState(address)
      setApiKey('')
      setKeyState('ok')
    } catch (e: unknown) {
      const m = e instanceof Error ? e.message : ''
      setKeyErr(m.includes('rejected') ? 'Cancelled' : m.slice(0, 100))
      setKeyState('err')
    }
  }

  function handleConnectWallet() {
    const connector = connectors[0]
    if (connector) connect({ connector })
  }

  // Before client mount, render a stable placeholder so SSR output matches
  // the first client paint (avoids hydration mismatch — wagmi state differs).
  if (!mounted) {
    return <div className="card" style={{ padding: 32, marginBottom: 28, minHeight: 120 }} />
  }

  if (!isConnected) {
    return (
      <div className="card" style={{ padding: 32, textAlign: 'center', marginBottom: 28 }}>
        <p style={{ color: 'var(--ink-3)', marginBottom: 16 }}>Connect your wallet to configure the bot and view your trades.</p>
        <button className="btn amber" onClick={handleConnectWallet}>
          Connect wallet
        </button>
      </div>
    )
  }

  // ── small local helpers ──
  const Switch = ({ on, onChange, tone = 'amber' }: { on: boolean; onChange: (v: boolean) => void; tone?: 'amber' | 'up' | 'down' }) => (
    <label className={`switch ${tone === 'amber' ? '' : tone}`}>
      <input type="checkbox" checked={on} onChange={e => { onChange(e.target.checked); setDirty(true) }} />
      <span className="switch-track" />
    </label>
  )

  const saveBtnLabel =
    saveState === 'signing' ? 'Sign in wallet…'
    : saveState === 'saving' ? 'Saving…'
    : saveState === 'ok' ? '✓ Saved'
    : 'Save changes'
  const keyHint =
    hlApiKeySet && !apiKey
      ? 'Saved in your bot profile. If you rotate the API wallet in Hyperliquid, update it here before trading again.'
      : 'Use the Hyperliquid API wallet private key from app.hyperliquid.xyz/API. Never paste your MetaMask secret phrase or private key here.'
  const keyStatusHint =
    keyState === 'ok'
      ? 'API wallet saved. Recommended next step: keep size tiny and run your own first BTC test before treating the setup as production-ready.'
      : null

  // ── Hyperliquid key strip (shown above the settings card) ──
  const hlKeyStrip = (
    <div className="card" style={{ padding: '16px 20px', marginBottom: 16, display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0 }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: hlApiKeySet ? 'var(--up-soft)' : 'var(--bg-sunk)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: hlApiKeySet ? 'var(--up)' : 'var(--ink-4)' }}>
          {hlApiKeySet ? '✓' : '◇'}
        </div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Hyperliquid API wallet</div>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 1 }}>
            {!isSubscribed ? 'Subscribe first to link your HL account'
              : hlApiKeySet && !apiKey ? <>Linked · <span className="mono">{hlApiKeyMasked ?? '···'}</span> · trade-only scope</>
              : 'Paste your API wallet private key — trade-only, never withdraw'}
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {isSubscribed && hlApiKeySet && !apiKey && (
          <button className="btn ghost" style={{ padding: '6px 14px', fontSize: 12 }} onClick={() => setApiKey(' ')}>Rotate</button>
        )}
        {isSubscribed && (!hlApiKeySet || apiKey) && (
          <>
            <input value={apiKey.trim() === '' && hlApiKeySet ? '' : apiKey}
              onChange={e => { setApiKey(e.target.value); if (keyState !== 'idle') setKeyState('idle') }}
              placeholder="0x…"
              style={{ width: 220, fontFamily: 'var(--mono)', fontSize: 12, padding: '8px 10px' }} />
            <button className={`btn ${keyState === 'ok' ? 'ghost' : 'amber'}`} style={{ padding: '8px 14px', fontSize: 12 }}
              onClick={handleSaveKey} disabled={keyState === 'signing' || keyState === 'saving' || !apiKey.trim()}>
              {keyState === 'signing' ? 'Sign…' : keyState === 'saving' ? 'Saving…' : keyState === 'ok' ? '✓' : 'Save'}
            </button>
          </>
        )}
      </div>
      <div style={{ gridColumn: '1 / -1', fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.55 }}>
        {keyHint}
      </div>
      {keyStatusHint && (
        <div style={{ gridColumn: '1 / -1', fontSize: 11, color: 'var(--up)', lineHeight: 1.55 }}>
          {keyStatusHint}
        </div>
      )}
      {keyState === 'err' && (
        <div style={{ gridColumn: '1 / -1', fontSize: 12, color: 'var(--down)' }}>{keyErr}</div>
      )}
    </div>
  )

  // ── Is the account fully configured? Bot only trades when every box is ticked. ──
  const missingSetup: string[] = []
  if (!isSubscribed) missingSetup.push('subscribe to the bot')
  if (!hlApiKeySet) missingSetup.push('link a Hyperliquid API wallet')
  if (!tpConfigured) missingSetup.push('take-profit')
  if (!slConfigured) missingSetup.push('stop-loss')
  if (!budgetConfigured) missingSetup.push('daily budget')
  const botReady = missingSetup.length === 0
  const setupSteps = [
    { label: '1. Subscribe', done: isSubscribed },
    { label: '2. Add HL API wallet', done: hlApiKeySet },
    { label: '3. Save risk limits', done: tpConfigured && slConfigured && budgetConfigured },
  ]
  const setupGuideMessage =
    !isSubscribed ? 'Start by subscribing with the connected wallet. That unlocks the bot profile for this address.'
    : botReadiness === 'ready' ? 'Your setup is verified. Before relying on automation, run one tiny BTC trade with your own wallet and Hyperliquid API wallet to confirm the live path end to end.'
    : !hlApiKeySet ? 'Next, paste the Hyperliquid API wallet private key you generated inside Hyperliquid. Do not paste your MetaMask private key or seed phrase here.'
    : 'Your exchange key is saved. Finish take-profit, stop-loss, and daily budget, then save changes. The backend still needs to verify this setup before we mark it ready.'

  return (
    <div style={{ marginBottom: 28 }}>
      <div
        className="card"
        style={{
          padding: '14px 18px',
          marginBottom: 12,
          background: botReady ? 'var(--up-soft)' : 'var(--amber-soft)',
          borderColor: botReady ? 'color-mix(in oklab, var(--up) 18%, var(--line))' : 'color-mix(in oklab, var(--amber) 22%, var(--line))',
        }}
      >
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          {setupSteps.map((step) => (
            <span
              key={step.label}
              className={`chip ${step.done ? 'up' : ''}`}
              style={{ fontSize: 11 }}
            >
              {step.done ? '✓ ' : '○ '}
              {step.label}
            </span>
          ))}
        </div>
        <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.55 }}>
          {setupGuideMessage}
        </div>
      </div>

      {hlKeyStrip}

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        {/* ─── Header bar ─── */}
        <div style={{ padding: '20px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--line)' }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>Trading bot</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>Executes on Hyperliquid when a Trump post clears your filters.</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            {dirty && isSubscribed && <span style={{ fontSize: 12, color: 'var(--amber-ink)' }}>● Unsaved</span>}
            {saveState === 'err' && <span style={{ fontSize: 12, color: 'var(--down)' }}>{saveErr}</span>}
            {!isSubscribed ? (
              <button className="btn amber" style={{ padding: '8px 18px', fontSize: 13 }}
                onClick={handleSubscribe} disabled={subState === 'signing' || subState === 'saving'}>
                {subState === 'signing' ? 'Sign…' : subState === 'saving' ? 'Activating…' : 'Subscribe'}
              </button>
            ) : (
              <>
                <span className={`chip ${botReady ? 'up' : 'down'}`} style={{ fontSize: 11 }}>
                  {botReady ? '● Bot ready' : '● Bot paused'}
                </span>
                <button className={`btn ${saveState === 'ok' ? 'ghost' : 'amber'}`}
                  style={{ padding: '8px 18px', fontSize: 13 }}
                  onClick={handleSaveSettings}
                  disabled={!dirty || saveState === 'signing' || saveState === 'saving'}>
                  {saveBtnLabel}
                </button>
              </>
            )}
          </div>
        </div>

        {/* ─── Setup-incomplete warning (persists until fully configured) ─── */}
        {isSubscribed && loadState === 'loaded' && !botReady && (
          <div style={{
            padding: '14px 24px',
            background: 'var(--down-soft)',
            borderBottom: '1px solid var(--line)',
            display: 'flex', alignItems: 'flex-start', gap: 12,
          }}>
            <span style={{ fontSize: 16, color: 'var(--down)', lineHeight: 1 }}>⚠</span>
            <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink)' }}>
              <div style={{ fontWeight: 600, marginBottom: 2 }}>Setup incomplete — the bot will not open any trades.</div>
              <div style={{ color: 'var(--ink-3)' }}>
                Finish configuring: <span style={{ color: 'var(--down)', fontWeight: 500 }}>{missingSetup.join(' · ')}</span>. Fill every required field below and save. The bot stays paused until every box is ticked.
              </div>
            </div>
          </div>
        )}

        {isSubscribed && loadState === 'loaded' && botReady && (
          <div style={{
            padding: '14px 24px',
            background: 'var(--up-soft)',
            borderBottom: '1px solid var(--line)',
            display: 'flex', alignItems: 'flex-start', gap: 12,
          }}>
            <span style={{ fontSize: 16, color: 'var(--up)', lineHeight: 1 }}>✓</span>
            <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink)' }}>
              <div style={{ fontWeight: 600, marginBottom: 2 }}>Setup complete on this page.</div>
              <div style={{ color: 'var(--ink-3)' }}>
                Wallet subscription, API wallet storage, and risk fields are all saved. Before you rely on automation, use your own account to run one tiny BTC test and confirm the live trade path behaves the way you expect.
              </div>
            </div>
          </div>
        )}

        {!isSubscribed ? (
          <div style={{ padding: 28, color: 'var(--ink-3)', fontSize: 13, lineHeight: 1.65 }}>
            Subscribe to activate automated trading. The bot signs positions on Hyperliquid using an API wallet scoped to trade-only — it can never withdraw. You pick the size, leverage, risk limits, and signal threshold below.
            {subState === 'err' && <div style={{ marginTop: 10, color: 'var(--down)' }}>{subErr}</div>}
          </div>
        ) : loadState !== 'loaded' ? (
          <div style={{ padding: 28 }}>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.65, marginBottom: 16 }}>
              Sign a one-time message with your wallet to load your bot settings and trade history. The signature is cached for 4 minutes so repeat visits won't prompt again.
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <button className="btn amber" onClick={handleLoadSettings}
                disabled={loadState === 'loading'}>
                {loadState === 'loading' ? 'Waiting for signature…' : 'Load my settings'}
              </button>
              {loadState === 'err' && <span style={{ fontSize: 12, color: 'var(--down)' }}>{loadErr}</span>}
            </div>
          </div>
        ) : (
          <div style={{ padding: '8px 24px 24px' }}>
            {/* ─── EXECUTION ─── */}
            <div className="section-head">
              <span className="section-head-label">Execution</span>
              <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            </div>

            <div className="form-row">
              <div className="form-row-label">
                Per-trade size
                <span className="hint">Notional in USD. margin ≈ ${(settings.position_size_usd / settings.leverage).toFixed(2)} at {settings.leverage}×</span>
              </div>
              <div className="form-row-control">
                <div className="num-field">
                  <span className="prefix">$</span>
                  <input type="number" min={5} max={10000} step={5} value={settings.position_size_usd}
                    onChange={e => updateSettings({ position_size_usd: Math.max(5, +e.target.value || 0) })} />
                </div>
                <span style={{ fontSize: 12, color: 'var(--ink-4)' }}>$5 – $10,000</span>
              </div>
            </div>

            <div className="form-row">
              <div className="form-row-label">
                Leverage
                <span className="hint">Applied to every position</span>
              </div>
              <div className="form-row-control">
                <div className="slider-field">
                  <input type="range" min={1} max={50} value={settings.leverage}
                    onChange={e => updateSettings({ leverage: +e.target.value })} />
                  <div className="ticks"><span>1×</span><span>25×</span><span>50×</span></div>
                </div>
                <span className="slider-readout">{settings.leverage}×</span>
              </div>
            </div>

            <div className="form-row">
              <div className="form-row-label">
                Min AI confidence
                <span className="hint">Skip any signal below this score (0–100)</span>
              </div>
              <div className="form-row-control">
                <div className="slider-field">
                  <input type="range" min={0} max={100} value={settings.min_confidence}
                    onChange={e => updateSettings({ min_confidence: +e.target.value })} />
                  <div className="ticks"><span>0</span><span>50</span><span>100</span></div>
                </div>
                <span className="slider-readout">{settings.min_confidence}%</span>
              </div>
            </div>

            {/* ─── LIMITS ─── */}
            <div className="section-head" style={{ marginTop: 20 }}>
              <span className="section-head-label">Limits &amp; risk</span>
              <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            </div>

            <div className="form-row">
              <div className="form-row-label">
                Daily budget <span style={{ color: 'var(--down)' }}>*</span>
                <span className="hint">Stop opening new trades once the day's total notional reaches this (UTC). Required.</span>
              </div>
              <div className="form-row-control">
                <div className="num-field">
                  <span className="prefix">$</span>
                  <input type="number" min={1} max={100000} step={5}
                    value={settings.daily_budget_usd ?? ''}
                    onChange={e => updateSettings({ daily_budget_usd: e.target.value === '' ? null : Math.max(0, +e.target.value) })} />
                  <span className="suffix">/day</span>
                </div>
                {!budgetConfigured && <span style={{ fontSize: 11, color: 'var(--down)' }}>Not configured</span>}
              </div>
            </div>

            <div className="form-row">
              <div className="form-row-label">
                Take profit <span style={{ color: 'var(--down)' }}>*</span>
                <span className="hint">Auto-close when unrealised gain hits target. Required.</span>
              </div>
              <div className="form-row-control">
                <div className="num-field">
                  <input type="number" min={0.1} max={50} step={0.1}
                    value={settings.take_profit_pct ?? ''}
                    onChange={e => updateSettings({ take_profit_pct: e.target.value === '' ? null : +e.target.value })} />
                  <span className="suffix">% gain</span>
                </div>
                {!tpConfigured && <span style={{ fontSize: 11, color: 'var(--down)' }}>Not configured</span>}
              </div>
            </div>

            <div className="form-row">
              <div className="form-row-label">
                Stop loss <span style={{ color: 'var(--down)' }}>*</span>
                <span className="hint">Auto-close when drawdown hits limit. Required.</span>
              </div>
              <div className="form-row-control">
                <div className="num-field">
                  <input type="number" min={0.1} max={50} step={0.1}
                    value={settings.stop_loss_pct ?? ''}
                    onChange={e => updateSettings({ stop_loss_pct: e.target.value === '' ? null : +e.target.value })} />
                  <span className="suffix">% loss</span>
                </div>
                {!slConfigured && <span style={{ fontSize: 11, color: 'var(--down)' }}>Not configured</span>}
              </div>
            </div>

            {/* ─── SCHEDULE ─── */}
            <div className="section-head" style={{ marginTop: 20 }}>
              <span className="section-head-label">Active schedule</span>
              <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            </div>

            <div className="form-row">
              <div className="form-row-label">
                Only run in a window
                <span className="hint">Bot ignores signals outside this range. Shown in your browser's local time.</span>
              </div>
              <div className="form-row-control" style={{ flexWrap: 'wrap' }}>
                <Switch on={useSchedule} onChange={(v) => { setUseSchedule(v); setDirty(true) }} />
                {useSchedule && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                    <div className="num-field">
                      <span className="prefix">From</span>
                      <input type="datetime-local" value={fromLocal}
                        onChange={e => { setFromLocal(e.target.value); setDirty(true) }}
                        style={{ width: 190 }} />
                    </div>
                    <span style={{ fontSize: 12, color: 'var(--ink-4)' }}>→</span>
                    <div className="num-field">
                      <span className="prefix">Until</span>
                      <input type="datetime-local" value={untilLocal}
                        onChange={e => { setUntilLocal(e.target.value); setDirty(true) }}
                        style={{ width: 190 }} />
                    </div>
                  </div>
                )}
              </div>
            </div>

            {useSchedule && fromLocal && untilLocal && (() => {
              const fromMs = new Date(fromLocal).getTime()
              const untilMs = new Date(untilLocal).getTime()
              const nowMs = Date.now()
              if (isNaN(fromMs) || isNaN(untilMs) || untilMs <= fromMs) return null
              const inWindow = nowMs >= fromMs && nowMs < untilMs
              const durMs = untilMs - fromMs
              const durH = durMs / 3600000
              const durLabel = durH < 1 ? `${Math.round(durH * 60)} min`
                : durH < 48 ? `${durH.toFixed(1)} h`
                : `${(durH / 24).toFixed(1)} d`
              return (
                <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 24, padding: '0 0 14px' }}>
                  <div />
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12 }}>
                    <span className={`chip ${inWindow ? 'up' : ''}`} style={{ fontSize: 11 }}>
                      {inWindow ? '● In window now' : '○ Outside window'}
                    </span>
                    <span style={{ color: 'var(--ink-4)' }}>Duration: {durLabel}</span>
                  </div>
                </div>
              )
            })()}
          </div>
        )}
      </div>
    </div>
  )
}

// ─── Trades table ─────────────────────────────────────────────────────────────
export default function TradesPage() {
  const [trades, setTrades] = useState<BotTrade[]>([])
  const [posts, setPosts] = useState<TrumpPost[]>([])
  const [loading, setLoading] = useState(true)
  const [assetFilter, setAssetFilter] = useState('all')
  const [sideFilter, setSideFilter] = useState('all')

  useEffect(() => {
    Promise.all([
      getTrades(100, 1).catch(() => []),
      getPosts(500, 1).catch(() => []),
    ]).then(([t, p]) => { setTrades(t); setPosts(p) })
      .finally(() => setLoading(false))
  }, [])

  const filtered = trades.filter(t => {
    if (assetFilter !== 'all' && t.asset !== assetFilter) return false
    if (sideFilter !== 'all' && t.side !== sideFilter) return false
    return true
  })

  // Trades closed externally on HL may have null pnl_usd — exclude from aggregates.
  const priced = filtered.filter(t => t.pnl_usd !== null && t.pnl_usd !== undefined)
  const totalPnl = priced.reduce((s, t) => s + (t.pnl_usd ?? 0), 0)
  const wins = priced.filter(t => (t.pnl_usd ?? 0) > 0).length
  const losses = priced.length - wins
  const avgHold = filtered.length > 0 ? Math.round(filtered.reduce((s, t) => s + t.hold_seconds, 0) / filtered.length) : 0

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Trades</h1>
          <p className="page-sub">Bot configuration · execution history · P&amp;L</p>
        </div>
      </div>

      {/* Bot config: settings + HL key */}
      <BotConfigPanel />

      {/* Stats */}
      <div className="kpi-row" style={{ gridTemplateColumns: 'repeat(4,1fr)', marginBottom: 20 }}>
        <div className="kpi"><div className="label">Total trades</div><div className="value">{filtered.length}</div></div>
        <div className="kpi"><div className="label">Win rate</div><div className="value">{priced.length ? ((wins/priced.length)*100).toFixed(1)+'%' : '—'}</div><div className="foot"><span>{wins}W · {losses}L</span></div></div>
        <div className="kpi accent"><div className="label">Net P&amp;L</div><div className="value">{fmtMoney(totalPnl,{sign:true,decimals:0})}</div></div>
        <div className="kpi"><div className="label">Avg hold</div><div className="value">{avgHold ? fmtHold(avgHold) : '—'}</div></div>
      </div>

      {/* Filters */}
      <div className="row gap-s" style={{ marginBottom: 14 }}>
        <div className="nav-tabs">
          {(['all','BTC','ETH'] as const).map(a => (
            <button key={a} className={`nav-tab ${assetFilter===a?'active':''}`} onClick={() => setAssetFilter(a)}>
              {a==='all'?'All assets':a}
            </button>
          ))}
        </div>
        <div className="nav-tabs">
          {(['all','long','short'] as const).map(s => (
            <button key={s} className={`nav-tab ${sideFilter===s?'active':''}`} onClick={() => setSideFilter(s)}>
              {s.charAt(0).toUpperCase()+s.slice(1)}
            </button>
          ))}
        </div>
      </div>

      {loading && <div style={{ textAlign:'center', padding:60, color:'var(--ink-3)' }}>Loading…</div>}

      {!loading && (
        <div className="card flush" style={{ overflow:'hidden' }}>
          <table className="table">
            <thead>
              <tr>
                <th>Asset</th><th>Side</th><th>Entry</th><th>Exit</th>
                <th>Hold</th><th>Trigger post</th><th>P&amp;L</th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr><td colSpan={7} style={{ textAlign:'center', padding:40, color:'var(--ink-3)' }}>No trades found</td></tr>
              )}
              {filtered.map(t => {
                const tp = posts.find(p => p.id === t.trigger_post_id)
                const roi = ((t.exit_price - t.entry_price) / t.entry_price) * 100 * (t.side === 'long' ? 1 : -1)
                return (
                  <tr key={t.id}>
                    <td>
                      <div className="row gap-s">
                        <span className={`asset-dot ${t.asset.toLowerCase()}`} />
                        <span style={{ fontWeight:500 }}>{t.asset}</span>
                      </div>
                    </td>
                    <td><span className={`side-pill ${t.side}`}>{t.side==='long'?'↗ LONG':'↘ SHORT'}</span></td>
                    <td className="mono">${t.entry_price.toLocaleString()}</td>
                    <td className="mono">${t.exit_price.toLocaleString()}</td>
                    <td className="mono" style={{ color:'var(--ink-2)' }}>{fmtHold(t.hold_seconds)}</td>
                    <td style={{ maxWidth:260 }}>
                      {tp ? (
                        <span style={{ fontSize:12, color:'var(--ink-2)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', display:'block' }}>
                          {tp.text.slice(0,60)}…
                        </span>
                      ) : <span style={{ fontSize:12, color:'var(--ink-4)' }}>—</span>}
                    </td>
                    <td>
                      <div className="stack" style={{ alignItems:'flex-end' }}>
                        {t.pnl_usd === null || t.pnl_usd === undefined ? (
                          <span style={{ fontSize:12, color:'var(--ink-4)' }} title="Closed externally on Hyperliquid — PnL not recorded">
                            n/a
                          </span>
                        ) : (
                          <>
                            <span className={`delta ${t.pnl_usd>=0?'up':'down'}`} style={{ fontWeight:600, fontSize:14 }}>
                              {fmtMoney(t.pnl_usd,{sign:true})}
                            </span>
                            <span className={`delta ${roi>=0?'up':'down'}`} style={{ fontSize:11, opacity:0.7 }}>{fmtPct(roi)}</span>
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}