import { useState } from 'react'
import { useGeoNews, usePatternRelevance, useGeoRiskScore } from '../hooks/useApi'
import clsx from 'clsx'
import type { GeoNews } from '../types'
import { Globe, ExternalLink, Search, Brain } from 'lucide-react'

const CATEGORY_COLORS: Record<string, string> = {
  military: 'badge-red', sanctions: 'badge-orange', elections: 'badge-purple',
  natural_disaster: 'badge-yellow', health_crisis: 'badge-orange',
  resource_scarcity: 'badge-yellow', trade_war: 'badge-blue',
  energy: 'badge-orange', political_speech: 'badge-blue',
  financial_crisis: 'badge-red', general: 'badge-blue',
}

const CATEGORY_LABELS: Record<string, string> = {
  military: '⚔️ Military', sanctions: '🚫 Sanctions', elections: '🗳️ Elections',
  natural_disaster: '🌪️ Disaster', health_crisis: '🏥 Health',
  resource_scarcity: '⚠️ Resources', trade_war: '🤝 Trade',
  energy: '⚡ Energy', political_speech: '🎙️ Speech',
  financial_crisis: '💸 Finance', general: '📰 General',
}

const ASSET_LABELS: Record<string, string> = {
  energy: '⛽ Energy', metals: '🥇 Metals', agriculture: '🌾 Agri',
  equities: '📈 Equities', indices: '📊 Indices', forex: '💱 Forex',
}

function ImpactBar({ value, label }: { value: number; label: string }) {
  const abs = Math.abs(value)
  const positive = value > 0
  return (
    <div className="flex items-center gap-2 text-xs">
      <span className="text-slate-500 w-16 shrink-0">{label}</span>
      <div className="flex-1 flex items-center gap-1">
        {positive ? (
          <><div className="w-1/2"></div><div className="flex-1 bg-dark-600 rounded-full h-1.5"><div className="bg-emerald-500 h-1.5 rounded-full" style={{ width: `${abs * 100}%` }}></div></div></>
        ) : (
          <><div className="flex-1 bg-dark-600 rounded-full h-1.5 flex justify-end"><div className="bg-red-500 h-1.5 rounded-full" style={{ width: `${abs * 100}%` }}></div></div><div className="w-1/2"></div></>
        )}
      </div>
      <span className={clsx('w-10 text-right', positive ? 'positive' : 'negative')}>
        {positive ? '+' : ''}{(value * 100).toFixed(0)}
      </span>
    </div>
  )
}

function NewsCard({ news }: { news: GeoNews }) {
  const [expanded, setExpanded] = useState(false)
  return (
    <div className="card hover:border-slate-600/50 transition-colors cursor-pointer" onClick={() => setExpanded(!expanded)}>
      <div className="flex items-start justify-between gap-2 mb-2">
        <div className="flex-1 min-w-0">
          <div className="text-sm text-white font-medium line-clamp-2 leading-tight">{news.title}</div>
          <div className="flex items-center gap-2 mt-1">
            <span className={clsx('badge', CATEGORY_COLORS[news.category] ?? 'badge-blue')}>
              {CATEGORY_LABELS[news.category] ?? news.category}
            </span>
            <span className="text-xs text-slate-600">{news.source}</span>
          </div>
        </div>
        <div className="text-right shrink-0">
          <div className="text-xs font-bold text-orange-400">{Math.round(news.impact_score * 100)}</div>
          <div className="text-xs text-slate-600">impact</div>
        </div>
      </div>

      {expanded && (
        <>
          {/* AI insight */}
          {(news as any).ai_insight && (
            <div className="flex items-start gap-1.5 mb-2 text-xs text-blue-300 italic bg-blue-900/10 border border-blue-800/30 rounded px-2 py-1">
              <Brain className="w-3 h-3 mt-0.5 shrink-0 text-blue-400" />
              {(news as any).ai_insight}
            </div>
          )}
          {/* AI directional signals */}
          {((news as any).ai_dir_energy || (news as any).ai_dir_metals || (news as any).ai_dir_indices) && (
            <div className="flex gap-1 flex-wrap mb-2">
              {(['ai_dir_energy', 'ai_dir_metals', 'ai_dir_indices'] as const).map(field => {
                const dir = (news as any)[field]
                if (!dir || dir === 'neutral') return null
                const labels: Record<string, string> = { ai_dir_energy: '⛽', ai_dir_metals: '🥇', ai_dir_indices: '📊' }
                return (
                  <span key={field} className={clsx('text-[10px] px-1.5 py-0.5 rounded font-semibold',
                    dir === 'bullish' ? 'bg-emerald-900/40 text-emerald-400' : 'bg-red-900/40 text-red-400'
                  )}>
                    {labels[field]} {dir === 'bullish' ? '↑' : '↓'}
                  </span>
                )
              })}
              {(news as any).ai_resolution && (
                <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400">🕊 resolution</span>
              )}
            </div>
          )}
          <p className="text-xs text-slate-400 leading-relaxed mb-3">{news.summary}</p>
          {Object.keys(news.asset_impacts).length > 0 && (
            <div className="mb-3">
              <div className="text-xs text-slate-600 mb-1">Impact by asset class</div>
              {Object.entries(news.asset_impacts).map(([cls, val]) => (
                <ImpactBar key={cls} label={ASSET_LABELS[cls] ?? cls} value={val} />
              ))}
            </div>
          )}
          {news.tags.length > 0 && (
            <div className="flex flex-wrap gap-1 mb-2">
              {news.tags.map(tag => (
                <span key={tag} className="text-xs text-slate-600 bg-dark-700 px-1.5 py-0.5 rounded">#{tag}</span>
              ))}
            </div>
          )}
          {news.url && (
            <a href={news.url} target="_blank" rel="noopener noreferrer"
               className="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1"
               onClick={e => e.stopPropagation()}>
              <ExternalLink className="w-3 h-3" /> Read article
            </a>
          )}
        </>
      )}
      <div className="flex items-center justify-between mt-2 text-xs text-slate-600">
        <span>{news.date?.slice(0, 16)}</span>
        <span>{expanded ? '▲ Collapse' : '▼ Details'}</span>
      </div>
    </div>
  )
}

function RelevanceBar({ pct }: { pct: number }) {
  const color = pct >= 60 ? 'bg-emerald-500' : pct >= 30 ? 'bg-yellow-500' : 'bg-slate-600'
  return (
    <div className="flex items-center gap-2">
      <div className="w-24 bg-dark-600 rounded-full h-1.5">
        <div className={clsx('h-1.5 rounded-full', color)} style={{ width: `${pct}%` }} />
      </div>
      <span className={clsx('text-sm font-bold', pct >= 60 ? 'text-emerald-400' : pct >= 30 ? 'text-yellow-400' : 'text-slate-500')}>
        {pct}%
      </span>
    </div>
  )
}

function PatternRelevanceCard({ p }: { p: any }) {
  const [expanded, setExpanded] = useState(false)
  const hasNews = p.matching_news?.length > 0

  return (
    <div className={clsx('card transition-colors', {
      'border-emerald-700/40': p.relevance >= 60,
      'border-yellow-700/30': p.relevance >= 30 && p.relevance < 60,
      'border-slate-700/20 opacity-60': p.relevance === 0,
    })}>
      <div className="flex items-start justify-between mb-2">
        <div className="flex-1 min-w-0 mr-3">
          <div className="text-sm font-semibold text-white line-clamp-1">{p.name}</div>
          <div className="flex items-center gap-1 mt-0.5 flex-wrap">
            <span className="badge badge-blue text-xs">{p.asset_class}</span>
            <span className="text-xs text-slate-500">{p.keyword_hits}/{p.keyword_total} keywords</span>
            {hasNews && (
              <span className="text-xs text-emerald-400 flex items-center gap-0.5">
                <Search className="w-2.5 h-2.5" />{p.matching_news.length} news
              </span>
            )}
            {/* AI alignment badge */}
            {p.ai_scored_count > 0 && p.ai_alignment !== 0 && (
              <span className={clsx('text-[10px] px-1.5 py-0.5 rounded flex items-center gap-0.5 font-semibold',
                p.ai_contra_signal
                  ? 'bg-red-900/30 text-red-400 border border-red-700/30'
                  : 'bg-emerald-900/30 text-emerald-400 border border-emerald-700/30'
              )}>
                <Brain className="w-2.5 h-2.5" />
                {p.ai_contra_signal ? `counter-signal (${p.ai_alignment > 0 ? '+' : ''}${p.ai_alignment}pts)` : `AI aligned (+${p.ai_alignment}pts)`}
              </span>
            )}
          </div>
        </div>
        <div className="text-right">
          <RelevanceBar pct={p.relevance} />
          {p.base_relevance !== undefined && p.ai_alignment !== 0 && (
            <div className="text-[10px] text-slate-600 mt-0.5">base {p.base_relevance}%</div>
          )}
        </div>
      </div>

      {/* Matched keywords */}
      {p.matched_keywords?.length > 0 && (
        <div className="flex flex-wrap gap-1 mb-2">
          {p.matched_keywords.map((kw: string) => (
            <span key={kw} className="text-xs bg-emerald-900/30 border border-emerald-700/30 text-emerald-400 px-1.5 py-0.5 rounded">
              #{kw}
            </span>
          ))}
        </div>
      )}

      {/* AI insights */}
      {p.ai_insights?.length > 0 && (
        <div className="mb-2 space-y-1">
          {p.ai_insights.map((insight: string, i: number) => (
            <div key={i} className="flex items-start gap-1 text-[10px] text-blue-300 italic">
              <Brain className="w-2.5 h-2.5 mt-0.5 shrink-0 text-blue-400" />
              {insight}
            </div>
          ))}
        </div>
      )}

      {/* Toggle matching news */}
      {hasNews && (
        <>
          <button onClick={() => setExpanded(!expanded)}
            className="text-xs text-slate-600 hover:text-slate-400 mb-2">
            {expanded ? '▲ Hide news' : `▼ See ${p.matching_news.length} matching news`}
          </button>
          {expanded && (
            <div className="space-y-1.5">
              {p.matching_news.map((n: any, i: number) => (
                <div key={i} className="card-sm border-slate-700/20">
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex-1 min-w-0">
                      <div className="text-xs text-white line-clamp-2">{n.title}</div>
                      <div className="text-xs text-slate-600 mt-0.5">{n.source} · {n.date}</div>
                    </div>
                    <div className="shrink-0 text-right">
                      <div className="text-xs text-orange-400 font-mono">{Math.round(n.impact * 100)}</div>
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-1 mt-1">
                    {n.matched_keywords.map((kw: string) => (
                      <span key={kw} className="text-xs bg-blue-900/20 text-blue-400 px-1 rounded">#{kw}</span>
                    ))}
                  </div>
                  {n.url && (
                    <a href={n.url} target="_blank" rel="noopener noreferrer"
                       className="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1 mt-1"
                       onClick={e => e.stopPropagation()}>
                      <ExternalLink className="w-2.5 h-2.5" /> Read
                    </a>
                  )}
                </div>
              ))}
            </div>
          )}
        </>
      )}

      {!hasNews && p.relevance === 0 && (
        <div className="text-xs text-slate-600">No matching news for this period</div>
      )}
    </div>
  )
}

type SortMode = 'impact_desc' | 'impact_asc' | 'date_desc' | 'date_asc'
type DateRange = 'all' | 'today' | '7d' | '30d'

const DATE_RANGE_LABELS: Record<DateRange, string> = {
  all: 'All', today: 'Today', '7d': '7 days', '30d': '30 days',
}
const SORT_LABELS: Record<SortMode, string> = {
  impact_desc: 'Impact ↓', impact_asc: 'Impact ↑', date_desc: 'Recent ↓', date_asc: 'Oldest ↑',
}

function isWithinRange(dateStr: string, range: DateRange): boolean {
  if (range === 'all') return true
  const d = new Date(dateStr)
  const now = new Date()
  const diffMs = now.getTime() - d.getTime()
  if (range === 'today') return diffMs < 86_400_000
  if (range === '7d') return diffMs < 7 * 86_400_000
  if (range === '30d') return diffMs < 30 * 86_400_000
  return true
}

export default function GeoRadar() {
  const { data: news, isLoading } = useGeoNews()
  const { data: riskScore } = useGeoRiskScore()
  const [filterCat, setFilterCat] = useState<string>('all')
  const [sortMode, setSortMode] = useState<SortMode>('impact_desc')
  const [dateRange, setDateRange] = useState<DateRange>('all')
  const [tab, setTab] = useState<'news' | 'patterns'>('news')
  const [days, setDays] = useState(2)

  const { data: patternRelevance, isLoading: relLoading } = usePatternRelevance(days)

  const categories = ['all', ...Array.from(new Set(news?.map(n => n.category) ?? []))]

  const filtered = (news ?? [])
    .filter(n => filterCat === 'all' || n.category === filterCat)
    .filter(n => isWithinRange(n.date, dateRange))
    .sort((a, b) => {
      if (sortMode === 'impact_desc') return b.impact_score - a.impact_score
      if (sortMode === 'impact_asc') return a.impact_score - b.impact_score
      if (sortMode === 'date_desc') return new Date(b.date).getTime() - new Date(a.date).getTime()
      return new Date(a.date).getTime() - new Date(b.date).getTime()
    })

  const patternsWithNews = (patternRelevance ?? []).filter((p: any) => p.matching_news?.length > 0).length
  const totalPatterns = patternRelevance?.length ?? 0

  return (
    <div className="p-6 space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold text-white flex items-center gap-2">
            <Globe className="w-5 h-5 text-blue-400" /> Geopolitical Radar
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            News feed · Pattern matching for trading signals
          </p>
        </div>
        {riskScore && (
          <div className={clsx('card-sm text-center', {
            'border-emerald-700/40': riskScore.level === 'low',
            'border-yellow-700/40': riskScore.level === 'medium',
            'border-orange-700/40': riskScore.level === 'high',
            'border-red-700/40 animate-pulse': riskScore.level === 'extreme',
          })}>
            <div className={clsx('text-2xl font-bold', {
              'text-emerald-400': riskScore.level === 'low',
              'text-yellow-400': riskScore.level === 'medium',
              'text-orange-400': riskScore.level === 'high',
              'text-red-400': riskScore.level === 'extreme',
            })}>{riskScore.score}/100</div>
            <div className="text-xs text-slate-500 uppercase">{riskScore.level}</div>
          </div>
        )}
      </div>

      {/* Tabs */}
      <div className="flex items-center gap-3">
        <div className="flex gap-1 bg-dark-700 p-1 rounded">
          {(['news', 'patterns'] as const).map(t => (
            <button key={t} onClick={() => setTab(t)}
              className={clsx('px-4 py-1.5 rounded text-sm transition-colors', {
                'bg-blue-600 text-white': tab === t,
                'text-slate-400 hover:text-slate-200': tab !== t,
              })}>
              {t === 'news' ? `📰 News (${news?.length ?? 0})` : `🧩 Patterns (${patternsWithNews}/${totalPatterns} with news)`}
            </button>
          ))}
        </div>

        {/* Day selector — only shown on patterns tab */}
        {tab === 'patterns' && (
          <div className="flex items-center gap-2">
            <span className="text-xs text-slate-500">Window:</span>
            <div className="flex gap-0.5 bg-dark-700 p-0.5 rounded">
              {[1, 2, 7, 30].map(d => (
                <button key={d} onClick={() => setDays(d)}
                  className={clsx('px-2 py-1 rounded text-xs transition-colors', {
                    'bg-slate-600 text-white': days === d,
                    'text-slate-400 hover:text-slate-200': days !== d,
                  })}>
                  {d}d
                </button>
              ))}
            </div>
            <span className="text-xs text-slate-600">last days</span>
          </div>
        )}
      </div>

      {/* News tab */}
      {tab === 'news' && (
        <>
          {/* Filters row */}
          <div className="flex flex-wrap items-center gap-3">
            {/* Category filter */}
            <div className="flex flex-wrap gap-1.5">
              {categories.slice(0, 8).map(cat => (
                <button key={cat} onClick={() => setFilterCat(cat)}
                  className={clsx('px-2.5 py-1 rounded text-xs border transition-colors', {
                    'bg-blue-600 border-blue-500 text-white': filterCat === cat,
                    'border-slate-700 text-slate-400 hover:border-slate-500': filterCat !== cat,
                  })}>
                  {cat === 'all' ? 'All categories' : CATEGORY_LABELS[cat] ?? cat}
                </button>
              ))}
            </div>
          </div>

          {/* Sort + date range row */}
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <span className="text-xs text-slate-500">Period:</span>
              <div className="flex gap-0.5 bg-dark-700 p-0.5 rounded">
                {(['today', '7d', '30d', 'all'] as DateRange[]).map(r => (
                  <button key={r} onClick={() => setDateRange(r)}
                    className={clsx('px-2.5 py-1 rounded text-xs transition-colors', {
                      'bg-slate-600 text-white': dateRange === r,
                      'text-slate-400 hover:text-slate-200': dateRange !== r,
                    })}>
                    {DATE_RANGE_LABELS[r]}
                  </button>
                ))}
              </div>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-xs text-slate-500">Sort:</span>
              <div className="flex gap-0.5 bg-dark-700 p-0.5 rounded">
                {(['impact_desc', 'impact_asc', 'date_desc', 'date_asc'] as SortMode[]).map(s => (
                  <button key={s} onClick={() => setSortMode(s)}
                    className={clsx('px-2.5 py-1 rounded text-xs transition-colors', {
                      'bg-slate-600 text-white': sortMode === s,
                      'text-slate-400 hover:text-slate-200': sortMode !== s,
                    })}>
                    {SORT_LABELS[s]}
                  </button>
                ))}
              </div>
            </div>
            <span className="text-xs text-slate-600">{filtered.length} news</span>
          </div>

          {isLoading ? (
            <div className="grid grid-cols-2 gap-4">
              {[1,2,3,4].map(i => <div key={i} className="card animate-pulse h-32 bg-dark-700"></div>)}
            </div>
          ) : (
            <div className="grid grid-cols-2 gap-4">
              {filtered.map((n, i) => <NewsCard key={n.id || i} news={n} />)}
              {filtered.length === 0 && (
                <div className="card col-span-2 text-center py-8 text-slate-500">
                  Start the backend to load news
                </div>
              )}
            </div>
          )}
        </>
      )}

      {/* Patterns relevance tab */}
      {tab === 'patterns' && (
        <>
          <div className="flex items-center gap-3 text-xs text-slate-500 bg-dark-700/40 rounded px-3 py-2">
            <Search className="w-3.5 h-3.5 shrink-0 text-blue-400" />
            <span>
              Matching each pattern's keywords against news from the last {days} days.
              This signal enriches the context sent to the AI during scoring.
              {patternsWithNews > 0 && (
                <span className="text-emerald-400 ml-1">
                  {patternsWithNews} patterns have matching news.
                </span>
              )}
            </span>
          </div>

          {relLoading ? (
            <div className="space-y-3">
              {[1,2,3].map(i => <div key={i} className="card animate-pulse h-20 bg-dark-700" />)}
            </div>
          ) : (
            <div className="space-y-3">
              {(patternRelevance ?? []).map((p: any) => (
                <PatternRelevanceCard key={p.pattern_id} p={p} />
              ))}
              {(!patternRelevance || patternRelevance.length === 0) && (
                <div className="card text-center py-8 text-slate-500">
                  Start the backend to compute news-pattern matching
                </div>
              )}
            </div>
          )}
        </>
      )}
    </div>
  )
}