/**
 * JournalPanel.tsx — 매매내역 및 매매일지 탭 패널 컴포넌트
 *
 * 역할:
 * - 매매내역 탭: 최근 거래 이력 표시 (매수/매도, 손익, 체결 시간, 사유)
 * - 매매일지 탭: AI 자동 생성 매매일지 표시 (기분, 태그, 내용)
 * - 미체결 주문 정리 버튼 제공
 *
 * 최적화:
 * - React.memo로 불필요한 리렌더 방지
 *
 * 데이터 흐름:
 * - journals: react-query 'journals' 쿼리 결과
 * - tradeHistory: react-query 'trade-history' 쿼리 결과
 */
import React, { useMemo, useState } from 'react'
import { BookOpen, ArrowUpDown } from 'lucide-react'
import { Journal, TradeHistory } from '../types/trading'
import { parseKst } from '../utils/formatUtils'

const kstDateKey = (d: Date | null): string =>
    d ? d.toLocaleDateString('sv-SE', { timeZone: 'Asia/Seoul' }) : ''

const kstDateLabel = (d: Date | null, todayKey: string): string => {
    if (!d) return '날짜 미상'
    const key = kstDateKey(d)
    const md = d.toLocaleDateString('ko-KR', { month: '2-digit', day: '2-digit', weekday: 'short', timeZone: 'Asia/Seoul' })
    return key === todayKey ? `${md} (오늘)` : md
}

/** JournalPanel Props 정의 */
interface JournalPanelProps {
    /** 매매일지 배열 (장 마감 후 자동 생성) */
    journals: Journal[] | undefined
    /** 매매 내역 배열 (최근 거래 이력) */
    tradeHistory?: TradeHistory[] | undefined
    /** 미체결 주문 정리 콜백 */
    onResetPending: () => void
    /** true면 미체결 정리 버튼 비활성화 (예: 사용자 모드 확정 전) */
    resetDisabled?: boolean
}

/**
 * JournalPanel — 매매내역/매매일지 탭 전환 패널
 *
 * 상태(State):
 * - tab: 현재 활성 탭 ('trades' 또는 'journal')
 */
const JournalPanel = React.memo(({ journals, tradeHistory, onResetPending, resetDisabled }: JournalPanelProps) => {
    const [tab, setTab] = useState<'trades' | 'journal'>('trades')

    // 최신순 정렬 (created_at/executed_at 기준, KST 보정). 시각 파싱 불가 건은 id 로 보조 정렬
    const sortedTrades = useMemo(() => {
        const todayKey = kstDateKey(new Date())
        return (tradeHistory ?? [])
            .map((t: TradeHistory) => {
                const dt = parseKst(t.created_at || t.executed_at || '')
                return { t, dt, key: kstDateKey(dt) }
            })
            .sort((a, b) => {
                const d = (b.dt?.getTime() ?? 0) - (a.dt?.getTime() ?? 0)
                return d !== 0 ? d : Number(b.t.id || 0) - Number(a.t.id || 0)
            })
            .map((x, i, arr) => ({
                ...x,
                // 날짜가 바뀌는 첫 행에 구분선 라벨
                header: i === 0 || arr[i - 1].key !== x.key ? kstDateLabel(x.dt, todayKey) : null,
            }))
    }, [tradeHistory])

    return (
        <div className="bg-[#0c1522] border border-[#152035] rounded overflow-hidden flex flex-col h-1/2">
            {/* Header with tabs */}
            <div className="px-3 py-1.5 border-b border-[#152035] bg-[#091018] flex justify-between items-center flex-shrink-0">
                <div className="flex items-center gap-0.5">
                    <button
                        onClick={() => setTab('trades')}
                        className={`flex items-center gap-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider rounded transition-colors ${
                            tab === 'trades'
                                ? 'text-[#3b82f6] bg-[#3b82f6]/10'
                                : 'text-[#3a5570] hover:text-[#64748b]'
                        }`}
                    >
                        <ArrowUpDown size={10} />
                        매매내역
                        {tradeHistory && tradeHistory.length > 0 && (
                            <span className="ml-1 text-[8px] font-mono bg-[#1e293b] px-1 rounded">{tradeHistory.length}</span>
                        )}
                    </button>
                    <button
                        onClick={() => setTab('journal')}
                        className={`flex items-center gap-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider rounded transition-colors ${
                            tab === 'journal'
                                ? 'text-[#22c55e] bg-[#22c55e]/10'
                                : 'text-[#3a5570] hover:text-[#64748b]'
                        }`}
                    >
                        <BookOpen size={10} />
                        매매일지
                    </button>
                </div>
                <button
                    onClick={onResetPending}
                    disabled={resetDisabled}
                    className="px-2 py-0.5 text-[9px] font-mono text-[#3a5570] hover:text-[#e84444] border border-[#152035] hover:border-[#e84444]/30 rounded-sm transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-[#3a5570] disabled:hover:border-[#152035]"
                    title="미체결 주문 정리"
                >
                    미체결 정리
                </button>
            </div>

            {/* Content */}
            <div className="overflow-y-auto custom-scrollbar flex-1 p-2 space-y-1">
                {tab === 'trades' ? (
                    /* ── 매매내역 탭 ── */
                    sortedTrades.length > 0 ? (
                        sortedTrades.map(({ t: trade, dt: createdAt, header }, idx: number) => {
                            // 거래 유형 판별 (매수/매도)
                            const isBuy = trade.order_type === 'BUY'
                            const isSell = trade.order_type === 'SELL'
                            // 손익 금액 및 수익률 (순이익 우선, 없으면 손익 사용)
                            const pnl = Number(trade.net_profit_loss || trade.profit_loss || 0)
                            const pnlRate = Number(trade.profit_loss_rate || 0)
                            const isProfit = pnl > 0
                            const isLoss = pnl < 0
                            // 체결 상태 판별 (COMPLETED, EXECUTED, FILLED → 정상 체결)
                            const st = String(trade.status || '')
                            const statusOk = st === 'COMPLETED' || st === 'EXECUTED' || st === 'FILLED'
                            const isFailed = st === 'FAILED'

                            // DB가 KST로 저장하므로 타임존 없는 ISO 문자열에 +09:00 보정 (parseKst)
                            const timeStr = createdAt
                                ? createdAt.toLocaleTimeString('ko-KR', {
                                    hour: '2-digit', minute: '2-digit', second: '2-digit',
                                    hour12: false, timeZone: 'Asia/Seoul',
                                })
                                : '--:--:--'
                            const dateShort = createdAt
                                ? createdAt.toLocaleDateString('ko-KR', { month: '2-digit', day: '2-digit', timeZone: 'Asia/Seoul' })
                                : ''

                            return (
                                <React.Fragment key={trade.id || idx}>
                                {header && (
                                    <div className="sticky top-0 z-10 px-1 py-0.5 text-[9px] font-mono text-[#5b9aff] bg-[#0c1522] border-b border-[#152035]">
                                        {header}
                                    </div>
                                )}
                                <div
                                    className={`px-2.5 py-2 rounded-sm border transition-colors ${
                                        isFailed
                                            ? 'bg-[#1a0808] border-red-900/20'
                                            : 'bg-[#091018] border-[#152035] hover:border-[#1e3050]'
                                    }`}
                                >
                                    <div className="flex justify-between items-center">
                                        <div className="flex items-center gap-1.5 min-w-0">
                                            <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${
                                                isBuy ? 'bg-[#ef4444]/15 text-[#ef4444]' : 'bg-[#3b82f6]/15 text-[#3b82f6]'
                                            }`}>
                                                {isBuy ? '매수' : '매도'}
                                            </span>
                                            <span className="text-xs font-semibold text-[#c5d5e8] truncate">
                                                {trade.stock_name || trade.stock_code}
                                            </span>
                                            {isFailed && (
                                                <span className="text-[8px] font-mono px-1 py-px rounded-sm bg-[#7f1d1d] text-[#fca5a5]">실패</span>
                                            )}
                                        </div>
                                        <span className="text-[9px] font-mono text-[#3a5570] flex-shrink-0 ml-1">{dateShort} {timeStr}</span>
                                    </div>

                                    <div className="flex justify-between items-center mt-1">
                                        <div className="text-[10px] font-mono text-[#64748b]">
                                            {/* 체결가(executed_price) 우선. null 이면 아직 체결 확인 전 — 주문가는 회색으로 구분 */}
                                            {Number(trade.executed_price) > 0 ? (
                                                <>{Number(trade.executed_quantity || trade.order_quantity || 0)}주 × {Math.round(Number(trade.executed_price)).toLocaleString()}원</>
                                            ) : (
                                                <>
                                                    {Number(trade.order_quantity || trade.executed_quantity || 0)}주
                                                    {Number(trade.order_price) > 0 && (
                                                        <span className="text-[#3a4a5c]" title="체결 전 주문가"> × 주문가 {Math.round(Number(trade.order_price)).toLocaleString()}원</span>
                                                    )}
                                                    {!isFailed && <span className="ml-1 text-[9px] text-[#eab308]/80">체결 확인 중</span>}
                                                </>
                                            )}
                                        </div>
                                        {isSell && statusOk && pnl !== 0 && (
                                            <div className={`text-[10px] font-mono font-semibold ${isProfit ? 'text-[#ef4444]' : isLoss ? 'text-[#3b82f6]' : 'text-[#64748b]'}`}>
                                                {pnl > 0 ? '+' : ''}{Math.round(pnl).toLocaleString()}원
                                                <span className="ml-1 text-[9px]">({pnlRate > 0 ? '+' : ''}{pnlRate.toFixed(1)}%)</span>
                                            </div>
                                        )}
                                    </div>

                                    {trade.entry_reason && isBuy && (
                                        <div className="text-[9px] text-[#475569] mt-1 truncate">{trade.entry_reason}</div>
                                    )}
                                    {trade.exit_reason && isSell && (
                                        <div className="text-[9px] text-[#475569] mt-1 truncate">{trade.exit_reason}</div>
                                    )}
                                </div>
                                </React.Fragment>
                            )
                        })
                    ) : (
                        <div className="h-full flex flex-col items-center justify-center text-[#3a5570] text-xs text-center gap-1 pt-8">
                            <ArrowUpDown size={20} className="text-[#1e293b]" />
                            <span>매매내역 없음</span>
                        </div>
                    )
                ) : (
                    /* ── 매매일지 탭 ── */
                    journals && journals.length > 0 ? (
                        journals.map((journal: Journal) => {
                            // DB가 KST로 저장하므로 타임존 없는 ISO 문자열에 +09:00 보정
                            // (매매내역 경로 :102-103과 동일 규약 — 오프셋이 이미 있으면 그대로 둠)
                            const rawJournalDt = journal.journal_date || journal.created_at || ''
                            const journalDate = new Date(
                                rawJournalDt.includes('+') || rawJournalDt.includes('Z')
                                    ? rawJournalDt
                                    : rawJournalDt + '+09:00'
                            )
                            const dateStr = journalDate.toLocaleDateString('ko-KR', { month: '2-digit', day: '2-digit', timeZone: 'Asia/Seoul' })
                            const timeStr = journalDate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Asia/Seoul' })
                            const isGoodMood = journal.mood === '좋음' || journal.mood === 'good' || journal.mood === 'positive'
                            const isBadMood = journal.mood === '나쁨' || journal.mood === 'bad' || journal.mood === 'negative'
                            const tags: string[] = Array.isArray(journal.tags) ? journal.tags : []

                            return (
                                <div key={journal.id} className="p-2.5 bg-[#091018] border border-[#152035] rounded-sm hover:border-[#1e3050] transition-colors">
                                    <div className="flex justify-between items-start mb-1">
                                        <div className="flex items-center gap-1.5 min-w-0">
                                            <span className="text-sm flex-shrink-0">
                                                {isGoodMood ? '😊' : isBadMood ? '😔' : '📝'}
                                            </span>
                                            <span className="text-xs font-semibold text-[#c5d5e8] truncate">
                                                {journal.stock_name || journal.stock_code}
                                            </span>
                                        </div>
                                        <span className="text-[9px] font-mono text-[#3a5570] flex-shrink-0 ml-1">{dateStr} {timeStr}</span>
                                    </div>
                                    <div className="text-[10px] text-[#4a6580] leading-relaxed line-clamp-2 whitespace-pre-line">
                                        {journal.content}
                                    </div>
                                    {tags.length > 0 && (
                                        <div className="flex flex-wrap gap-1 mt-1">
                                            {tags.slice(0, 4).map((tag: string, i: number) => (
                                                <span key={i} className="text-[8px] font-mono px-1 py-px rounded-sm bg-[#152035] text-[#3a5570]">#{tag}</span>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            )
                        })
                    ) : (
                        <div className="h-full flex flex-col items-center justify-center text-[#3a5570] text-xs text-center gap-1 pt-8">
                            <BookOpen size={20} className="text-[#1e293b]" />
                            <span>매매일지 없음</span>
                            <span className="text-[9px] text-[#2a3d55]">장 마감 후 자동 생성됩니다</span>
                        </div>
                    )
                )}
            </div>
        </div>
    )
})

JournalPanel.displayName = 'JournalPanel'
export default JournalPanel