'use client'

import { useTranslations } from 'next-intl'
import { useState } from 'react'
import { useAccount } from 'wagmi'
import { useConnectModal } from '@rainbow-me/rainbowkit'
import type { BotPerformance } from '@/types'
import { useDashboardStore } from '@/store/dashboard'
import { formatPct, formatHold } from '@/lib/utils'

const MOCK_PERFORMANCE: BotPerformance = {
  period_days: 30,
  total_trades: 89,
  win_rate: 0.73,
  net_pnl_usd: 12840,
  avg_hold_seconds: 14 * 60,
  max_drawdown_pct: 8.2,
}

interface BotPanelProps {
  performance?: BotPerformance
}

export default function BotPanel({ performance = MOCK_PERFORMANCE }: BotPanelProps) {
  const t = useTranslations('bot')
  const { isSubscribed, setSubscribed } = useDashboardStore()
  const { address, isConnected } = useAccount()
  const { openConnectModal } = useConnectModal()
  const [apiKey, setApiKey] = useState('')

  const stats = [
    { label: t('winRate'), value: formatPct(performance.win_rate * 100 - 100 + performance.win_rate * 100), display: `${Math.round(performance.win_rate * 100)}%` },
    { label: t('netPnl'), value: `+$${performance.net_pnl_usd.toLocaleString()}`, positive: true },
    { label: t('totalTrades'), value: String(performance.total_trades) },
    { label: t('avgHold'), value: formatHold(performance.avg_hold_seconds) },
  ]

  return (
    <div className="w-[300px] shrink-0 flex flex-col gap-3">
      {/* Performance card */}
      <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5">
        <p className="text-[11px] uppercase tracking-wider text-[#555555] mb-4">
          {t('title')} · {t('period')}
        </p>
        <div className="grid grid-cols-2 gap-3">
          {stats.map((stat) => (
            <div key={stat.label}>
              <p className="text-[10px] text-[#555555] mb-0.5">{stat.label}</p>
              <p className={`text-[16px] font-medium ${stat.positive ? 'text-[#4ade80]' : 'text-white'}`}>
                {stat.display ?? stat.value}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Divider */}
      <div className="h-px bg-[#141414]" />

      {/* Conditional bottom section */}
      {!isConnected && (
        <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5 flex flex-col gap-3">
          <p className="text-[14px] font-medium text-white">{t('connectCta')}</p>
          <p className="text-[12px] text-[#555555] leading-relaxed">{t('connectDesc')}</p>
          <button
            onClick={openConnectModal}
            className="w-full bg-[#f97316] text-black font-medium text-[13px] rounded-lg py-2.5 hover:bg-[#fb923c] transition-colors"
          >
            {t('connectWalletFree')}
          </button>
        </div>
      )}

      {isConnected && !isSubscribed && (
        <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5 flex flex-col gap-3">
          <div className="flex items-center justify-between">
            <p className="text-[13px] font-medium text-[#333333]">{t('settingsTitle')}</p>
            <span className="text-[10px] text-[#333333] border border-[#1e1e1e] rounded-full px-2 py-0.5">
              Locked
            </span>
          </div>
          {/* Disabled API key input */}
          <div className="opacity-40">
            <label className="text-[11px] text-[#555555] block mb-1">{t('apiKeyLabel')}</label>
            <input
              disabled
              placeholder={t('apiKeyPlaceholder')}
              className="w-full bg-[#060606] border border-[#141414] rounded-lg px-3 py-2 text-[12px] text-[#333333] placeholder-[#222222] cursor-not-allowed"
            />
          </div>
          <button
            onClick={() => setSubscribed(true)}
            className="w-full bg-[#f97316] text-black font-medium text-[13px] rounded-lg py-2.5 hover:bg-[#fb923c] transition-colors"
          >
            {t('subscribeBtn')}
          </button>
        </div>
      )}

      {isConnected && isSubscribed && (
        <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-5 flex flex-col gap-3">
          <div className="flex items-center justify-between">
            <p className="text-[13px] font-medium text-white">{t('settingsTitle')}</p>
            <span className="text-[10px] text-[#4ade80] border border-[#1a4a2a] bg-[#0d2e1a] rounded-full px-2 py-0.5">
              {t('activeStatus')}
            </span>
          </div>
          <div>
            <label className="text-[11px] text-[#555555] block mb-1">{t('apiKeyLabel')}</label>
            <input
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              placeholder={t('apiKeyPlaceholder')}
              className="w-full bg-[#060606] border border-[#141414] rounded-lg px-3 py-2 text-[12px] text-white placeholder-[#333333] focus:outline-none focus:border-[#222222]"
            />
          </div>
          <button className="w-full bg-[#141414] text-white border border-[#1a1a1a] text-[13px] rounded-lg py-2 hover:bg-[#0d0d0d] transition-colors">
            {t('saveKey')}
          </button>
        </div>
      )}
    </div>
  )
}