import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Platform,
  TouchableOpacity,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useThemeContext } from "@/hooks/use-theme-context";

interface SectionCardProps {
  title: string;
  icon: keyof typeof Ionicons.glyphMap;
  children: React.ReactNode;
  count?: number;
  collapsible?: boolean;
  defaultExpanded?: boolean;
}

export default function SectionCard({
  title,
  icon,
  children,
  count,
  collapsible = false,
  defaultExpanded = true,
}: SectionCardProps) {
  const { colors } = useThemeContext();
  const [expanded, setExpanded] = React.useState(defaultExpanded);

  const themedStyles = {
    container: {
      backgroundColor: colors.card,
      borderColor: colors.separator,
    },
    title: {
      color: colors.text,
    },
    count: {
      color: colors.textSecondary,
      backgroundColor: colors.backgroundSecondary,
    },
    icon: colors.primary,
  };

  return (
    <View style={[styles.container, themedStyles.container]}>
      <TouchableOpacity
        style={styles.header}
        onPress={() => collapsible && setExpanded(!expanded)}
        activeOpacity={collapsible ? 0.7 : 1}
        disabled={!collapsible}
      >
        <View style={styles.headerLeft}>
          <Ionicons name={icon} size={20} color={themedStyles.icon} />
          <Text style={[styles.title, themedStyles.title]}>{title}</Text>
          {count !== undefined && (
            <View style={[styles.countBadge, themedStyles.count]}>
              <Text style={[styles.countText, { color: colors.textSecondary }]}>
                {count}
              </Text>
            </View>
          )}
        </View>
        {collapsible && (
          <Ionicons
            name={expanded ? "chevron-up" : "chevron-down"}
            size={20}
            color={colors.textSecondary}
          />
        )}
      </TouchableOpacity>
      {expanded && <View style={styles.content}>{children}</View>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 12,
    borderWidth: 1,
    marginBottom: 16,
    overflow: "hidden",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 14,
  },
  headerLeft: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
  },
  title: {
    fontSize: 16,
    fontWeight: "600",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  countBadge: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 10,
    minWidth: 24,
    alignItems: "center",
  },
  countText: {
    fontSize: 12,
    fontWeight: "600",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  content: {
    paddingHorizontal: 16,
    paddingBottom: 16,
  },
});