import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, Text, StyleSheet, Image } from "react-native";
import DashboardScreen from "../screens/DashboardScreen";
import LaporanScreen from "../screens/LaporanScreen";
import ControlScreen from "../screens/ControlScreen";

function TabIcon({
  focused,
  icon,
  color,
}: {
  focused: boolean;
  icon: any;
  color: string;
}) {
  return (
    <View
      style={[
        styles.iconContainer,
        focused && { transform: [{ scale: 1.15 }] },
      ]}
    >
      <Image
        source={icon}
        style={{
          width: 22,
          height: 22,
          tintColor: color,
          resizeMode: "contain",
        }}
      />
    </View>
  );
}

const Tab = createBottomTabNavigator();

const TAB_CONFIG = {
  Dashboard: {
    icon: require("../../assets/dashboard.png"),
    color: "#4f46e5",
  },
  Laporan: {
    icon: require("../../assets/report.png"),
    color: "#16a34a",
  },
  Kontrol: {
    icon: require("../../assets/control.png"),
    color: "#0284c7",
  },
};

export default function BottomTabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => {
        const config = TAB_CONFIG[route.name as keyof typeof TAB_CONFIG];
        return {
          headerShown: false,
          tabBarStyle: styles.tabBar,
          tabBarActiveTintColor: config.color,
          tabBarInactiveTintColor: "#94a3b8",
          tabBarLabelStyle: styles.tabLabel,
          tabBarIcon: ({ focused, color }) => (
            <TabIcon focused={focused} icon={config.icon} color={color} />
          ),
          tabBarItemStyle: styles.tabItem,
        };
      }}
    >
      <Tab.Screen name="Dashboard" component={DashboardScreen} />
      <Tab.Screen name="Laporan" component={LaporanScreen} />
      <Tab.Screen name="Kontrol" component={ControlScreen} />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: "#fff",
    borderTopColor: "#e2e8f0",
    borderTopWidth: 1,
    height: 72,
    paddingBottom: 10,
    paddingTop: 6,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 8,
  },
  tabItem: {
    paddingTop: 4,
  },
  tabLabel: {
    fontSize: 10,
    fontWeight: "600",
    marginTop: 2,
  },
  iconContainer: {
    alignItems: "center",
    justifyContent: "center",
  },
});