'use client'
import Link from 'next/link'
import { useState, useEffect, useCallback, useRef } from 'react'
import { useLocale } from 'next-intl'
import { useAccount, useSignMessage } from 'wagmi'
import { getUserPublic, setAutoTrade, type UserPublic } from '@/lib/api'
import { signRequest } from '@/lib/signedRequest'
import { isUserRejection, walletErrorLabel } from '@/lib/walletError'
import { confirmSign } from '@/components/wallet/SignConfirmSheet'

/**
 * ONE control: the master Auto-Trade switch.
 *
 *   OFF (default, safe) — signals are still scanned & shown in the feed,
 *                         but NO trade is opened. Pure monitoring.
 *   ON                  — a qualifying signal auto-opens a trade (full
 *                         System-2 risk: dynamic leverage, staged de-risk,
 *                         ratchet, peak-trail). De-risk / stop-loss always
 *                         run on open positions regardless — never toggleable.
 *
 * Replaces the old scanner-toggle / timed manual-window / schedule / paper
 * trio. Circuit breaker is read-only; turning Auto-Trade ON acknowledges +
 * clears a tripped breaker. Per-trade pyramiding is the "Grow" switch on
 * each open position (Trades page), not here.
 */

const SYS = {
  trump: { idx: '', name: 'Trump Signal', accent: '#b45309', soft: 'rgba(180,83,9,0.08)' },
  btc:   { idx: '', name: 'Macro Vibes', accent: '#16a34a', soft: 'rgba(22,163,74,0.08)' },
} as const

const ROW: React.CSSProperties = {
  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  gap: 12, padding: '8px 0', flexWrap: 'wrap',
}
const LABEL: React.CSSProperties = { fontSize: 13, color: 'var(--ink-2)' }

export default function SystemControl({ system }: { system: 'trump' | 'btc' }) {
  const locale = useLocale()
  const isZh = false  // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json
  const s = SYS[system]
  const { address, isConnected } = useAccount()
  const { signMessageAsync } = useSignMessage()

  const [mounted, setMounted] = useState(false)
  const [pub, setPub] = useState<UserPublic | null>(null)
  const [busy, setBusy] = useState(false)
  const [err, setErr] = useState('')

  useEffect(() => { setMounted(true) }, [])

  // Generation counter: each address change increments it so any in-flight
  // refresh from the previous address can detect it's stale.
  // `snap !== address` inside a useCallback is a stale-closure trap — both
  // refer to the same closed-over value so the check is always false.
  const genRef = useRef(0)
  useEffect(() => { genRef.current++ }, [address])

  const refresh = useCallback(async () => {
    if (!address) { setPub(null); return }
    const gen = genRef.current
    const p = await getUserPublic(address.toLowerCase()).catch(() => null)
    if (gen !== genRef.current) return   // wallet changed while in-flight
    setPub(p)
  }, [address])

  useEffect(() => {
    refresh()
    const poll = setInterval(refresh, 30_000)
    return () => clearInterval(poll)
  }, [refresh])

  const subscribed = !!pub?.active
  const paper      = !!pub?.paper_mode
  const autoOn     = !!pub?.auto_trade
  const cbTripped  = !!pub?.circuit_breaker_tripped_at &&
    (Date.now() - new Date(pub!.circuit_breaker_tripped_at!).getTime()) < 24 * 3600 * 1000

  async function flipAuto(on: boolean) {
    if (busy) return
    if (!address)   { setErr(isZh ? '请先连接右上角的钱包。' : 'Connect your wallet first (top-right).'); return }
    if (!subscribed) { setErr(isZh ? '钱包尚未订阅，请先去设置页完成订阅。' : 'Wallet not subscribed — subscribe on the Settings page first.'); return }
    // B51: live users without an HL API key cannot actually execute trades —
    // block the toggle so the ON state never silently becomes a no-op.
    if (on && !paper && !pub?.hl_api_key_set) {
      setErr(isZh
        ? '未绑定 Hyperliquid API Key。请先在设置页保存 API Key，Auto-Trade 才能真实下单。'
        : 'No Hyperliquid API key saved. Add your HL API key on the Settings page before enabling Auto-Trade.')
      return
    }
    if (autoOn === on) return

    // Claim the busy slot BEFORE awaiting confirmSign — otherwise a rapid
    // second click on the same pill (or the opposite pill) slips past the
    // `if (busy) return` guard and queues a second sheet + second signature.
    // We still clear it in `finally` below.
    setBusy(true); setErr('')

    // Show pre-signing confirmation sheet before triggering MetaMask
    const confirmed = await confirmSign(on
      ? {
          label: paper
            ? (isZh ? '开启 Auto-Trade（模拟模式）' : 'Enable Auto-Trade (paper mode)')
            : (isZh ? '开启 Auto-Trade（真实资金）' : 'Enable Auto-Trade (live capital)'),
          description: paper
            ? (isZh
              ? '机器人将在信号触发时自动开仓（Paper 模式，无真实资金）。钱包签名仅用于身份验证。'
              : 'The bot will auto-open positions when a qualifying signal fires in paper mode. No real capital is used. The wallet signature is only for identity verification.')
            : (isZh
              ? '机器人将在 Hyperliquid 上用真实资金自动开仓。止损与分级减仓始终生效保护仓位。'
              : 'The bot will auto-open real positions on Hyperliquid. Stop-loss and staged de-risking remain active to protect the position.'),
          danger: !paper,
        }
      : {
          label: isZh ? '关闭 Auto-Trade' : 'Disable Auto-Trade',
          description: isZh
            ? '停止自动开仓。已有持仓的止损与减仓逻辑仍会继续运行。'
            : 'Stop opening new trades automatically. Risk controls on existing positions will keep running.',
          danger: false,
        }
    )
    if (!confirmed) { setBusy(false); return }   // release the slot we claimed

    try {
      const env = await signRequest({
        action: 'set_auto_trade', wallet: address,
        body: { enabled: on }, signMessageAsync,
      })
      const r = await setAutoTrade(env, on)
      setPub(p => p ? {
        ...p,
        auto_trade: r.auto_trade,
        ...(r.circuit_breaker_cleared
          ? { circuit_breaker_tripped_at: null, circuit_breaker_reason: null }
          : {}),
      } : p)
    } catch (e) {
      if (isUserRejection(e)) {
        setErr(isZh ? '已取消' : 'Cancelled')
      } else {
        setErr(walletErrorLabel(e, isZh ? '已取消' : 'Cancelled', 110)
               || (isZh ? 'Auto-Trade 切换失败' : 'Auto-Trade toggle failed'))
      }
    } finally { setBusy(false) }
  }

  // SSR / pre-hydration: render nothing to avoid hydration mismatch with
  // wagmi state that resolves client-side.
  if (!mounted) return null

  const settingsHref = `/${locale}/settings#bot-config`
  const settingsLabel = system === 'trump' ? 'Trump Signal' : 'Macro Vibes'

  // Macro Vibes (System 2) is MANAGE-ONLY by design — it NEVER auto-opens a
  // trade. bot_engine.process_post early-returns for sys2 sources, so the
  // master Auto-Trade switch only governs Trump (System 1). Presenting an
  // ON/OFF auto-trade toggle here would (a) falsely imply Macro signals
  // auto-open and (b) be a confusing second copy of the SAME global switch
  // shown on the Trump page. Show the adopt-only flow instead.
  if (system === 'btc') {
    // Compact inline strip — signal fires → you open → bot manages.
    // No big card; the data panel is the main content. Settings link stays
    // for users who want to configure, but the explanation is one line.
    return (
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 12, flexWrap: 'wrap',
        padding: '9px 14px', marginBottom: 14,
        borderRadius: 8,
        background: s.soft,
        borderLeft: `3px solid ${s.accent}`,
      }}>
        <span style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.4 }}>
          <strong style={{ color: s.accent }}>You open · bot manages exit</strong>
          <span style={{ color: 'var(--ink-4)', marginLeft: 8 }}>
            Signal → Telegram → open on Hyperliquid → <code style={{ fontSize: 11 }}>/adopt</code>
          </span>
        </span>
        <Link
          href={settingsHref}
          style={{
            fontSize: 11, color: s.accent, textDecoration: 'none',
            fontWeight: 700, flexShrink: 0,
            opacity: 0.8,
          }}
        >
          {settingsLabel} settings ↗
        </Link>
      </div>
    )
  }

  // Wallet not connected: a previous version showed a giant full-width
  // "Connect a wallet..." card here, which was redundant with the navbar's
  // Connect button. The opposite extreme — rendering null — silently hid
  // the existence of Auto-Trade for unconnected users. Compromise: a SLIM
  // inline strip that simply announces the feature without pushing the
  // page around. Once connected, the full control panel renders below.
  if (!isConnected) {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap',
        padding: '10px 14px', marginBottom: 16,
        background: 'var(--bg-sunk)',
        border: '1px dashed var(--line)',
        borderRadius: 8,
        fontSize: 12, color: 'var(--ink-3)', 
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: 'var(--ink-4)', flexShrink: 0,
          }} />
          <span style={{ color: 'var(--ink-2)', fontWeight: 600 }}>
            {s.name} Auto-Trade
          </span>
          <span>·</span>
          <span style={{ color: 'var(--ink-4)' }}>
            OFF — connect wallet (top-right) to enable
          </span>
        </div>
        <Link
          href={settingsHref}
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            padding: '8px 12px',
            borderRadius: 999,
            border: '1px solid var(--line)',
            background: 'var(--surface)',
            fontSize: 12,
            color: 'var(--ink)',
            textDecoration: 'none',
            fontWeight: 700,
            boxShadow: 'var(--shadow-1)',
          }}
        >
          <span style={{ fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>
            Settings
          </span>
          <span>{settingsLabel}</span>
          <span aria-hidden="true">↗</span>
        </Link>
      </div>
    )
  }

  // ── Net result — the single sentence that matters ─────────────────────────
  let netOk = false
  let netMsg = ''
  if (!subscribed) {
    netMsg = isZh
      ? '钱包还没订阅，请先去设置页完成订阅。'
      : 'Wallet not subscribed — subscribe on the Settings page first.'
  } else if (cbTripped) {
    netMsg = isZh
      ? `熔断器已触发（${pub?.circuit_breaker_reason || '风险限制'}）。重新打开 Auto-Trade 才会确认并恢复。`
      : `Circuit breaker tripped (${pub?.circuit_breaker_reason || 'risk limit'}). Turn Auto-Trade ON to acknowledge & resume.`
  } else if (!autoOn) {
    netMsg = isZh
      ? 'Auto-Trade 当前为关闭: Trump 信号仍会显示，但不会自动开仓。'
      : 'Auto-Trade is OFF — Trump signals are shown in the feed but NOT traded.'
  } else if (pub?.trump_enabled === false) {
    // Auto-Trade is ON but the Trump (System-1) gate is OFF, so the backend
    // skips every Trump signal (bot_engine: trump_enabled OFF → not traded).
    // Without this branch the UI falsely promised "next signal auto-opens".
    netMsg = isZh
      ? 'Auto-Trade 已开启，但 Trump 系统①未启用: 在设置页打开 Trump 开关后才会自动开仓。'
      : 'Auto-Trade is ON, but the Trump system is disabled — enable Trump in Settings before signals will trade.'
  } else {
    netOk = true
    netMsg = isZh
      ? `Auto-Trade 已开启（Trump 系统①）: 下一条合格 Trump 信号会自动开出${paper ? '模拟' : '真实'}仓位。`
      : `Auto-Trade ON — will open a ${paper ? 'PAPER' : 'LIVE'} trade on the next qualifying Trump signal.`
  }

  const Pill = ({ active, onClick, children, tone }: {
    active: boolean; onClick: () => void; children: React.ReactNode
    tone: 'green' | 'idle'
  }) => {
    const bg = active ? (tone === 'green' ? 'var(--up, #16a34a)' : 'var(--ink-3)') : 'transparent'
    return (
      <button onClick={onClick} disabled={busy}
        style={{
          padding: '8px 20px', fontSize: 13, fontWeight: 800, borderRadius: 8,
          cursor: busy ? 'wait' : 'pointer',
          border: active ? `1px solid ${bg}` : '1px solid var(--line)',
          background: active ? bg : 'transparent',
          color: active ? '#fff' : 'var(--ink-3)',
        }}>{children}</button>
    )
  }

  return (
    <div className="card" style={{ padding: 0, marginBottom: 16, overflow: 'hidden' }}>
      {/* Header */}
      <div style={{ padding: '14px 16px', background: s.soft,
                    borderLeft: `4px solid ${s.accent}` }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: s.accent }}>
          {s.name} {isZh ? '控制面板' : '— Auto-Trade'}
        </div>
      </div>

      {/* Master Auto-Trade switch */}
      <div style={{ padding: '16px' }}>
        <div style={ROW}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700 }}>
              Auto-Trade <span style={{ fontSize: 10, fontWeight: 600,
                color: 'var(--ink-4)', marginLeft: 6 }}>{isZh ? '· 事件交易' : '· event-driven'}</span>
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 3 }}>
              {isZh ? 'OFF = 只监控信号 · ON = 自动开仓' : 'OFF = monitor only · ON = auto-open on qualifying Trump signals'}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <Pill active={autoOn}  onClick={() => flipAuto(true)}  tone="green">ON</Pill>
            <Pill active={!autoOn} onClick={() => flipAuto(false)} tone="idle">OFF</Pill>
          </div>
        </div>

        {/* Read-only status */}
        <div style={{ ...ROW, borderTop: '1px solid var(--line)', marginTop: 8, paddingTop: 12 }}>
          <span style={LABEL}>{isZh ? '执行模式' : 'Execution mode'}</span>
          <span style={{ fontSize: 12, fontWeight: 700, color: paper ? '#f59e0b' : 'var(--up)' }}>
            {paper ? (isZh ? '📝 模拟' : '📝 PAPER') : (isZh ? '💰 真实资金' : '💰 LIVE')}
            <span style={{ color: 'var(--ink-4)', fontWeight: 400, marginLeft: 8 }}>
              {isZh ? '· 订阅时确定' : '· set when subscribing'}
            </span>
          </span>
        </div>
        <div style={ROW}>
          <span style={LABEL}>{isZh ? '熔断器' : 'Circuit breaker'}</span>
          <span style={{ fontSize: 12, fontWeight: 700,
                         color: cbTripped ? 'var(--down)' : 'var(--up)' }}>
            {cbTripped
              ? (isZh ? `🚨 已触发（${pub?.circuit_breaker_reason}）` : `🚨 tripped (${pub?.circuit_breaker_reason})`)
              : (isZh ? '✓ 正常' : '✓ clear')}
          </span>
        </div>

        {err && (
          <div style={{ fontSize: 11, color: 'var(--down)', marginTop: 10 }}>● {err}</div>
        )}
      </div>

      {/* Net result */}
      <div style={{
        padding: '14px 16px',
        background: netOk ? 'var(--up-soft)' : 'var(--down-soft, rgba(220,38,38,.08))',
        borderTop: '1px solid var(--line)',
      }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.06em',
                      textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>
          {isZh ? '⟹ 当前状态' : '⟹ Current status'}
        </div>
        <div style={{ fontSize: 14, fontWeight: 700,
                      color: netOk ? 'var(--up)' : 'var(--down)' }}>
          {netOk ? '✅ ' : '⛔ '}{netMsg}
        </div>
        <div style={{ marginTop: 8 }}>
          <Link
            href={settingsHref}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              padding: '8px 12px',
              borderRadius: 999,
              border: '1px solid var(--line)',
              background: 'var(--surface)',
              fontSize: 12,
              color: 'var(--ink)',
              textDecoration: 'none',
              fontWeight: 700,
              boxShadow: 'var(--shadow-1)',
            }}
          >
            <span style={{ fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>
              Settings
            </span>
            <span>{settingsLabel}</span>
            <span aria-hidden="true">↗</span>
          </Link>
        </div>
      </div>
    </div>
  )
}