import { useCallback, useState } from 'react';
import BriefingTab from './tabs/BriefingTab';
import AnalysisTab from './tabs/AnalysisTab';
import PurchaseTab from './tabs/PurchaseTab';
import EvolverTab from './tabs/EvolverTab';
import { useIsMobile } from '../../hooks/useIsMobile';
import SwipeableView from '../../components/SwipeableView';

const TABS = [
    { id: 'briefing', label: '🗓 이번 주 브리핑' },
    { id: 'analysis', label: '📚 자료실 / Deep Dive' },
    { id: 'purchase', label: '💰 구매·성과' },
    { id: 'evolver',  label: '🧬 자율 학습' },
];

function renderTab(id) {
    if (id === 'briefing') return <BriefingTab />;
    if (id === 'analysis') return <AnalysisTab />;
    if (id === 'purchase') return <PurchaseTab />;
    if (id === 'evolver')  return <EvolverTab />;
    return null;
}

export default function Functions({ initialTab = 'briefing' }) {
    const [tab, setTab] = useState(initialTab);
    const isMobile = useIsMobile();

    const tabIndex = TABS.findIndex(t => t.id === tab);

    const handleTabChange = useCallback((index) => {
        setTab(TABS[index].id);
    }, []);

    return (
        <div className="lotto-functions">
            {isMobile ? (
                <SwipeableView
                    tabs={TABS.map(t => ({
                        key: t.id,
                        label: t.label,
                        content: renderTab(t.id),
                    }))}
                    activeIndex={tabIndex}
                    onTabChange={handleTabChange}
                />
            ) : (
                <>
                    <nav className="lotto-tabs">
                        {TABS.map(t => (
                            <button
                                key={t.id}
                                className={tab === t.id ? 'active' : ''}
                                onClick={() => setTab(t.id)}
                            >{t.label}</button>
                        ))}
                    </nav>
                    <div className="lotto-tab-body">
                        {renderTab(tab)}
                    </div>
                </>
            )}
        </div>
    );
}
