// 思投录 - 投资决策与复盘工具
class VestMindApp {
    constructor() {
        this.currentTab = 'portfolio';
        this.modal = document.getElementById('modal');
        this.modalTitle = document.getElementById('modal-title');
        this.modalBody = document.getElementById('modal-body');
        this.closeModalBtn = document.getElementById('close-modal');
        
        this.init();
    }

    init() {
        this.bindEvents();
        this.showPage('portfolio');
        this.loadData();
    }

    bindEvents() {
        // 底部导航栏事件
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', (e) => {
                const tab = e.currentTarget.dataset.tab;
                this.switchTab(tab);
            });
        });

        // 模态框关闭事件
        this.closeModalBtn.addEventListener('click', () => {
            this.hideModal();
        });

        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) {
                this.hideModal();
            }
        });

        // 工具卡片点击事件
        document.querySelectorAll('.tool-card').forEach(card => {
            card.addEventListener('click', (e) => {
                const tool = e.currentTarget.dataset.tool;
                this.openTool(tool);
            });
        });

        // 添加按钮事件
        document.querySelectorAll('.add-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const page = e.currentTarget.closest('.page').id;
                this.showAddModal(page);
            });
        });
    }

    switchTab(tab) {
        // 更新导航栏状态
        document.querySelectorAll('.nav-item').forEach(item => {
            item.classList.remove('active');
        });
        document.querySelector(`[data-tab="${tab}"]`).classList.add('active');

        // 显示对应页面
        this.showPage(tab);
        this.currentTab = tab;
    }

    showPage(pageId) {
        // 隐藏所有页面
        document.querySelectorAll('.page').forEach(page => {
            page.classList.add('hidden');
        });

        // 显示目标页面
        const targetPage = document.getElementById(`${pageId}-page`);
        if (targetPage) {
            targetPage.classList.remove('hidden');
        }
    }

    loadData() {
        // 模拟数据加载
        this.loadPortfolioData();
        this.loadPlansData();
        this.loadRecordsData();
    }

    loadPortfolioData() {
        // 模拟持仓数据
        const holdings = [
            {
                name: '贵州茅台',
                code: '600519',
                shares: 100,
                currentPrice: 1850.00,
                profit: 2500.00,
                profitRate: 15.6
            },
            {
                name: '腾讯控股',
                code: '00700',
                shares: 200,
                currentPrice: 320.00,
                profit: -800.00,
                profitRate: -1.2
            },
            {
                name: '招商银行',
                code: '600036',
                shares: 500,
                currentPrice: 42.50,
                profit: 1250.00,
                profitRate: 6.2
            }
        ];

        this.renderHoldings(holdings);
    }

    renderHoldings(holdings) {
        const container = document.querySelector('.holdings-list');
        if (!container) return;

        container.innerHTML = holdings.map(holding => `
            <div class="holding-item">
                <div class="stock-info">
                    <div class="stock-name">${holding.name}</div>
                    <div class="stock-code">${holding.code}</div>
                </div>
                <div class="holding-details">
                    <div class="shares">${holding.shares}股</div>
                    <div class="current-price">¥${holding.currentPrice.toFixed(2)}</div>
                    <div class="profit ${holding.profit >= 0 ? 'positive' : 'negative'}">
                        ${holding.profit >= 0 ? '+' : ''}¥${holding.profit.toFixed(2)} (${holding.profitRate >= 0 ? '+' : ''}${holding.profitRate}%)
                    </div>
                </div>
            </div>
        `).join('');
    }

    loadPlansData() {
        // 模拟交易计划数据
        const plans = [
            {
                name: '招商银行',
                code: '600036',
                targetPrice: 45.00,
                amount: 10000,
                deadline: '2024-03-15',
                progress: 60,
                status: 'pending'
            },
            {
                name: '中国平安',
                code: '601318',
                targetPrice: 55.00,
                amount: 15000,
                deadline: '2024-04-20',
                progress: 30,
                status: 'pending'
            }
        ];

        this.renderPlans(plans);
    }

    renderPlans(plans) {
        const container = document.querySelector('.plans-list');
        if (!container) return;

        container.innerHTML = plans.map(plan => `
            <div class="plan-item">
                <div class="plan-header">
                    <div class="stock-info">
                        <div class="stock-name">${plan.name}</div>
                        <div class="stock-code">${plan.code}</div>
                    </div>
                    <div class="plan-status ${plan.status}">进行中</div>
                </div>
                <div class="plan-details">
                    <div class="plan-row">
                        <span class="label">目标价格：</span>
                        <span class="value">¥${plan.targetPrice.toFixed(2)}</span>
                    </div>
                    <div class="plan-row">
                        <span class="label">计划金额：</span>
                        <span class="value">¥${plan.amount.toLocaleString()}</span>
                    </div>
                    <div class="plan-row">
                        <span class="label">截止时间：</span>
                        <span class="value">${plan.deadline}</span>
                    </div>
                </div>
                <div class="plan-progress">
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: ${plan.progress}%"></div>
                    </div>
                    <span class="progress-text">已完成 ${plan.progress}%</span>
                </div>
            </div>
        `).join('');
    }

    loadRecordsData() {
        // 模拟交易记录数据
        const records = [
            {
                date: '2024-01-15',
                type: 'buy',
                name: '贵州茅台',
                code: '600519',
                shares: 100,
                price: 1600.00,
                thoughts: '基于茅台品牌价值和长期增长潜力，认为当前价格具有投资价值。白酒行业龙头地位稳固，现金流优秀。'
            },
            {
                date: '2024-01-10',
                type: 'sell',
                name: '比亚迪',
                code: '002594',
                shares: 200,
                price: 280.00,
                thoughts: '新能源汽车行业竞争加剧，估值偏高，选择获利了结。'
            }
        ];

        this.renderRecords(records);
    }

    renderRecords(records) {
        const container = document.querySelector('.timeline');
        if (!container) return;

        container.innerHTML = records.map(record => `
            <div class="timeline-item">
                <div class="timeline-date">${record.date}</div>
                <div class="timeline-content">
                    <div class="transaction-card">
                        <div class="transaction-header">
                            <div class="stock-info">
                                <div class="stock-name">${record.name}</div>
                                <div class="stock-code">${record.code}</div>
                            </div>
                            <div class="transaction-type ${record.type}">${record.type === 'buy' ? '买入' : '卖出'}</div>
                        </div>
                        <div class="transaction-details">
                            <div class="detail-row">
                                <span>数量：</span>
                                <span>${record.shares}股</span>
                            </div>
                            <div class="detail-row">
                                <span>价格：</span>
                                <span>¥${record.price.toFixed(2)}</span>
                            </div>
                        </div>
                        <div class="transaction-thoughts">
                            <h4>交易思考：</h4>
                            <p>${record.thoughts}</p>
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }

    openTool(tool) {
        switch (tool) {
            case 'checklist':
                this.showChecklistModal();
                break;
            case 'calculator':
                this.showCalculatorModal();
                break;
            case 'valuation':
                this.showValuationModal();
                break;
            case 'freedom':
                this.showFreedomModal();
                break;
        }
    }

    showChecklistModal() {
        this.modalTitle.textContent = '投资检查清单';
        this.modalBody.innerHTML = `
            <div class="checklist-container">
                <div class="checklist-section">
                    <h4>买入检查清单</h4>
                    <div class="checklist-items">
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>企业基本面是否优秀？</span>
                        </label>
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>估值是否合理？</span>
                        </label>
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>行业前景如何？</span>
                        </label>
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>管理层是否可信？</span>
                        </label>
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>现金流是否健康？</span>
                        </label>
                    </div>
                </div>
                <div class="checklist-section">
                    <h4>卖出检查清单</h4>
                    <div class="checklist-items">
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>基本面是否恶化？</span>
                        </label>
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>估值是否过高？</span>
                        </label>
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>是否有更好的投资机会？</span>
                        </label>
                        <label class="checklist-item">
                            <input type="checkbox">
                            <span>是否需要资金配置？</span>
                        </label>
                    </div>
                </div>
            </div>
        `;
        this.showModal();
    }

    showCalculatorModal() {
        this.modalTitle.textContent = '复利计算器';
        this.modalBody.innerHTML = `
            <div class="calculator-container">
                <div class="input-group">
                    <label>初始金额（元）</label>
                    <input type="number" id="initial-amount" placeholder="100000" value="100000">
                </div>
                <div class="input-group">
                    <label>每年投入（元）</label>
                    <input type="number" id="annual-investment" placeholder="50000" value="50000">
                </div>
                <div class="input-group">
                    <label>年复合增长率（%）</label>
                    <input type="number" id="growth-rate" placeholder="10" value="10" step="0.1">
                </div>
                <div class="input-group">
                    <label>投资年限</label>
                    <input type="number" id="years" placeholder="10" value="10">
                </div>
                <button class="calculate-btn" onclick="app.calculateCompound()">计算</button>
                <div class="result-container" id="calculator-result" style="display: none;">
                    <h4>计算结果</h4>
                    <div class="result-item">
                        <span>总投入：</span>
                        <span id="total-investment">¥0</span>
                    </div>
                    <div class="result-item">
                        <span>最终金额：</span>
                        <span id="final-amount">¥0</span>
                    </div>
                    <div class="result-item">
                        <span>总收益：</span>
                        <span id="total-profit">¥0</span>
                    </div>
                </div>
            </div>
        `;
        this.showModal();
    }

    calculateCompound() {
        const initialAmount = parseFloat(document.getElementById('initial-amount').value) || 0;
        const annualInvestment = parseFloat(document.getElementById('annual-investment').value) || 0;
        const growthRate = parseFloat(document.getElementById('growth-rate').value) || 0;
        const years = parseInt(document.getElementById('years').value) || 0;

        const rate = growthRate / 100;
        let totalInvestment = initialAmount + annualInvestment * years;
        let finalAmount = initialAmount * Math.pow(1 + rate, years);

        // 计算每年投入的复利
        for (let i = 1; i <= years; i++) {
            finalAmount += annualInvestment * Math.pow(1 + rate, years - i);
        }

        const totalProfit = finalAmount - totalInvestment;

        document.getElementById('total-investment').textContent = `¥${totalInvestment.toLocaleString()}`;
        document.getElementById('final-amount').textContent = `¥${finalAmount.toLocaleString()}`;
        document.getElementById('total-profit').textContent = `¥${totalProfit.toLocaleString()}`;
        document.getElementById('calculator-result').style.display = 'block';
    }

    showValuationModal() {
        this.modalTitle.textContent = '估值工具';
        this.modalBody.innerHTML = `
            <div class="valuation-container">
                <div class="valuation-tabs">
                    <button class="tab-btn active" data-method="tang">老唐估值法</button>
                    <button class="tab-btn" data-method="dcf">现金流折现</button>
                </div>
                <div class="valuation-content">
                    <div class="method-content" id="tang-method">
                        <div class="input-group">
                            <label>净利润（亿元）</label>
                            <input type="number" id="net-profit" placeholder="100" value="100">
                        </div>
                        <div class="input-group">
                            <label>无风险收益率（%）</label>
                            <input type="number" id="risk-free-rate" placeholder="3" value="3" step="0.1">
                        </div>
                        <div class="input-group">
                            <label>合理PE倍数</label>
                            <input type="number" id="pe-ratio" placeholder="25" value="25">
                        </div>
                        <button class="calculate-btn" onclick="app.calculateTangValuation()">计算估值</button>
                        <div class="result-container" id="tang-result" style="display: none;">
                            <h4>估值结果</h4>
                            <div class="result-item">
                                <span>合理估值：</span>
                                <span id="tang-value">¥0亿</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        this.showModal();
    }

    calculateTangValuation() {
        const netProfit = parseFloat(document.getElementById('net-profit').value) || 0;
        const riskFreeRate = parseFloat(document.getElementById('risk-free-rate').value) || 0;
        const peRatio = parseFloat(document.getElementById('pe-ratio').value) || 0;

        const reasonablePE = 1 / (riskFreeRate / 100);
        const valuation = netProfit * Math.min(peRatio, reasonablePE);

        document.getElementById('tang-value').textContent = `¥${valuation.toFixed(2)}亿`;
        document.getElementById('tang-result').style.display = 'block';
    }

    showFreedomModal() {
        this.modalTitle.textContent = '自由目标';
        this.modalBody.innerHTML = `
            <div class="freedom-container">
                <div class="input-group">
                    <label>目标资产（万元）</label>
                    <input type="number" id="target-assets" placeholder="1000" value="1000">
                </div>
                <div class="input-group">
                    <label>当前资产（万元）</label>
                    <input type="number" id="current-assets" placeholder="100" value="100">
                </div>
                <div class="input-group">
                    <label>年复合增长率（%）</label>
                    <input type="number" id="freedom-growth-rate" placeholder="10" value="10" step="0.1">
                </div>
                <div class="input-group">
                    <label>每年投入（万元）</label>
                    <input type="number" id="freedom-annual-investment" placeholder="20" value="20">
                </div>
                <button class="calculate-btn" onclick="app.calculateFreedom()">计算达成时间</button>
                <div class="result-container" id="freedom-result" style="display: none;">
                    <h4>自由目标分析</h4>
                    <div class="result-item">
                        <span>预计达成时间：</span>
                        <span id="freedom-years">0年</span>
                    </div>
                    <div class="result-item">
                        <span>届时年龄：</span>
                        <span id="freedom-age">0岁</span>
                    </div>
                    <div class="result-item">
                        <span>总投入：</span>
                        <span id="freedom-total-investment">¥0万</span>
                    </div>
                </div>
            </div>
        `;
        this.showModal();
    }

    calculateFreedom() {
        const targetAssets = parseFloat(document.getElementById('target-assets').value) || 0;
        const currentAssets = parseFloat(document.getElementById('current-assets').value) || 0;
        const growthRate = parseFloat(document.getElementById('freedom-growth-rate').value) || 0;
        const annualInvestment = parseFloat(document.getElementById('freedom-annual-investment').value) || 0;

        const rate = growthRate / 100;
        let years = 0;
        let assets = currentAssets;

        // 模拟逐年增长
        while (assets < targetAssets && years < 50) {
            assets = assets * (1 + rate) + annualInvestment;
            years++;
        }

        const totalInvestment = currentAssets + annualInvestment * years;
        const currentAge = 30; // 假设当前年龄
        const targetAge = currentAge + years;

        document.getElementById('freedom-years').textContent = `${years}年`;
        document.getElementById('freedom-age').textContent = `${targetAge}岁`;
        document.getElementById('freedom-total-investment').textContent = `¥${totalInvestment.toFixed(2)}万`;
        document.getElementById('freedom-result').style.display = 'block';
    }

    showAddModal(page) {
        switch (page) {
            case 'portfolio-page':
                this.showAddHoldingModal();
                break;
            case 'plans-page':
                this.showAddPlanModal();
                break;
            case 'records-page':
                this.showAddRecordModal();
                break;
        }
    }

    showAddHoldingModal() {
        this.modalTitle.textContent = '添加持仓';
        this.modalBody.innerHTML = `
            <div class="form-container">
                <div class="input-group">
                    <label>股票名称</label>
                    <input type="text" id="stock-name" placeholder="请输入股票名称">
                </div>
                <div class="input-group">
                    <label>股票代码</label>
                    <input type="text" id="stock-code" placeholder="请输入股票代码">
                </div>
                <div class="input-group">
                    <label>持股数量</label>
                    <input type="number" id="shares" placeholder="请输入持股数量">
                </div>
                <div class="input-group">
                    <label>成本价格</label>
                    <input type="number" id="cost-price" placeholder="请输入成本价格" step="0.01">
                </div>
                <button class="submit-btn" onclick="app.addHolding()">添加持仓</button>
            </div>
        `;
        this.showModal();
    }

    showAddPlanModal() {
        this.modalTitle.textContent = '新建交易计划';
        this.modalBody.innerHTML = `
            <div class="form-container">
                <div class="input-group">
                    <label>股票名称</label>
                    <input type="text" id="plan-stock-name" placeholder="请输入股票名称">
                </div>
                <div class="input-group">
                    <label>股票代码</label>
                    <input type="text" id="plan-stock-code" placeholder="请输入股票代码">
                </div>
                <div class="input-group">
                    <label>目标价格</label>
                    <input type="number" id="target-price" placeholder="请输入目标价格" step="0.01">
                </div>
                <div class="input-group">
                    <label>计划金额</label>
                    <input type="number" id="plan-amount" placeholder="请输入计划金额">
                </div>
                <div class="input-group">
                    <label>截止时间</label>
                    <input type="date" id="deadline">
                </div>
                <button class="submit-btn" onclick="app.addPlan()">创建计划</button>
            </div>
        `;
        this.showModal();
    }

    showAddRecordModal() {
        this.modalTitle.textContent = '记录交易';
        this.modalBody.innerHTML = `
            <div class="form-container">
                <div class="input-group">
                    <label>交易类型</label>
                    <select id="transaction-type">
                        <option value="buy">买入</option>
                        <option value="sell">卖出</option>
                    </select>
                </div>
                <div class="input-group">
                    <label>股票名称</label>
                    <input type="text" id="record-stock-name" placeholder="请输入股票名称">
                </div>
                <div class="input-group">
                    <label>股票代码</label>
                    <input type="text" id="record-stock-code" placeholder="请输入股票代码">
                </div>
                <div class="input-group">
                    <label>交易数量</label>
                    <input type="number" id="record-shares" placeholder="请输入交易数量">
                </div>
                <div class="input-group">
                    <label>交易价格</label>
                    <input type="number" id="record-price" placeholder="请输入交易价格" step="0.01">
                </div>
                <div class="input-group">
                    <label>交易思考</label>
                    <textarea id="transaction-thoughts" placeholder="请记录您的交易思考..." rows="4"></textarea>
                </div>
                <button class="submit-btn" onclick="app.addRecord()">记录交易</button>
            </div>
        `;
        this.showModal();
    }

    addHolding() {
        // 模拟添加持仓
        this.showToast('持仓添加成功！');
        this.hideModal();
    }

    addPlan() {
        // 模拟添加计划
        this.showToast('交易计划创建成功！');
        this.hideModal();
    }

    addRecord() {
        // 模拟添加记录
        this.showToast('交易记录添加成功！');
        this.hideModal();
    }

    showModal() {
        this.modal.classList.add('show');
        document.body.style.overflow = 'hidden';
    }

    hideModal() {
        this.modal.classList.remove('show');
        document.body.style.overflow = 'auto';
    }

    showToast(message) {
        // 创建提示框
        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.textContent = message;
        toast.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
        `;
        
        document.body.appendChild(toast);
        
        // 显示动画
        setTimeout(() => {
            toast.style.opacity = '1';
        }, 100);
        
        // 自动隐藏
        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 300);
        }, 2000);
    }
}

// 初始化应用
const app = new VestMindApp();

// 添加一些额外的样式
const additionalStyles = `
<style>
.checklist-container {
    max-height: 400px;
    overflow-y: auto;
}

.checklist-section {
    margin-bottom: 20px;
}

.checklist-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.checklist-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
}

.checklist-item input[type="checkbox"] {
    margin-right: 12px;
    width: 16px;
    height: 16px;
    accent-color: #8b5cf6;
}

.calculator-container,
.valuation-container,
.freedom-container,
.form-container {
    max-height: 400px;
    overflow-y: auto;
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.calculate-btn,
.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.calculate-btn:hover,
.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.result-container {
    margin-top: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #8b5cf6;
}

.result-container h4 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.result-item span:first-child {
    color: #6b7280;
}

.result-item span:last-child {
    font-weight: 600;
    color: #374151;
}

.valuation-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.tab-btn.active {
    color: #8b5cf6;
    border-bottom-color: #8b5cf6;
}

.tab-btn:hover {
    color: #8b5cf6;
}
</style>
`;

document.head.insertAdjacentHTML('beforeend', additionalStyles);