import { useEffect, useState } from 'react'
import LiveMarketPanel from './components/LiveMarketPanel'
import MultiChartSSEPanel from './components/MultiChartSSEPanel'
import AccountPositionsPanel from './components/AccountPositionsPanel'
import EquityPerformancePanel from './components/EquityPerformancePanel'
import DecisionLogPanel from './components/DecisionLogPanel'
import SettingsPanel from './components/SettingsPanel'
import PromptTemplatesPanel from './components/PromptTemplatesPanel'
import { statusApi } from './services/api'

// Phase 1: Daily Helper Components
import NotificationCenter from './components/NotificationCenter'
import UserProfileSetup from './components/UserProfileSetup'
import HabitTracker from './components/HabitTracker'
import DailyChecklistPanel from './components/DailyChecklistPanel'

// Phase 3: Advanced Analytics Components
import AnalyticsDashboard from './components/AnalyticsDashboard'

// Phase 4: Economic Calendar & Advanced Features
import EconomicCalendar from './components/EconomicCalendar'
import AdvancedIndicatorsPanel from './components/AdvancedIndicatorsPanel'

function Tabs({ tabs, active, onChange }: { tabs: string[]; active: string; onChange: (t: string) => void }) {
  return (
    <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
      {tabs.map(t => (
        <button key={t} className={`btn ${active === t ? 'bg-blue-600 text-white' : 'bg-dark-surface text-gray-300'}`} onClick={() => onChange(t)}>
          {t}
        </button>
      ))}
    </div>
  )
}

export default function App() {
  const [activeTab, setActiveTab] = useState<'Live' | 'Account' | 'Equity' | 'Decisions' | 'Analytics' | 'Economic Calendar' | 'Indicators' | 'Settings' | 'Prompts' | 'Daily Helper'>('Live')
  const [backendStatus, setBackendStatus] = useState<any>(null)
  const [showProfileSetup, setShowProfileSetup] = useState(false)

  useEffect(() => {
    let mounted = true
    ;(async () => {
      try {
        const s = await statusApi.getStatus()
        if (mounted) setBackendStatus(s)
      } catch (e) {
        // ignore
      }
    })()
    return () => { mounted = false }
  }, [])

  const tabs = ['Live', 'Account', 'Equity', 'Decisions', 'Analytics', 'Economic Calendar', 'Indicators', 'Daily Helper', 'Settings', 'Prompts']

  return (
    <div className="min-h-screen bg-dark-bg p-6">
      <div className="max-w-[1400px] mx-auto">
        <header className="mb-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-gold-500">Assistant Market Simulator</h1>
              <p className="text-gray-400 text-sm">AI-Powered Trading with Daily Helper</p>
            </div>
            <div className="flex items-center gap-4">
              <NotificationCenter />
              <div className="text-sm text-gray-400">
                {backendStatus ? (
                  <span>API: {backendStatus.app?.name} v{backendStatus.app?.version}</span>
                ) : (
                  <span>Checking API…</span>
                )}
              </div>
            </div>
          </div>
        </header>

        <Tabs tabs={tabs} active={activeTab} onChange={(t) => setActiveTab(t as any)} />

        {activeTab === 'Live' && (
          <div style={{ display: 'grid', gap: 16 }}>
            <LiveMarketPanel />
            <MultiChartSSEPanel />
          </div>
        )}

        {activeTab === 'Account' && <AccountPositionsPanel />}
        {activeTab === 'Equity' && <EquityPerformancePanel />}
        {activeTab === 'Decisions' && <DecisionLogPanel />}
        {activeTab === 'Analytics' && <AnalyticsDashboard />}
        {activeTab === 'Economic Calendar' && <EconomicCalendar />}
        {activeTab === 'Indicators' && <AdvancedIndicatorsPanel />}

        {activeTab === 'Daily Helper' && (
          <div style={{ display: 'grid', gap: 16, gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}>
            <div>
              <button
                onClick={() => setShowProfileSetup(true)}
                className="mb-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition-colors"
              >
                ⚙️ Setup Profile
              </button>
              <DailyChecklistPanel checklistType="morning" />
            </div>
            <div>
              <HabitTracker />
            </div>
          </div>
        )}

        {showProfileSetup && (
          <UserProfileSetup
            onClose={() => setShowProfileSetup(false)}
            onSaved={() => {
              // Profile saved successfully
            }}
          />
        )}

        {activeTab === 'Settings' && <SettingsPanel />}
        {activeTab === 'Prompts' && <PromptTemplatesPanel />}
      </div>
    </div>
  )
}