import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine,
} from 'recharts'
import { History, TrendingUp, TrendingDown, Plus, Minus, RefreshCw, ArrowRight, AlertTriangle } from 'lucide-react'
import clsx from 'clsx'

// ─── API ─────────────────────────────────────────────────────────────────────

async function fetchSnapshots() {
  const r = await fetch('/api/var/pnl/snapshots?limit=200')
  if (!r.ok) throw new Error(`${r.status}`)
  return r.json()
}

async function fetchSnapshotDetail(id: number) {
  const r = await fetch(`/api/var/pnl/snapshots/${id}`)
  if (!r.ok) throw new Error(`${r.status}`)
  return r.json()
}

async function fetchDiff(a: number, b: number) {
  const r = await fetch(`/api/var/pnl/diff?a=${a}&b=${b}`)
  if (!r.ok) throw new Error(`${r.status}`)
  return r.json()
}

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

const fmt = (v: number | null | undefined, digits = 2) =>
  v == null ? '—' : `${v >= 0 ? '+' : ''}${v.toFixed(digits)}%`

const fmtEur = (v: number | null | undefined) =>
  v == null ? '—' : `${v < 0 ? '' : '+'}${v.toLocaleString('fr-FR', { maximumFractionDigits: 0 })} €`

const fmtDate = (s: string) => s?.replace('T', ' ').slice(0, 16)

function DeltaBadge({ v, unit = '%' }: { v: number; unit?: string }) {
  if (Math.abs(v) < 0.001) return <span className="text-slate-500 text-xs">≈ 0</span>
  return (
    <span className={clsx('text-xs font-semibold', v > 0 ? 'text-emerald-400' : 'text-red-400')}>
      {v > 0 ? '▲' : '▼'} {Math.abs(v).toFixed(unit === '%' ? 3 : 0)}{unit}
    </span>
  )
}

// ─── Snapshot list item ───────────────────────────────────────────────────────

function SnapRow({
  snap, selectedA, selectedB, onSelectA, onSelectB,
}: {
  snap: any; selectedA: number | null; selectedB: number | null
  onSelectA: (id: number) => void; onSelectB: (id: number) => void
}) {
  const isA = selectedA === snap.id
  const isB = selectedB === snap.id
  const pnl = snap.total_pnl_pct ?? 0

  return (
    <div className={clsx(
      'flex items-center gap-3 px-3 py-2.5 rounded-lg border text-xs cursor-default transition-colors',
      isA ? 'bg-blue-900/20 border-blue-700/50'
        : isB ? 'bg-violet-900/20 border-violet-700/50'
        : 'bg-dark-800 border-slate-700/30 hover:border-slate-600/50'
    )}>
      {/* Date */}
      <span className="text-slate-400 font-mono w-32 shrink-0">{fmtDate(snap.snapped_at)}</span>
      {/* Positions */}
      <span className="text-slate-500 w-16 shrink-0">{snap.n_open} pos.</span>
      {/* PnL */}
      <span className={clsx('font-semibold w-20 shrink-0', pnl >= 0 ? 'text-emerald-400' : 'text-red-400')}>
        {fmt(pnl)}
      </span>
      <span className={clsx('w-24 shrink-0', pnl >= 0 ? 'text-emerald-400/60' : 'text-red-400/60')}>
        {fmtEur(snap.total_pnl_eur)}
      </span>
      {/* Actions */}
      <div className="flex gap-1.5 ml-auto">
        <button
          onClick={() => onSelectA(snap.id)}
          className={clsx('px-2 py-0.5 rounded text-[10px] font-semibold border transition-colors',
            isA ? 'bg-blue-600 border-blue-500 text-white'
              : 'border-slate-600 text-slate-500 hover:text-blue-400 hover:border-blue-600/50')}
        >A</button>
        <button
          onClick={() => onSelectB(snap.id)}
          className={clsx('px-2 py-0.5 rounded text-[10px] font-semibold border transition-colors',
            isB ? 'bg-violet-600 border-violet-500 text-white'
              : 'border-slate-600 text-slate-500 hover:text-violet-400 hover:border-violet-600/50')}
        >B</button>
      </div>
    </div>
  )
}

// ─── Diff view ───────────────────────────────────────────────────────────────

function DiffView({ diffData }: { diffData: any }) {
  const { snapshot_a: sa, snapshot_b: sb, portfolio_delta: pd,
    new_positions, closed_positions, changed_positions } = diffData

  return (
    <div className="space-y-4">
      {/* Portfolio delta header */}
      <div className="bg-dark-800 border border-slate-700/40 rounded-xl p-4">
        <div className="flex items-center gap-3 mb-4 flex-wrap">
          <div className="flex items-center gap-2 text-xs text-blue-400 bg-blue-900/20 border border-blue-700/40 px-3 py-1.5 rounded-lg">
            <span className="font-mono font-semibold">A</span>
            <span className="text-slate-400">{fmtDate(sa.snapped_at)}</span>
            {sa.macro_regime && <span className="text-slate-500 capitalize">· {sa.macro_regime}</span>}
          </div>
          <ArrowRight className="w-4 h-4 text-slate-600" />
          <div className="flex items-center gap-2 text-xs text-violet-400 bg-violet-900/20 border border-violet-700/40 px-3 py-1.5 rounded-lg">
            <span className="font-mono font-semibold">B</span>
            <span className="text-slate-400">{fmtDate(sb.snapped_at)}</span>
            {sb.macro_regime && <span className="text-slate-500 capitalize">· {sb.macro_regime}</span>}
          </div>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div>
            <div className="text-[10px] text-slate-500 uppercase mb-1">Δ PnL %</div>
            <DeltaBadge v={pd.pnl_pct_delta} />
            <div className="text-[10px] text-slate-600 mt-0.5">
              {fmt(sa.total_pnl_pct)} → {fmt(sb.total_pnl_pct)}
            </div>
          </div>
          <div>
            <div className="text-[10px] text-slate-500 uppercase mb-1">Δ PnL €</div>
            <DeltaBadge v={pd.pnl_eur_delta} unit="€" />
            <div className="text-[10px] text-slate-600 mt-0.5">
              {fmtEur(sa.total_pnl_eur)} → {fmtEur(sb.total_pnl_eur)}
            </div>
          </div>
          <div>
            <div className="text-[10px] text-slate-500 uppercase mb-1">Δ Capital</div>
            <DeltaBadge v={pd.capital_delta_eur} unit="€" />
          </div>
          <div className="flex gap-3">
            {pd.positions_opened > 0 && (
              <div className="text-center">
                <div className="text-emerald-400 font-bold text-lg">+{pd.positions_opened}</div>
                <div className="text-[10px] text-slate-500">opened</div>
              </div>
            )}
            {pd.positions_closed > 0 && (
              <div className="text-center">
                <div className="text-red-400 font-bold text-lg">-{pd.positions_closed}</div>
                <div className="text-[10px] text-slate-500">closed</div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* New positions */}
      {new_positions.length > 0 && (
        <div className="bg-dark-800 border border-emerald-700/30 rounded-xl p-4">
          <div className="flex items-center gap-2 mb-3">
            <Plus className="w-4 h-4 text-emerald-400" />
            <h3 className="text-sm font-semibold text-emerald-400">
              New positions ({new_positions.length})
            </h3>
          </div>
          <div className="space-y-1.5">
            {new_positions.map((p: any) => (
              <div key={p.id} className="flex items-center justify-between text-xs bg-emerald-900/10 rounded px-3 py-2">
                <div>
                  <span className="text-white font-semibold">{p.ticker}</span>
                  <span className="text-slate-400 ml-2">{p.strategy}</span>
                </div>
                <div className="flex gap-4">
                  <span className="text-slate-500">Entry: {p.entry_price?.toFixed(2) ?? '—'}</span>
                  <span className={clsx('font-semibold', (p.pnl_pct ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
                    {fmt(p.pnl_pct)}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Closed positions */}
      {closed_positions.length > 0 && (
        <div className="bg-dark-800 border border-red-700/30 rounded-xl p-4">
          <div className="flex items-center gap-2 mb-3">
            <Minus className="w-4 h-4 text-red-400" />
            <h3 className="text-sm font-semibold text-red-400">
              Closed positions ({closed_positions.length})
            </h3>
          </div>
          <div className="space-y-1.5">
            {closed_positions.map((p: any) => (
              <div key={p.id} className="flex items-center justify-between text-xs bg-red-900/10 rounded px-3 py-2">
                <div>
                  <span className="text-slate-400 font-semibold">{p.ticker}</span>
                  <span className="text-slate-500 ml-2">{p.strategy}</span>
                </div>
                <div className="flex gap-4">
                  <span className="text-slate-500">Last val.: {fmt(p.pnl_pct)}</span>
                  <span className={clsx('font-semibold', (p.pnl_pct ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
                    {fmtEur(p.pnl_eur)}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Changed positions */}
      {changed_positions.length > 0 && (
        <div className="bg-dark-800 border border-slate-700/40 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-white mb-3">
            Position changes ({changed_positions.length})
          </h3>
          <div className="overflow-x-auto">
            <table className="w-full text-xs">
              <thead>
                <tr className="text-slate-500 border-b border-slate-700/40">
                  <th className="text-left pb-2 font-medium">Position</th>
                  <th className="text-right pb-2 font-medium">PnL A</th>
                  <th className="text-right pb-2 font-medium">PnL B</th>
                  <th className="text-right pb-2 font-medium">Δ PnL %</th>
                  <th className="text-right pb-2 font-medium">Δ PnL €</th>
                </tr>
              </thead>
              <tbody>
                {changed_positions.map((p: any) => (
                  <tr key={p.id} className="border-b border-slate-700/20 last:border-0">
                    <td className="py-2">
                      <span className="text-white font-semibold">{p.ticker}</span>
                      <span className="text-slate-500 ml-2">{p.strategy}</span>
                    </td>
                    <td className={clsx('text-right py-2', (p.pnl_pct_a ?? 0) >= 0 ? 'text-emerald-400/70' : 'text-red-400/70')}>
                      {fmt(p.pnl_pct_a)}
                    </td>
                    <td className={clsx('text-right py-2 font-semibold', (p.pnl_pct_b ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
                      {fmt(p.pnl_pct_b)}
                    </td>
                    <td className="text-right py-2">
                      <DeltaBadge v={p.delta_pct} />
                    </td>
                    <td className="text-right py-2">
                      <DeltaBadge v={p.delta_eur} unit="€" />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  )
}

// ─── Snapshot detail ──────────────────────────────────────────────────────────

function SnapshotDetail({ snapId }: { snapId: number }) {
  const { data, isLoading } = useQuery({
    queryKey: ['pnl-snap-detail', snapId],
    queryFn: () => fetchSnapshotDetail(snapId),
    staleTime: 300_000,
  })

  if (isLoading) return <div className="text-slate-600 text-sm p-4">Loading…</div>
  if (!data) return null

  const trades: any[] = data.trades_snapshot ?? []
  const macro = data.macro_regime

  return (
    <div className="bg-dark-800 border border-slate-700/40 rounded-xl p-4 space-y-4">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <div>
          <h3 className="text-sm font-semibold text-white">{fmtDate(data.snapped_at)} UTC</h3>
          {macro?.dominant && (
            <span className="text-xs text-slate-500 capitalize">Regime: {macro.dominant}</span>
          )}
        </div>
        <div className="flex gap-4 text-xs">
          <div>
            <span className="text-slate-500">Capital </span>
            <span className="text-white font-semibold">
              {(data.total_capital_eur ?? 0).toLocaleString('fr-FR', { maximumFractionDigits: 0 })} €
            </span>
          </div>
          <div>
            <span className="text-slate-500">PnL </span>
            <span className={clsx('font-semibold', (data.total_pnl_pct ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
              {fmt(data.total_pnl_pct)} · {fmtEur(data.total_pnl_eur)}
            </span>
          </div>
          <div>
            <span className="text-slate-500">{data.n_open} open · {data.n_closed} closed</span>
          </div>
        </div>
      </div>

      {trades.length > 0 ? (
        <table className="w-full text-xs">
          <thead>
            <tr className="text-slate-500 border-b border-slate-700/40">
              <th className="text-left pb-2 font-medium">Ticker</th>
              <th className="text-left pb-2 font-medium">Strategy</th>
              <th className="text-right pb-2 font-medium">Entry</th>
              <th className="text-right pb-2 font-medium">Current price</th>
              <th className="text-right pb-2 font-medium">PnL %</th>
              <th className="text-right pb-2 font-medium">PnL €</th>
            </tr>
          </thead>
          <tbody>
            {trades.map((t: any, i: number) => (
              <tr key={i} className="border-b border-slate-700/20 last:border-0">
                <td className="py-2 font-semibold text-white">{t.ticker}</td>
                <td className="py-2 text-slate-400">{t.strategy}</td>
                <td className="py-2 text-right text-slate-400 font-mono">{t.entry_price?.toFixed(2) ?? '—'}</td>
                <td className="py-2 text-right text-slate-300 font-mono">{t.current_price?.toFixed(2) ?? '—'}</td>
                <td className={clsx('py-2 text-right font-semibold', (t.pnl_pct ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
                  {fmt(t.pnl_pct)}
                </td>
                <td className={clsx('py-2 text-right', (t.pnl_eur ?? 0) >= 0 ? 'text-emerald-400/70' : 'text-red-400/70')}>
                  {fmtEur(t.pnl_eur)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : (
        <div className="text-slate-600 text-sm">No positions in this snapshot</div>
      )}
    </div>
  )
}

// ─── PnL sparkline tooltip ────────────────────────────────────────────────────

function SparkTooltip({ active, payload, label }: any) {
  if (!active || !payload?.length) return null
  return (
    <div className="bg-dark-800 border border-slate-700 rounded px-2.5 py-1.5 text-xs">
      <div className="text-slate-500 mb-0.5">{label}</div>
      <div className={clsx('font-semibold', payload[0].value >= 0 ? 'text-emerald-400' : 'text-red-400')}>
        PnL: {fmt(payload[0].value)}
      </div>
    </div>
  )
}

// ─── Main page ────────────────────────────────────────────────────────────────

export default function PositionHistory() {
  const [selectedA, setSelectedA] = useState<number | null>(null)
  const [selectedB, setSelectedB] = useState<number | null>(null)
  const [viewMode, setViewMode] = useState<'detail' | 'diff'>('detail')
  const [activeDetail, setActiveDetail] = useState<number | null>(null)

  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ['pnl-snapshots-all'],
    queryFn: fetchSnapshots,
    staleTime: 60_000,
  })

  const { data: diffData, isLoading: diffLoading, error: diffError } = useQuery({
    queryKey: ['pnl-diff', selectedA, selectedB],
    queryFn: () => fetchDiff(selectedA!, selectedB!),
    enabled: selectedA != null && selectedB != null && selectedA !== selectedB,
    staleTime: 60_000,
  })

  const snapshots: any[] = data?.snapshots ?? []

  // Build sparkline data (chronological)
  const sparkData = [...snapshots].reverse().map(s => ({
    date: s.snapped_at?.slice(5, 16).replace('T', ' '),
    pnl: s.total_pnl_pct ?? 0,
  }))

  const handleSelectA = (id: number) => {
    setSelectedA(id)
    setViewMode('diff')
  }
  const handleSelectB = (id: number) => {
    setSelectedB(id)
    setViewMode('diff')
  }

  const canDiff = selectedA != null && selectedB != null && selectedA !== selectedB

  return (
    <div className="p-6 space-y-5 max-w-screen-xl mx-auto">

      {/* Header */}
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <div className="flex items-center gap-3 mb-1">
            <History className="w-6 h-6 text-violet-400" />
            <h1 className="text-xl font-bold text-white">Position History</h1>
          </div>
          <p className="text-slate-400 text-sm">
            {snapshots.length} PnL snapshot{snapshots.length !== 1 ? 's' : ''} recorded
            {snapshots.length > 0 && ` · from ${fmtDate(snapshots[snapshots.length - 1]?.snapped_at)} to ${fmtDate(snapshots[0]?.snapped_at)}`}
          </p>
        </div>
        <div className="flex gap-2 flex-wrap">
          {canDiff && (
            <div className="flex gap-1">
              <button
                onClick={() => setViewMode('detail')}
                className={clsx('px-3 py-1.5 rounded text-xs font-semibold transition-colors',
                  viewMode === 'detail' ? 'bg-slate-600 text-white' : 'bg-dark-700 text-slate-400 hover:text-white')}
              >
                Detail
              </button>
              <button
                onClick={() => setViewMode('diff')}
                className={clsx('px-3 py-1.5 rounded text-xs font-semibold transition-colors',
                  viewMode === 'diff' ? 'bg-violet-600 text-white' : 'bg-dark-700 text-slate-400 hover:text-white')}
              >
                Diff A→B
              </button>
            </div>
          )}
          {(selectedA || selectedB) && (
            <button
              onClick={() => { setSelectedA(null); setSelectedB(null); setViewMode('detail') }}
              className="px-3 py-1.5 rounded text-xs text-slate-500 hover:text-slate-300 bg-dark-700"
            >
              Clear selection
            </button>
          )}
          <button onClick={() => refetch()}
            className="flex items-center gap-1 px-3 py-1.5 rounded text-xs bg-dark-700 text-slate-400 hover:text-white">
            <RefreshCw className="w-3.5 h-3.5" /> Refresh
          </button>
        </div>
      </div>

      {/* Error */}
      {error && (
        <div className="bg-red-900/20 border border-red-700/40 rounded-xl p-3 text-red-400 text-sm flex items-center gap-2">
          <AlertTriangle className="w-4 h-4 shrink-0" /> {String(error)}
        </div>
      )}

      {/* Selection banner */}
      {(selectedA || selectedB) && (
        <div className="flex items-center gap-3 bg-dark-800 border border-slate-700/40 rounded-xl px-4 py-3 text-xs flex-wrap">
          <span className="text-slate-500">Diff selection:</span>
          {selectedA ? (
            <span className="flex items-center gap-1.5 bg-blue-900/30 text-blue-400 border border-blue-700/40 px-2.5 py-1 rounded">
              <span className="font-bold">A</span>
              {fmtDate(snapshots.find(s => s.id === selectedA)?.snapped_at ?? '')}
            </span>
          ) : <span className="text-slate-600">A: not selected</span>}
          <ArrowRight className="w-3.5 h-3.5 text-slate-600" />
          {selectedB ? (
            <span className="flex items-center gap-1.5 bg-violet-900/30 text-violet-400 border border-violet-700/40 px-2.5 py-1 rounded">
              <span className="font-bold">B</span>
              {fmtDate(snapshots.find(s => s.id === selectedB)?.snapped_at ?? '')}
            </span>
          ) : <span className="text-slate-600">B: not selected</span>}
          {canDiff && (
            <button onClick={() => setViewMode('diff')}
              className="ml-auto bg-violet-600 hover:bg-violet-500 text-white px-3 py-1 rounded text-xs font-semibold">
              View diff
            </button>
          )}
        </div>
      )}

      {/* Empty state */}
      {!isLoading && snapshots.length === 0 && (
        <div className="text-center py-20">
          <History className="w-14 h-14 text-slate-700 mx-auto mb-4" />
          <div className="text-slate-400 font-semibold mb-2">No PnL snapshots available</div>
          <p className="text-slate-600 text-sm max-w-md mx-auto">
            Enable the PnL Scheduler in Configuration or trigger a snapshot manually
            from the Configuration → Auto-Cycle &amp; Logging page.
          </p>
        </div>
      )}

      {snapshots.length > 0 && (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">

          {/* Left: timeline list */}
          <div className="lg:col-span-1 space-y-3">
            {/* Mini sparkline */}
            {sparkData.length > 2 && (
              <div className="bg-dark-800 border border-slate-700/40 rounded-xl p-3">
                <div className="text-xs text-slate-500 mb-2">Portfolio PnL over time</div>
                <ResponsiveContainer width="100%" height={80}>
                  <LineChart data={sparkData} margin={{ top: 4, right: 4, left: -30, bottom: 0 }}>
                    <XAxis dataKey="date" hide />
                    <YAxis tick={{ fontSize: 9, fill: '#64748b' }} unit="%" />
                    <Tooltip content={<SparkTooltip />} />
                    <ReferenceLine y={0} stroke="#475569" strokeDasharray="3 2" />
                    <Line type="monotone" dataKey="pnl" stroke="#a78bfa" dot={false} strokeWidth={1.5} />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            )}

            {/* Snapshot list */}
            <div className="bg-dark-800 border border-slate-700/40 rounded-xl p-3 space-y-1.5 max-h-[calc(100vh-320px)] overflow-y-auto">
              <div className="text-[10px] text-slate-600 uppercase tracking-wider px-1 mb-2">
                {snapshots.length} snapshots — click for detail · A/B to diff
              </div>
              {snapshots.map(s => (
                <div key={s.id} onClick={() => { setActiveDetail(s.id); setViewMode('detail') }}>
                  <SnapRow
                    snap={s}
                    selectedA={selectedA}
                    selectedB={selectedB}
                    onSelectA={id => { handleSelectA(id); setActiveDetail(null) }}
                    onSelectB={id => { handleSelectB(id); setActiveDetail(null) }}
                  />
                </div>
              ))}
            </div>
          </div>

          {/* Right: detail or diff */}
          <div className="lg:col-span-2">
            {viewMode === 'diff' && canDiff && (
              diffLoading
                ? <div className="text-slate-500 text-sm p-4">Computing diff…</div>
                : diffError
                ? <div className="text-red-400 text-sm p-4">{String(diffError)}</div>
                : diffData ? <DiffView diffData={diffData} />
                : null
            )}

            {viewMode === 'detail' && activeDetail && (
              <SnapshotDetail snapId={activeDetail} />
            )}

            {viewMode === 'detail' && !activeDetail && !canDiff && (
              <div className="flex flex-col items-center justify-center py-20 text-center">
                <TrendingUp className="w-12 h-12 text-slate-700 mb-4" />
                <div className="text-slate-500 text-sm">
                  Click a snapshot to see the detail<br />
                  or select A and B to compare two valuations
                </div>
              </div>
            )}

            {viewMode === 'diff' && !canDiff && (
              <div className="flex flex-col items-center justify-center py-20 text-center">
                <TrendingDown className="w-12 h-12 text-slate-700 mb-4" />
                <div className="text-slate-500 text-sm">
                  Select two snapshots (A and B) from the list to view the diff
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}