greenPage/components/AnalyticsDashboard.tsx

import * as React from 'react';
import PageAnalytics from './PageAnalytics';
import InteractionAnalytics from './InteractionAnalytics';
// FIX: Changed to a named import as CRM is not a default export.
import { CRM } from './CRM';
import { Tabs } from './ui/Tabs';
import { AnalyticsData, Conversation } from '../types';
import { useTranslation } from '../hooks/useI18n';

interface AnalyticsDashboardProps {
    analyticsData: AnalyticsData;
    onUpdateConversations: (conversations: Conversation[]) => void;
}

const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({ analyticsData, onUpdateConversations }) => {
    const { t } = useTranslation();
    const [activeTab, setActiveTab] = React.useState<'page' | 'interactions' | 'crm'>('page');

    const renderContent = () => {
        switch (activeTab) {
            case 'page':
                return <PageAnalytics analyticsData={analyticsData} />
            case 'interactions':
                return <InteractionAnalytics
                    analyticsData={analyticsData}
                    onUpdateConversations={onUpdateConversations}
                />
            case 'crm':
                 return <CRM analyticsData={analyticsData} />
            default:
                return null
        }
    };
    
    const tabLabels = {
        page: t('nav.analytics.page'),
        interactions: t('nav.analytics.interactions'),
        crm: t('nav.analytics.crm'),
    };

    return (
        <div>
             <div className='p-6 border-b border-gray-200 dark:border-gray-700'>
                <Tabs
                    tabs={Object.keys(tabLabels)}
                    activeTab={activeTab}
                    // FIX: Ensure the tab type is correctly handled by casting it to the specific string literal union type expected by setActiveTab.
                    onTabClick={(tab) => setActiveTab(tab as 'page' | 'interactions' | 'crm')}
                />
            </div>
            <div className='p-6'>
                {renderContent()}
            </div>
        </div>
    );
};

export default AnalyticsDashboard;