import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import colors from "../../components/colors";
import GroupList from "./GroupList";
import RequestList from "./RequestList";


// ✅ Tab Layout
const GroupsTabs = () => {
  const [activeTab, setActiveTab] = useState("MyGroups");

  const renderContent = () => {
    switch (activeTab) {
      case "MyGroups":
        return <GroupList />;
      case "Requests":
        return <RequestList />;
      default:
        return null;
    }
  };

  return (
    <>

      {/* Tabs */}
      <View style={styles.tabs}>
        {["MyGroups", "Requests"].map((tab) => (
          <TouchableOpacity
            key={tab}
            style={[
              styles.tabButton,
              activeTab === tab && styles.activeTabButton,
            ]}
            onPress={() => setActiveTab(tab)}
          >
            <Text
              style={[
                styles.tabText,
                activeTab === tab && styles.activeTabText,
              ]}
            >
              {tab === "MyGroups" ? "My Groups" : tab}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* Content */}
      {renderContent()}

    </>
  );
};

export default GroupsTabs;

const styles = StyleSheet.create({

  tabs: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#ddd",
  },
  tabButton: { paddingVertical: 10, flex: 1, alignItems: "center" },
  tabText: { fontSize: 16, color: colors.textLight },
  activeTabButton: { borderBottomWidth: 2, borderBottomColor: colors.Home },
  activeTabText: { color: colors.Home, fontWeight: "600" },

  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: colors.white,
    borderRadius: 12,
    paddingHorizontal: 12,
    marginVertical: 10,
    height: 45,
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 5,
    elevation: 2,
  },
  searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },

  groupCard: {
    backgroundColor: colors.white,
    padding: 14,
    borderRadius: 14,
    marginBottom: 12,
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  groupLeft: { flexDirection: "row", alignItems: "center" },
  groupAvatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: colors.Home + "33",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 12,
  },
  avatarText: { fontSize: 18, fontWeight: "700", color: colors.Home },
  groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
  groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
  groupMeta: { fontSize: 12, color: colors.Home, marginTop: 2 },
  detailsBox: {
    marginTop: 10,
    padding: 10,
    borderRadius: 8,
    backgroundColor: "#f9f9f9",
  },
  detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
  emptyText: { textAlign: "center", color: colors.textLight, marginTop: 20 },
  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
  sectionTitle: { fontSize: 18, fontWeight: "600", color: colors.textDark },
});