import { useEffect } from 'react';
import { View, StyleSheet, ActivityIndicator } from 'react-native';
import { Tabs, router } from 'expo-router';
import { BlurView } from 'expo-blur';
import Svg, { Path, Circle, Line, Polyline } from 'react-native-svg';
import { Colors, TAB_BAR_HEIGHT } from '../../constants/theme';
import { useAuth, usePlayer, useLikes } from '../../store';
import MiniPlayer from '../../components/MiniPlayer';
import Player from '../../components/Player';

export default function TabsLayout() {
  const { user, ready } = useAuth();
  const { expanded }    = usePlayer();
  const { loadLikes }   = useLikes();

  useEffect(() => {
    if (ready && !user) router.replace('/auth');
  }, [user, ready]);

  useEffect(() => {
    if (user) loadLikes();
  }, [user]);

  if (!ready) return (
    <View style={{ flex: 1, backgroundColor: Colors.bg, alignItems: 'center', justifyContent: 'center' }}>
      <ActivityIndicator color={Colors.accent} />
    </View>
  );
  if (!user) return null;

  return (
    <View style={{ flex: 1, backgroundColor: Colors.bg }}>
      <Tabs
        screenOptions={{
          headerShown: false,
          tabBarStyle: styles.tabBar,
          tabBarBackground: () => (
            <BlurView intensity={30} tint="dark" style={StyleSheet.absoluteFill} />
          ),
          tabBarActiveTintColor:   Colors.text,
          tabBarInactiveTintColor: Colors.text3,
          tabBarLabelStyle: { fontSize: 9, fontWeight: '500', letterSpacing: 0.3, marginBottom: 4 },
          tabBarItemStyle:  { paddingTop: 6 },
        }}
      >
        <Tabs.Screen name="index"   options={{ title: 'Главная',       tabBarIcon: ({ color }) => <HomeIcon color={color} /> }} />
        <Tabs.Screen name="library" options={{ title: 'Библиотека',    tabBarIcon: ({ color }) => <LibIcon color={color} /> }} />
        <Tabs.Screen name="search"  options={{ title: 'Поиск',         tabBarIcon: ({ color }) => <SearchIcon color={color} /> }} />
        <Tabs.Screen name="liked"   options={{ title: 'Понравилось',   tabBarIcon: ({ color }) => <HeartIcon color={color} /> }} />
        <Tabs.Screen name="profile" options={{ title: 'Профиль',       tabBarIcon: ({ color }) => <ProfileIcon color={color} /> }} />
      </Tabs>

      <MiniPlayer />
      {expanded && <Player />}
    </View>
  );
}

function HomeIcon({ color }: { color: string }) {
  return (
    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
      <Path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
      <Polyline points="9,22 9,12 15,12 15,22" stroke={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
    </Svg>
  );
}
function LibIcon({ color }: { color: string }) {
  return (
    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
      <Path d="M9 18V5l12-2v13" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
      <Circle cx={6} cy={18} r={3} stroke={color} strokeWidth={1.8} />
      <Circle cx={18} cy={16} r={3} stroke={color} strokeWidth={1.8} />
    </Svg>
  );
}
function SearchIcon({ color }: { color: string }) {
  return (
    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
      <Circle cx={11} cy={11} r={8} stroke={color} strokeWidth={1.8} />
      <Line x1="21" y1="21" x2="16.65" y2="16.65" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
    </Svg>
  );
}
function HeartIcon({ color }: { color: string }) {
  return (
    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
      <Path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" />
    </Svg>
  );
}
function ProfileIcon({ color }: { color: string }) {
  return (
    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
      <Path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
      <Circle cx={12} cy={7} r={4} stroke={color} strokeWidth={1.8} />
    </Svg>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    position:        'absolute',
    borderTopWidth:  StyleSheet.hairlineWidth,
    borderTopColor:  'rgba(255,255,255,0.08)',
    backgroundColor: 'transparent',
    elevation:       0,
    height:          TAB_BAR_HEIGHT,
  },
});