import { useEffect, useState } from 'react'
import {
  BarChart3,
  TrendingUp,
  TrendingDown,
  Minus,
  RefreshCw,
  Loader2,
  AlertCircle,
  Calendar,
  Activity,
} from 'lucide-react'
import { api, MarketOverview, SyncJob, StockRow } from '@/lib/api'
import { canManageUsers } from '@/lib/auth'
import { cn } from '@/lib/cn'

interface StockOverviewProps {
  role: 'system_admin' | 'admin' | 'user'
}

export function StockOverview({ role }: StockOverviewProps) {
  const [overview, setOverview] = useState<MarketOverview | null>(null)
  const [job, setJob] = useState<SyncJob | null>(null)
  const [loading, setLoading] = useState(true)
  const [syncing, setSyncing] = useState(false)
  const [error, setError] = useState('')

  const canSync = canManageUsers(role)

  const fetchAll = async () => {
    setLoading(true)
    setError('')
    try {
      const [o, j] = await Promise.all([api.stockOverview(), api.stockSyncStatus()])
      setOverview(o)
      setJob(j)
    } catch (err: any) {
      setError(err?.message || '加载市场数据失败')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchAll()
  }, [])

  const handleSync = async () => {
    setSyncing(true)
    setError('')
    try {
      const res = await api.triggerStockSync()
      await fetchAll()
      // eslint-disable-next-line no-console
      console.log('synced', res.records_count, 'records')
    } catch (err: any) {
      setError(err?.message || '同步失败')
    } finally {
      setSyncing(false)
    }
  }

  if (loading) {
    return (
      <div className="rounded-card border border-border bg-surface p-6 flex items-center justify-center gap-2 text-sm text-muted">
        <Loader2 className="h-4 w-4 animate-spin" />
        加载市场数据…
      </div>
    )
  }

  if (!overview?.latest_trade_date) {
    return (
      <div className="rounded-card border border-border bg-surface p-6 text-center">
        <div className="text-sm text-secondary">暂无市场数据</div>
        {canSync && (
          <button
            onClick={handleSync}
            disabled={syncing}
            className="mt-3 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-btn bg-accent text-white text-xs font-medium hover:bg-accent/90 disabled:opacity-60"
          >
            {syncing ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
            立即同步
          </button>
        )}
      </div>
    )
  }

  const { counts, avg_change_pct, indices, top_gainers, top_losers, turnover_leaders } = overview

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3 rounded-card border border-border bg-surface/80 px-4 py-3">
        <div className="flex items-center gap-2">
          <BarChart3 className="h-4 w-4 text-accent" />
          <h2 className="text-base font-semibold text-foreground">市场概览</h2>
          <span className="text-xs text-muted flex items-center gap-1">
            <Calendar className="h-3 w-3" />
            {overview.latest_trade_date}
          </span>
        </div>
        <div className="flex items-center gap-3">
          {job && (
            <span className="text-xs text-muted">
              上次同步：{formatSyncStatus(job)}
            </span>
          )}
          {canSync && (
            <button
              onClick={handleSync}
              disabled={syncing}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-btn bg-accent text-white text-xs font-medium hover:bg-accent/90 disabled:opacity-60 transition-colors"
            >
              {syncing ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
              立即同步
            </button>
          )}
        </div>
      </div>

      {error && (
        <div className="flex items-start gap-2 rounded-btn border border-danger/30 bg-danger/10 px-3 py-2.5 text-xs text-danger">
          <AlertCircle className="h-3.5 w-3.5 mt-px shrink-0" />
          <span>{error}</span>
        </div>
      )}

      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <KpiCard icon={<TrendingUp className="h-4 w-4 text-bull" />} label="上涨" value={counts.up} />
        <KpiCard icon={<TrendingDown className="h-4 w-4 text-bear" />} label="下跌" value={counts.down} />
        <KpiCard icon={<Minus className="h-4 w-4 text-muted" />} label="平盘" value={counts.flat} />
        <KpiCard
          icon={<Activity className="h-4 w-4 text-accent" />}
          label="平均涨跌"
          value={`${avg_change_pct >= 0 ? '+' : ''}${avg_change_pct.toFixed(2)}%`}
          valueClass={avg_change_pct >= 0 ? 'text-bull' : 'text-bear'}
        />
      </div>

      {indices.length > 0 && (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {indices.map((item) => (
            <IndexCard key={item.symbol} item={item} />
          ))}
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <StockList title="涨幅榜" rows={top_gainers} valueKey="change_pct" />
        <StockList title="跌幅榜" rows={top_losers} valueKey="change_pct" />
        <StockList title="成交额榜" rows={turnover_leaders} valueKey="amount" />
      </div>
    </div>
  )
}

function KpiCard({
  icon,
  label,
  value,
  valueClass,
}: {
  icon: React.ReactNode
  label: string
  value: React.ReactNode
  valueClass?: string
}) {
  return (
    <div className="rounded-card border border-border bg-surface p-3 flex items-center gap-3">
      <div className="p-1.5 rounded-btn bg-elevated">{icon}</div>
      <div>
        <div className={cn('text-lg font-bold text-foreground', valueClass)}>{value}</div>
        <div className="text-xs text-secondary">{label}</div>
      </div>
    </div>
  )
}

function IndexCard({ item }: { item: StockRow }) {
  const positive = item.change_pct >= 0
  return (
    <div className="rounded-card border border-border bg-surface p-3">
      <div className="text-xs text-secondary truncate">{item.name || item.symbol}</div>
      <div className={cn('text-base font-semibold mt-1', positive ? 'text-bull' : 'text-bear')}>
        {item.close.toFixed(2)}
      </div>
      <div className={cn('text-xs font-medium', positive ? 'text-bull' : 'text-bear')}>
        {positive ? '+' : ''}{item.change_pct.toFixed(2)}%
      </div>
    </div>
  )
}

function StockList({
  title,
  rows,
  valueKey,
}: {
  title: string
  rows: StockRow[]
  valueKey: 'change_pct' | 'amount'
}) {
  return (
    <div className="rounded-card border border-border bg-surface p-3">
      <h3 className="text-xs font-semibold text-secondary uppercase tracking-wider mb-2">{title}</h3>
      <div className="space-y-1">
        {rows.length === 0 ? (
          <div className="text-xs text-muted py-2">暂无数据</div>
        ) : (
          rows.map((item, idx) => {
            const val = valueKey === 'amount' ? (item.amount ?? 0) / 1e8 : item.change_pct
            const isPositive = valueKey === 'amount' ? true : item.change_pct >= 0
            return (
              <div key={item.symbol} className="flex items-center justify-between text-sm py-1">
                <div className="flex items-center gap-2 min-w-0">
                  <span className="text-[10px] text-muted w-4">{idx + 1}</span>
                  <span className="text-foreground font-medium truncate">{item.name || item.symbol}</span>
                </div>
                <div className={cn('text-xs font-mono shrink-0', valueKey === 'change_pct' ? (isPositive ? 'text-bull' : 'text-bear') : 'text-foreground')}>
                  {valueKey === 'amount'
                    ? `${val.toFixed(2)}亿`
                    : `${isPositive ? '+' : ''}${val.toFixed(2)}%`}
                </div>
              </div>
            )
          })
        )}
      </div>
    </div>
  )
}

function formatSyncStatus(job: SyncJob): string {
  if (job.status === 'running') return '同步中…'
  const timeStr = job.finished_at
    ? new Date(job.finished_at).toLocaleString()
    : new Date(job.started_at).toLocaleString()
  const statusText = job.status === 'success' ? '成功' : '失败'
  return `${statusText} · ${timeStr}`
}