import {
  TabList,
  TabSlot,
  TabTrigger,
  TabTriggerSlotProps,
  Tabs,
} from 'expo-router/ui';
import { SymbolView } from 'expo-symbols';
import type { ComponentProps } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import type { Href } from 'expo-router';

type SymbolName = ComponentProps<typeof SymbolView>['name'];

const tabs = [
  {
    name: 'feed',
    href: '/' as Href,
    label: '刷剧',
    icon: { ios: 'play.rectangle.fill', android: 'slideshow', web: 'slideshow' },
  },
  {
    name: 'create',
    href: '/create' as Href,
    label: '创作',
    icon: { ios: 'wand.and.stars', android: 'auto_fix_high', web: 'auto_fix_high' },
  },
  {
    name: 'profile',
    href: '/profile' as Href,
    label: '我的',
    icon: { ios: 'person.crop.circle.fill', android: 'person', web: 'person' },
  },
] satisfies {
  name: string;
  href: Href;
  label: string;
  icon: SymbolName;
}[];

export default function AppTabs() {
  return (
    <Tabs>
      <TabSlot style={styles.slot} />
      <TabList asChild>
        <View style={styles.tabList}>
          {tabs.map((tab) => (
            <TabTrigger key={tab.name} name={tab.name} href={tab.href} asChild>
              <TabButton icon={tab.icon}>{tab.label}</TabButton>
            </TabTrigger>
          ))}
        </View>
      </TabList>
    </Tabs>
  );
}

function TabButton({
  children,
  icon,
  isFocused,
  ...props
}: TabTriggerSlotProps & { icon: SymbolName }) {
  return (
    <Pressable {...props} style={({ pressed }) => [styles.tabButton, isFocused && styles.activeTab, pressed && styles.pressed]}>
      <SymbolView name={icon} size={20} tintColor={isFocused ? '#fff' : 'rgba(255,255,255,0.5)'} />
      <Text style={[styles.tabText, isFocused && styles.activeText]}>{children}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  slot: {
    height: '100%',
  },
  tabList: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 74,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#09090b',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: 'rgba(255,255,255,0.12)',
  },
  tabButton: {
    minWidth: 86,
    height: 52,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 4,
  },
  activeTab: {
    backgroundColor: 'rgba(255,255,255,0.1)',
  },
  tabText: {
    color: 'rgba(255,255,255,0.5)',
    fontSize: 12,
    fontWeight: '800',
  },
  activeText: {
    color: '#fff',
    fontWeight: '900',
  },
  pressed: {
    opacity: 0.72,
  },
});
