import React from "react";
import { View, StyleSheet, ActivityIndicator } from "react-native";
import { Text } from "@/components/ui/Text";
import { Card } from "@/components/ui/Cards";
import { useInsight } from "@/hooks/useInsights.queries";
import { Colors, Spacing } from "@/constants/theme";
import { InsightCard } from "./InsightCard";

export const TriggerPatternWidget: React.FC = () => {
  const { data: insight, isLoading } = useInsight("TRIGGER_PATTERN");

  if (isLoading) {
    return (
      <Card style={styles.container}>
        <ActivityIndicator />
      </Card>
    );
  }

  if (!insight) {
    return (
      <InsightCard
        category="Gatilhos"
        body={
          <Text style={styles.empty}>
            Registre gatilhos com mais frequência para identificar padrões.
          </Text>
        }
        accent="neutral"
        metric="—"
      />
    );
  }

  const metadata = insight.metadata as {
    topCategory: string;
    topCount: number;
    total: number;
    distribution: Record<string, number>;
  };

  const pct =
    metadata.total > 0
      ? Math.round((metadata.topCount / metadata.total) * 100)
      : 0;

  return (
    <InsightCard
      category="Gatilhos"
      body={
        <View style={styles.bodyRow}>
          <Text style={styles.bodyText}>{insight.body}</Text>
        </View>
      }
      metric={`${pct}%`}
      accent="neutral"
      footnote="Percentual da categoria de gatilho mais frequente no período."
    />
  );
};

const styles = StyleSheet.create({
  container: {
    padding: Spacing.cardGap,
  },
  bodyRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  iconWrap: {
    width: 22,
    height: 22,
    borderRadius: 11,
    alignItems: "center",
    justifyContent: "center",
  },
  bodyText: {
    flex: 1,
    fontSize: 14,
    color: Colors.light.text,
    lineHeight: 20,
  },
  empty: {
    color: Colors.light.lightSlateGray,
    marginTop: 4,
  },
});