/**
 * DtPositionCards.tsx — 데이트레이딩 포지션 카드 탭
 * 손절-현재-목표 게이지, 경과/시간손절, 트레일링, 일일 손실한도.
 * 소스: GET /daytrading/positions (기존) + GET /positions/overlay (신규, 실패 시 기존 필드만으로 축소 표시)
 */
import React from 'react'
import { useQuery } from '@tanstack/react-query'
import api from '../../lib/api'
import { usePositionOverlay, StrategyDisplay, OverlayPosition } from '../../lib/tvApi'
import { fmtPrice } from './chartUtils'

interface DtPos {
    stock_code: string; stock_name?: string; strategy?: string; entry_price?: number; current_price?: number | null
    stop_loss?: number | null; target_price?: number | null; partial_sold?: boolean; quantity?: number
    pnl?: number | null; pnl_pct?: number | null; entry_time?: string
}
interface DtResp { positions: DtPos[]; daily_pnl?: number; is_daily_loss_exceeded?: boolean }

const pnlCls = (v?: number | null) => (v == null ? 'text-tv-muted' : v > 0 ? 'text-tv-up' : v < 0 ? 'text-tv-down' : 'text-tv-text')
const signed = (v?: number | null, d = 0) => (v == null ? '-' : `${v > 0 ? '+' : ''}${v.toLocaleString('ko-KR', { maximumFractionDigits: d })}`)

const Gauge = ({ stop, cur, target, entry }: { stop?: number | null; cur?: number | null; target?: number | null; entry?: number | null }) => {
    if (stop == null || target == null || cur == null || !(target > stop)) {
        return <div className="text-[11px] text-tv-muted">손절/목표 데이터 없음{stop != null ? ` · 손절 ${fmtPrice(stop)}` : ''}</div>
    }
    const pos = (v: number) => Math.max(0, Math.min(100, ((v - stop) / (target - stop)) * 100))
    return (
        <div>
            <div className="relative h-2.5 rounded bg-tv-raised overflow-hidden">
                <div className="absolute inset-y-0 left-0 bg-tv-down/40" style={{ width: `${entry != null ? pos(entry) : 0}%` }} />
                <div className="absolute inset-y-0 right-0 bg-tv-up/40" style={{ width: `${entry != null ? 100 - pos(entry) : 0}%` }} />
                {entry != null && <div className="absolute inset-y-0 w-px bg-tv-text/60" style={{ left: `${pos(entry)}%` }} />}
                <div className="absolute -top-0.5 bottom-[-2px] w-1 bg-tv-text rounded" style={{ left: `calc(${pos(cur)}% - 2px)` }} />
            </div>
            <div className="flex justify-between text-[11px] font-mono mt-0.5">
                <span className="text-tv-down">손절 {fmtPrice(stop)}</span>
                <span className="text-tv-text">현재 {fmtPrice(cur)}</span>
                <span className="text-tv-up">목표 {fmtPrice(target)}</span>
            </div>
        </div>
    )
}

export const DtPositionCards = React.memo(({ cfg, totalAssets }: { cfg: StrategyDisplay | null; totalAssets?: number }) => {
    const { data, isLoading, isError } = useQuery<DtResp>({
        queryKey: ['tv-dt-positions'],
        queryFn: async () => (await api.get('/daytrading/positions')).data,
        refetchInterval: 15000, staleTime: 8000, retry: false,
    })
    const { data: ov } = usePositionOverlay(undefined)
    const ovMap = new Map<string, OverlayPosition>()
    for (const p of ov?.positions ?? []) {
        const st = (p.strategy ?? '').toLowerCase()
        if (st === 'dt' || st === 'daytrading' || st === 'day_trade') ovMap.set(p.stock_code, p)
    }

    if (isLoading) return <div className="p-4 text-sm text-tv-muted">불러오는 중…</div>
    if (isError || !data) return <div className="p-4 text-sm text-tv-muted">DT 포지션 데이터 없음</div>

    const lim = cfg?.dt?.daily_loss_pct
    const limPct = typeof lim === 'number' ? Math.abs(lim) : null // 백엔드 계약: 퍼센트 단위(-3.0)
    const limAmt = limPct != null && totalAssets ? (totalAssets * limPct) / 100 : null
    const daily = data.daily_pnl ?? 0
    const used = limAmt && daily < 0 ? Math.min(100, (Math.abs(daily) / limAmt) * 100) : 0
    const tsMin = cfg?.dt?.time_stop_min

    return (
        <div className="p-2 flex flex-col gap-2">
            <div className="flex flex-wrap items-center gap-3 px-2 py-1.5 rounded border border-tv-border bg-tv-panel text-xs">
                <span className="text-tv-muted">일일 손익(순)</span>
                <b className={`font-mono ${pnlCls(daily)}`}>{signed(daily)}원</b>
                <span className="text-tv-muted">한도</span>
                <span className="font-mono">{limPct != null ? `-${limPct}%` : '-'}{limAmt != null ? ` (≈-${Math.round(limAmt).toLocaleString('ko-KR')}원)` : ''}</span>
                {limAmt != null && (
                    <span className="flex-1 min-w-[80px] h-1.5 rounded bg-tv-raised overflow-hidden">
                        <span className={`block h-full ${used >= 80 ? 'bg-tv-up' : 'bg-tv-warn'}`} style={{ width: `${used}%` }} />
                    </span>
                )}
                {data.is_daily_loss_exceeded && <span className="px-1.5 rounded bg-tv-up/20 text-tv-up font-semibold">한도 초과 — 당일 중단</span>}
            </div>

            {data.positions.length === 0 && <div className="p-4 text-sm text-tv-muted text-center">보유 중인 DT 포지션 없음</div>}
            <div className="grid gap-2 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
                {data.positions.map((p) => {
                    const o = ovMap.get(p.stock_code)
                    const stop = o?.stop_loss ?? p.stop_loss
                    const target = o?.target_price ?? p.target_price
                    const cur = o?.current_price ?? p.current_price
                    const el = o?.elapsed_min
                    const tsPct = el != null && tsMin ? Math.min(100, (el / tsMin) * 100) : null
                    return (
                        <div key={p.stock_code} className="rounded border border-tv-border bg-tv-panel p-2 text-xs">
                            <div className="flex items-baseline gap-2 mb-1.5">
                                <b className="text-sm truncate">{p.stock_name || p.stock_code}</b>
                                <span className="text-tv-muted font-mono">{p.stock_code}</span>
                                <span className="px-1 rounded border border-tv-border text-tv-muted">{p.strategy || 'DT'}</span>
                                {p.partial_sold && <span className="px-1 rounded bg-tv-warn/15 text-tv-warn">분할익절 후</span>}
                                <span className={`ml-auto font-mono font-semibold ${pnlCls(o?.pnl_pct ?? p.pnl_pct)}`}>
                                    {signed(o?.pnl_pct ?? p.pnl_pct, 2)}%
                                </span>
                            </div>
                            <Gauge stop={stop} cur={cur} target={target} entry={o?.avg_price ?? o?.entry_price ?? p.entry_price} />
                            <div className="mt-1.5 grid grid-cols-2 gap-x-3 gap-y-0.5 text-[11px]">
                                <span className="text-tv-muted">수량 <b className="text-tv-text font-mono">{p.quantity ?? '-'}</b></span>
                                <span className="text-tv-muted">평가손익 <b className={`font-mono ${pnlCls(o?.pnl ?? p.pnl)}`}>{signed(o?.pnl ?? p.pnl)}</b></span>
                                <span className="text-tv-muted">경과 <b className="text-tv-text font-mono">{el != null ? `${Math.round(el)}분` : '-'}</b>
                                    {tsMin ? ` / 시간손절 ${tsMin}분` : ''}</span>
                                <span className="text-tv-muted">
                                    트레일링 {o?.trailing_active
                                        ? <b className="text-tv-warn font-mono">{fmtPrice(o.trailing_stop)}</b>
                                        : <b className="text-tv-text">{o ? '미발동' : '-'}</b>}
                                </span>
                            </div>
                            {tsPct != null && (
                                <div className="mt-1 h-1 rounded bg-tv-raised overflow-hidden" title="시간손절까지 경과 비율 (수익률이 기준 미만일 때만 청산)">
                                    <div className={`h-full ${tsPct >= 100 ? 'bg-tv-warn' : 'bg-tv-muted'}`} style={{ width: `${tsPct}%` }} />
                                </div>
                            )}
                        </div>
                    )
                })}
            </div>
        </div>
    )
})
DtPositionCards.displayName = 'DtPositionCards'