import { Ionicons } from "@expo/vector-icons";
import { useState } from "react";
import { Pressable, Text, View } from "react-native";
import type { Debt } from "@/src/hooks/useDebts";
import { useTranslation } from "react-i18next";
import { formatEur } from "@/src/utils/format";

type Props = {
  debt: Debt;
  onAddPayment: (debt: Debt) => void;
  onDelete: (debt: Debt) => void;
};

export function DebtCard({ debt, onAddPayment, onDelete }: Props) {
  const [expanded, setExpanded] = useState(false);
  const isClosed = debt.closedAt !== null;
  const accentColor = isClosed ? "#10b981" : "#7c3aed";
  const pct = Math.round(debt.progressPercent);
  const { t } = useTranslation();

  return (
    <View
      className="bg-white rounded-2xl mx-4 mb-2 overflow-hidden"
      style={{ borderWidth: 1, borderColor: isClosed ? "#d1fae5" : "#ede9fe" }}
    >
      {/* ── Collapsed row (always visible) ── */}
      <Pressable
        onPress={() => setExpanded((v) => !v)}
        className="flex-row items-center px-4 py-3 active:opacity-80"
      >
        {/* Icon */}
        <View
          className="w-9 h-9 rounded-full items-center justify-center mr-3"
          style={{ backgroundColor: isClosed ? "#d1fae5" : "#ede9fe" }}
        >
          <Ionicons
            name={isClosed ? "checkmark-circle" : "card-outline"}
            size={18}
            color={accentColor}
          />
        </View>

        {/* Label + progress bar */}
        <View className="flex-1 mr-2">
          <View className="flex-row items-center justify-between mb-1.5">
            <Text className="text-sm font-semibold text-gray-900" numberOfLines={1}>
              {debt.label}
            </Text>
            <Text className="text-xs font-bold ml-2" style={{ color: accentColor }}>
              {pct}%
            </Text>
          </View>
          <View className="h-1.5 bg-gray-100 rounded-full overflow-hidden">
            <View
              className="h-full rounded-full"
              style={{ width: `${debt.progressPercent}%`, backgroundColor: accentColor }}
            />
          </View>
          {debt.creditor ? (
            <Text className="text-xs text-gray-400 mt-1">{debt.creditor}</Text>
          ) : (
            <Text className="text-xs text-gray-400 mt-1">
              {t('debts.remainingLabel', { amount: formatEur(debt.remainingAmount) })}
            </Text>
          )}
        </View>

        {/* Chevron */}
        <Ionicons
          name={expanded ? "chevron-up" : "chevron-down"}
          size={14}
          color="#9ca3af"
        />
      </Pressable>

      {/* ── Expanded content ── */}
      {expanded && (
        <View style={{ borderTopWidth: 1, borderTopColor: "#f3f4f6" }}>
          {/* Amounts row */}
          <View className="flex-row px-4 py-3 justify-between">
            <View>
              <Text className="text-xs text-gray-400">{t('debts.paid')}</Text>
              <Text className="text-sm font-semibold" style={{ color: accentColor }}>
                {formatEur(debt.paidAmount, false)}
              </Text>
            </View>
            <View className="items-center">
              <Text className="text-xs text-gray-400">{t('debts.total')}</Text>
              <Text className="text-sm font-semibold text-gray-700">
                {formatEur(debt.totalAmount, false)}
              </Text>
            </View>
            <View className="items-end">
              <Text className="text-xs text-gray-400">{t('debts.openAmount')}</Text>
              <Text className="text-sm font-semibold text-gray-900">
                {formatEur(debt.remainingAmount, false)}
              </Text>
            </View>
          </View>

          {/* Notes */}
          {debt.notes && (
            <Text className="text-xs text-gray-400 px-4 pb-2">{debt.notes}</Text>
          )}

          {/* Action row */}
          <View className="flex-row gap-2 px-4 pb-4">
            {!isClosed && (
              <Pressable
                onPress={() => onAddPayment(debt)}
                style={{ backgroundColor: accentColor }}
                className="flex-1 py-2.5 rounded-xl items-center active:opacity-80"
              >
                <Text className="text-sm font-semibold text-white">+ {t('debts.payRate')}</Text>
              </Pressable>
            )}
            {!isClosed && (
              <Pressable
                onPress={() => onDelete(debt)}
                className="w-11 h-11 rounded-xl items-center justify-center"
                style={{ backgroundColor: "#fef2f2" }}
                hitSlop={4}
              >
                <Ionicons name="trash-outline" size={16} color="#ef4444" />
              </Pressable>
            )}
          </View>
        </View>
      )}
    </View>
  );
}
