import { Suspense, lazy, useState, useEffect, useCallback, useRef } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { useWebSocket } from './hooks/useWebSocket';
import { useAuth } from './components/AuthContext';
import { Login } from './components/Login';
import { ResetPassword } from './components/ResetPassword';
import { AppContext } from './context/AppContext';
import { AppShell } from './components/layout/AppShell';
import { useBacktestFeatureGate } from './backtest/useBacktestFeatureGate';
import { useTabFeatureFlags } from './hooks/useTabFeatureFlags';
import { tradingRuntime, tradingTelemetry } from './lib/runtime';
import { createTradeProfile, fetchTradeProfiles, updateTradeProfile } from './lib/profileApi';

const ChatControl = lazy(() => import('./components/ChatControl').then((mod) => ({ default: mod.ChatControl })));

// ─── Helpers (preserved from original App.tsx) ───────────────────────────────

export const resolveProfileNameForAction = (
  action: string,
  requestedName: string | undefined,
  chatProfiles: Array<{ name?: string }>,
  suffixProvider: () => string = () =>
    new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(/:/g, '')
) => {
  let profileName = requestedName || 'AI Profile';
  if (action === 'create_profile') {
    const existing = chatProfiles.find(p => p.name === profileName);
    if (existing) profileName = `${profileName} (${suffixProvider()})`;
  }
  return profileName;
};

export const buildChatApplyPayload = (
  profileData: any,
  currentUserId: string,
  profileName: string
) => ({
  name: profileName,
  user_id: currentUserId,
  allocated_capital: Number(profileData.allocated_capital || 1000),
  risk_per_trade_percent: Number(profileData.risk_per_trade_percent || 1),
  symbols: profileData.symbols || 'BTC/USDT',
  is_active: profileData.is_active ?? true,
  strategy_config: profileData.strategy_config,
});

// ─── App ─────────────────────────────────────────────────────────────────────

function App() {
  const { user, profile, loading, signOut } = useAuth();
  const { socket, botState, connected } = useWebSocket(tradingRuntime.tradingApiUrl);
  const [activeSymbol, setActiveSymbol] = useState('');
  const [chatProfiles, setChatProfiles]  = useState<any[]>([]);
  const [previewAsCustomer] = useState(false);
  const [simpleToasts, setSimpleToasts] = useState<Array<{
    id: string;
    message: string;
    severity: 'INFO' | 'WARN' | 'ERROR';
  }>>([]);
  const seenSimpleEventIdsRef = useRef<Set<string>>(new Set());

  const { enabled: backtestEnabledForView, loading: backtestGateLoading } =
    useBacktestFeatureGate({ previewAsCustomer });
  const { flags: tabFlags } = useTabFeatureFlags();

  // Feature gates
  const isAdminAccount   = profile?.role === 'admin';
  const isAdmin          = isAdminAccount && !previewAsCustomer;
  const showBacktestTab  = isAdmin || (!backtestGateLoading && backtestEnabledForView);
  const showMarketplaceTab = isAdmin || tabFlags.marketplace;

  // Critical system events (for the alert banner)
  const recentCriticalEvents = (botState.operationalEvents ?? []).filter((e): e is NonNullable<typeof e> =>
    Boolean(e)
    && (e.severity === 'ERROR' || e.severity === 'WARN')
    && Date.now() - e.timestamp < 600_000
  );
  const hasCriticalEvents = recentCriticalEvents.length > 0;

  useEffect(() => {
    const events = botState.operationalEvents ?? [];
    const now = Date.now();
    const nextToasts: Array<{ id: string; message: string; severity: 'INFO' | 'WARN' | 'ERROR' }> = [];

    for (const event of events) {
      if (!event || event.type !== 'SIMPLE_SETUP_UPDATE') continue;
      if (seenSimpleEventIdsRef.current.has(event.id)) continue;
      seenSimpleEventIdsRef.current.add(event.id);
      if (now - event.timestamp > 120_000) continue;
      nextToasts.push({
        id: event.id,
        message: event.message,
        severity: (event.severity as 'INFO' | 'WARN' | 'ERROR') || 'INFO',
      });
    }

    if (nextToasts.length === 0) return;

    setSimpleToasts((prev) => [...prev, ...nextToasts].slice(-4));
    for (const toast of nextToasts) {
      window.setTimeout(() => {
        setSimpleToasts((prev) => prev.filter((entry) => entry.id !== toast.id));
      }, 4500);
    }
  }, [botState.operationalEvents]);

  // Chat profile management
  const fetchChatProfiles = useCallback(async () => {
    const data = await fetchTradeProfiles();
    setChatProfiles(data ?? []);
  }, []);

  useEffect(() => {
    if (user) {
      fetchChatProfiles();
      const id = setInterval(fetchChatProfiles, 30_000);
      return () => clearInterval(id);
    }
  }, [user, fetchChatProfiles]);

  const handleChatApply = async (
    action: string,
    profileData: any
  ): Promise<{ success: boolean; error?: string }> => {
    const currentUserId = user?.id;
    if (!currentUserId) return { success: false, error: 'Not authenticated' };

    const profileName = resolveProfileNameForAction(action, profileData.name, chatProfiles);
    const payload = buildChatApplyPayload(profileData, currentUserId, profileName);

    if (action === 'create_profile') {
      try {
        await createTradeProfile(payload);
        fetchChatProfiles();
        return { success: true };
      } catch (err: any) {
        return { success: false, error: err.message };
      }
    }
    if (action === 'update_profile' && profileData.id) {
      try {
        await updateTradeProfile(profileData.id, payload);
        fetchChatProfiles();
        return { success: true };
      } catch (err: any) {
        return { success: false, error: err.message };
      }
    }
    return { success: false, error: 'Unknown action' };
  };

  const handleSignOut = async () => {
    tradingTelemetry.client.trackEvent('info', 'auth', 'trading_web_sign_out', {
      userId: user?.id ?? 'anonymous',
      feature: 'sign_out',
      tags: { surface: 'web' },
    });
    await signOut();
  };

  // ── Auth gates ──────────────────────────────────────────────────────────────
  if (window.location.pathname === '/reset-callback') return <ResetPassword />;

  if (loading) {
    return (
      <div style={{
        display: 'flex', justifyContent: 'center', alignItems: 'center',
        height: '100vh', background: 'var(--background)', color: 'var(--foreground)',
        fontSize: 15, fontFamily: 'Inter, system-ui, sans-serif',
      }}>
        Loading…
      </div>
    );
  }

  if (!user) return <Login />;

  // ── Render ──────────────────────────────────────────────────────────────────
  return (
    <BrowserRouter>
      <AppContext.Provider value={{
        botState,
        socket,
        connected,
        activeSymbol,
        setActiveSymbol,
        isAdmin,
        user,
        profile,
        showBacktestTab,
        showMarketplaceTab,
        handleSignOut,
      }}>
        <div className={`app-runtime${hasCriticalEvents ? ' has-critical-alert' : ''}`}>
          {hasCriticalEvents && (
            <a className="critical-alert-banner" href="/settings">
              <span aria-hidden="true">⚠️</span>
              <span>
                System alert: {recentCriticalEvents.length} critical issues detected — go to Settings › Admin Panel
              </span>
              <span aria-hidden="true">⚠️</span>
            </a>
          )}
          <AppShell />
        </div>

        {simpleToasts.length > 0 && (
          <div style={{
            position: 'fixed',
            right: 16,
            bottom: 16,
            zIndex: 9998,
            display: 'flex',
            flexDirection: 'column',
            gap: 10,
            maxWidth: 420,
          }}>
            {simpleToasts.map((toast) => {
              const palette = toast.severity === 'ERROR'
                ? { border: 'var(--bl-danger-border, var(--bl-danger))', bg: 'var(--bl-danger-muted)', fg: 'var(--foreground)' }
                : toast.severity === 'WARN'
                  ? { border: 'var(--bl-warning-border, var(--bl-warning))', bg: 'var(--bl-warning-muted)', fg: 'var(--foreground)' }
                  : { border: 'var(--bl-success-border, var(--bl-success))', bg: 'var(--bl-success-muted)', fg: 'var(--foreground)' };
              return (
                <div
                  key={toast.id}
                  style={{
                    border: `1px solid ${palette.border}`,
                    background: palette.bg,
                    color: palette.fg,
                    borderRadius: 16,
                    padding: '12px 14px',
                    boxShadow: 'var(--card-shadow)',
                    fontSize: 13,
                    lineHeight: 1.45,
                    backdropFilter: 'blur(8px)',
                  }}
                >
                  <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.8, marginBottom: 4 }}>
                    Simple update
                  </div>
                  <div>{toast.message}</div>
                </div>
              );
            })}
          </div>
        )}

        {/* Floating AI strategy assistant */}
        <Suspense fallback={null}>
          <ChatControl profiles={chatProfiles} botState={botState} onApplyProfile={handleChatApply} />
        </Suspense>
      </AppContext.Provider>
    </BrowserRouter>
  );
}

export default App;