import React from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";
import { PieChart } from "react-native-chart-kit";
import { useTheme } from "../contexts/ThemeContext";

interface GoalTypeData {
  goalType: string;
  count: number;
}

interface GoalTypeBreakdownChartProps {
  data: GoalTypeData[];
  title?: string;
}

export function GoalTypeBreakdownChart({
  data,
  title = "Goals by Type",
}: GoalTypeBreakdownChartProps) {
  const { colors, typography } = useTheme();
  const screenWidth = Dimensions.get("window").width;

  const chartColors = [
    colors.primary,
    colors.success,
    colors.warning,
    colors.accent,
    colors.secondary,
    colors.info,
  ];

  const chartData = data.map((item, index) => ({
    name: item.goalType
      .replace(/_/g, " ")
      .replace(/\b\w/g, (l) => l.toUpperCase()),
    count: item.count,
    color: chartColors[index % chartColors.length],
    legendFontColor: colors.textSecondary,
    legendFontSize: 12,
  }));

  const totalGoals = data.reduce((sum, item) => sum + item.count, 0);

  if (data.length === 0) {
    return (
      <View style={styles.container}>
        <Text style={[typography.h4, { color: colors.textPrimary }]}>
          {title}
        </Text>
        <View style={styles.emptyState}>
          <Text style={[typography.body, { color: colors.textTertiary }]}>
            No goals yet
          </Text>
        </View>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text
        style={[typography.h4, { color: colors.textPrimary, marginBottom: 16 }]}
      >
        {title}
      </Text>

      {/* Summary Stats */}
      <View style={styles.summaryRow}>
        <View style={styles.summaryItem}>
          <Text
            style={[
              typography.statLarge,
              { color: colors.primary, fontSize: 32 },
            ]}
          >
            {totalGoals}
          </Text>
          <Text style={[typography.caption, { color: colors.textTertiary }]}>
            Total Goals
          </Text>
        </View>
        <View style={styles.summaryItem}>
          <Text
            style={[
              typography.statLarge,
              { color: colors.success, fontSize: 32 },
            ]}
          >
            {data.length}
          </Text>
          <Text style={[typography.caption, { color: colors.textTertiary }]}>
            Types
          </Text>
        </View>
      </View>

      <View style={styles.chartContainer}>
        <PieChart
          data={chartData}
          width={screenWidth - 80}
          height={160}
          chartConfig={{
            color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
          }}
          accessor="count"
          backgroundColor="transparent"
          paddingLeft="15"
          absolute
        />
      </View>

      {/* Legend */}
      <View style={styles.legendGrid}>
        {data.map((item, index) => (
          <View key={item.goalType} style={styles.legendItem}>
            <View
              style={[
                styles.legendDot,
                { backgroundColor: chartColors[index % chartColors.length] },
              ]}
            />
            <Text
              style={[
                typography.caption,
                { color: colors.textSecondary, flex: 1 },
              ]}
              numberOfLines={1}
            >
              {item.goalType
                .replace(/_/g, " ")
                .replace(/\b\w/g, (l) => l.toUpperCase())}
            </Text>
            <Text
              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
            >
              {item.count}
            </Text>
          </View>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 16,
    padding: 4,
  },
  summaryRow: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginBottom: 16,
    paddingVertical: 12,
  },
  summaryItem: {
    alignItems: "center",
  },
  chartContainer: {
    alignItems: "center",
    marginBottom: 16,
  },
  legendGrid: {
    gap: 10,
  },
  legendItem: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
  },
  legendDot: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  emptyState: {
    paddingVertical: 32,
    alignItems: "center",
  },
});
