import { Text, View } from "react-native";
import type { TransactionSummary } from "@/src/hooks/useTransactions";

type Props = {
  summary: TransactionSummary | undefined;
  isLoading: boolean;
  accentColor?: string;
};

function formatEur(amount: number) {
  return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(amount);
}

const monthLabel = new Intl.DateTimeFormat("de-DE", { month: "long", year: "numeric" }).format(new Date());

export function SummaryHeader({ summary, isLoading, accentColor = "#2563EB" }: Props) {
  const loading = isLoading || !summary;
  const income = loading ? null : formatEur(summary!.income);
  const expense = loading ? null : formatEur(summary!.expense);
  const balance = loading ? null : formatEur(summary!.balance);
  const balancePositive = !loading && summary!.balance >= 0;

  return (
    <View className="bg-blue-600 px-4 pb-5 pt-3">
      <Text className="text-center text-blue-200 text-xs mb-3" style={{ opacity: 0.8 }}>
        {monthLabel}
      </Text>
      <View className="flex-row">
        <View className="flex-1 items-center">
          <Text className="text-blue-200 text-xs mb-1">Einnahmen</Text>
          <Text className="text-white font-semibold text-base">
            {loading ? "—" : income}
          </Text>
        </View>
        <View className="w-px bg-blue-500 mx-2" />
        <View className="flex-1 items-center">
          <Text className="text-blue-200 text-xs mb-1">Ausgaben</Text>
          <Text className="text-white font-semibold text-base">
            {loading ? "—" : expense}
          </Text>
        </View>
        <View className="w-px bg-blue-500 mx-2" />
        <View className="flex-1 items-center">
          <Text className="text-blue-200 text-xs mb-1">Bilanz</Text>
          <Text
            className={`font-semibold text-base ${loading ? "text-blue-300" : balancePositive ? "text-green-300" : "text-red-300"}`}
          >
            {loading ? "—" : balance}
          </Text>
        </View>
      </View>
    </View>
  );
}
