import { Component, createSignal, Show } from 'solid-js';
import { MixpanelPanel } from './MixpanelPanel';
import { GA4Panel } from './GA4Panel';
import { StripePanel } from './StripePanel';
import { UnifiedReport } from './UnifiedReport';

type KPIView = 'product' | 'acquisition' | 'revenue' | 'report';

const TABS: { id: KPIView; label: string; icon: string }[] = [
  { id: 'product', label: 'Product KPIs', icon: '📈' },
  { id: 'acquisition', label: 'Acquisition KPIs', icon: '🎯' },
  { id: 'revenue', label: 'Revenue KPIs', icon: '💰' },
  { id: 'report', label: 'Unified Report', icon: '📋' },
];

export const KPIDashboard: Component = () => {
  const [activeTab, setActiveTab] = createSignal<KPIView>('product');

  return (
    <div class="freno-kpi-dashboard">
      <div class="freno-page-header">
        <div>
          <h1>KPI Dashboard</h1>
          <p class="freno-text-muted">Real-time metrics across product, acquisition, and revenue</p>
        </div>
      </div>

      <div class="freno-kpi-tabs">
        {TABS.map((tab) => (
          <button
            class="freno-kpi-tab"
            classList={{ 'freno-kpi-tab-active': activeTab() === tab.id }}
            onClick={() => setActiveTab(tab.id)}
          >
            <span class="freno-kpi-tab-icon">{tab.icon}</span>
            <span>{tab.label}</span>
          </button>
        ))}
      </div>

      <div class="freno-kpi-panel">
        <Show when={activeTab() === 'product'}>
          <MixpanelPanel />
        </Show>
        <Show when={activeTab() === 'acquisition'}>
          <GA4Panel />
        </Show>
        <Show when={activeTab() === 'revenue'}>
          <StripePanel />
        </Show>
        <Show when={activeTab() === 'report'}>
          <UnifiedReport />
        </Show>
      </div>
    </div>
  );
};
