// components/ReportsModal.jsx — Тайлан modal

function ReportsModal({ isOpen, onClose, selectedCompany, currentOperator, api, showAlert, onOpenReceiptSearch }) {
    const { useState, useEffect, useCallback } = React;

    const today = new Date().toISOString().split('T')[0];
    const monthAgo = new Date(Date.now() - 30 * 86400000).toISOString().split('T')[0];

    const [tab, setTab] = useState('daily');

    // Өдрийн тайлан
    const [dailyDate, setDailyDate] = useState(today);
    const [dailyLoading, setDailyLoading] = useState(false);
    const [dailyData, setDailyData] = useState(null);

    // Топ бараа
    const [topStart, setTopStart] = useState(monthAgo);
    const [topEnd, setTopEnd] = useState(today);
    const [topN, setTopN] = useState(20);
    const [topLoading, setTopLoading] = useState(false);
    const [topProducts, setTopProducts] = useState([]);

    const b_id = selectedCompany?.b_id;
    const fmt = n => Math.round(parseFloat(n) || 0).toLocaleString('mn-MN');

    // ── Өдрийн тайлан татах ─────────────────────────────────
    const fetchDaily = useCallback(async () => {
        if (!api || !b_id) { showAlert('Компани сонгогдоогүй байна'); return; }
        setDailyLoading(true);
        setDailyData(null);
        try {
            const dateParam = [{ name: 'b_id', type: 'int', value: parseInt(b_id) },
                               { name: 'dt', type: 'nvarchar', value: dailyDate }];

            const [r1, r2] = await Promise.all([
                api.executeQuery(
                    `SELECT COUNT(*) as cnt,
                        ISNULL(SUM(cash1),0) as cash,
                        ISNULL(SUM(bank1),0) as card
                     FROM a_expenseG
                     WHERE b_id=@b_id
                       AND CAST(adate AS DATE)=CAST(@dt AS DATE)
                       AND mt_type IN (6,8)`,
                    dateParam
                ),
                api.executeQuery(
                    `SELECT ISNULL(SUM(er.totalsum),0) as sales,
                            ISNULL(SUM(er.vat),0)      as vat,
                            ISNULL(SUM(er.citytax),0)  as citytax,
                            ISNULL(SUM(er.discount),0) as discount
                     FROM a_expense er
                     JOIN a_expenseG eg ON er.mt_id=eg.mt_id
                     WHERE eg.b_id=@b_id
                       AND CAST(eg.adate AS DATE)=CAST(@dt AS DATE)
                       AND eg.mt_type IN (6,8)`,
                    dateParam
                )
            ]);

            const h = (r1?.recordset || [{}])[0] || {};
            const s = (r2?.recordset || [{}])[0] || {};
            setDailyData({
                count:    h.cnt    || 0,
                cash:     h.cash   || 0,
                card:     h.card   || 0,
                sales:    s.sales  || 0,
                vat:      s.vat    || 0,
                citytax:  s.citytax|| 0,
                discount: s.discount|| 0,
            });
        } catch(e) { showAlert('Тайлан татахад алдаа: ' + e.message); }
        setDailyLoading(false);
    }, [api, b_id, dailyDate]);

    // ── Топ бараа татах ─────────────────────────────────────
    const fetchTop = useCallback(async () => {
        if (!api || !b_id) return;
        setTopLoading(true);
        setTopProducts([]);
        try {
            const r = await api.getTopNSoldProducts(b_id, topStart, topEnd, topN);
            setTopProducts(r?.success ? (r.data || []) : []);
        } catch(e) { showAlert('Топ бараа татахад алдаа: ' + e.message); }
        setTopLoading(false);
    }, [api, b_id, topStart, topEnd, topN]);

    useEffect(() => {
        if (isOpen && tab === 'daily') fetchDaily();
    }, [isOpen, tab]);

    // ── Хэвлэх ─────────────────────────────────────────────
    const printDaily = () => {
        if (!dailyData || !api?.silentPrintHtml) return;
        const d = dailyData;
        const net = (d.sales - d.discount);
        const html = `<html><head><meta charset="utf-8">
        <style>
            body{font-family:'Courier New',monospace;font-size:12px;margin:8px;width:280px;}
            h2{text-align:center;font-size:13px;margin:4px 0;}
            .sub{text-align:center;font-size:11px;color:#555;margin-bottom:8px;}
            hr{border:none;border-top:1px dashed #333;margin:4px 0;}
            .row{display:flex;justify-content:space-between;padding:2px 0;font-size:12px;}
            .bold{font-weight:bold;}
            .big{font-size:14px;font-weight:bold;}
        </style></head><body>
        <h2>ӨДРИЙН ТАЙЛАН</h2>
        <div class="sub">${dailyDate} | ${selectedCompany?.b_name||''}</div>
        <hr/>
        <div class="row"><span>Баримтын тоо:</span><span class="bold">${d.count}</span></div>
        <hr/>
        <div class="row"><span>Нийт борлуулалт:</span><span>${fmt(d.sales)}₮</span></div>
        <div class="row"><span>Хөнгөлөлт:</span><span>-${fmt(d.discount)}₮</span></div>
        <div class="row bold"><span>Цэвэр дүн:</span><span>${fmt(net)}₮</span></div>
        <hr/>
        <div class="row"><span>НӨАТ:</span><span>${fmt(d.vat)}₮</span></div>
        <div class="row"><span>НХАТ:</span><span>${fmt(d.citytax)}₮</span></div>
        <hr/>
        <div class="row"><span>Мөнгөн тооцоо:</span><span>${fmt(d.cash)}₮</span></div>
        <div class="row"><span>Карт тооцоо:</span><span>${fmt(d.card)}₮</span></div>
        <div class="row"><span>Бусад:</span><span>${fmt(net - d.cash - d.card)}₮</span></div>
        </body></html>`;
        api.silentPrintHtml(html, 58);
    };

    if (!isOpen) return null;

    const TABS = [['daily','📅 Өдрийн тайлан'],['top','🏆 Борлуулалт']];

    const cardStyle = (color) => ({
        background:'#fff', border:`1px solid ${color}33`,
        borderLeft:`4px solid ${color}`, borderRadius:8,
        padding:'14px 16px',
    });

    return (
        <div className="modal-overlay" onClick={onClose}>
        <div className="modal-content" onClick={e=>e.stopPropagation()}
             style={{maxWidth:700,width:'96%'}}>

            {/* Header */}
            <div className="modal-header">
                <h2>📊 Тайлан</h2>
                <button className="modal-close" onClick={onClose}>×</button>
            </div>

            {/* Tabs */}
            <div style={{display:'flex',borderBottom:'2px solid #e9ecef',background:'#f8f9fa',flexWrap:'wrap'}}>
                {TABS.map(([k,l])=>(
                    <button key={k} onClick={()=>setTab(k)} style={{
                        padding:'10px 18px',border:'none',background:'none',cursor:'pointer',
                        fontWeight: tab===k?'700':'400', fontSize:13,
                        color: tab===k?'#667eea':'#555',
                        borderBottom: tab===k?'3px solid #667eea':'3px solid transparent',
                    }}>{l}</button>
                ))}
                {onOpenReceiptSearch && (
                    <button onClick={()=>{onClose();onOpenReceiptSearch();}} style={{
                        marginLeft:'auto',padding:'10px 14px',border:'none',
                        background:'none',cursor:'pointer',color:'#667eea',fontSize:13,fontWeight:600
                    }}>🔍 Баримт хайх →</button>
                )}
            </div>

            <div className="modal-body" style={{minHeight:320}}>

            {/* ── Өдрийн тайлан ── */}
            {tab==='daily' && (
                <div>
                    <div style={{display:'flex',gap:10,marginBottom:16,alignItems:'center',flexWrap:'wrap'}}>
                        <input type="date" className="form-input" value={dailyDate}
                            onChange={e=>setDailyDate(e.target.value)} style={{width:160}}/>
                        <button className="btn btn-primary" style={{flex:'none',padding:'8px 20px'}}
                            onClick={fetchDaily} disabled={dailyLoading}>
                            {dailyLoading?'Уншиж байна...':'🔄 Харах'}
                        </button>
                        {dailyData && dailyData.count>0 && (
                            <button className="btn btn-secondary" style={{flex:'none',padding:'8px 14px'}}
                                onClick={printDaily}>🖨️ Хэвлэх</button>
                        )}
                    </div>

                    {dailyLoading && (
                        <div style={{textAlign:'center',padding:60,color:'#667eea',fontSize:14}}>
                            Уншиж байна...
                        </div>
                    )}

                    {!dailyLoading && dailyData && dailyData.count===0 && (
                        <div style={{textAlign:'center',padding:60,color:'#95a5a6',fontSize:14}}>
                            Тухайн өдрийн борлуулалт олдсонгүй
                        </div>
                    )}

                    {!dailyLoading && dailyData && dailyData.count>0 && (() => {
                        const net = dailyData.sales - dailyData.discount;
                        const other = Math.max(0, net - dailyData.cash - dailyData.card);
                        return (
                        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(190px,1fr))',gap:12}}>
                            {[
                                ['Баримтын тоо',  dailyData.count,              '#667eea'],
                                ['Нийт борлуулалт',fmt(dailyData.sales)+'₮',   '#2ecc71'],
                                ['Хөнгөлөлт',    '-'+fmt(dailyData.discount)+'₮','#e67e22'],
                                ['Цэвэр дүн',    fmt(net)+'₮',                 '#27ae60'],
                                ['НӨАТ',         fmt(dailyData.vat)+'₮',       '#3498db'],
                                ['НХАТ',         fmt(dailyData.citytax)+'₮',   '#9b59b6'],
                                ['Мөнгөн',       fmt(dailyData.cash)+'₮',      '#16a085'],
                                ['Карт',         fmt(dailyData.card)+'₮',      '#2980b9'],
                                ...(other>0?[['Бусад',fmt(other)+'₮','#7f8c8d']]:[]),
                            ].map(([label,value,color])=>(
                                <div key={label} style={cardStyle(color)}>
                                    <div style={{fontSize:11,color:'#7f8c8d',fontWeight:600,marginBottom:6}}>{label}</div>
                                    <div style={{fontSize:20,fontWeight:'bold',color}}>{value}</div>
                                </div>
                            ))}
                        </div>
                        );
                    })()}
                </div>
            )}

            {/* ── Борлуулалтын тайлан (топ бараа) ── */}
            {tab==='top' && (
                <div>
                    <div style={{display:'flex',gap:10,marginBottom:16,alignItems:'center',flexWrap:'wrap'}}>
                        <input type="date" className="form-input" value={topStart}
                            onChange={e=>setTopStart(e.target.value)} style={{width:150}}/>
                        <span style={{color:'#aaa'}}>—</span>
                        <input type="date" className="form-input" value={topEnd}
                            onChange={e=>setTopEnd(e.target.value)} style={{width:150}}/>
                        <select className="form-input" value={topN}
                            onChange={e=>setTopN(parseInt(e.target.value))} style={{width:90}}>
                            {[10,20,50,100].map(n=><option key={n} value={n}>Топ {n}</option>)}
                        </select>
                        <button className="btn btn-primary" style={{flex:'none',padding:'8px 20px'}}
                            onClick={fetchTop} disabled={topLoading}>
                            {topLoading?'Уншиж байна...':'🔄 Харах'}
                        </button>
                    </div>

                    {topLoading && (
                        <div style={{textAlign:'center',padding:60,color:'#667eea'}}>Уншиж байна...</div>
                    )}

                    {!topLoading && topProducts.length===0 && (
                        <div style={{textAlign:'center',padding:60,color:'#95a5a6'}}>
                            Огноо сонгоод Харах дарна уу
                        </div>
                    )}

                    {!topLoading && topProducts.length>0 && (
                        <div style={{overflowX:'auto'}}>
                        <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
                            <thead>
                            <tr style={{background:'#667eea',color:'white'}}>
                                <th style={{padding:'8px 6px',width:36,textAlign:'center'}}>#</th>
                                <th style={{padding:'8px',textAlign:'left'}}>Бараа</th>
                                <th style={{padding:'8px',textAlign:'right'}}>Тоо</th>
                                <th style={{padding:'8px',textAlign:'right'}}>Нийт дүн</th>
                            </tr>
                            </thead>
                            <tbody>
                            {topProducts.map((p,i)=>(
                                <tr key={i} style={{background:i%2===0?'#f8f9fa':'white',
                                    borderBottom:'1px solid #e9ecef'}}>
                                    <td style={{padding:'7px 6px',textAlign:'center',
                                        color: i<3?['#f39c12','#7f8c8d','#cd7f32'][i]:'#aaa',
                                        fontWeight:'bold',fontSize:i<3?15:13}}>{i+1}</td>
                                    <td style={{padding:'7px 8px'}}>
                                        <div style={{fontWeight:600,color:'#2c3e50',fontSize:13}}>
                                            {p.m_name||'-'}
                                        </div>
                                        {p.shortname && p.shortname!==p.m_name && (
                                            <div style={{fontSize:11,color:'#95a5a6'}}>{p.shortname}</div>
                                        )}
                                    </td>
                                    <td style={{padding:'7px 8px',textAlign:'right',
                                        fontWeight:'bold',color:'#2c3e50'}}>
                                        {parseFloat(p.total_qty||0).toLocaleString()}
                                    </td>
                                    <td style={{padding:'7px 8px',textAlign:'right',
                                        fontWeight:'bold',color:'#2ecc71'}}>
                                        {Math.round(parseFloat(p.total_amount||0)).toLocaleString()}₮
                                    </td>
                                </tr>
                            ))}
                            </tbody>
                        </table>
                        </div>
                    )}
                </div>
            )}

            </div>
        </div>
        </div>
    );
}

if (typeof window !== 'undefined') window.ReportsModal = ReportsModal;
