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

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

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

  if (!insight) {
    return (
      <InsightCard
        category="Energia"
        body={
          <Text style={styles.empty}>
            Registre sono e humor para ver correlações.
          </Text>
        }
        accent="neutral"
        metric="—"
      />
    );
  }

  const meta = insight.metadata as { correlationScore: number; sampleSize: number };
  const { label, accent } = resolveCorrelation(meta.correlationScore, meta.sampleSize);

  return (
    <InsightCard
      category="Energia"
      body={insight.body}
      metric={label}
      accent={accent}
    />
  );
};

function resolveCorrelation(
  score: number,
  sampleSize: number,
): { label: string; accent: MetricAccent } {
  const pct = Math.round(Math.abs(score) * 100);
  const lowData = sampleSize < 5;

  if (score > 0.6)
    return { label: lowData ? "Alta*" : `+${pct}%`, accent: "green" };
  if (score > 0.3)
    return { label: lowData ? "Média*" : `+${pct}%`, accent: "green" };
  if (score >= -0.3)
    return { label: "~0%", accent: "neutral" };
  return { label: `-${pct}%`, accent: "purple" };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: Spacing.cardGap,
  },
  label: {
    ...Typography.labelSm,
    opacity: 0.6,
  },
  empty: {
    color: Colors.light.lightSlateGray,
    marginTop: 4,
  },
});