import { QuickAddModal } from "@/src/components/features/transactions/QuickAddModal";
import { TransactionItem } from "@/src/components/features/transactions/TransactionItem";
import { EditTransactionModal } from "@/src/components/features/transactions/EditTransactionModal";
import { CarryOverBanner } from "@/src/components/features/transactions/CarryOverBanner";
import { MonthSummaryHeader } from "@/src/components/features/transactions/MonthSummaryHeader";
import { AddCategoryModal } from "@/src/components/features/categories/AddCategoryModal";
import { ModalHeader } from "@/src/components/ui/ModalHeader";
import { EmptyState } from "@/src/components/ui/EmptyState";
import { Numpad } from "@/src/components/ui/Numpad";
import { useTransactions, useActivateFixed, useMonthBalance, useDeleteTransaction } from "@/src/hooks/useTransactions";
import type { TransactionWithCategory } from "@/src/hooks/useTransactions";
import { useAuthStore } from "@/src/stores/auth.store";
import { useSettlementV2, useCreateMonthlyTransfer, useNettoMonth, type MonthlyTransfer } from "@/src/hooks/useFixedCosts";
import { useHouseholdSettings } from "@/src/hooks/useHouseholdSettings";
import { useMonthStatus } from "@/src/hooks/useMonthStatus";
import { currentMonthStr, addMonths, monthLabel, monthDateRange } from "@/src/utils/date";
import { formatEur } from "@/src/utils/format";
import { handleNumpadKey, parseAmountStr } from "@/src/utils/numpad";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import type { Category } from "@/src/hooks/useCategories";
import {
  ActivityIndicator,
  Alert,
  FlatList,
  Modal,
  Pressable,
  RefreshControl,
  Text,
  TextInput,
  View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { TAB_COLORS } from "@/src/constants/colors";

const ACCENT = TAB_COLORS.household;

// ── Record Transfer Modal ─────────────────────────────────────────────────────

function RecordTransferModal({
  month,
  toUserId,
  onClose,
}: {
  month: string;
  toUserId: string;
  onClose: () => void;
}) {
  const [amountStr, setAmountStr] = useState("0");
  const [note, setNote] = useState("");
  const { t } = useTranslation();
  const { mutate: createTransfer, isPending } = useCreateMonthlyTransfer();

  function handleNumpad(key: string) {
    setAmountStr((prev) => handleNumpadKey(prev, key));
  }

  function handleSave() {
    const amount = parseAmountStr(amountStr);
    if (!amount || amount <= 0) return;
    createTransfer(
      { month, toUserId, amount, note: note.trim() || undefined },
      { onSuccess: onClose },
    );
  }

  const canSave = parseAmountStr(amountStr) > 0;

  return (
    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
      <View className="flex-1 bg-white">
        <ModalHeader
          title={t('household.settlement.recordTransfer')}
          onClose={onClose}
          closeLabel={t('common.cancel')}
          onSave={handleSave}
          saveLabel={t('household.settlement.book')}
          saveDisabled={!canSave}
          saveLoading={isPending}
          saveColor={ACCENT}
        />
        <View className="items-center py-6">
          <Text className="text-5xl font-bold text-gray-900">€ {amountStr}</Text>
          <Text className="text-sm text-gray-400 mt-1">{t('household.settlement.transferAmount')}</Text>
        </View>
        <View className="px-4 mb-4">
          <TextInput
            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
            placeholder={t('household.settlement.notePlaceholder')}
            value={note}
            onChangeText={setNote}
          />
        </View>
        <Numpad onKeyPress={handleNumpad} />
      </View>
    </Modal>
  );
}

// ── Settlement Banner V2 ──────────────────────────────────────────────────────

function SettlementBanner({ month, isCurrent }: { month: string; isCurrent: boolean }) {
  const userId = useAuthStore((s) => s.user?.id);
  const router = useRouter();
  const { t } = useTranslation();
  const { data: settlement, isLoading } = useSettlementV2(month);
  const { data: hhSettings } = useHouseholdSettings();
  const { data: monthStatus } = useMonthStatus(month);
  const [expanded, setExpanded] = useState(false);
  const [showTransferModal, setShowTransferModal] = useState(false);
  const isClosed = monthStatus?.status === "closed";

  if (isLoading) {
    return (
      <View className="mx-4 mt-4 mb-1 rounded-2xl bg-gray-100 p-4 items-center">
        <ActivityIndicator size="small" color="#9ca3af" />
      </View>
    );
  }

  if (!settlement || settlement.memberCount <= 1) return null;

  // Closed month — show lock banner
  if (isClosed && monthStatus) {
    const closedDate = monthStatus.closedAt
      ? new Date(monthStatus.closedAt).toLocaleDateString("de-DE", { day: "numeric", month: "long", year: "numeric" })
      : "";
    return (
      <View
        className="mx-4 mt-4 mb-1 rounded-2xl px-4 py-3 flex-row items-center gap-3"
        style={{ backgroundColor: "#f0fdf4", borderWidth: 1, borderColor: "#bbf7d0" }}
      >
        <Ionicons name="lock-closed" size={18} color="#16a34a" />
        <View className="flex-1">
          <Text className="text-xs text-gray-400">{t('household.settlement.closed')}</Text>
          <Text className="text-sm font-semibold text-green-700">
            ✓ {closedDate}
            {monthStatus.finalAmount != null && monthStatus.finalAmount > 0
              ? ` · ${formatEur(monthStatus.finalAmount)}`
              : ""}
          </Text>
        </View>
      </View>
    );
  }

  const remaining = settlement.remaining;
  const isOwing = remaining > 0.005;
  const isReceiving = remaining < -0.005;
  const isEven = !isOwing && !isReceiving;

  const bannerBg = isOwing ? "#fff7ed" : isReceiving ? "#f0fdf4" : "#f9fafb";
  const bannerBorder = isOwing ? "#fed7aa" : isReceiving ? "#bbf7d0" : "#e5e7eb";
  const amountColor = isOwing ? "#ea580c" : isReceiving ? "#16a34a" : "#6b7280";

  const others = settlement.members.filter((m) => m.userId !== userId);
  const otherName = hhSettings?.partnerName ?? others[0]?.name ?? "den anderen";
  const otherUserId = others[0]?.userId ?? "";

  let mainText = t('household.settlement.allSettled');
  if (isOwing) mainText = t('household.settlement.youOwe', { name: otherName });
  else if (isReceiving) mainText = t('household.settlement.theyOwe', { name: otherName });

  return (
    <>
      <View
        style={{ backgroundColor: bannerBg, borderColor: bannerBorder, borderWidth: 1 }}
        className="mx-4 mt-4 mb-1 rounded-2xl overflow-hidden"
      >
        {/* Summary row */}
        <Pressable
          onPress={() => setExpanded((v) => !v)}
          className="flex-row items-center px-4 py-3 active:opacity-80"
        >
          <View className="flex-1">
            <Text className="text-xs text-gray-400 mb-0.5">{t('household.settlement.monthlySettlement')}</Text>
            <Text className="text-sm font-medium" style={{ color: amountColor }}>{mainText}</Text>
            {!isEven && (
              <Text className="text-3xl font-bold" style={{ color: amountColor }}>
                {formatEur(Math.abs(remaining))}
              </Text>
            )}
            {isEven && (
              <Text className="text-base font-bold text-green-600">{t('household.settlement.allSettled')}</Text>
            )}
          </View>
          <Ionicons name={expanded ? "chevron-up" : "chevron-down"} size={14} color="#9ca3af" />
        </Pressable>

        {/* Expandable detail */}
        {expanded && (
          <View style={{ backgroundColor: "rgba(0,0,0,0.03)" }} className="px-4 pb-4">
            {/* Haushalt breakdown */}
            <View className="py-2 gap-1.5">
              <View className="flex-row justify-between">
                <Text className="text-xs text-gray-500">{t('household.settlement.householdExpenses')}</Text>
                <Text className="text-xs font-medium text-gray-700">{formatEur(settlement.householdExpenses)}</Text>
              </View>
              {settlement.householdIncome > 0 && (
                <View className="flex-row justify-between">
                  <Text className="text-xs text-gray-500">{t('household.settlement.householdIncome')}</Text>
                  <Text className="text-xs font-medium text-green-600">−{formatEur(settlement.householdIncome)}</Text>
                </View>
              )}
              <View className="flex-row justify-between">
                <Text className="text-xs font-semibold text-gray-600">{t('household.settlement.yourShare', { percent: settlement.userSharePercent ?? 50 })}</Text>
                <Text className="text-xs font-semibold text-gray-800">{formatEur(settlement.perMemberShare)}</Text>
              </View>
            </View>

            {/* Who paid what */}
            <View className="h-px bg-gray-200 my-2" />
            <View className="gap-1.5">
              {settlement.members.map((mem) => {
                const isMe = mem.userId === userId;
                const name = isMe ? "Du" : otherName;
                const paidAmount = isMe ? settlement.myOwnExpenses : (settlement.householdExpenses - settlement.myOwnExpenses);
                if (paidAmount < 0.01) return null;
                return (
                  <View key={mem.userId} className="flex-row justify-between">
                    <Text className="text-xs text-gray-500">{t('household.settlement.paidBy', { name })}</Text>
                    <Text className="text-xs font-medium text-gray-700">{formatEur(paidAmount)}</Text>
                  </View>
                );
              })}
            </View>

            {/* Fixed transfer items — summarised */}
            {settlement.lineItemsTotal > 0 && (
              <>
                <View className="h-px bg-gray-200 my-2" />
                <View className="flex-row justify-between">
                  <Text className="text-xs text-gray-500">+ {t('household.settlement.fixedTransfers')}</Text>
                  <Text className="text-xs font-medium text-gray-700">{formatEur(settlement.lineItemsTotal)}</Text>
                </View>
              </>
            )}

            {/* Total owed */}
            <View className="h-px bg-gray-200 my-2" />
            <View className="flex-row justify-between mb-3">
              <Text className="text-xs font-bold text-gray-700">{t('household.settlement.toTransfer')}</Text>
              <Text className="text-xs font-bold" style={{ color: amountColor }}>{formatEur(settlement.totalOwed)}</Text>
            </View>

            {/* Already transferred */}
            <View className="flex-row items-center justify-between">
              <View>
                <Text className="text-xs text-gray-400">{t('household.settlement.alreadyTransferred')}</Text>
                <Text className="text-sm font-semibold text-gray-700">{formatEur(settlement.alreadyTransferred)}</Text>
              </View>
              {isOwing && (
                <Pressable
                  onPress={() => setShowTransferModal(true)}
                  style={{ backgroundColor: ACCENT }}
                  className="px-4 py-2 rounded-xl active:opacity-80"
                >
                  <Text className="text-xs font-semibold text-white">+ {t('household.settlement.book')}</Text>
                </Pressable>
              )}
            </View>

            {/* Close month button */}
            {isCurrent && (
              <Pressable
                onPress={() => router.push({ pathname: "/(app)/months/close", params: { month } })}
                className="mt-3 flex-row items-center justify-center gap-2 py-2.5 rounded-xl active:opacity-80"
                style={{ backgroundColor: "#f3f4f6", borderWidth: 1, borderColor: "#e5e7eb" }}
              >
                <Ionicons name="lock-closed-outline" size={14} color="#6b7280" />
                <Text className="text-xs font-semibold text-gray-600">{t('household.settlement.closeMonth')}</Text>
              </Pressable>
            )}

            {/* Transfer history */}
            {settlement.transfers.length > 0 && (
              <View className="mt-3 gap-1">
                {settlement.transfers.map((t: MonthlyTransfer) => (
                  <View key={t.id} className="flex-row justify-between">
                    <Text className="text-xs text-gray-400">
                      {new Date(t.createdAt).toLocaleDateString("de-DE", { day: "numeric", month: "short" })}
                      {t.note ? ` · ${t.note}` : ""}
                    </Text>
                    <Text className="text-xs font-medium text-gray-600">{formatEur(t.amount)}</Text>
                  </View>
                ))}
              </View>
            )}
          </View>
        )}
      </View>

      {showTransferModal && (
        <RecordTransferModal
          month={month}
          toUserId={otherUserId}
          onClose={() => setShowTransferModal(false)}
        />
      )}
    </>
  );
}

// ── Netto Card ────────────────────────────────────────────────────────────────

function NettoCard({ month }: { month: string }) {
  const { data, isLoading } = useNettoMonth(month);
  const { t } = useTranslation();
  const [expanded, setExpanded] = useState(false);

  if (isLoading) {
    return (
      <View className="mx-4 mt-2 mb-1 rounded-2xl bg-white p-4 items-center" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
        <ActivityIndicator size="small" color="#9ca3af" />
      </View>
    );
  }

  if (!data) return null;

  const isPositive = data.netto >= 0;
  const nettoColor = isPositive ? "#16a34a" : "#dc2626";
  const nettoIcon = isPositive ? "trending-up" : "trending-down";

  return (
    <View
      className="mx-4 mt-2 mb-1 rounded-2xl bg-white overflow-hidden"
      style={{ borderWidth: 1, borderColor: "#f3f4f6" }}
    >
      <Pressable
        onPress={() => setExpanded((v) => !v)}
        className="flex-row items-center px-4 py-3 active:opacity-80"
      >
        <View
          className="w-9 h-9 rounded-xl items-center justify-center mr-3"
          style={{ backgroundColor: isPositive ? "#dcfce7" : "#fee2e2" }}
        >
          <Ionicons name={nettoIcon as React.ComponentProps<typeof Ionicons>["name"]} size={18} color={nettoColor} />
        </View>
        <View className="flex-1">
          <Text className="text-xs text-gray-400">{t('household.nettoMonth')}</Text>
          <Text className="text-xl font-bold" style={{ color: nettoColor }}>
            {isPositive ? "+" : "−"}{formatEur(Math.abs(data.netto))}
          </Text>
        </View>
        <View className="items-end mr-2">
          <Text className="text-xs text-gray-400">{t('household.income')}</Text>
          <Text className="text-sm font-semibold text-green-600">+{formatEur(data.totalIncome)}</Text>
        </View>
        <Ionicons name={expanded ? "chevron-up" : "chevron-down"} size={14} color="#9ca3af" />
      </Pressable>

      {expanded && (
        <View className="px-4 pb-4" style={{ backgroundColor: "rgba(0,0,0,0.02)" }}>
          {/* Income breakdown */}
          {data.incomeByScope.length > 0 ? (
            <>
              <Text className="text-xs font-medium text-gray-400 mb-2">Einnahmen nach Bereich</Text>
              {data.incomeByScope.map((s) => (
                <View key={s.scope} className="flex-row justify-between mb-1">
                  <Text className="text-xs text-gray-500">{s.label}</Text>
                  <Text className="text-xs font-medium text-green-600">+{formatEur(s.amount)}</Text>
                </View>
              ))}
              <View className="h-px bg-gray-100 my-2" />
            </>
          ) : (
            <Text className="text-xs text-gray-400 mb-2">Keine Einnahmen gebucht</Text>
          )}

          {/* Expenses */}
          <View className="flex-row justify-between mb-1">
            <Text className="text-xs text-gray-500">Ausgaben (alle Bereiche)</Text>
            <Text className="text-xs font-medium text-red-500">−{formatEur(data.totalExpenses)}</Text>
          </View>

          <View className="h-px bg-gray-100 my-2" />
          <View className="flex-row justify-between">
            <Text className="text-xs font-bold text-gray-700">Netto</Text>
            <Text className="text-xs font-bold" style={{ color: nettoColor }}>
              {isPositive ? "+" : "−"}{formatEur(Math.abs(data.netto))}
            </Text>
          </View>
        </View>
      )}
    </View>
  );
}

// ── Month Switcher ─────────────────────────────────────────────────────────────

function MonthSwitcher({
  month,
  isLocked,
  onPrev,
  onNext,
}: {
  month: string;
  isLocked: boolean;
  onPrev: () => void;
  onNext: () => void;
}) {
  const isCurrent = month === currentMonthStr();
  return (
    <View className="flex-row items-center justify-center gap-4 py-3">
      <Pressable onPress={onPrev} className="p-1 active:opacity-50">
        <Ionicons name="chevron-back" size={18} color="#6b7280" />
      </Pressable>
      <View className="flex-row items-center gap-1.5 w-32 justify-center">
        {isLocked && <Ionicons name="lock-closed" size={12} color="#9ca3af" />}
        <Text className="text-sm font-semibold text-gray-800 text-center">
          {monthLabel(month)}
        </Text>
      </View>
      <Pressable
        onPress={onNext}
        disabled={isCurrent}
        className="p-1 active:opacity-50"
        style={{ opacity: isCurrent ? 0.3 : 1 }}
      >
        <Ionicons name="chevron-forward" size={18} color="#6b7280" />
      </Pressable>
    </View>
  );
}

// ── Main Screen ───────────────────────────────────────────────────────────────

type FilterType = "all" | "income" | "expense";

export default function HaushaltScreen() {
  const insets = useSafeAreaInsets();
  const { t } = useTranslation();
  const router = useRouter();
  const [month, setMonth] = useState(currentMonthStr());
  const [filter, setFilter] = useState<FilterType>("all");
  const [showAddModal, setShowAddModal] = useState(false);
  const [showFabMenu, setShowFabMenu] = useState(false);
  const [showAddCategory, setShowAddCategory] = useState(false);
  const [addCategoryType, setAddCategoryType] = useState<"expense" | "income">("expense");
  const [newCategory, setNewCategory] = useState<Category | null>(null);
  const [editTransaction, setEditTransaction] = useState<TransactionWithCategory | null>(null);
  const { mutate: deleteTransaction } = useDeleteTransaction();
  const { data: monthStatus } = useMonthStatus(month);
  const isLocked = monthStatus?.status === "closed";

  const isCurrent = month === currentMonthStr();
  const { mutate: activateFixed } = useActivateFixed();
  useEffect(() => {
    if (isCurrent) {
      activateFixed({ month, scope: "household" });
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [month]);

  const [fromDate, toDate] = monthDateRange(month);

  const txFilter = {
    scope: "household" as const,
    from: fromDate,
    to: toDate,
    ...(filter !== "all" ? { type: filter as "income" | "expense" } : {}),
  };

  const { data: transactions = [], isLoading, refetch, isRefetching } = useTransactions(txFilter);
  const { data: balance, isLoading: balanceLoading } = useMonthBalance("household", month);

  function renderEmpty() {
    if (isLoading) return null;
    return (
      <EmptyState
        icon="wallet-outline"
        title={t('household.noTransactions')}
        subtitle={t('household.noTransactionsHint')}
      />
    );
  }

  return (
    <View className="flex-1 bg-gray-50">
      {/* Header */}
      <View style={{ backgroundColor: "#fff", paddingTop: insets.top, borderBottomWidth: 1, borderBottomColor: "#f3f4f6" }}>
        <MonthSwitcher
          month={month}
          isLocked={isLocked}
          onPrev={() => setMonth((m) => addMonths(m, -1))}
          onNext={() => setMonth((m) => addMonths(m, 1))}
        />
      </View>

      <FlatList
        data={transactions}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View className="bg-white">
            <TransactionItem
              transaction={item}
              onPress={isLocked ? () => {} : setEditTransaction}
              onDelete={isLocked ? () => {} : (t) => deleteTransaction(t.id)}
              locked={isLocked}
            />
          </View>
        )}
        ListHeaderComponent={
          <View className="bg-gray-50">
            <SettlementBanner month={month} isCurrent={isCurrent} />
            <NettoCard month={month} />

            <MonthSummaryHeader
              income={balance?.income}
              expense={balance?.expense}
              balance={balance?.balance}
              isLoading={balanceLoading}
              accentColor={ACCENT}
            />

            <CarryOverBanner month={month} scope="household" />

            {/* Filter Bar */}
            <View className="flex-row px-4 py-3 gap-2 bg-white border-b border-gray-100 mt-3">
              {(["all", "expense", "income"] as const).map((f) => (
                <Pressable
                  key={f}
                  onPress={() => setFilter(f)}
                  style={{ backgroundColor: filter === f ? ACCENT : "#f3f4f6" }}
                  className="px-4 py-1.5 rounded-full"
                >
                  <Text
                    className="text-sm font-medium"
                    style={{ color: filter === f ? "#fff" : "#4b5563" }}
                  >
                    {f === "all" ? t('household.all') : f === "expense" ? t('household.expenses') : t('household.income')}
                  </Text>
                </Pressable>
              ))}
            </View>
          </View>
        }
        ListEmptyComponent={renderEmpty}
        refreshControl={
          <RefreshControl
            refreshing={isRefetching}
            onRefresh={() => void refetch()}
            tintColor={ACCENT}
          />
        }
        ItemSeparatorComponent={() => <View className="h-px bg-gray-50 ml-16" />}
        contentContainerStyle={transactions.length === 0 ? { flex: 1 } : undefined}
      />

      {isLoading && (
        <View className="absolute inset-0 items-center justify-center">
          <ActivityIndicator size="large" color={ACCENT} />
        </View>
      )}

      {/* FAB — hidden for locked months */}
      {!isLocked && (
        <>
          {/* Backdrop */}
          {showFabMenu && (
            <Pressable
              className="absolute inset-0"
              style={{ backgroundColor: "rgba(0,0,0,0.25)" }}
              onPress={() => setShowFabMenu(false)}
            />
          )}

          {/* FAB menu — anchored above FAB, zIndex above backdrop */}
          {showFabMenu && (
            <View
              className="absolute right-6 bg-white rounded-2xl overflow-hidden"
              style={{
                bottom: insets.bottom + 80,
                minWidth: 200,
                shadowColor: "#000",
                shadowOpacity: 0.18,
                shadowRadius: 16,
                shadowOffset: { width: 0, height: 6 },
                elevation: 12,
                zIndex: 100,
              }}
            >
              <Pressable
                onPress={() => {
                  setShowFabMenu(false);
                  setShowAddModal(true);
                }}
                className="flex-row items-center gap-3 px-5 py-4 active:bg-gray-50"
              >
                <Ionicons name="pencil-outline" size={20} color={ACCENT} />
                <Text className="text-sm font-medium text-gray-800">
                  {t("scanner.manualEntry")}
                </Text>
              </Pressable>
              <View className="h-px bg-gray-100" />
              <Pressable
                onPress={() => {
                  setShowFabMenu(false);
                  router.push("/(app)/scanner");
                }}
                className="flex-row items-center gap-3 px-5 py-4 active:bg-gray-50"
              >
                <Ionicons name="camera-outline" size={20} color={ACCENT} />
                <Text className="text-sm font-medium text-gray-800">
                  {t("scanner.scanReceipt")}
                </Text>
              </Pressable>
            </View>
          )}

          {/* FAB button */}
          <Pressable
            onPress={() => setShowFabMenu((v) => !v)}
            style={{ backgroundColor: ACCENT, bottom: insets.bottom + 20, zIndex: 101 }}
            className="absolute right-6 w-14 h-14 rounded-full items-center justify-center shadow-lg active:opacity-80"
          >
            <Ionicons name={showFabMenu ? "close" : "add"} size={28} color="#fff" />
          </Pressable>
        </>
      )}

      <QuickAddModal
        visible={showAddModal}
        onClose={() => { setShowAddModal(false); setNewCategory(null); }}
        onRequestAddCategory={(t) => { setAddCategoryType(t); setShowAddModal(false); setShowAddCategory(true); }}
        newCategory={newCategory}
        defaultScope="household"
      />
      <AddCategoryModal
        visible={showAddCategory}
        onClose={() => { setShowAddCategory(false); setShowAddModal(true); }}
        defaultType={addCategoryType}
        onCreated={(cat) => { setNewCategory(cat); setShowAddCategory(false); setShowAddModal(true); }}
      />
      {editTransaction && (
        <EditTransactionModal
          transaction={editTransaction}
          onClose={() => setEditTransaction(null)}
        />
      )}
    </View>
  );
}