import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
import { Link } from 'react-router-dom';
import {
    createTradeOrder,
    getTradeBalance,
    getPortfolio,
    addPortfolio,
    updatePortfolio,
    deletePortfolio,
    upsertCash,
    deleteCash,
} from '../../api';
import Loading from '../../components/Loading';
import './Stock.css';
import {
    PieChart, Pie, Cell,
    BarChart, Bar, XAxis, YAxis, CartesianGrid,
    Tooltip as ChartTooltip, Legend, ResponsiveContainer,
} from 'recharts';

/* ── helpers ─────────────────────────────────────────────────────── */

const formatNumber = (value) => {
    if (value === null || value === undefined || value === '') return '-';
    const numeric = Number(value);
    if (Number.isNaN(numeric)) return value;
    return new Intl.NumberFormat('ko-KR').format(numeric);
};

const formatPercent = (value) => {
    if (value === null || value === undefined || value === '') return '-';
    if (typeof value === 'string' && value.includes('%')) return value;
    const numeric = Number(value);
    if (Number.isNaN(numeric)) return value;
    return `${numeric >= 0 ? '+' : ''}${numeric.toFixed(2)}%`;
};

const pickFirst = (...values) =>
    values.find((value) => value !== undefined && value !== null && value !== '');

const getQty = (item) =>
    pickFirst(item?.qty, item?.quantity, item?.holding, item?.hold_qty);

const getBuyPrice = (item) =>
    pickFirst(
        item?.buy_price,
        item?.avg_price,
        item?.avg,
        item?.purchase_price,
        item?.buyPrice,
        item?.price
    );

const getCurrentPrice = (item) =>
    pickFirst(
        item?.current_price,
        item?.current,
        item?.cur_price,
        item?.now_price,
        item?.market_price
    );

const getProfitRate = (item) =>
    pickFirst(
        item?.profit_rate,
        item?.profitRate,
        item?.profit_pct,
        item?.profitPercent,
        item?.pnl_rate,
        item?.return_rate,
        item?.yield
    );

const getProfitLoss = (item) =>
    pickFirst(item?.profit_loss, item?.pnl, item?.profitLoss);

const toNumeric = (value) => {
    if (value === null || value === undefined || value === '') return null;
    const numeric = Number(String(value).replace(/[^0-9.-]/g, ''));
    return Number.isNaN(numeric) ? null : numeric;
};

/* ── Chart colors ──────────────────────────────────────────────── */

const CHART_COLORS = ['#818cf8', '#fbbf24', '#34d399', '#f472b6', '#fb923c', '#a78bfa', '#38bdf8', '#4ade80'];

const profitColorClass = (numericValue) => {
    if (numericValue > 0) return 'is-up';
    if (numericValue < 0) return 'is-down';
    if (numericValue === 0) return 'is-flat';
    return '';
};

/* ── empty portfolio form ────────────────────────────────────────── */

const emptyPortfolioForm = {
    broker: '',
    ticker: '',
    name: '',
    quantity: '',
    avg_price: '',
};

/* ── TAB IDs ─────────────────────────────────────────────────────── */

const TAB_PORTFOLIO = 'portfolio';
const TAB_AI = 'ai';
const TAB_REPORT = 'report';

/* ── component ───────────────────────────────────────────────────── */

const StockTrade = () => {
    /* Active tab */
    const [activeTab, setActiveTab] = useState(TAB_REPORT);

    /* ────────────────────────────────────────────────────────────── */
    /*  쟁승토리 계좌 (Portfolio) state                              */
    /* ────────────────────────────────────────────────────────────── */
    const [portfolio, setPortfolio] = useState(null);
    const [portfolioLoading, setPortfolioLoading] = useState(false);
    const [portfolioError, setPortfolioError] = useState('');
    const [portfolioLoaded, setPortfolioLoaded] = useState(false);

    /* Portfolio add form */
    const [addForm, setAddForm] = useState({ ...emptyPortfolioForm });
    const [addFormOpen, setAddFormOpen] = useState(false);
    const [addLoading, setAddLoading] = useState(false);
    const [addError, setAddError] = useState('');

    /* Portfolio edit */
    const [editingId, setEditingId] = useState(null);
    const [editForm, setEditForm] = useState({});
    const [editLoading, setEditLoading] = useState(false);
    const editOrigRef = useRef({});

    /* Portfolio delete */
    const [deleteConfirmId, setDeleteConfirmId] = useState(null);

    /* Cash (예수금) form */
    const [cashForm, setCashForm] = useState({ broker: '', cash: '' });
    const [cashSaving, setCashSaving] = useState(false);
    const [cashError, setCashError] = useState('');

    /* ────────────────────────────────────────────────────────────── */
    /*  리포트 탭 state                                               */
    /* ────────────────────────────────────────────────────────────── */
    const [reportSortField, setReportSortField] = useState('profit_rate');
    const [reportSortDir, setReportSortDir] = useState('desc');

    /* AI Coach */
    const [aiApiKey, setAiApiKey] = useState('');
    const [aiModel, setAiModel] = useState('claude-haiku-4-5-20251001');
    const [aiResult, setAiResult] = useState(null);
    const [aiLoading, setAiLoading] = useState(false);
    const [aiError, setAiError] = useState('');

    /* ────────────────────────────────────────────────────────────── */
    /*  AI 투자 (Balance) state                                      */
    /* ────────────────────────────────────────────────────────────── */
    const [balance, setBalance] = useState(null);
    const [balanceLoading, setBalanceLoading] = useState(false);
    const [balanceError, setBalanceError] = useState('');
    const [balanceLoaded, setBalanceLoaded] = useState(false);

    /* Manual order state */
    const [manualForm, setManualForm] = useState({
        code: '',
        qty: 1,
        price: 0,
        type: 'buy',
    });
    const [manualLoading, setManualLoading] = useState(false);
    const [manualError, setManualError] = useState('');
    const [manualResult, setManualResult] = useState(null);
    const [kisModal, setKisModal] = useState('');

    /* ── loaders ─────────────────────────────────────────────────── */

    const loadPortfolio = useCallback(async () => {
        setPortfolioLoading(true);
        setPortfolioError('');
        try {
            const data = await getPortfolio();
            setPortfolio(data);
            setPortfolioLoaded(true);
        } catch (err) {
            setPortfolioError(err?.message ?? String(err));
        } finally {
            setPortfolioLoading(false);
        }
    }, []);

    const loadBalance = useCallback(async () => {
        setBalanceLoading(true);
        setBalanceError('');
        try {
            const data = await getTradeBalance();
            setBalance(data);
            setBalanceLoaded(true);
        } catch (err) {
            setBalanceError(err?.message ?? String(err));
        } finally {
            setBalanceLoading(false);
        }
    }, []);

    /* Lazy load: 탭 전환 시 해당 API만 호출 */
    useEffect(() => {
        if (activeTab === TAB_PORTFOLIO && !portfolioLoaded) {
            loadPortfolio();
        } else if (activeTab === TAB_AI && !balanceLoaded) {
            loadBalance();
        } else if (activeTab === TAB_REPORT && !portfolioLoaded) {
            loadPortfolio();
        }
    }, [activeTab, portfolioLoaded, balanceLoaded, loadPortfolio, loadBalance]);

    /* AI Coach: 마운트 시 localStorage에서 API Key + 오늘 캐시 복원 */
    useEffect(() => {
        const savedKey = localStorage.getItem('ai_coach_key') ?? '';
        const savedModel = localStorage.getItem('ai_coach_model') ?? 'claude-haiku-4-5-20251001';
        setAiApiKey(savedKey);
        setAiModel(savedModel);
        const today = new Date().toISOString().slice(0, 10);
        const cached = localStorage.getItem(`ai_coach_${today}`);
        if (cached) {
            try { setAiResult({ ...JSON.parse(cached), cached: true }); } catch { /* ignore */ }
        }
    }, []);

    /* Auto-refresh portfolio every 3 min (포트폴리오 탭 활성 시) */
    useEffect(() => {
        if (activeTab !== TAB_PORTFOLIO) return;
        const timer = window.setInterval(loadPortfolio, 180000);
        return () => window.clearInterval(timer);
    }, [activeTab, loadPortfolio]);

    /* ── portfolio actions ───────────────────────────────────────── */

    const handleAddSubmit = async (e) => {
        e.preventDefault();
        setAddLoading(true);
        setAddError('');
        try {
            await addPortfolio({
                broker: addForm.broker.trim(),
                ticker: addForm.ticker.trim(),
                name: addForm.name.trim(),
                quantity: Number(addForm.quantity),
                avg_price: Number(addForm.avg_price),
            });
            setAddForm({ ...emptyPortfolioForm });
            setAddFormOpen(false);
            await loadPortfolio();
        } catch (err) {
            setAddError(err?.message ?? String(err));
        } finally {
            setAddLoading(false);
        }
    };

    const handleEditStart = (item) => {
        setEditingId(item.id);
        setEditForm({
            quantity: item.quantity,
            avg_price: item.avg_price,
            broker: item.broker,
            name: item.name,
        });
        editOrigRef.current = {
            quantity: item.quantity,
            avg_price: item.avg_price,
            broker: item.broker,
            name: item.name,
        };
    };

    const handleEditSave = async (id) => {
        setEditLoading(true);
        try {
            const orig = editOrigRef.current ?? {};
            const diff = {};
            for (const key of Object.keys(editForm)) {
                if (editForm[key] !== orig[key]) {
                    diff[key] = editForm[key];
                }
            }
            if (Object.keys(diff).length === 0) {
                setEditingId(null);
                return;
            }
            await updatePortfolio(id, diff);
            setEditingId(null);
            await loadPortfolio();
        } catch (err) {
            const msg = err?.message ?? String(err);
            if (msg.includes('404') || msg.includes('not found')) {
                alert('해당 종목을 찾을 수 없습니다. 이미 삭제되었을 수 있습니다.');
                await loadPortfolio();
            } else {
                alert('수정 실패: ' + msg);
            }
        } finally {
            setEditLoading(false);
        }
    };

    const handleDelete = async (id) => {
        try {
            await deletePortfolio(id);
            setDeleteConfirmId(null);
            await loadPortfolio();
        } catch (err) {
            const msg = err?.message ?? String(err);
            if (msg.includes('404') || msg.includes('not found')) {
                alert('해당 종목을 찾을 수 없습니다. 이미 삭제되었을 수 있습니다.');
                setDeleteConfirmId(null);
                await loadPortfolio();
            } else {
                alert('삭제 실패: ' + msg);
            }
        }
    };

    /* ── cash (예수금) actions ──────────────────────────────────── */

    const handleCashSave = async (e) => {
        e.preventDefault();
        if (!cashForm.broker.trim() || cashForm.cash === '') return;
        setCashSaving(true);
        setCashError('');
        try {
            await upsertCash(cashForm.broker.trim(), Number(cashForm.cash));
            setCashForm({ broker: '', cash: '' });
            await loadPortfolio();
        } catch (err) {
            setCashError(err?.message ?? String(err));
        } finally {
            setCashSaving(false);
        }
    };

    const handleCashDelete = async (broker) => {
        try {
            await deleteCash(broker);
            await loadPortfolio();
        } catch (err) {
            alert('예수금 삭제 실패: ' + (err?.message ?? String(err)));
        }
    };

    /* ── report sort ─────────────────────────────────────────────── */

    const handleReportSort = (field) => {
        if (reportSortField === field) {
            setReportSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
        } else {
            setReportSortField(field);
            setReportSortDir('desc');
        }
    };

    /* ── AI coach ────────────────────────────────────────────────── */

    const handleAiCoach = async () => {
        if (!aiApiKey.trim() || portfolioHoldings.length === 0) return;

        const today = new Date().toISOString().slice(0, 10);
        const cacheKey = `ai_coach_${today}`;
        const cached = localStorage.getItem(cacheKey);
        if (cached) {
            try { setAiResult({ ...JSON.parse(cached), cached: true }); return; } catch { /* invalid cache */ }
        }

        setAiLoading(true);
        setAiError('');

        const holdingsText = portfolioHoldings
            .map((item) =>
                `- ${item.name ?? item.ticker}(${item.ticker ?? ''}): ${item.quantity}주, 매입가 ${formatNumber(item.avg_price)}원, 현재가 ${item.current_price != null ? formatNumber(item.current_price) + '원' : '미조회'}, 수익률 ${item.profit_rate != null ? formatPercent(item.profit_rate) : '미조회'}`
            )
            .join('\n');

        const prompt = `당신은 한국 주식 전문 투자 코치입니다. 아래 포트폴리오를 분석하여 JSON으로만 답하세요.

분석 일자: ${today}
총 매입금액: ${formatNumber(portfolioSummary.total_buy)}원
총 평가금액: ${formatNumber(portfolioSummary.total_eval)}원
총 손익: ${formatNumber(portfolioSummary.total_profit)}원 (수익률: ${formatPercent(portfolioSummary.total_profit_rate)})
예수금 합계: ${totalCash != null ? formatNumber(totalCash) + '원' : '미입력'}
총 자산: ${totalAssets != null ? formatNumber(totalAssets) + '원' : '미집계'}
보유 종목 수: ${portfolioHoldings.length}개
보유 종목:
${holdingsText}

반드시 아래 JSON 형식으로만 응답하세요 (코드블록 없이, 모든 텍스트는 한국어로):
{
  "score": 85,
  "grade": "A",
  "summary": "30자 이내 한줄 평가",
  "evaluation": "200자 이내 상세 평가",
  "advice": [
    { "title": "조언 제목", "body": "50자 이내 조언 내용" },
    { "title": "조언 제목", "body": "50자 이내 조언 내용" },
    { "title": "조언 제목", "body": "50자 이내 조언 내용" }
  ]
}`;

        try {
            const res = await fetch('https://api.anthropic.com/v1/messages', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'x-api-key': aiApiKey.trim(),
                    'anthropic-version': '2023-06-01',
                    'anthropic-dangerous-direct-browser-access': 'true',
                },
                body: JSON.stringify({
                    model: aiModel,
                    max_tokens: 1024,
                    messages: [{ role: 'user', content: prompt }],
                }),
            });

            if (!res.ok) {
                const text = await res.text().catch(() => '');
                throw new Error(`Claude API 오류 (${res.status}): ${text.slice(0, 200)}`);
            }

            const data = await res.json();
            const text = data.content?.[0]?.text ?? '';
            const jsonMatch = text.match(/\{[\s\S]*\}/);
            if (!jsonMatch) throw new Error('AI 응답에서 JSON을 파싱할 수 없습니다.');
            const result = JSON.parse(jsonMatch[0]);
            const final = { ...result, generated_at: new Date().toISOString(), cached: false };
            localStorage.setItem(cacheKey, JSON.stringify(final));
            setAiResult(final);
        } catch (err) {
            setAiError(err?.message ?? String(err));
        } finally {
            setAiLoading(false);
        }
    };

    /* ── manual order ────────────────────────────────────────────── */

    const submitManualOrder = async (event) => {
        event.preventDefault();
        setManualLoading(true);
        setManualError('');
        setManualResult(null);
        try {
            const payload = {
                ticker: manualForm.code.trim(),
                action: manualForm.type === 'sell' ? 'SELL' : 'BUY',
                quantity: Number(manualForm.qty),
                price: Number(manualForm.price),
            };
            const result = await createTradeOrder(payload);
            setManualResult(result ?? { ok: true });
            if (result?.kis_result !== undefined) {
                const message =
                    typeof result.kis_result === 'string'
                        ? result.kis_result
                        : JSON.stringify(result.kis_result, null, 2);
                setKisModal(message);
            }
            await loadBalance();
        } catch (err) {
            setManualError(err?.message ?? String(err));
        } finally {
            setManualLoading(false);
        }
    };

    /* ── derived: AI balance ──────────────────────────────────────── */

    const holdings = useMemo(() => {
        if (!balance) return [];
        if (Array.isArray(balance.holdings)) return balance.holdings;
        if (Array.isArray(balance.positions)) return balance.positions;
        if (Array.isArray(balance.items)) return balance.items;
        return [];
    }, [balance]);
    const summary = balance?.summary ?? {};
    const totalEval =
        summary.total_eval ?? balance?.total_eval ?? balance?.total_value;
    const deposit =
        summary.deposit ?? balance?.deposit ?? balance?.available_cash;

    /* ── derived: Portfolio ───────────────────────────────────────── */

    const portfolioHoldings = portfolio?.holdings ?? [];
    const portfolioSummary = portfolio?.summary ?? {};
    const cashList = portfolio?.cash ?? [];
    const totalCash = portfolioSummary.total_cash ?? null;
    const totalAssets = portfolioSummary.total_assets ?? null;
    const brokerGroups = useMemo(() => {
        const map = {};
        for (const item of portfolioHoldings) {
            const broker = item.broker || '기타';
            if (!map[broker]) map[broker] = [];
            map[broker].push(item);
        }
        return Object.entries(map).sort(([a], [b]) => a.localeCompare(b));
    }, [portfolioHoldings]);

    const getBrokerSummary = (items) => {
        let totalBuy = 0;
        let totalEvalAmt = 0;
        let hasNullPrice = false;
        for (const item of items) {
            totalBuy += (item.avg_price ?? 0) * (item.quantity ?? 0);
            if (item.eval_amount != null) {
                totalEvalAmt += item.eval_amount;
            } else {
                hasNullPrice = true;
            }
        }
        const totalProfit = totalEvalAmt - totalBuy;
        const totalProfitRate = totalBuy > 0 ? (totalProfit / totalBuy) * 100 : 0;
        return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
    };

    const brokerColors = useMemo(() => {
        const palette = [
            { border: 'rgba(129,140,248,0.5)', bg: 'rgba(129,140,248,0.06)' },
            { border: 'rgba(251,191,36,0.5)', bg: 'rgba(251,191,36,0.06)' },
            { border: 'rgba(52,211,153,0.5)', bg: 'rgba(52,211,153,0.06)' },
            { border: 'rgba(244,114,182,0.5)', bg: 'rgba(244,114,182,0.06)' },
            { border: 'rgba(251,146,60,0.5)', bg: 'rgba(251,146,60,0.06)' },
            { border: 'rgba(139,92,246,0.5)', bg: 'rgba(139,92,246,0.06)' },
        ];
        const map = {};
        brokerGroups.forEach(([broker], i) => {
            map[broker] = palette[i % palette.length];
        });
        return map;
    }, [brokerGroups]);

    /* ── derived: Report ──────────────────────────────────────────── */

    const brokerPieData = useMemo(() =>
        brokerGroups
            .map(([broker, items]) => ({ name: broker, value: getBrokerSummary(items).totalEval }))
            .filter((d) => d.value > 0),
        [brokerGroups]
    );

    const profitBarData = useMemo(() =>
        portfolioHoldings
            .filter((item) => item.profit_rate != null)
            .map((item) => ({
                name: item.ticker ?? (item.name ?? 'N/A').slice(0, 5),
                fullName: item.name ?? item.ticker ?? 'N/A',
                rate: toNumeric(item.profit_rate) ?? 0,
            }))
            .sort((a, b) => b.rate - a.rate),
        [portfolioHoldings]
    );

    const maxAbsRate = useMemo(() =>
        Math.max(1, ...portfolioHoldings.map((h) => Math.abs(toNumeric(h.profit_rate) ?? 0))),
        [portfolioHoldings]
    );

    const sortedHoldings = useMemo(() => {
        const getVal = (item) => {
            switch (reportSortField) {
                case 'profit_rate': return toNumeric(item.profit_rate) ?? -Infinity;
                case 'profit_amount': return toNumeric(item.profit_amount) ?? -Infinity;
                case 'eval_amount': {
                    const ea = toNumeric(item.eval_amount);
                    if (ea != null) return ea;
                    const cp = toNumeric(item.current_price);
                    const qty = toNumeric(item.quantity);
                    return cp != null && qty != null ? cp * qty : -Infinity;
                }
                default: return 0;
            }
        };
        return [...portfolioHoldings].sort((a, b) => {
            if (reportSortField === 'name')
                return reportSortDir === 'asc'
                    ? (a.name ?? '').localeCompare(b.name ?? '')
                    : (b.name ?? '').localeCompare(a.name ?? '');
            if (reportSortField === 'broker')
                return reportSortDir === 'asc'
                    ? (a.broker ?? '').localeCompare(b.broker ?? '')
                    : (b.broker ?? '').localeCompare(a.broker ?? '');
            const av = getVal(a);
            const bv = getVal(b);
            return reportSortDir === 'asc' ? av - bv : bv - av;
        });
    }, [portfolioHoldings, reportSortField, reportSortDir]);

    /* ── render ───────────────────────────────────────────────────── */

    return (
        <div className="stock">
            {/* ── Header ──────────────────────────────────────────── */}
            <header className="stock-header">
                <div>
                    <p className="stock-kicker">거래 데스크</p>
                    <h1>거래 데스크</h1>
                    <p className="stock-sub">
                        실제 계좌와 AI 모의투자를 한 곳에서 관리하세요.
                    </p>
                    <div className="stock-actions">
                        <Link className="button ghost" to="/stock">
                            주식 랩으로 돌아가기
                        </Link>
                    </div>
                </div>
                <div className="stock-card">
                    <p className="stock-card__title">
                        {activeTab === TAB_AI ? 'AI 투자 요약' : '쟁승토리 계좌 요약'}
                    </p>
                    {activeTab === TAB_PORTFOLIO || activeTab === TAB_REPORT ? (
                        /* Portfolio summary */
                        <div className="stock-status">
                            <div>
                                <span>총 매입</span>
                                <strong>{formatNumber(portfolioSummary.total_buy)}</strong>
                            </div>
                            <div>
                                <span>총 평가</span>
                                <strong>{formatNumber(portfolioSummary.total_eval)}</strong>
                            </div>
                            <div>
                                <span>총 손익</span>
                                <strong
                                    className={`stock-profit ${profitColorClass(
                                        toNumeric(portfolioSummary.total_profit)
                                    )}`}
                                >
                                    {formatNumber(portfolioSummary.total_profit)}
                                    {portfolioSummary.total_profit_rate != null && (
                                        <small style={{ marginLeft: 4, fontSize: 11 }}>
                                            ({formatPercent(portfolioSummary.total_profit_rate)})
                                        </small>
                                    )}
                                </strong>
                            </div>
                            <div>
                                <span>보유 종목</span>
                                <strong>{portfolioHoldings.length}</strong>
                            </div>
                            {totalCash != null && (
                                <div>
                                    <span>예수금 합계</span>
                                    <strong style={{ color: '#93c5fd' }}>
                                        {formatNumber(totalCash)}원
                                    </strong>
                                </div>
                            )}
                            {totalAssets != null && (
                                <div>
                                    <span>총 자산</span>
                                    <strong style={{ fontWeight: 700 }}>
                                        {formatNumber(totalAssets)}원
                                    </strong>
                                </div>
                            )}
                        </div>
                    ) : (
                        /* AI balance summary */
                        <div className="stock-status">
                            <div>
                                <span>총 평가금액</span>
                                <strong>{formatNumber(totalEval)}</strong>
                            </div>
                            <div>
                                <span>예수금</span>
                                <strong>{formatNumber(deposit)}</strong>
                            </div>
                            <div>
                                <span>보유 종목</span>
                                <strong>{holdings.length}</strong>
                            </div>
                        </div>
                    )}
                    {activeTab === TAB_AI && summary.note ? (
                        <p className="stock-status__note">{summary.note}</p>
                    ) : null}
                </div>
            </header>

            {/* ── Main Tabs ───────────────────────────────────────── */}
            <div className="stock-main-tabs">
                <button
                    type="button"
                    className={`stock-main-tab ${activeTab === TAB_PORTFOLIO ? 'is-active' : ''}`}
                    onClick={() => setActiveTab(TAB_PORTFOLIO)}
                >
                    <span className="stock-main-tab__icon">💼</span>
                    <span className="stock-main-tab__label">쟁승토리 계좌</span>
                    {portfolioHoldings.length > 0 && (
                        <span className="stock-main-tab__badge">
                            {portfolioHoldings.length}
                        </span>
                    )}
                </button>
                <button
                    type="button"
                    className={`stock-main-tab ${activeTab === TAB_AI ? 'is-active' : ''}`}
                    onClick={() => setActiveTab(TAB_AI)}
                >
                    <span className="stock-main-tab__icon">🤖</span>
                    <span className="stock-main-tab__label">AI 투자</span>
                    <span className="stock-main-tab__sub">모의투자</span>
                </button>
                <button
                    type="button"
                    className={`stock-main-tab ${activeTab === TAB_REPORT ? 'is-active' : ''}`}
                    onClick={() => setActiveTab(TAB_REPORT)}
                >
                    <span className="stock-main-tab__icon">📊</span>
                    <span className="stock-main-tab__label">리포트</span>
                    <span className="stock-main-tab__sub">분석·AI코치</span>
                </button>
            </div>

            {/* ════════════════════════════════════════════════════════
                TAB 1: 쟁승토리 계좌
               ════════════════════════════════════════════════════════ */}
            {activeTab === TAB_PORTFOLIO && (
                <>
                    {portfolioError ? (
                        <p className="stock-error">{portfolioError}</p>
                    ) : null}

                    {/* 포트폴리오 관리 헤더 + 추가 폼 */}
                    <section className="stock-panel stock-panel--wide pf-section">
                        <div className="stock-panel__head">
                            <div>
                                <p className="stock-panel__eyebrow">포트폴리오</p>
                                <h3>수동 입력 종목 관리</h3>
                                <p className="stock-panel__sub">
                                    증권사별 보유 종목을 수동 등록하면 현재가를 자동 조회합니다. (3분 캐시)
                                </p>
                            </div>
                            <div className="stock-panel__actions">
                                {portfolioLoading ? (
                                    <Loading type="spinner" message="" />
                                ) : null}
                                <button
                                    className="button ghost small"
                                    onClick={loadPortfolio}
                                    disabled={portfolioLoading}
                                >
                                    새로고침
                                </button>
                                <button
                                    className="button primary small"
                                    onClick={() => setAddFormOpen((v) => !v)}
                                >
                                    {addFormOpen ? '취소' : '+ 종목 추가'}
                                </button>
                            </div>
                        </div>

                        {/* Add form */}
                        {addFormOpen && (
                            <form className="pf-add-form" onSubmit={handleAddSubmit}>
                                <label>
                                    증권사
                                    <input
                                        type="text"
                                        value={addForm.broker}
                                        onChange={(e) =>
                                            setAddForm((p) => ({ ...p, broker: e.target.value }))
                                        }
                                        placeholder="KB증권"
                                        required
                                    />
                                </label>
                                <label>
                                    종목코드
                                    <input
                                        type="text"
                                        value={addForm.ticker}
                                        onChange={(e) =>
                                            setAddForm((p) => ({ ...p, ticker: e.target.value }))
                                        }
                                        placeholder="005930"
                                        required
                                        maxLength={6}
                                    />
                                </label>
                                <label>
                                    종목명
                                    <input
                                        type="text"
                                        value={addForm.name}
                                        onChange={(e) =>
                                            setAddForm((p) => ({ ...p, name: e.target.value }))
                                        }
                                        placeholder="삼성전자"
                                        required
                                    />
                                </label>
                                <label>
                                    수량
                                    <input
                                        type="number"
                                        min={1}
                                        step={1}
                                        value={addForm.quantity}
                                        onChange={(e) =>
                                            setAddForm((p) => ({ ...p, quantity: e.target.value }))
                                        }
                                        required
                                    />
                                </label>
                                <label>
                                    평균 매입가 (원)
                                    <input
                                        type="number"
                                        min={0}
                                        step={1}
                                        value={addForm.avg_price}
                                        onChange={(e) =>
                                            setAddForm((p) => ({ ...p, avg_price: e.target.value }))
                                        }
                                        required
                                    />
                                </label>
                                <button
                                    className="button primary"
                                    type="submit"
                                    disabled={addLoading}
                                >
                                    {addLoading ? '등록 중...' : '종목 등록'}
                                </button>
                                {addError && <p className="stock-error">{addError}</p>}
                            </form>
                        )}

                        {/* Portfolio total summary */}
                        {portfolioHoldings.length > 0 && (
                            <div className="pf-total-summary">
                                {[
                                    { label: '총 매입', value: portfolioSummary.total_buy },
                                    { label: '총 평가', value: portfolioSummary.total_eval },
                                    { label: '총 손익', value: portfolioSummary.total_profit, isProfit: true },
                                    { label: '수익률', value: portfolioSummary.total_profit_rate, isRate: true },
                                ].map((s) => (
                                    <div key={s.label} className="pf-total-summary__card">
                                        <span>{s.label}</span>
                                        <strong
                                            className={
                                                s.isProfit || s.isRate
                                                    ? `stock-profit ${profitColorClass(toNumeric(s.value))}`
                                                    : ''
                                            }
                                        >
                                            {s.isRate ? formatPercent(s.value) : formatNumber(s.value)}
                                        </strong>
                                    </div>
                                ))}
                                {totalCash != null && (
                                    <div className="pf-total-summary__card is-cash">
                                        <span>예수금 합계</span>
                                        <strong>{formatNumber(totalCash)}원</strong>
                                    </div>
                                )}
                                {totalAssets != null && (
                                    <div className="pf-total-summary__card is-assets">
                                        <span>총 자산</span>
                                        <strong>{formatNumber(totalAssets)}원</strong>
                                    </div>
                                )}
                            </div>
                        )}
                    </section>

                    {/* 예수금 패널 */}
                    <section className="stock-panel stock-panel--wide">
                        <div className="stock-panel__head">
                            <div>
                                <p className="stock-panel__eyebrow">예수금 관리</p>
                                <h3>증권사별 예수금</h3>
                                <p className="stock-panel__sub">
                                    증권사별 예수금을 입력하면 총 자산에 자동 반영됩니다.
                                </p>
                            </div>
                        </div>

                        {cashList.length > 0 && (
                            <div className="pf-cash-table">
                                {cashList.map((item) => (
                                    <div key={item.id ?? item.broker} className="pf-cash-row">
                                        <span className="pf-cash-broker">{item.broker}</span>
                                        <strong className="pf-cash-amount">
                                            {formatNumber(item.cash)}원
                                        </strong>
                                        <span className="pf-cash-date">
                                            {item.updated_at
                                                ? new Date(item.updated_at).toLocaleDateString('ko-KR')
                                                : ''}
                                        </span>
                                        <button
                                            className="button ghost small pf-btn-danger"
                                            onClick={() => handleCashDelete(item.broker)}
                                            title="삭제"
                                        >
                                            🗑️
                                        </button>
                                    </div>
                                ))}
                            </div>
                        )}
                        {cashList.length === 0 && (
                            <p className="stock-empty" style={{ fontSize: 13 }}>
                                등록된 예수금이 없습니다.
                            </p>
                        )}

                        <form className="pf-cash-form" onSubmit={handleCashSave}>
                            <label>
                                증권사명
                                <input
                                    type="text"
                                    value={cashForm.broker}
                                    onChange={(e) =>
                                        setCashForm((p) => ({ ...p, broker: e.target.value }))
                                    }
                                    placeholder="KB증권"
                                    required
                                />
                            </label>
                            <label>
                                예수금 (원)
                                <input
                                    type="number"
                                    min={0}
                                    step={1}
                                    value={cashForm.cash}
                                    onChange={(e) =>
                                        setCashForm((p) => ({ ...p, cash: e.target.value }))
                                    }
                                    placeholder="1500000"
                                    required
                                />
                            </label>
                            <button
                                className="button primary"
                                type="submit"
                                disabled={cashSaving}
                            >
                                {cashSaving ? '저장 중...' : '저장'}
                            </button>
                            {cashError && <p className="stock-error">{cashError}</p>}
                        </form>
                    </section>

                    {/* Broker cards stacked */}
                    {brokerGroups.map(([broker, items]) => {
                        const bSummary = getBrokerSummary(items);
                        const color = brokerColors[broker];
                        return (
                            <section
                                key={broker}
                                className="stock-panel stock-panel--wide pf-broker-section"
                                style={{
                                    borderColor: color?.border,
                                    background: color?.bg,
                                }}
                            >
                                <div className="stock-panel__head">
                                    <div>
                                        <p
                                            className="stock-panel__eyebrow"
                                            style={{ color: color?.border }}
                                        >
                                            {broker}
                                        </p>
                                        <h3>{broker} 보유 현황</h3>
                                        <p className="stock-panel__sub">
                                            {items.length}종목 · 평가{' '}
                                            {formatNumber(bSummary.totalEval)} · 손익{' '}
                                            <span
                                                className={`stock-profit ${profitColorClass(
                                                    bSummary.totalProfit
                                                )}`}
                                            >
                                                {formatNumber(bSummary.totalProfit)} (
                                                {formatPercent(bSummary.totalProfitRate)})
                                            </span>
                                            {(() => {
                                                const bc = cashList.find(
                                                    (c) => c.broker === broker
                                                );
                                                return bc ? (
                                                    <span className="pf-cash-badge">
                                                        예수금 {formatNumber(bc.cash)}원
                                                    </span>
                                                ) : null;
                                            })()}
                                        </p>
                                    </div>
                                </div>
                                <div className="stock-holdings">
                                    {items.map((item) => {
                                        const profitAmt = item.profit_amount;
                                        const profitRate = item.profit_rate;
                                        const profitAmtN = toNumeric(profitAmt);
                                        const profitRateN = toNumeric(profitRate);
                                        const isEditing = editingId === item.id;
                                        const isDeleting = deleteConfirmId === item.id;

                                        return (
                                            <div
                                                key={item.id}
                                                className="stock-holdings__item pf-item"
                                            >
                                                {isEditing ? (
                                                    <div className="pf-edit-row">
                                                        <div className="pf-edit-fields">
                                                            <label>
                                                                수량
                                                                <input
                                                                    type="number"
                                                                    min={1}
                                                                    value={editForm.quantity ?? ''}
                                                                    onChange={(e) =>
                                                                        setEditForm((p) => ({
                                                                            ...p,
                                                                            quantity: Number(e.target.value),
                                                                        }))
                                                                    }
                                                                />
                                                            </label>
                                                            <label>
                                                                평균매입가
                                                                <input
                                                                    type="number"
                                                                    min={0}
                                                                    value={editForm.avg_price ?? ''}
                                                                    onChange={(e) =>
                                                                        setEditForm((p) => ({
                                                                            ...p,
                                                                            avg_price: Number(e.target.value),
                                                                        }))
                                                                    }
                                                                />
                                                            </label>
                                                        </div>
                                                        <div className="pf-edit-actions">
                                                            <button
                                                                className="button primary small"
                                                                onClick={() => handleEditSave(item.id)}
                                                                disabled={editLoading}
                                                            >
                                                                {editLoading ? '저장 중...' : '저장'}
                                                            </button>
                                                            <button
                                                                className="button ghost small"
                                                                onClick={() => setEditingId(null)}
                                                            >
                                                                취소
                                                            </button>
                                                        </div>
                                                    </div>
                                                ) : (
                                                    <>
                                                        <div>
                                                            <p className="stock-holdings__name">
                                                                {item.name ?? item.ticker ?? 'N/A'}
                                                            </p>
                                                            <span className="stock-holdings__code">
                                                                {item.ticker ?? ''}
                                                            </span>
                                                        </div>
                                                        <div className="stock-holdings__metric">
                                                            <span>수량</span>
                                                            <strong>{formatNumber(item.quantity)}</strong>
                                                        </div>
                                                        <div className="stock-holdings__metric">
                                                            <span>매입가</span>
                                                            <strong>{formatNumber(item.avg_price)}</strong>
                                                        </div>
                                                        <div className="stock-holdings__metric">
                                                            <span>현재가</span>
                                                            <strong
                                                                className={item.current_price == null ? 'pf-null-price' : ''}
                                                            >
                                                                {item.current_price != null
                                                                    ? formatNumber(item.current_price)
                                                                    : '조회 실패'}
                                                            </strong>
                                                        </div>
                                                        <div className="stock-holdings__metric">
                                                            <span>평가금액</span>
                                                            <strong>
                                                                {item.current_price != null && item.quantity != null
                                                                    ? formatNumber(item.current_price * item.quantity)
                                                                    : '-'}
                                                            </strong>
                                                        </div>
                                                        <div className="stock-holdings__metric">
                                                            <span>수익률</span>
                                                            <strong
                                                                className={`stock-profit ${profitColorClass(profitRateN)}`}
                                                            >
                                                                {profitRate != null
                                                                    ? formatPercent(profitRate)
                                                                    : '-'}
                                                            </strong>
                                                        </div>
                                                        <div className="stock-holdings__metric">
                                                            <span>평가손익</span>
                                                            <strong
                                                                className={`stock-profit ${profitColorClass(profitAmtN)}`}
                                                            >
                                                                {profitAmt != null
                                                                    ? formatNumber(profitAmt)
                                                                    : '-'}
                                                            </strong>
                                                        </div>
                                                        <div className="pf-item-actions">
                                                            <button
                                                                className="button ghost small"
                                                                onClick={() => handleEditStart(item)}
                                                                title="수정"
                                                            >
                                                                ✏️
                                                            </button>
                                                            {isDeleting ? (
                                                                <>
                                                                    <button
                                                                        className="button ghost small pf-btn-danger"
                                                                        onClick={() => handleDelete(item.id)}
                                                                    >
                                                                        확인
                                                                    </button>
                                                                    <button
                                                                        className="button ghost small"
                                                                        onClick={() =>
                                                                            setDeleteConfirmId(null)
                                                                        }
                                                                    >
                                                                        취소
                                                                    </button>
                                                                </>
                                                            ) : (
                                                                <button
                                                                    className="button ghost small"
                                                                    onClick={() =>
                                                                        setDeleteConfirmId(item.id)
                                                                    }
                                                                    title="삭제"
                                                                >
                                                                    🗑️
                                                                </button>
                                                            )}
                                                        </div>
                                                    </>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                            </section>
                        );
                    })}

                    {portfolioLoaded && portfolioHoldings.length === 0 && !portfolioError && (
                        <section className="stock-panel stock-panel--wide">
                            <p className="stock-empty" style={{ textAlign: 'center', padding: 24 }}>
                                등록된 종목이 없습니다. 상단의 <strong>+ 종목 추가</strong> 버튼으로 보유 종목을 등록하세요.
                            </p>
                        </section>
                    )}
                </>
            )}

            {/* ════════════════════════════════════════════════════════
                TAB 2: AI 투자 (모의투자)
               ════════════════════════════════════════════════════════ */}
            {activeTab === TAB_AI && (
                <>
                    {balanceError ? <p className="stock-error">{balanceError}</p> : null}

                    {/* AI Balance section */}
                    <section className="stock-panel stock-panel--wide">
                        <div className="stock-panel__head">
                            <div>
                                <p className="stock-panel__eyebrow">AI 모의투자</p>
                                <h3>보유 현황</h3>
                                <p className="stock-panel__sub">
                                    AI가 운용 중인 모의투자 계좌의 잔고와 보유 종목을 확인합니다.
                                </p>
                            </div>
                            <div className="stock-panel__actions">
                                {balanceLoading ? (
                                    <span className="stock-chip">조회 중</span>
                                ) : null}
                                <button
                                    className="button ghost small"
                                    onClick={loadBalance}
                                    disabled={balanceLoading}
                                >
                                    새로고침
                                </button>
                            </div>
                        </div>
                        <div className="stock-balance">
                            <div className="stock-balance__summary">
                                {[
                                    { label: '총 평가', value: totalEval },
                                    { label: '예수금', value: deposit },
                                ].map((item) => (
                                    <div
                                        key={item.label}
                                        className="stock-balance__card"
                                    >
                                        <span>{item.label}</span>
                                        <strong>{formatNumber(item.value)}</strong>
                                    </div>
                                ))}
                            </div>
                            {holdings.length ? (
                                <div className="stock-holdings">
                                    {holdings.map((item, idx) => {
                                        const profitLoss = getProfitLoss(item);
                                        const profitLossNumeric = toNumeric(profitLoss);
                                        const profitClass = profitColorClass(profitLossNumeric);
                                        const profitRate = getProfitRate(item);
                                        const profitRateNumeric = toNumeric(profitRate);
                                        const profitRateClass = profitColorClass(profitRateNumeric);
                                        return (
                                            <div
                                                key={item.code ?? `${item.name}-${idx}`}
                                                className="stock-holdings__item"
                                            >
                                                <div>
                                                    <p className="stock-holdings__name">
                                                        {item.name ?? item.code ?? 'N/A'}
                                                    </p>
                                                    <span className="stock-holdings__code">
                                                        {item.code ?? ''}
                                                    </span>
                                                </div>
                                                <div className="stock-holdings__metric">
                                                    <span>수량</span>
                                                    <strong>
                                                        {formatNumber(getQty(item))}
                                                    </strong>
                                                </div>
                                                <div className="stock-holdings__metric">
                                                    <span>매입가</span>
                                                    <strong>
                                                        {formatNumber(getBuyPrice(item))}
                                                    </strong>
                                                </div>
                                                <div className="stock-holdings__metric">
                                                    <span>현재가</span>
                                                    <strong>
                                                        {formatNumber(getCurrentPrice(item))}
                                                    </strong>
                                                </div>
                                                <div className="stock-holdings__metric">
                                                    <span>평가금액</span>
                                                    <strong>
                                                        {getCurrentPrice(item) != null && getQty(item) != null
                                                            ? formatNumber(toNumeric(getCurrentPrice(item)) * toNumeric(getQty(item)))
                                                            : '-'}
                                                    </strong>
                                                </div>
                                                <div className="stock-holdings__metric">
                                                    <span>수익률</span>
                                                    <strong
                                                        className={`stock-profit ${profitRateClass}`}
                                                    >
                                                        {formatPercent(profitRate)}
                                                    </strong>
                                                </div>
                                                <div className="stock-holdings__metric">
                                                    <span>평가손익</span>
                                                    <strong
                                                        className={`stock-profit ${profitClass}`}
                                                    >
                                                        {formatNumber(profitLoss)}
                                                    </strong>
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            ) : (
                                <p className="stock-empty">보유 종목이 없습니다.</p>
                            )}
                        </div>
                    </section>

                    {/* Manual order section */}
                    <section className="stock-panel stock-panel--wide">
                        <div className="stock-panel__head">
                            <div>
                                <p className="stock-panel__eyebrow">수동 주문</p>
                                <h3>직접 매수/매도</h3>
                                <p className="stock-panel__sub">
                                    종목명 또는 종목코드를 입력하고 매수/매도 주문을 요청합니다.
                                </p>
                            </div>
                        </div>
                        <form className="stock-order" onSubmit={submitManualOrder}>
                            <label>
                                종목명/코드
                                <input
                                    type="text"
                                    value={manualForm.code}
                                    onChange={(event) =>
                                        setManualForm((prev) => ({
                                            ...prev,
                                            code: event.target.value,
                                        }))
                                    }
                                    placeholder="005930 또는 삼성전자"
                                    required
                                />
                            </label>
                            <label>
                                매수/매도
                                <select
                                    value={manualForm.type}
                                    onChange={(event) =>
                                        setManualForm((prev) => ({
                                            ...prev,
                                            type: event.target.value,
                                        }))
                                    }
                                >
                                    <option value="buy">매수</option>
                                    <option value="sell">매도</option>
                                </select>
                            </label>
                            <label>
                                수량
                                <input
                                    type="number"
                                    min={1}
                                    step={1}
                                    value={manualForm.qty}
                                    onChange={(event) =>
                                        setManualForm((prev) => ({
                                            ...prev,
                                            qty: Number(event.target.value),
                                        }))
                                    }
                                    required
                                />
                            </label>
                            <label>
                                금액(원)
                                <input
                                    type="number"
                                    min={0}
                                    step={1}
                                    value={manualForm.price}
                                    onChange={(event) =>
                                        setManualForm((prev) => ({
                                            ...prev,
                                            price: Number(event.target.value),
                                        }))
                                    }
                                />
                            </label>
                            <button
                                className="button primary"
                                type="submit"
                                disabled={manualLoading}
                            >
                                {manualLoading ? '요청 중...' : '주문 요청'}
                            </button>
                            {manualError ? (
                                <p className="stock-error">{manualError}</p>
                            ) : null}
                            {manualResult ? (
                                <div className="stock-result">
                                    <p className="stock-result__title">요청 결과</p>
                                    <pre>
                                        {typeof manualResult === 'string'
                                            ? manualResult
                                            : JSON.stringify(manualResult, null, 2)}
                                    </pre>
                                </div>
                            ) : null}
                        </form>
                    </section>
                </>
            )}

            {/* ════════════════════════════════════════════════════════
                TAB 3: 리포트 + AI 코치
               ════════════════════════════════════════════════════════ */}
            {activeTab === TAB_REPORT && (
                <>
                    {portfolioLoading && (
                        <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
                            <Loading type="spinner" message="포트폴리오 로딩 중..." />
                        </div>
                    )}
                    {portfolioError && <p className="stock-error">{portfolioError}</p>}

                    {/* ── 자산 배분 + 수익률 차트 ────────────────────── */}
                    {portfolioHoldings.length > 0 && (
                        <section className="stock-panel stock-panel--wide">
                            <div className="stock-panel__head">
                                <div>
                                    <p className="stock-panel__eyebrow">포트폴리오 분석</p>
                                    <h3>자산 배분 현황</h3>
                                </div>
                            </div>
                            <div className="report-charts-row">
                                <div className="report-chart-box">
                                    <p className="report-chart-title">증권사별 자산 배분</p>
                                    <ResponsiveContainer width="100%" height={220}>
                                        <PieChart>
                                            <Pie
                                                data={brokerPieData}
                                                cx="50%"
                                                cy="50%"
                                                innerRadius={52}
                                                outerRadius={84}
                                                dataKey="value"
                                                paddingAngle={2}
                                            >
                                                {brokerPieData.map((_, i) => (
                                                    <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
                                                ))}
                                            </Pie>
                                            <ChartTooltip
                                                formatter={(v) => [formatNumber(v) + '원', '평가금액']}
                                                contentStyle={{ background: '#1e293b', border: 'none', borderRadius: 8, fontSize: 12 }}
                                            />
                                            <Legend
                                                iconType="circle"
                                                iconSize={8}
                                                formatter={(v) => <span style={{ color: '#9ca3af', fontSize: 12 }}>{v}</span>}
                                            />
                                        </PieChart>
                                    </ResponsiveContainer>
                                </div>
                                <div className="report-chart-box">
                                    <p className="report-chart-title">종목별 수익률 (%)</p>
                                    <ResponsiveContainer width="100%" height={220}>
                                        <BarChart data={profitBarData} margin={{ top: 0, right: 8, left: -16, bottom: 48 }}>
                                            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                                            <XAxis
                                                dataKey="name"
                                                tick={{ fill: '#9ca3af', fontSize: 10 }}
                                                angle={-40}
                                                textAnchor="end"
                                                interval={0}
                                            />
                                            <YAxis
                                                tick={{ fill: '#9ca3af', fontSize: 10 }}
                                                tickFormatter={(v) => `${v}%`}
                                            />
                                            <ChartTooltip
                                                formatter={(v, _n, props) => [`${v.toFixed(2)}%`, props.payload.fullName]}
                                                contentStyle={{ background: '#1e293b', border: 'none', borderRadius: 8, fontSize: 12 }}
                                            />
                                            <Bar dataKey="rate" radius={[4, 4, 0, 0]}>
                                                {profitBarData.map((entry, i) => (
                                                    <Cell key={i} fill={entry.rate >= 0 ? '#34d399' : '#f87171'} />
                                                ))}
                                            </Bar>
                                        </BarChart>
                                    </ResponsiveContainer>
                                </div>
                            </div>
                        </section>
                    )}

                    {/* ── 수익률 랭킹 테이블 ─────────────────────────── */}
                    {portfolioHoldings.length > 0 && (
                        <section className="stock-panel stock-panel--wide">
                            <div className="stock-panel__head">
                                <div>
                                    <p className="stock-panel__eyebrow">수익률 랭킹</p>
                                    <h3>종목별 상세 현황</h3>
                                    <p className="stock-panel__sub">헤더 클릭으로 정렬</p>
                                </div>
                            </div>
                            <div className="report-table-wrapper">
                                <table className="report-table">
                                    <thead>
                                        <tr>
                                            {[
                                                { key: 'name', label: '종목명' },
                                                { key: 'broker', label: '증권사' },
                                                { key: 'profit_rate', label: '수익률' },
                                                { key: 'profit_amount', label: '평가손익' },
                                                { key: 'eval_amount', label: '평가금액' },
                                            ].map(({ key, label }) => (
                                                <th key={key} onClick={() => handleReportSort(key)}>
                                                    {label}{' '}
                                                    <span className="report-sort-icon">
                                                        {reportSortField === key
                                                            ? reportSortDir === 'asc' ? '↑' : '↓'
                                                            : '↕'}
                                                    </span>
                                                </th>
                                            ))}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {sortedHoldings.map((item) => {
                                            const rateN = toNumeric(item.profit_rate);
                                            const pnlN = toNumeric(item.profit_amount);
                                            const evalAmt = item.eval_amount != null
                                                ? item.eval_amount
                                                : item.current_price != null
                                                    ? item.current_price * item.quantity
                                                    : null;
                                            return (
                                                <tr key={item.id}>
                                                    <td>
                                                        <p className="report-table-name">{item.name ?? item.ticker ?? 'N/A'}</p>
                                                        <span className="report-table-code">{item.ticker ?? ''}</span>
                                                    </td>
                                                    <td className="report-td-muted">{item.broker ?? '-'}</td>
                                                    <td className={`stock-profit ${profitColorClass(rateN)}`}>
                                                        <div className="report-rate-cell">
                                                            <span>{item.profit_rate != null ? formatPercent(item.profit_rate) : '-'}</span>
                                                            {rateN != null && (
                                                                <div className="report-rate-bar">
                                                                    <div
                                                                        className={`report-rate-bar__fill ${rateN >= 0 ? 'is-up' : 'is-down'}`}
                                                                        style={{ width: `${maxAbsRate > 0 ? Math.abs(rateN) / maxAbsRate * 100 : 0}%` }}
                                                                    />
                                                                </div>
                                                            )}
                                                        </div>
                                                    </td>
                                                    <td className={`stock-profit ${profitColorClass(pnlN)}`}>
                                                        {item.profit_amount != null ? formatNumber(item.profit_amount) : '-'}
                                                    </td>
                                                    <td className="report-td-muted">
                                                        {evalAmt != null ? formatNumber(evalAmt) : '-'}
                                                    </td>
                                                </tr>
                                            );
                                        })}
                                    </tbody>
                                </table>
                            </div>
                        </section>
                    )}

                    {portfolioLoaded && portfolioHoldings.length === 0 && !portfolioError && (
                        <section className="stock-panel stock-panel--wide">
                            <p className="stock-empty" style={{ textAlign: 'center', padding: 24 }}>
                                등록된 종목이 없습니다. <strong>쟁승토리 계좌</strong> 탭에서 종목을 먼저 등록하세요.
                            </p>
                        </section>
                    )}

                    {/* ── AI 투자 코치 ───────────────────────────────── */}
                    <section className="stock-panel stock-panel--wide">
                        <div className="stock-panel__head">
                            <div>
                                <p className="stock-panel__eyebrow">AI 투자 코치</p>
                                <h3>오늘의 투자 평가</h3>
                                <p className="stock-panel__sub">
                                    포트폴리오를 AI가 분석하여 성취도 등급과 내일을 위한 투자 조언을 드립니다.
                                </p>
                            </div>
                        </div>

                        {/* API Key 설정 */}
                        <div className="ai-coach-settings">
                            <label>
                                Anthropic API Key
                                <div className="ai-coach-key-row">
                                    <input
                                        type="password"
                                        className="ai-coach-key-input"
                                        value={aiApiKey}
                                        onChange={(e) => setAiApiKey(e.target.value)}
                                        placeholder="sk-ant-api03-..."
                                    />
                                    <button
                                        className="button ghost small"
                                        type="button"
                                        onClick={() => {
                                            localStorage.setItem('ai_coach_key', aiApiKey);
                                            localStorage.setItem('ai_coach_model', aiModel);
                                        }}
                                    >
                                        저장
                                    </button>
                                </div>
                            </label>
                            <label>
                                AI 모델
                                <select
                                    value={aiModel}
                                    onChange={(e) => {
                                        setAiModel(e.target.value);
                                        localStorage.setItem('ai_coach_model', e.target.value);
                                    }}
                                >
                                    <option value="claude-haiku-4-5-20251001">Claude Haiku (빠름·저렴)</option>
                                    <option value="claude-sonnet-4-6">Claude Sonnet (고성능)</option>
                                </select>
                            </label>
                        </div>

                        <div className="ai-coach-actions">
                            <button
                                className="button primary"
                                type="button"
                                onClick={handleAiCoach}
                                disabled={aiLoading || !aiApiKey.trim() || portfolioHoldings.length === 0}
                            >
                                {aiLoading ? 'AI 분석 중...' : '오늘 투자 평가 받기'}
                            </button>
                            {portfolioHoldings.length === 0 && (
                                <span className="ai-coach-note">종목 등록 후 이용 가능합니다.</span>
                            )}
                            {aiResult?.generated_at && (
                                <span className="ai-coach-note">
                                    {aiResult.cached ? '오늘 캐시 결과 · ' : ''}
                                    {new Date(aiResult.generated_at).toLocaleTimeString('ko-KR')} 생성
                                </span>
                            )}
                        </div>

                        {aiError && <p className="stock-error" style={{ marginTop: 8 }}>{aiError}</p>}

                        {aiResult && !aiLoading && (
                            <div className="ai-coach-result">
                                <div className="ai-coach-header">
                                    <div className={`ai-grade-badge grade-${(aiResult.grade ?? 'c').toLowerCase()}`}>
                                        {aiResult.grade ?? '?'}
                                    </div>
                                    <div className="ai-score-wrap">
                                        <span className="ai-score-num">{aiResult.score ?? 0}</span>
                                        <span className="ai-score-unit">/ 100</span>
                                    </div>
                                    <p className="ai-summary-text">{aiResult.summary}</p>
                                </div>
                                <p className="ai-evaluation-text">{aiResult.evaluation}</p>
                                {aiResult.advice?.length > 0 && (
                                    <div className="ai-advice-list">
                                        {aiResult.advice.map((a, i) => (
                                            <div key={i} className="ai-advice-card">
                                                <p className="ai-advice-title">{a.title}</p>
                                                <p className="ai-advice-body">{a.body}</p>
                                            </div>
                                        ))}
                                    </div>
                                )}
                                <button
                                    className="button ghost small"
                                    type="button"
                                    style={{ marginTop: 16, fontSize: 11 }}
                                    onClick={() => {
                                        const today = new Date().toISOString().slice(0, 10);
                                        localStorage.removeItem(`ai_coach_${today}`);
                                        setAiResult(null);
                                    }}
                                >
                                    다시 평가받기 (캐시 삭제)
                                </button>
                            </div>
                        )}
                    </section>
                </>
            )}

            {/* KIS modal */}
            {kisModal ? (
                <div className="stock-modal" role="dialog" aria-modal="true">
                    <div
                        className="stock-modal__backdrop"
                        onClick={() => setKisModal('')}
                    />
                    <div className="stock-modal__card">
                        <div className="stock-modal__head">
                            <h4>주문 결과</h4>
                            <button
                                type="button"
                                className="button ghost small"
                                onClick={() => setKisModal('')}
                            >
                                닫기
                            </button>
                        </div>
                        <pre>{kisModal}</pre>
                    </div>
                </div>
            ) : null}
        </div>
    );
};

export default StockTrade;