import React from 'react';
import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { useColorScheme } from '@/hooks/use-color-scheme';

type TabKey = 'all' | 'image' | 'video';

const TABS: { key: TabKey; label: string }[] = [
  { key: 'all', label: 'All' },
  { key: 'image', label: 'Image' },
  { key: 'video', label: 'Video' },
];

export function ContentTabs({
  activeTab,
  onChangeTab,
  isLoading = false,
}: {
  activeTab: TabKey;
  onChangeTab: (tab: TabKey) => void;
  isLoading?: boolean;
}) {
  const colorScheme = useColorScheme();
  const palette = colorScheme === 'dark' ? darkPalette : lightPalette;

  return (
    <View style={[styles.tabsBar, { backgroundColor: palette.pill, borderColor: palette.border }]}>
      {TABS.map(tab => {
        const isActive = tab.key === activeTab;
        return (
          <TouchableOpacity
            key={tab.key}
            activeOpacity={0.85}
            onPress={() => onChangeTab(tab.key)}
            disabled={isLoading}
            style={[
              styles.tabButton,
              {
                backgroundColor: isActive ? palette.tabActive : 'transparent',
              },
            ]}
          >
            {isActive && isLoading ? (
              <ActivityIndicator
                size="small"
                color={palette.onAccent}
                style={styles.loadingIndicator}
              />
            ) : (
              <ThemedText
                style={[
                  styles.tabLabel,
                  {
                    color: isActive ? palette.onAccent : palette.textSecondary,
                  },
                ]}
              >
                {tab.label}
              </ThemedText>
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const darkPalette = {
  pill: '#16171C',
  border: '#1D1E24',
  tabActive: '#FFFFFF',
  onAccent: '#050505',
  textSecondary: '#8E9098',
};

const lightPalette = {
  pill: '#E8EBF4',
  border: '#E2E5ED',
  tabActive: '#FFFFFF',
  onAccent: '#FFFFFF',
  textSecondary: '#5E6474',
};

const styles = {
  tabsBar: {
    flexDirection: 'row' as const,
    alignItems: 'center' as const,
    borderWidth: 0,
    borderRadius: 999,
    padding: 0,
  },
  tabButton: {
    flex: 1,
    borderRadius: 999,
    paddingVertical: 10,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
  },
  tabLabel: {
    fontSize: 15,
    fontWeight: '600' as const,
  },
  loadingIndicator: {
    height: 18,
  },
};