import { useState, useEffect, useMemo, useRef } from 'react'
import { useSearchParams } from 'react-router-dom'
import { useAllQuotes, useHistory, useAddMarketTicker, useRemoveMarketTicker } from '../hooks/useApi'
import clsx from 'clsx'
import type { Quote, AssetClass } from '../types'
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts'
import { TrendingUp, TrendingDown, BarChart2, RefreshCw, Search, Plus, X } from 'lucide-react'

type ExtAssetClass = AssetClass | 'custom'

const ASSET_CLASSES: { key: ExtAssetClass; label: string; emoji: string }[] = [
  { key: 'energy',      label: 'Energy',      emoji: '⛽' },
  { key: 'metals',      label: 'Metals',      emoji: '🥇' },
  { key: 'agriculture', label: 'Agriculture', emoji: '🌾' },
  { key: 'indices',     label: 'Indices',     emoji: '📊' },
  { key: 'etfs',        label: 'ETFs',        emoji: '🗂' },
  { key: 'equities',    label: 'Equities',    emoji: '📈' },
  { key: 'forex',       label: 'Forex',       emoji: '💱' },
]

function QuoteCard({ q, selected, onClick, onRemove }: { q: Quote; selected: boolean; onClick: () => void; onRemove?: () => void }) {
  if (!q.price) return null
  const pos = q.change_pct >= 0
  return (
    <div
      onClick={onClick}
      className={clsx(
        'card-sm cursor-pointer hover:border-slate-500/60 transition-all',
        selected && 'border-blue-500/60 bg-dark-600'
      )}
    >
      <div className="flex justify-between items-start">
        <div className="min-w-0">
          <div className="text-xs text-white font-semibold truncate">{q.name || q.symbol}</div>
          <div className="text-xs text-slate-600">{q.symbol}</div>
        </div>
        <div className="flex items-center gap-1.5">
          {pos ? (
            <TrendingUp className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
          ) : (
            <TrendingDown className="w-3.5 h-3.5 text-red-400 shrink-0" />
          )}
          {onRemove && (
            <button onClick={e => { e.stopPropagation(); onRemove() }}
              className="text-slate-700 hover:text-red-400 transition-colors" title="Remove">
              <X className="w-3 h-3" />
            </button>
          )}
        </div>
      </div>
      <div className="mt-2 flex justify-between items-end">
        <span className="text-sm font-bold text-white font-mono">{q.price.toFixed(q.price > 100 ? 2 : 4)}</span>
        <span className={clsx('text-xs font-mono font-bold', pos ? 'positive' : 'negative')}>
          {pos ? '+' : ''}{q.change_pct.toFixed(2)}%
        </span>
      </div>
      {q.iv !== undefined && (
        <div className="text-xs text-slate-600 mt-1">IV: {(q.iv * 100).toFixed(1)}%</div>
      )}
    </div>
  )
}

const PERIOD_OPTIONS = [
  { label: '5D', value: '5d' },
  { label: '1M', value: '1mo' },
  { label: '3M', value: '3mo' },
  { label: '6M', value: '6mo' },
  { label: '1Y', value: '1y' },
  { label: '2Y', value: '2y' },
]

function PriceChart({ symbol, name }: { symbol: string; name: string }) {
  const [period, setPeriod] = useState('3mo')
  const { data: hist, isLoading } = useHistory(symbol, period)

  const chartData = hist?.map(h => ({
    date: h.date.slice(0, 10),
    close: h.close,
    open: h.open,
    high: h.high,
    low: h.low,
  })) ?? []

  const first = chartData[0]?.close ?? 0
  const last = chartData[chartData.length - 1]?.close ?? 0
  const isUp = last >= first
  const chg = first > 0 ? ((last - first) / first * 100).toFixed(2) : '0'

  return (
    <div className="card h-full">
      <div className="flex items-center justify-between mb-3">
        <div>
          <div className="text-sm font-bold text-white">{name}</div>
          <div className="text-xs text-slate-500">{symbol}</div>
        </div>
        <div className="flex items-center gap-3">
          <span className={clsx('text-sm font-bold', isUp ? 'positive' : 'negative')}>
            {isUp ? '+' : ''}{chg}%
          </span>
          <div className="flex gap-1">
            {PERIOD_OPTIONS.map(p => (
              <button
                key={p.value}
                onClick={() => setPeriod(p.value)}
                className={clsx('px-2 py-0.5 rounded text-xs transition-colors', {
                  'bg-blue-600 text-white': period === p.value,
                  'text-slate-500 hover:text-slate-300': period !== p.value,
                })}
              >
                {p.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      {isLoading ? (
        <div className="h-48 flex items-center justify-center">
          <RefreshCw className="w-4 h-4 animate-spin text-slate-600" />
        </div>
      ) : chartData.length > 0 ? (
        <ResponsiveContainer width="100%" height={200}>
          <AreaChart data={chartData}>
            <defs>
              <linearGradient id={`grad-${symbol}`} x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={isUp ? '#10b981' : '#ef4444'} stopOpacity={0.3} />
                <stop offset="95%" stopColor={isUp ? '#10b981' : '#ef4444'} stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="#1e2d4d" />
            <XAxis dataKey="date" tick={{ fill: '#475569', fontSize: 9 }} tickLine={false}
              tickFormatter={v => v.slice(5)} interval="preserveStartEnd" />
            <YAxis tick={{ fill: '#475569', fontSize: 9 }} tickLine={false} axisLine={false}
              domain={['auto', 'auto']} width={55}
              tickFormatter={v => v > 1000 ? `${(v/1000).toFixed(1)}k` : v.toFixed(2)} />
            <Tooltip
              contentStyle={{ background: '#0f1623', border: '1px solid #1e2d4d', fontSize: 11 }}
              labelStyle={{ color: '#94a3b8' }}
              formatter={(v: number) => [v.toFixed(4), 'Price']}
            />
            <Area
              type="monotone" dataKey="close"
              stroke={isUp ? '#10b981' : '#ef4444'}
              fill={`url(#grad-${symbol})`}
              strokeWidth={1.5} dot={false}
            />
          </AreaChart>
        </ResponsiveContainer>
      ) : (
        <div className="h-48 flex items-center justify-center text-slate-600 text-xs">
          No data available
        </div>
      )}
    </div>
  )
}

export default function Markets() {
  const { data: allQuotes, isLoading, refetch } = useAllQuotes()
  const [searchParams, setSearchParams] = useSearchParams()
  const [activeClass, setActiveClass] = useState<ExtAssetClass>('energy')
  const [selectedSymbol, setSelectedSymbol] = useState<{ symbol: string; name: string } | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  const [addInput, setAddInput] = useState('')
  const [addError, setAddError] = useState('')
  const [showAddInput, setShowAddInput] = useState(false)
  const initialSymbol = useRef(searchParams.get('symbol'))
  const { mutateAsync: addTicker, isPending: adding } = useAddMarketTicker()
  const { mutate: removeTicker } = useRemoveMarketTicker()

  const handleAddTicker = async () => {
    const sym = addInput.trim().toUpperCase()
    if (!sym) return
    setAddError('')
    try {
      await addTicker(sym)
      setAddInput('')
      setShowAddInput(false)
      setActiveClass('custom')
    } catch (e: unknown) {
      const msg = (e as { message?: string })?.message ?? 'Ticker not found'
      setAddError(msg)
    }
  }

  // Auto-select symbol coming from another page (e.g. Portfolio ticker link)
  useEffect(() => {
    if (!initialSymbol.current || !allQuotes) return
    const sym = initialSymbol.current
    initialSymbol.current = null
    for (const [cls, quotes] of Object.entries(allQuotes)) {
      const match = (quotes as Quote[]).find(q => q.symbol.toUpperCase() === sym.toUpperCase())
      if (match) {
        setActiveClass(cls as ExtAssetClass)
        setSelectedSymbol({ symbol: match.symbol, name: match.name || match.symbol })
        break
      }
    }
    setSearchParams({}, { replace: true })
  }, [allQuotes, setSearchParams])

  const allQuotesFlat = useMemo(() => {
    if (!allQuotes) return []
    return Object.entries(allQuotes).flatMap(([cls, quotes]) =>
      (quotes as Quote[]).filter(q => q.price).map(q => ({ ...q, assetClass: cls as AssetClass }))
    )
  }, [allQuotes])

  const searchResults = useMemo(() => {
    const q = searchQuery.trim().toLowerCase()
    if (!q) return []
    return allQuotesFlat
      .filter(quote => quote.symbol.toLowerCase().includes(q) || (quote.name ?? '').toLowerCase().includes(q))
      .slice(0, 8)
  }, [searchQuery, allQuotesFlat])

  const currentQuotes = allQuotes?.[activeClass] ?? []

  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">
            <BarChart2 className="w-5 h-5 text-blue-400" /> Markets & Prices
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            Real-time data · Implied volatility · Options opportunities
          </p>
        </div>
        <button
          onClick={() => refetch()}
          className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 transition-colors"
        >
          <RefreshCw className="w-3.5 h-3.5" /> Refresh
        </button>
      </div>

      {/* Asset class tabs + ticker search */}
      <div className="flex flex-wrap items-center gap-2">
        {ASSET_CLASSES.map(({ key, label, emoji }) => (
          <button
            key={key}
            onClick={() => { setActiveClass(key); setSelectedSymbol(null); setSearchQuery('') }}
            className={clsx('flex items-center gap-1.5 px-3 py-1.5 rounded border text-sm transition-all', {
              'bg-blue-600 border-blue-500 text-white': activeClass === key,
              'border-slate-700 text-slate-400 hover:border-slate-500 hover:text-slate-200': activeClass !== key,
            })}
          >
            <span>{emoji}</span> {label}
          </button>
        ))}
        {(allQuotes?.['custom']?.length ?? 0) > 0 && (
          <button
            onClick={() => { setActiveClass('custom'); setSelectedSymbol(null); setSearchQuery('') }}
            className={clsx('flex items-center gap-1.5 px-3 py-1.5 rounded border text-sm transition-all', {
              'bg-purple-600 border-purple-500 text-white': activeClass === 'custom',
              'border-slate-700 text-slate-400 hover:border-slate-500 hover:text-slate-200': activeClass !== 'custom',
            })}
          >
            <span>⭐</span> Custom
          </button>
        )}

        {/* Add custom ticker button + inline input */}
        <div className="flex items-center gap-2">
          {showAddInput ? (
            <div className="flex items-center gap-1.5">
              <input
                autoFocus
                type="text"
                value={addInput}
                onChange={e => { setAddInput(e.target.value); setAddError('') }}
                onKeyDown={e => {
                  if (e.key === 'Enter') handleAddTicker()
                  if (e.key === 'Escape') { setShowAddInput(false); setAddInput(''); setAddError('') }
                }}
                placeholder="e.g. EURCHF=X"
                className="bg-dark-700 border border-slate-600 rounded px-2.5 py-1 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-purple-500 w-36 font-mono uppercase"
              />
              <button
                onClick={handleAddTicker}
                disabled={adding}
                className="px-2.5 py-1 rounded bg-purple-600 hover:bg-purple-500 text-white text-xs disabled:opacity-50 transition-colors"
              >
                {adding ? <RefreshCw className="w-3 h-3 animate-spin" /> : 'Add'}
              </button>
              <button
                onClick={() => { setShowAddInput(false); setAddInput(''); setAddError('') }}
                className="text-slate-500 hover:text-slate-300 transition-colors"
              >
                <X className="w-4 h-4" />
              </button>
              {addError && <span className="text-red-400 text-xs max-w-48 truncate">{addError}</span>}
            </div>
          ) : (
            <button
              onClick={() => setShowAddInput(true)}
              className="flex items-center gap-1 px-2.5 py-1.5 rounded border border-dashed border-slate-600 text-slate-500 hover:border-purple-500 hover:text-purple-400 text-sm transition-all"
              title="Add custom ticker"
            >
              <Plus className="w-3.5 h-3.5" /> Add ticker
            </button>
          )}
        </div>

        <div className="relative ml-auto">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500 pointer-events-none" />
          <input
            type="text"
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
            onKeyDown={e => { if (e.key === 'Escape') setSearchQuery('') }}
            placeholder="Search ticker..."
            className="bg-dark-700 border border-slate-700 rounded pl-8 pr-3 py-1.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-blue-500 w-52"
          />
          {searchResults.length > 0 && (
            <div className="absolute top-full right-0 w-72 bg-dark-700 border border-slate-600 rounded shadow-xl z-20 mt-1 overflow-hidden">
              {searchResults.map(q => (
                <button
                  key={q.symbol}
                  onMouseDown={e => e.preventDefault()}
                  onClick={() => {
                    setActiveClass(q.assetClass)
                    setSelectedSymbol({ symbol: q.symbol, name: q.name || q.symbol })
                    setSearchQuery('')
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-dark-600 border-b border-slate-700/30 last:border-0 flex items-center justify-between transition-colors"
                >
                  <div className="min-w-0 flex-1">
                    <span className="text-white font-mono text-sm">{q.symbol}</span>
                    {q.name && <span className="text-slate-500 ml-2 text-xs truncate">{q.name}</span>}
                  </div>
                  <div className="flex items-center gap-2 shrink-0 ml-2">
                    {q.price != null && (
                      <span className="text-slate-300 font-mono text-xs">{q.price.toFixed(q.price > 100 ? 2 : 4)}</span>
                    )}
                    <span className={clsx('text-xs font-mono', q.change_pct >= 0 ? 'positive' : 'negative')}>
                      {q.change_pct >= 0 ? '+' : ''}{q.change_pct.toFixed(2)}%
                    </span>
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {/* Quote grid */}
        <div className="col-span-1 space-y-2">
          <div className="section-title">
            {activeClass === 'custom'
              ? '⭐ Custom'
              : `${ASSET_CLASSES.find(c => c.key === activeClass)?.emoji ?? ''} ${ASSET_CLASSES.find(c => c.key === activeClass)?.label ?? ''}`}
          </div>
          {isLoading ? (
            [1,2,3,4].map(i => <div key={i} className="card-sm animate-pulse h-16 bg-dark-700"></div>)
          ) : currentQuotes.length > 0 ? (
            currentQuotes.map(q => (
              <QuoteCard
                key={q.symbol}
                q={q}
                selected={selectedSymbol?.symbol === q.symbol}
                onClick={() => setSelectedSymbol({ symbol: q.symbol, name: q.name || q.symbol })}
                onRemove={activeClass === 'custom' ? () => removeTicker(q.symbol) : undefined}
              />
            ))
          ) : (
            <div className="card text-slate-500 text-xs text-center py-6">
              Start the backend to load prices
            </div>
          )}
        </div>

        {/* Chart */}
        <div className="col-span-2">
          {selectedSymbol ? (
            <PriceChart symbol={selectedSymbol.symbol} name={selectedSymbol.name} />
          ) : (
            <div className="card h-full flex items-center justify-center text-slate-600 text-sm">
              <div className="text-center">
                <BarChart2 className="w-8 h-8 mx-auto mb-2 opacity-30" />
                <div>Select an instrument</div>
                <div className="text-xs mt-1">to view the price chart</div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Market overview table */}
      <div className="card">
        <div className="section-title">Overview — All Markets</div>
        <div className="overflow-x-auto">
          <table className="w-full text-xs">
            <thead>
              <tr className="text-slate-600 border-b border-slate-700/40">
                <th className="text-left pb-2">Instrument</th>
                <th className="text-left pb-2">Class</th>
                <th className="text-right pb-2">Price</th>
                <th className="text-right pb-2">1d Chg</th>
                <th className="text-right pb-2">IV Vol (est.)</th>
                <th className="text-right pb-2">Signal</th>
              </tr>
            </thead>
            <tbody>
              {allQuotes && Object.entries(allQuotes).flatMap(([cls, quotes]) =>
                quotes.map(q => q.price && (
                  <tr key={q.symbol} className="border-b border-slate-700/20 hover:bg-dark-700/50 transition-colors">
                    <td className="py-1.5">
                      <div className="text-white">{q.name || q.symbol}</div>
                      <div className="text-slate-600">{q.symbol}</div>
                    </td>
                    <td className="py-1.5 text-slate-500 capitalize">{cls}</td>
                    <td className="py-1.5 text-right font-mono text-white">
                      {q.price.toFixed(q.price > 100 ? 2 : 4)}
                    </td>
                    <td className={clsx('py-1.5 text-right font-mono font-bold', q.change_pct >= 0 ? 'positive' : 'negative')}>
                      {q.change_pct >= 0 ? '+' : ''}{q.change_pct.toFixed(2)}%
                    </td>
                    <td className="py-1.5 text-right text-slate-400">
                      {q.iv ? `${(q.iv * 100).toFixed(1)}%` : '—'}
                    </td>
                    <td className="py-1.5 text-right">
                      {q.change_pct > 1.5 ? <span className="badge-green badge">▲ Bullish</span>
                        : q.change_pct < -1.5 ? <span className="badge-red badge">▼ Bearish</span>
                        : <span className="badge badge-blue">→ Neutral</span>}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}