import { Ionicons } from "@expo/vector-icons";
import { useState } from "react";
import {
  ActivityIndicator,
  Alert,
  Modal,
  Pressable,
  ScrollView,
  SectionList,
  Text,
  TextInput,
  View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter } from "expo-router";
import { useTranslation } from "react-i18next";
import {
  useFixedCosts,
  useCreateFixedCost,
  useUpdateFixedCost,
  useDeleteFixedCost,
  type FixedCost,
  type CreateFixedCostInput,
} from "@/src/hooks/useFixedCosts";
import { useCategories } from "@/src/hooks/useCategories";
import { ModalHeader } from "@/src/components/ui/ModalHeader";
import { Numpad } from "@/src/components/ui/Numpad";
import { formatEur } from "@/src/utils/format";
import { handleNumpadKey, parseAmountStr } from "@/src/utils/numpad";

const SCOPE_LABEL_KEYS: Record<string, string> = {
  household: "fixedCosts.household",
  private: "fixedCosts.me",
  child: "fixedCosts.children",
};

// ── Add / Edit Modal ──────────────────────────────────────────────────────────

type ModalMode =
  | { kind: "add"; scope: "household" | "private" | "child" }
  | { kind: "edit"; item: FixedCost };

function FixedCostModal({
  mode,
  onClose,
}: {
  mode: ModalMode;
  onClose: () => void;
}) {
  const isEdit = mode.kind === "edit";
  const { data: categories = [] } = useCategories();
  const { mutate: create, isPending: creating } = useCreateFixedCost();
  const { mutate: update, isPending: updating } = useUpdateFixedCost();
  const { t: tFn } = useTranslation();

  const [label, setLabel] = useState(isEdit ? mode.item.label : "");
  const [amountStr, setAmountStr] = useState(
    isEdit ? String(mode.item.amount).replace(".", ",") : "0",
  );
  const [type, setType] = useState<"expense" | "income">(
    isEdit ? mode.item.type : "expense",
  );
  const [categoryId, setCategoryId] = useState<string | null>(
    isEdit ? (mode.item.categoryId ?? null) : null,
  );
  const [showCategoryPicker, setShowCategoryPicker] = useState(false);

  const filteredCategories = categories.filter((c) => c.type === type);
  const selectedCategory = categories.find((c) => c.id === categoryId) ?? null;
  const isPending = creating || updating;

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

  function handleSave() {
    const amount = parseAmountStr(amountStr);
    if (!label.trim() || !amount || amount <= 0) return;

    if (isEdit) {
      update(
        { id: mode.item.id, input: { label: label.trim(), amount, categoryId } },
        { onSuccess: onClose },
      );
    } else {
      const input: CreateFixedCostInput = {
        scope: mode.scope,
        label: label.trim(),
        amount,
        type,
        categoryId: categoryId ?? undefined,
      };
      create(input, { onSuccess: onClose });
    }
  }

  const canSave = label.trim().length > 0 && parseAmountStr(amountStr) > 0;

  return (
    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
      <View className="flex-1 bg-white">
        <ModalHeader
          title={isEdit ? tFn('fixedCosts.editTitle') : tFn('fixedCosts.addTitle')}
          onClose={onClose}
          closeLabel={tFn('common.cancel')}
          onSave={handleSave}
          saveLabel={tFn('common.save')}
          saveDisabled={!canSave}
          saveLoading={isPending}
        />

        <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingBottom: 24 }}>
          {/* Amount */}
          <View className="items-center py-6">
            <Text className="text-5xl font-bold text-gray-900">€ {amountStr}</Text>
          </View>

          <View className="px-4 gap-3 mb-4">
            {/* Type toggle (only for new) */}
            {!isEdit && (
              <View className="flex-row p-1 bg-gray-100 rounded-xl">
                {(["expense", "income"] as const).map((t) => (
                  <Pressable
                    key={t}
                    onPress={() => { setType(t); setCategoryId(null); }}
                    className={`flex-1 py-2 rounded-lg items-center ${type === t ? "bg-white shadow-sm" : ""}`}
                  >
                    <Text className={`font-medium ${type === t ? (t === "expense" ? "text-red-600" : "text-green-600") : "text-gray-500"}`}>
                      {t === "expense" ? tFn('fixedCosts.expenseType') : tFn('fixedCosts.incomeType')}
                    </Text>
                  </Pressable>
                ))}
              </View>
            )}

            {/* Label */}
            <View>
              <Text className="text-sm font-medium text-gray-700 mb-1">{tFn('fixedCosts.labelRequired')}</Text>
              <TextInput
                className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
                placeholder={tFn('fixedCosts.labelPlaceholder')}
                value={label}
                onChangeText={setLabel}
              />
            </View>

            {/* Category */}
            <View>
              <Text className="text-sm font-medium text-gray-700 mb-1">{tFn('fixedCosts.categoryOptional')}</Text>
              <Pressable
                onPress={() => setShowCategoryPicker((v) => !v)}
                className="flex-row items-center bg-gray-50 border border-gray-200 rounded-xl px-4 py-3"
              >
                <Text className="flex-1 text-base" style={{ color: selectedCategory ? "#111827" : "#9ca3af" }}>
                  {selectedCategory ? selectedCategory.name : tFn('common.select')}
                </Text>
                {selectedCategory ? (
                  <Pressable onPress={(e) => { e.stopPropagation(); setCategoryId(null); }} hitSlop={8}>
                    <Ionicons name="close-circle" size={18} color="#9ca3af" />
                  </Pressable>
                ) : (
                  <Ionicons name={showCategoryPicker ? "chevron-up" : "chevron-down"} size={14} color="#9ca3af" />
                )}
              </Pressable>
              {showCategoryPicker && (
                <View className="mt-1 bg-white border border-gray-200 rounded-xl overflow-hidden">
                  {filteredCategories.map((cat) => (
                    <Pressable
                      key={cat.id}
                      onPress={() => { setCategoryId(cat.id); setShowCategoryPicker(false); }}
                      className="flex-row items-center px-4 py-3 active:bg-gray-50"
                      style={{ borderBottomWidth: 1, borderBottomColor: "#f3f4f6" }}
                    >
                      <View className="w-6 h-6 rounded-full mr-3 items-center justify-center" style={{ backgroundColor: cat.color ?? "#6b7280" }}>
                        <Ionicons name={(cat.icon ?? "ellipsis-horizontal-circle-outline") as React.ComponentProps<typeof Ionicons>["name"]} size={12} color="#fff" />
                      </View>
                      <Text className="text-sm text-gray-800">{cat.name}</Text>
                      {categoryId === cat.id && <Ionicons name="checkmark" size={16} color="#2563EB" style={{ marginLeft: "auto" }} />}
                    </Pressable>
                  ))}
                </View>
              )}
            </View>
          </View>

          {/* Numpad */}
          <Numpad onKeyPress={handleNumpad} />
        </ScrollView>
      </View>
    </Modal>
  );
}

// ── Row ───────────────────────────────────────────────────────────────────────

function FixedCostRow({
  item,
  onEdit,
  onDelete,
}: {
  item: FixedCost;
  onEdit: (item: FixedCost) => void;
  onDelete: (item: FixedCost) => void;
}) {
  const { t } = useTranslation();
  return (
    <View className="flex-row items-center px-4 py-3 bg-white border-b border-gray-50">
      <View className="flex-1">
        <Text className="text-sm font-medium text-gray-900">{item.label}</Text>
        <Text className="text-xs text-gray-400 mt-0.5">
          {item.type === "expense" ? t('fixedCosts.expenseType') : t('fixedCosts.incomeType')} · {t('common.monthly')}
        </Text>
      </View>
      <Text className="text-sm font-semibold text-gray-800 mr-3">{formatEur(item.amount, false)}</Text>
      <Pressable onPress={() => onEdit(item)} hitSlop={8} className="mr-2 p-1">
        <Ionicons name="pencil-outline" size={16} color="#6b7280" />
      </Pressable>
      <Pressable onPress={() => onDelete(item)} hitSlop={8} className="p-1">
        <Ionicons name="trash-outline" size={16} color="#d1d5db" />
      </Pressable>
    </View>
  );
}

// ── Screen ────────────────────────────────────────────────────────────────────

export default function FixedCostsScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const { t } = useTranslation();
  const { data: allFixedCosts = [], isLoading } = useFixedCosts();
  const { mutate: deleteCost } = useDeleteFixedCost();
  const [modalMode, setModalMode] = useState<ModalMode | null>(null);

  const active = allFixedCosts.filter((fc) => fc.isActive);

  const sections = (["household", "private", "child"] as const)
    .map((scope) => ({
      scope,
      title: t(SCOPE_LABEL_KEYS[scope] ?? scope),
      data: active.filter((fc) => fc.scope === scope),
    }))
    .filter((s) => s.data.length > 0 || true); // always show all scopes

  function handleDelete(item: FixedCost) {
    Alert.alert(
      t('fixedCosts.pauseTitle'),
      t('fixedCosts.pauseMessage', { label: item.label }),
      [
        { text: t('common.cancel'), style: "cancel" },
        { text: t('fixedCosts.pause'), style: "destructive", onPress: () => deleteCost(item.id) },
      ],
    );
  }

  return (
    <View className="flex-1 bg-gray-50">
      {/* Header */}
      <View
        className="bg-white border-b border-gray-100"
        style={{ paddingTop: insets.top }}
      >
        <View className="flex-row items-center px-4 py-3">
          <Pressable onPress={() => router.push("/(app)/settings")} className="mr-3 p-1">
            <Ionicons name="chevron-back" size={22} color="#374151" />
          </Pressable>
          <Text className="text-base font-semibold text-gray-900 flex-1">{t('fixedCosts.title')}</Text>
        </View>
      </View>

      {isLoading ? (
        <View className="flex-1 items-center justify-center">
          <ActivityIndicator size="large" color="#2563EB" />
        </View>
      ) : (
        <SectionList
          sections={sections}
          keyExtractor={(item) => item.id}
          renderSectionHeader={({ section }) => (
            <View className="flex-row items-center justify-between px-4 py-3 bg-gray-50">
              <Text className="text-xs font-semibold uppercase text-gray-500 tracking-wide">
                {section.title}
              </Text>
              <Pressable
                onPress={() => setModalMode({ kind: "add", scope: section.scope })}
                className="flex-row items-center gap-1 px-3 py-1.5 rounded-full"
                style={{ backgroundColor: "#dbeafe" }}
              >
                <Ionicons name="add" size={14} color="#2563EB" />
                <Text className="text-xs font-semibold text-blue-600">{t('common.new')}</Text>
              </Pressable>
            </View>
          )}
          renderItem={({ item }) => (
            <FixedCostRow
              item={item}
              onEdit={(i) => setModalMode({ kind: "edit", item: i })}
              onDelete={handleDelete}
            />
          )}
          renderSectionFooter={({ section }) =>
            section.data.length === 0 ? (
              <View className="px-4 py-3 bg-white border-b border-gray-50">
                <Text className="text-sm text-gray-400 italic">{t('fixedCosts.noItems')}</Text>
              </View>
            ) : null
          }
          contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
        />
      )}

      {modalMode && (
        <FixedCostModal mode={modalMode} onClose={() => setModalMode(null)} />
      )}
    </View>
  );
}