import React, { useState } from 'react';
import { View, StyleSheet, Text, Pressable, ScrollView } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import Ionicons from '@react-native-vector-icons/ionicons';
import Animated, { FadeIn, FadeInRight, FadeInLeft } from 'react-native-reanimated';

import { ScreenShell } from '../../../components';
import { useTheme, fontFamily } from '../../../theme';
import type { AgentLoansStackParamList } from '../navigation/agentNavigationTypes';

import LoanRequestListScreen from './LoanRequestListScreen';
import CommissionDashboardScreen from './CommissionDashboardScreen';
import AccountOpeningScreen from './AccountOpeningScreen';

type Props = NativeStackScreenProps<AgentLoansStackParamList, 'AgentLoansMain'>;

type TabKey = 'loans' | 'commission' | 'account';

export default function AgentLoansScreen({ route, navigation }: Props) {
  const theme = useTheme();
  const [activeTab, setActiveTab] = useState<TabKey>(route.params?.initialTab || 'loans');

  const tabs: { key: TabKey; label: string; icon: string }[] = [
    { key: 'loans', label: 'Loans', icon: 'document-text-outline' },
    { key: 'commission', label: 'Commission', icon: 'star-outline' },
    { key: 'account', label: 'New A/C', icon: 'person-add-outline' },
  ];

  return (
    <ScreenShell scrollable={false} withTabBar={false} keyboardAware={false}>
      <View style={styles.header}>
        <Text style={[styles.headerTitle, { color: theme.colors.textPrimary }]}>Agent Workspace</Text>
      </View>

      <View style={styles.tabContainer}>
        {tabs.map((tab) => {
          const isActive = activeTab === tab.key;
          return (
            <Pressable
              key={tab.key}
              style={[
                styles.tab,
                { 
                  backgroundColor: isActive ? theme.colors.primary : theme.colors.surface,
                  borderColor: isActive ? theme.colors.primary : theme.colors.cardBorder,
                }
              ]}
              onPress={() => setActiveTab(tab.key)}
            >
              <Ionicons 
                name={tab.icon as any} 
                size={16} 
                color={isActive ? theme.colors.white : theme.colors.textMuted} 
              />
              <Text style={[
                styles.tabLabel, 
                { color: isActive ? theme.colors.white : theme.colors.textSecondary }
              ]}>
                {tab.label}
              </Text>
            </Pressable>
          );
        })}
      </View>

      <View style={styles.contentArea}>
        {activeTab === 'loans' && (
          <Animated.View entering={FadeInLeft} style={{ flex: 1 }}>
            <LoanRequestListScreen navigation={navigation as any} />
          </Animated.View>
        )}
        
        {activeTab === 'commission' && (
          <Animated.View entering={FadeIn} style={{ flex: 1 }}>
            <CommissionDashboardScreen />
          </Animated.View>
        )}

        {activeTab === 'account' && (
          <Animated.View entering={FadeInRight} style={{ flex: 1 }}>
            <AccountOpeningScreen navigation={navigation as any} />
          </Animated.View>
        )}
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 8,
  },
  headerTitle: {
    fontSize: 22,
    fontFamily: fontFamily.bold,
    letterSpacing: -0.5,
  },
  tabContainer: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    marginBottom: 12,
    gap: 8,
  },
  tab: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 10,
    borderRadius: 12,
    borderWidth: 1,
    gap: 6,
  },
  tabLabel: {
    fontSize: 12,
    fontFamily: fontFamily.bold,
  },
  contentArea: {
    flex: 1,
  },
});