import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useColorScheme } from 'react-native';
import { COLORS } from '../theme';
import { CustomTabBar } from './CustomTabBar';
import { useAuthStore } from '../stores/authStore';
import {
  AppTabParamList,
  MarketplaceStackParamList,
  DashboardStackParamList,
  InboxStackParamList,
  AccountStackParamList,
} from './types';

// Public screens
import { MarketplaceScreen } from '../screens/marketplace/MarketplaceScreen';
import { ChatbotDetailScreen } from '../screens/marketplace/ChatbotDetailScreen';
import { PublicChatScreen } from '../screens/marketplace/PublicChatScreen';

// Auth-required screens
import { DashboardScreen } from '../screens/dashboard/DashboardScreen';
import { ChatbotBuilderScreen } from '../screens/chatbots/ChatbotBuilderScreen';
import { ChatPreviewScreen } from '../screens/chatbots/ChatPreviewScreen';
import { InboxScreen } from '../screens/inbox/InboxScreen';
import { ConversationScreen } from '../screens/inbox/ConversationScreen';
import { SettingsScreen } from '../screens/settings/SettingsScreen';
import { LeadsScreen } from '../screens/leads/LeadsScreen';
import { AnalyticsScreen } from '../screens/analytics/AnalyticsScreen';
import { CampaignsScreen } from '../screens/campaigns/CampaignsScreen';
import { AppointmentsScreen } from '../screens/appointments/AppointmentsScreen';

// Guest screen for unauthenticated users on protected tabs
import { GuestScreen } from '../screens/GuestScreen';

const Tab = createBottomTabNavigator<AppTabParamList>();
const MktStack = createNativeStackNavigator<MarketplaceStackParamList>();
const DashStack = createNativeStackNavigator<DashboardStackParamList>();
const InboxStack = createNativeStackNavigator<InboxStackParamList>();
const AccStack = createNativeStackNavigator<AccountStackParamList>();

// ─── Marketplace (always public) ─────────────────────────────────────────────

function MarketplaceNavigator() {
  return (
    <MktStack.Navigator>
      <MktStack.Screen name="MarketplaceList" component={MarketplaceScreen} options={{ title: 'Marketplace' }} />
      <MktStack.Screen name="MarketplaceDetail" component={ChatbotDetailScreen} options={{ title: 'Chatbot Details' }} />
      <MktStack.Screen
        name="PublicChat"
        component={PublicChatScreen}
        options={({ route }) => ({ title: route.params.chatbotName })}
      />
    </MktStack.Navigator>
  );
}

// ─── Dashboard (requires auth) ────────────────────────────────────────────────

function DashboardNavigator() {
  const isAuthenticated = useAuthStore(s => s.isAuthenticated);
  if (!isAuthenticated) {
    return (
      <GuestScreen
        icon="🤖"
        title="Your chatbots live here"
        description="Sign in to create, manage and deploy AI chatbots powered by your documents."
      />
    );
  }
  return (
    <DashStack.Navigator>
      <DashStack.Screen name="ChatbotList" component={DashboardScreen} options={{ title: 'My Chatbots' }} />
      <DashStack.Screen name="ChatbotBuilder" component={ChatbotBuilderScreen} options={{ title: 'Chatbot Builder' }} />
      <DashStack.Screen
        name="ChatPreview"
        component={ChatPreviewScreen}
        options={({ route }) => ({ title: route.params.chatbotName })}
      />
    </DashStack.Navigator>
  );
}

// ─── Inbox (requires auth) ────────────────────────────────────────────────────

function InboxNavigator() {
  const isAuthenticated = useAuthStore(s => s.isAuthenticated);
  if (!isAuthenticated) {
    return (
      <GuestScreen
        icon="✉️"
        title="Your inbox is empty"
        description="Sign in to view and manage conversations your chatbots have with visitors."
      />
    );
  }
  return (
    <InboxStack.Navigator>
      <InboxStack.Screen name="InboxList" component={InboxScreen} options={{ title: 'Inbox' }} />
      <InboxStack.Screen
        name="Conversation"
        component={ConversationScreen}
        options={({ route }) => ({ title: route.params.chatbotName ?? 'Conversation' })}
      />
    </InboxStack.Navigator>
  );
}

// ─── Account (guest CTA or full settings) ────────────────────────────────────

function AccountNavigator() {
  const isAuthenticated = useAuthStore(s => s.isAuthenticated);
  if (!isAuthenticated) {
    return (
      <GuestScreen
        icon="👤"
        title="Manage your account"
        description="Sign in to access your profile, subscription, leads, and analytics."
      />
    );
  }
  return (
    <AccStack.Navigator>
      <AccStack.Screen name="AccountHome" component={SettingsScreen} options={{ title: 'Settings' }} />
      <AccStack.Screen name="Leads" component={LeadsScreen} options={{ title: 'Leads' }} />
      <AccStack.Screen name="Analytics" component={AnalyticsScreen} options={{ title: 'Analytics' }} />
      <AccStack.Screen name="Campaigns" component={CampaignsScreen} options={{ title: 'Campaigns' }} />
      <AccStack.Screen name="Appointments" component={AppointmentsScreen} options={{ title: 'Appointments' }} />
    </AccStack.Navigator>
  );
}

// ─── Main Tab Navigator ───────────────────────────────────────────────────────

export function AppNavigator() {
  return (
    <Tab.Navigator
      initialRouteName="MarketplaceTab"
      tabBar={props => <CustomTabBar {...props} />}
      screenOptions={{ headerShown: false }}>
      <Tab.Screen name="MarketplaceTab" component={MarketplaceNavigator} options={{ title: 'Explore' }} />
      <Tab.Screen name="DashboardTab"   component={DashboardNavigator}   options={{ title: 'Chatbots' }} />
      <Tab.Screen name="InboxTab"       component={InboxNavigator}       options={{ title: 'Inbox' }} />
      <Tab.Screen name="AccountTab"     component={AccountNavigator}     options={{ title: 'Account' }} />
    </Tab.Navigator>
  );
}
