import React from 'react';
import Loading from '../../../components/Loading';
import { formatNumber } from '../stockUtils';

const AdvisorTab = ({ pf, advisor }) => (
    <section className="stock-panel stock-panel--wide advisor-panel">
        <div className="advisor-panel__head">
            <div className="advisor-panel__title-block">
                <span className="advisor-panel__badge">AI 어드바이저</span>
                <h3 className="advisor-panel__title">포트폴리오 분석 프롬프트</h3>
                <p className="advisor-panel__sub">
                    보유 종목 정보를 담은 전문가용 프롬프트를 생성합니다.
                    복사 후 Gemini, ChatGPT 등에 붙여넣어 분석을 받아보세요.
                </p>
            </div>
            <div className="advisor-panel__actions">
                <a
                    href="https://gemini.google.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="button ghost small"
                >
                    Gemini 열기 ↗
                </a>
                <a
                    href="https://chatgpt.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="button ghost small"
                >
                    ChatGPT 열기 ↗
                </a>
            </div>
        </div>

        {pf.portfolioLoading && (
            <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
                <Loading type="spinner" message="포트폴리오 로딩 중..." />
            </div>
        )}

        {!pf.portfolioLoading && pf.portfolioHoldings.length === 0 && (
            <div className="advisor-panel__empty">
                <span className="advisor-panel__empty-icon">📋</span>
                <p>포트폴리오 탭에서 보유 종목을 먼저 등록해주세요.</p>
            </div>
        )}

        {!pf.portfolioLoading && pf.portfolioHoldings.length > 0 && (
            <div className="advisor-panel__body">
                <div className="advisor-prompt__toolbar">
                    <span className="advisor-prompt__info">
                        종목 {pf.portfolioHoldings.length}개 · 총 자산 {pf.totalAssets != null ? formatNumber(pf.totalAssets) + '원' : '미집계'}
                    </span>
                    <button
                        className={`button primary small ${advisor.advisorCopied ? 'is-copied' : ''}`}
                        onClick={advisor.handleCopyPrompt}
                    >
                        {advisor.advisorCopied ? '✅ 복사됨' : '📋 프롬프트 복사'}
                    </button>
                </div>
                <pre className="advisor-prompt__preview">{advisor.buildAdvisorPrompt()}</pre>
                <p className="advisor-panel__disclaimer">
                    ※ 이 프롬프트를 AI에 붙여넣으면 전문가 관점의 매매 조언을 받을 수 있습니다.
                    투자 결정은 최종적으로 본인의 판단과 책임 하에 이루어져야 합니다.
                </p>
            </div>
        )}
    </section>
);

export default AdvisorTab;
