import { useState, useEffect, useCallback, useRef, KeyboardEvent, useId } from 'react'
import clsx from 'clsx'
import { RefreshCw, ChevronDown, AlertTriangle, Check, Upload } from 'lucide-react'

const API = ''

// ── Types ─────────────────────────────────────────────────────────────────────

interface FFEvent {
  id: number
  event_date: string       // YYYY-MM-DD UTC
  event_time: string | null // HH:MM UTC
  currency: string          // USD, EUR, ...
  impact: string            // high / medium / low
  event_name: string
  actual_value: string | null
  forecast_value: string | null
  previous_value: string | null
  source: string
}

interface CalendarResponse {
  total: number
  period: string
  date_from: string | null
  date_to: string | null
  events: FFEvent[]
}

interface FFStats {
  total: number
  earliest?: string
  latest?: string
}

interface ImportStatus {
  running: boolean
  last_result: { inserted?: number; skipped?: number; total?: number; error?: string } | null
}


// ── Constants ─────────────────────────────────────────────────────────────────

const PERIODS = [
  { key: 'recent',         label: 'Recent' },
  { key: 'today',          label: 'Today' },
  { key: 'tomorrow',       label: 'Tomorrow' },
  { key: 'this_week',      label: 'This Week' },
  { key: 'next_week',      label: 'Next Week' },
  { key: 'this_month',     label: 'This Month' },
  { key: 'next_month',     label: 'Next Month' },
  { key: 'yesterday',      label: 'Yesterday' },
  { key: 'previous_week',  label: 'Prev Week' },
  { key: 'previous_month', label: 'Prev Month' },
  { key: 'custom',         label: '📅 Custom' },
] as const

const ALL_CURRENCIES = ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD', 'NZD', 'CHF', 'CNY']

const CURRENCY_FLAGS: Record<string, string> = {
  USD: '🇺🇸', EUR: '🇪🇺', GBP: '🇬🇧', JPY: '🇯🇵',
  AUD: '🇦🇺', CAD: '🇨🇦', NZD: '🇳🇿', CHF: '🇨🇭', CNY: '🇨🇳',
}

const IMPACT_COLOR: Record<string, string> = {
  high:   'bg-red-500',
  medium: 'bg-yellow-400',
  low:    'bg-slate-400',
}

// ── Helpers ───────────────────────────────────────────────────────────────────

function parseNumeric(s: string | null): number | null {
  if (!s) return null
  const clean = s.replace(/[,%KBMkbm]/g, '').trim()
  const n = parseFloat(clean)
  return isNaN(n) ? null : n
}

/** Compare actual vs forecast: +1 better, -1 worse, 0 neutral/unknown */
function direction(ev: FFEvent): 1 | -1 | 0 {
  const a = parseNumeric(ev.actual_value)
  const f = parseNumeric(ev.forecast_value)
  if (a === null || f === null) return 0
  if (Math.abs(a - f) < 0.0001) return 0
  // For now: higher = better (works for NFP, GDP, PMI; wrong for unemployment — acceptable for display)
  return a > f ? 1 : -1
}

function formatDate(dateStr: string): string {
  const d = new Date(dateStr + 'T00:00:00Z')
  return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' })
}

function isToday(dateStr: string): boolean {
  const today = new Date()
  const utc = `${today.getUTCFullYear()}-${String(today.getUTCMonth()+1).padStart(2,'0')}-${String(today.getUTCDate()).padStart(2,'0')}`
  return dateStr === utc
}

function isPast(dateStr: string, timeStr: string | null): boolean {
  const now = new Date()
  const dt = new Date(`${dateStr}T${timeStr || '00:00'}:00Z`)
  return dt < now
}

// ── Sub-components ────────────────────────────────────────────────────────────

function ImpactDot({ impact }: { impact: string }) {
  return <span className={clsx('inline-block w-2 h-2 rounded-full', IMPACT_COLOR[impact] ?? 'bg-slate-400')} />
}

function ValueCell({ value, className }: { value: string | null; className?: string }) {
  if (!value) return <span className="text-slate-500">—</span>
  return <span className={className}>{value}</span>
}

function SurpriseChip({ ev }: { ev: FFEvent }) {
  if (!ev.actual_value || !ev.forecast_value) return null
  const d = direction(ev)
  if (d === 0) return null
  return (
    <span className={clsx(
      'ml-1 text-xs px-1 rounded',
      d === 1 ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'
    )}>
      {d === 1 ? '▲' : '▼'}
    </span>
  )
}

// ── Import Panel ──────────────────────────────────────────────────────────────

function ImportPanel({ stats, onImported }: { stats: FFStats; onImported: () => void }) {
  const [syncResult, setSyncResult]   = useState<string | null>(null)
  const [fxsMsg, setFxsMsg]           = useState<string | null>(null)
  const [fxsSyncing, setFxsSyncing]   = useState(false)
  const [importStatus, setImportStatus] = useState<ImportStatus>({ running: false, last_result: null })
  const pollRef    = useRef<ReturnType<typeof setInterval> | null>(null)
  const fxsPollRef = useRef<ReturnType<typeof setInterval> | null>(null)

  useEffect(() => {
    const poll = async () => {
      const r: ImportStatus = await fetch(`${API}/api/eco/ff-import/status`).then(x => x.json()).catch(() => ({ running: false, last_result: null }))
      setImportStatus(r)
      if (r.running) {
        pollRef.current = setInterval(async () => {
          const s: ImportStatus = await fetch(`${API}/api/eco/ff-import/status`).then(x => x.json()).catch(() => r)
          setImportStatus(s)
          if (!s.running) { clearInterval(pollRef.current!); onImported() }
        }, 2000)
      }
    }
    poll()
    return () => {
      if (pollRef.current)    clearInterval(pollRef.current)
      if (fxsPollRef.current) clearInterval(fxsPollRef.current)
    }
  }, [onImported])

  const startSync = async () => {
    setSyncResult('syncing…')
    try {
      await fetch(`${API}/api/eco/ff-sync`, { method: 'POST' })
      await new Promise(res => setTimeout(res, 2500))
      const s = await fetch(`${API}/api/eco/ff-sync/status`).then(x => x.json())
      const res = s.last_result || {}
      setSyncResult(`✓ live: ${res.thisweek?.events ?? '?'} events`)
      onImported()
    } catch { setSyncResult('sync error') }
  }

  const startFxsSync = async () => {
    setFxsSyncing(true)
    setFxsMsg('syncing FXStreet…')
    try {
      await fetch(`${API}/api/eco/fxs-sync?weeks=6`, { method: 'POST' })
      fxsPollRef.current = setInterval(async () => {
        const s = await fetch(`${API}/api/eco/fxs-sync/status`).then(x => x.json())
        if (!s.running) {
          clearInterval(fxsPollRef.current!)
          setFxsSyncing(false)
          const r = s.last_result || {}
          if (r.error) { setFxsMsg(`Error: ${r.error}`); return }
          setFxsMsg(`✓ FXStreet: ${r.total_upserted} events (${r.date_from} → ${r.date_to})`)
          onImported()
        }
      }, 2000)
    } catch { setFxsSyncing(false); setFxsMsg('FXStreet error') }
  }

  // TE HTML upload + import
  const [teHtmlMsg, setTeHtmlMsg]       = useState<string | null>(null)
  const [teHtmlBusy, setTeHtmlBusy]     = useState(false)
  const teHtmlPollRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const fileInputId = useId()

  const uploadAndImportTeHtml = async (file: File) => {
    setTeHtmlBusy(true)
    setTeHtmlMsg('uploading…')
    try {
      const form = new FormData()
      form.append('file', file)
      const up = await fetch(`${API}/api/eco/te-html-upload`, { method: 'POST', body: form }).then(x => x.json())
      if (up.error) { setTeHtmlMsg(`Upload error: ${up.error}`); setTeHtmlBusy(false); return }
      setTeHtmlMsg(`uploaded (${up.size_mb} MB) — importing…`)
      await fetch(`${API}/api/eco/te-html-import`, { method: 'POST' })
      teHtmlPollRef.current = setInterval(async () => {
        const s = await fetch(`${API}/api/eco/te-html-import/status`).then(x => x.json())
        if (!s.running) {
          clearInterval(teHtmlPollRef.current!)
          setTeHtmlBusy(false)
          const r = s.last_result || {}
          if (r.error) { setTeHtmlMsg(`Error: ${r.error}`); return }
          setTeHtmlMsg(`✓ TE HTML: ${r.total} events (${r.date_from} → ${r.date_to})`)
          onImported()
        }
      }, 2000)
    } catch { setTeHtmlBusy(false); setTeHtmlMsg('error') }
  }

  useEffect(() => () => { if (teHtmlPollRef.current) clearInterval(teHtmlPollRef.current) }, [])

  const hasData = stats.total > 0
  const res = importStatus.last_result

  return (
    <div className="bg-slate-800 border border-slate-700 rounded-lg p-4 mb-4 flex flex-wrap items-center gap-4 text-sm">
      <div>
        <div className="text-slate-400 text-xs mb-0.5">FF Calendar DB</div>
        <div className="font-semibold">
          {importStatus.running
            ? <span className="text-yellow-400 animate-pulse">Importing CSV… (auto-import on startup)</span>
            : hasData
              ? <><span className="text-emerald-400">{stats.total.toLocaleString()} events</span> <span className="text-slate-500 text-xs">({stats.earliest?.slice(0,7)} → {stats.latest?.slice(0,7)})</span></>
              : <span className="text-slate-400 text-xs">Auto-import will run on next server start</span>
          }
        </div>
      </div>

      {/* FF live sync — this week actuals */}
      <button
        onClick={startSync}
        className="px-3 py-1.5 rounded bg-slate-600 hover:bg-slate-500 flex items-center gap-1.5 text-white"
        title="Update this week actuals from faireconomy.media (Forex Factory JSON)"
      >
        <RefreshCw size={13} />
        Sync Live (FF)
      </button>

      {/* FXStreet — upcoming 6 weeks + forecasts, no API key */}
      <button
        onClick={startFxsSync}
        disabled={fxsSyncing}
        className="px-3 py-1.5 rounded bg-indigo-700 hover:bg-indigo-600 disabled:opacity-50 flex items-center gap-1.5 text-white"
        title="Fetch upcoming 6 weeks with consensus forecasts from FXStreet (no API key required)"
      >
        <RefreshCw size={13} className={clsx(fxsSyncing && 'animate-spin')} />
        Sync Upcoming (FXStreet)
      </button>

      {/* TE HTML import — paste calendar_data.txt from tradingeconomics.com */}
      <label
        htmlFor={fileInputId}
        className={clsx(
          'px-3 py-1.5 rounded flex items-center gap-1.5 text-white cursor-pointer',
          teHtmlBusy
            ? 'bg-amber-800 opacity-50 cursor-not-allowed'
            : 'bg-amber-700 hover:bg-amber-600'
        )}
        title="Import Trading Economics HTML page (calendar_data.txt) — 1000 events with forecasts"
      >
        <Upload size={13} />
        Import TE HTML
      </label>
      <input
        id={fileInputId}
        type="file"
        accept=".txt,.html"
        className="hidden"
        disabled={teHtmlBusy}
        onChange={e => { const f = e.target.files?.[0]; if (f) uploadAndImportTeHtml(f); e.target.value = '' }}
      />

      {res && !importStatus.running && (
        res.error
          ? <span className="text-red-400 text-xs">Import error: {res.error}</span>
          : <span className="text-emerald-400 text-xs flex items-center gap-1"><Check size={12}/> {res.inserted?.toLocaleString()} inserted</span>
      )}
      {syncResult && <span className="text-sky-400 text-xs">{syncResult}</span>}
      {fxsMsg && (
        <span className={clsx('text-xs', fxsMsg.startsWith('✓') ? 'text-emerald-400' : fxsMsg.startsWith('Error') ? 'text-red-400' : 'text-yellow-400')}>
          {fxsMsg}
        </span>
      )}
      {teHtmlMsg && (
        <span className={clsx('text-xs', teHtmlMsg.startsWith('✓') ? 'text-emerald-400' : teHtmlMsg.startsWith('Error') ? 'text-red-400' : 'text-yellow-400')}>
          {teHtmlMsg}
        </span>
      )}
    </div>
  )
}

// ── Currency Filter ───────────────────────────────────────────────────────────

function CurrencyFilter({ selected, onChange }: { selected: string[]; onChange: (v: string[]) => void }) {
  const toggle = (c: string) =>
    onChange(selected.includes(c) ? selected.filter(x => x !== c) : [...selected, c])

  return (
    <div className="flex flex-wrap gap-1">
      {ALL_CURRENCIES.map(c => (
        <button
          key={c}
          onClick={() => toggle(c)}
          className={clsx(
            'px-2 py-0.5 rounded text-xs font-medium transition-colors',
            selected.includes(c)
              ? 'bg-blue-600 text-white'
              : 'bg-slate-700 text-slate-400 hover:bg-slate-600'
          )}
        >
          {CURRENCY_FLAGS[c]} {c}
        </button>
      ))}
      {selected.length > 0 && (
        <button onClick={() => onChange([])} className="px-2 py-0.5 rounded text-xs bg-slate-600 text-slate-300 hover:bg-slate-500">
          Clear
        </button>
      )}
    </div>
  )
}

// ── Impact Filter ─────────────────────────────────────────────────────────────

function ImpactFilter({ selected, onChange }: { selected: string[]; onChange: (v: string[]) => void }) {
  const opts = [
    { key: 'high',   label: 'High',   dot: 'bg-red-500' },
    { key: 'medium', label: 'Medium', dot: 'bg-yellow-400' },
    { key: 'low',    label: 'Low',    dot: 'bg-slate-400' },
  ]
  const toggle = (k: string) =>
    onChange(selected.includes(k) ? selected.filter(x => x !== k) : [...selected, k])

  return (
    <div className="flex gap-1">
      {opts.map(o => (
        <button
          key={o.key}
          onClick={() => toggle(o.key)}
          className={clsx(
            'px-2 py-0.5 rounded text-xs flex items-center gap-1 transition-colors',
            selected.includes(o.key)
              ? 'bg-slate-600 text-white'
              : 'bg-slate-700 text-slate-500 hover:bg-slate-600'
          )}
        >
          <span className={clsx('w-2 h-2 rounded-full', o.dot)} />
          {o.label}
        </button>
      ))}
    </div>
  )
}


// ── Main Page ─────────────────────────────────────────────────────────────────

export default function CalendarPage() {
  const [period, setPeriod]         = useState<string>('recent')
  const [customFrom, setCustomFrom] = useState<string>('')
  const [customTo, setCustomTo]     = useState<string>('')
  const [currencies, setCurrencies] = useState<string[]>(['USD'])
  const [impacts, setImpacts]       = useState<string[]>(['high', 'medium'])
  const [data, setData]             = useState<CalendarResponse | null>(null)
  const [loading, setLoading]       = useState(false)
  const [error, setError]           = useState<string | null>(null)
  const [stats, setStats]           = useState<FFStats>({ total: 0 })
  const [showFilters, setShowFilters] = useState(false)
  const autoRefRef = useRef<ReturnType<typeof setInterval> | null>(null)

  const fetchStats = useCallback(async () => {
    try {
      const r = await fetch(`${API}/api/eco/ff-stats`).then(x => x.json())
      setStats(r)
    } catch {}
  }, [])

  const fetchEvents = useCallback(async () => {
    // For custom period, require both dates
    if (period === 'custom' && (!customFrom || !customTo)) return
    setLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams({ period, limit: '2000' })
      if (period === 'custom') {
        params.set('date_from', customFrom)
        params.set('date_to', customTo)
      }
      if (currencies.length > 0) params.set('currencies', currencies.join(','))
      if (impacts.length > 0)    params.set('impacts', impacts.join(','))
      const r: CalendarResponse = await fetch(`${API}/api/eco/calendar?${params}`).then(x => x.json())
      setData(r)
    } catch (e) {
      setError(String(e))
    } finally {
      setLoading(false)
    }
  }, [period, customFrom, customTo, currencies, impacts])

  useEffect(() => { fetchStats() }, [fetchStats])
  useEffect(() => { fetchEvents() }, [fetchEvents])

  // Auto-refresh every 60s for current/upcoming events
  useEffect(() => {
    if (autoRefRef.current) clearInterval(autoRefRef.current)
    if (['recent', 'today', 'this_week'].includes(period)) {
      autoRefRef.current = setInterval(() => {
        fetch(`${API}/api/eco/ff-sync`, { method: 'POST' }).catch(() => {})
        fetchEvents()
      }, 60_000)
    }
    return () => { if (autoRefRef.current) clearInterval(autoRefRef.current) }
  }, [period, fetchEvents])

  // Group events by date
  const grouped: { date: string; events: FFEvent[] }[] = []
  if (data?.events) {
    let cur: { date: string; events: FFEvent[] } | null = null
    for (const ev of data.events) {
      if (!cur || cur.date !== ev.event_date) {
        cur = { date: ev.event_date, events: [] }
        grouped.push(cur)
      }
      cur.events.push(ev)
    }
  }

  return (
    <div className="p-4 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div>
          <h1 className="text-xl font-bold text-white">Economic Calendar</h1>
          <p className="text-slate-400 text-xs mt-0.5">
            Forex Factory — past releases + upcoming events
          </p>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={fetchEvents}
            disabled={loading}
            className="p-1.5 rounded bg-slate-700 hover:bg-slate-600 disabled:opacity-50"
            title="Refresh"
          >
            <RefreshCw size={14} className={clsx(loading && 'animate-spin')} />
          </button>
        </div>
      </div>

      {/* Import Panel */}
      <ImportPanel stats={stats} onImported={() => { fetchStats(); fetchEvents() }} />


      {/* Period Tabs */}
      <div className="flex flex-wrap gap-1 mb-3">
        {PERIODS.map(p => (
          <button
            key={p.key}
            onClick={() => setPeriod(p.key)}
            className={clsx(
              'px-3 py-1.5 rounded text-sm font-medium transition-colors',
              period === p.key
                ? 'bg-blue-600 text-white'
                : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
            )}
          >
            {p.label}
          </button>
        ))}
      </div>

      {/* Custom date range picker */}
      {period === 'custom' && (
        <div className="flex flex-wrap items-center gap-3 mb-3 p-3 bg-slate-800 border border-slate-700 rounded-lg">
          <span className="text-slate-400 text-sm">From</span>
          <input
            type="date"
            value={customFrom}
            onChange={e => setCustomFrom(e.target.value)}
            className="bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm text-white focus:outline-none focus:border-blue-500"
          />
          <span className="text-slate-400 text-sm">To</span>
          <input
            type="date"
            value={customTo}
            onChange={e => setCustomTo(e.target.value)}
            className="bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm text-white focus:outline-none focus:border-blue-500"
          />
          <button
            onClick={fetchEvents}
            disabled={!customFrom || !customTo}
            className="px-3 py-1.5 rounded bg-blue-600 hover:bg-blue-500 disabled:opacity-40 text-sm text-white"
          >
            Apply
          </button>
          {customFrom && customTo && (
            <span className="text-slate-500 text-xs">
              {Math.round((new Date(customTo).getTime() - new Date(customFrom).getTime()) / 86400000) + 1} days
            </span>
          )}
        </div>
      )}

      {/* Filters toggle */}
      <div className="mb-3">
        <button
          onClick={() => setShowFilters(v => !v)}
          className="flex items-center gap-1 text-sm text-slate-400 hover:text-slate-200 mb-2"
        >
          <ChevronDown size={14} className={clsx('transition-transform', showFilters && 'rotate-180')} />
          Filters
        </button>
        {showFilters && (
          <div className="flex flex-wrap gap-4 p-3 bg-slate-800 rounded-lg border border-slate-700">
            <div>
              <div className="text-xs text-slate-500 mb-1">Currency</div>
              <CurrencyFilter selected={currencies} onChange={setCurrencies} />
            </div>
            <div>
              <div className="text-xs text-slate-500 mb-1">Impact</div>
              <ImpactFilter selected={impacts} onChange={setImpacts} />
            </div>
          </div>
        )}
      </div>

      {/* Summary bar */}
      {data && (
        <div className="text-xs text-slate-500 mb-2 flex items-center gap-3">
          <span>{data.total} events</span>
          {data.date_from && <span>{data.date_from} → {data.date_to}</span>}
          {['recent', 'today', 'this_week'].includes(period) && (
            <span className="text-sky-500">● auto-refresh 60s</span>
          )}
        </div>
      )}

      {/* Error */}
      {error && (
        <div className="flex items-center gap-2 p-3 bg-red-900/30 border border-red-700 rounded mb-3 text-red-400 text-sm">
          <AlertTriangle size={14} /> {error}
        </div>
      )}

      {/* Empty state */}
      {!loading && data?.total === 0 && stats.total === 0 && (
        <div className="text-center py-16 text-slate-500">
          <p className="text-lg mb-2">No data yet</p>
          <p className="text-sm">Click <strong className="text-white">Import CSV (2007-2025)</strong> above to load the Forex Factory historical calendar.</p>
        </div>
      )}

      {!loading && data?.total === 0 && stats.total > 0 && (
        <div className="text-center py-16 text-slate-500">
          <p>No events match your filters for this period.</p>
        </div>
      )}

      {/* Column header */}
      {grouped.length > 0 && (
        <div className="grid items-center gap-2 px-3 py-1.5 text-xs text-slate-500 border-b border-slate-700 mb-1 grid-cols-[60px_2rem_5rem_1fr_90px_90px_90px]">
          <span>Time (UTC)</span>
          <span></span>
          <span>Ccy</span>
          <span>Event</span>
          <span className="text-right">Actual</span>
          <span className="text-right">Forecast</span>
          <span className="text-right">Previous</span>
        </div>
      )}

      {/* Table */}
      {grouped.length > 0 && (
        <div className="space-y-4">
          {grouped.map(({ date, events }) => {
            const today = isToday(date)
            return (
              <div key={date}>
                {/* Date header */}
                <div className={clsx(
                  'sticky top-0 z-10 px-3 py-1.5 text-sm font-semibold border-b mb-0',
                  today
                    ? 'bg-blue-900/80 border-blue-700 text-blue-300'
                    : 'bg-slate-800/95 border-slate-700 text-slate-300'
                )}>
                  {formatDate(date)}
                  {today && <span className="ml-2 text-xs bg-blue-600 text-white px-1.5 py-0.5 rounded">TODAY</span>}
                </div>

                {/* Events for this date */}
                <div className="divide-y divide-slate-800">
                  {events.map(ev => {
                    const past = isPast(ev.event_date, ev.event_time)
                    const hasActual = !!ev.actual_value
                    const dir = direction(ev)
                    const actualClass = !hasActual
                      ? 'text-slate-400'
                      : dir === 1 ? 'text-emerald-400 font-semibold'
                      : dir === -1 ? 'text-red-400 font-semibold'
                      : 'text-slate-200'

                    return (
                      <div
                        key={ev.id}
                        className={clsx(
                          'grid items-center gap-2 px-3 py-2 text-sm hover:bg-slate-800/50 transition-colors',
                          'grid-cols-[60px_2rem_5rem_1fr_90px_90px_90px]',
                          !past && !hasActual && 'opacity-90'
                        )}
                      >
                        {/* Time */}
                        <span className="text-slate-400 tabular-nums text-xs">
                          {ev.event_time ?? '—'}
                        </span>

                        {/* Flag */}
                        <span className="text-base leading-none">
                          {CURRENCY_FLAGS[ev.currency] ?? ev.currency}
                        </span>

                        {/* Currency */}
                        <span className="text-slate-400 text-xs font-medium">{ev.currency}</span>

                        {/* Event name + impact */}
                        <div className="flex items-center gap-1.5 min-w-0">
                          <ImpactDot impact={ev.impact} />
                          <span className={clsx('truncate', hasActual ? 'text-slate-200' : 'text-slate-300')}>
                            {ev.event_name}
                          </span>
                        </div>

                        {/* Actual */}
                        <div className="text-right">
                          {hasActual ? (
                            <span className={actualClass}>
                              {ev.actual_value}
                              <SurpriseChip ev={ev} />
                            </span>
                          ) : (
                            <span className="text-slate-600 text-xs">—</span>
                          )}
                        </div>

                        {/* Forecast (consensus) */}
                        <div className="text-right">
                          <ValueCell value={ev.forecast_value} className="text-slate-300" />
                        </div>

                        {/* Previous */}
                        <div className="text-right">
                          <ValueCell value={ev.previous_value} className="text-slate-500" />
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })}
        </div>
      )}

    </div>
  )
}
