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

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

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

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

  // Color palette for different goal types
  const colors = [
    "#3b82f6", // Blue
    "#10b981", // Green
    "#f59e0b", // Orange
    "#8b5cf6", // Purple
    "#ec4899", // Pink
    "#06b6d4", // Cyan
  ];

  // Prepare chart data
  const chartData = data.map((item, index) => ({
    name: item.goalType,
    count: item.count,
    color: colors[index % colors.length],
    legendFontColor: theme.colors.gray600,
    legendFontSize: 12,
  }));

  const chartConfig = {
    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
  };

  if (data.length === 0) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>{title}</Text>
        <View style={styles.emptyState}>
          <Text style={styles.emptyText}>No goals yet</Text>
        </View>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <View style={styles.chartContainer}>
        <PieChart
          data={chartData}
          width={screenWidth - 60}
          height={200}
          chartConfig={chartConfig}
          accessor="count"
          backgroundColor="transparent"
          paddingLeft="15"
          absolute
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: theme.colors.white,
    borderRadius: theme.borderRadius.xl,
    padding: 16,
    marginBottom: 16,
    ...theme.shadows.medium,
  },
  title: {
    fontSize: theme.typography.fontSize.lg,
    fontWeight: theme.typography.fontWeight.bold,
    color: theme.colors.gray700,
    marginBottom: 12,
  },
  chartContainer: {
    alignItems: "center",
  },
  emptyState: {
    paddingVertical: 40,
    alignItems: "center",
  },
  emptyText: {
    fontSize: theme.typography.fontSize.sm,
    color: theme.colors.gray400,
  },
});
