import React from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";
import { LineChart } from "react-native-chart-kit";
import { theme } from "../styles/theme";
import type { WeeklyTrendData } from "../api/types";

interface WeeklyProgressChartProps {
  weeklyData: WeeklyTrendData[];
  title?: string;
}

export function WeeklyProgressChart({
  weeklyData,
  title = "Weekly Progress",
}: WeeklyProgressChartProps) {
  const screenWidth = Dimensions.get("window").width;

  // Prepare chart data
  const labels = weeklyData.map((week) => week.weekLabel);
  const checkInsData = weeklyData.map((week) => week.checkIns);
  const goalsCompletedData = weeklyData.map((week) => week.goalsCompleted);
  const avgProgressData = weeklyData.map((week) => week.averageProgress);

  const chartConfig = {
    backgroundColor: theme.colors.white,
    backgroundGradientFrom: theme.colors.white,
    backgroundGradientTo: theme.colors.white,
    decimalPlaces: 0,
    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
    style: {
      borderRadius: theme.borderRadius.lg,
    },
    propsForDots: {
      r: "4",
      strokeWidth: "2",
      stroke: theme.colors.primary,
    },
  };

  const data = {
    labels,
    datasets: [
      {
        data: checkInsData,
        color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`, // Blue for check-ins
        strokeWidth: 2,
      },
      {
        data: goalsCompletedData,
        color: (opacity = 1) => `rgba(16, 185, 129, ${opacity})`, // Green for goals
        strokeWidth: 2,
      },
    ],
    legend: ["Check-ins", "Goals Completed"],
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <View style={styles.chartContainer}>
        <LineChart
          data={data}
          width={screenWidth - 60}
          height={220}
          chartConfig={chartConfig}
          bezier
          style={styles.chart}
          withInnerLines={true}
          withOuterLines={true}
          withVerticalLabels={true}
          withHorizontalLabels={true}
          fromZero={true}
        />
      </View>
      <View style={styles.legend}>
        <View style={styles.legendItem}>
          <View style={[styles.legendDot, { backgroundColor: "#3b82f6" }]} />
          <Text style={styles.legendText}>Check-ins</Text>
        </View>
        <View style={styles.legendItem}>
          <View style={[styles.legendDot, { backgroundColor: "#10b981" }]} />
          <Text style={styles.legendText}>Goals Completed</Text>
        </View>
      </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",
    marginBottom: 12,
  },
  chart: {
    marginVertical: 8,
    borderRadius: theme.borderRadius.lg,
  },
  legend: {
    flexDirection: "row",
    justifyContent: "center",
    gap: 20,
    paddingTop: 8,
  },
  legendItem: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  legendDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
  },
  legendText: {
    fontSize: theme.typography.fontSize.sm,
    color: theme.colors.gray500,
  },
});
