import React, { useState, useEffect } from "react";
import {
  View,
  ScrollView,
  Keyboard,
  TouchableOpacity,
  Platform,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { ArrowLeftIcon, ChevronLeft, ChevronRight } from "lucide-react-native";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { Text } from "~/components/ui/text";
import Dropdown from "~/components/ui/dropdown";
import { router } from "expo-router";
import BackButton from "~/components/ui/backButton";
import { useRecipientsStore } from "~/lib/stores";
import { useTabStore } from "~/lib/stores";
import { ROUTES } from "~/lib/routes";
import { formatPhoneNumber } from "~/lib/utils/phoneUtils";
import ScreenWrapper from "~/components/ui/ScreenWrapper";
import ModalToast from "~/components/ui/toast";
import { useTranslation } from "react-i18next";
import { awardPoints } from "~/lib/services/pointsService";
import BottomSheet from "~/components/ui/bottomSheet";
import { Picker } from "react-native-wheel-pick";

const PROFILE_BANK_OPTIONS: { id: string; name: string }[] = [
  { id: "cbe", name: "Commercial Bank of Ethiopia" },
  { id: "dashen", name: "Dashen Bank" },
  { id: "abay", name: "Abay Bank" },
  { id: "awash", name: "Awash Bank" },
  { id: "hibret", name: "Hibret Bank" },
  { id: "telebirr", name: "Ethio Telecom (Telebirr)" },
  { id: "safaricom", name: "Safaricom M-PESA" },
];

export default function AddRecpi() {
  const { addRecipient, loading, addError, clearAddError } =
    useRecipientsStore();
  const { setLastVisitedTab } = useTabStore();
  const [fullName, setFullName] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);
  const [clientType, setClientType] = useState<"Individual" | "Business">(
    "Individual"
  );
  const [selectedBank, setSelectedBank] = useState<string | null>(null);
  const [accountNumberInput, setAccountNumberInput] = useState("");
  const [accountSheetVisible, setAccountSheetVisible] = useState(false);
  const [scheduleSheetVisible, setScheduleSheetVisible] = useState(false);
  const [scheduleFrequency, setScheduleFrequency] = useState("");
  const [scheduleHour, setScheduleHour] = useState("00");
  const [scheduleMinute, setScheduleMinute] = useState("00");
  const [schedulePeriod, setSchedulePeriod] = useState<"AM" | "PM">("AM");
  const [scheduleTime, setScheduleTime] = useState("");
  const [scheduleDate, setScheduleDate] = useState("");
  const { t } = useTranslation();

  const isTelecomWallet =
    selectedBank === "telebirr" || selectedBank === "safaricom";
  const accountLabel = isTelecomWallet ? "Phone Number" : "Account Number";
  const accountPlaceholder = isTelecomWallet
    ? "Enter phone number"
    : "Enter account number";

  // Time wheel options
  const HOURS = Array.from({ length: 24 }, (_, i) =>
    String(i).padStart(2, "0")
  );
  const MINUTES = Array.from({ length: 60 }, (_, i) =>
    String(i).padStart(2, "0")
  );
  const PERIODS: ("AM" | "PM")[] = ["AM", "PM"];

  // Calendar state for month navigation (UI-only)
  const today = new Date();
  const [calendarCursor, setCalendarCursor] = useState(() => {
    const start = new Date();
    start.setDate(1);
    return start;
  });

  const cursorYear = calendarCursor.getFullYear();
  const cursorMonth = calendarCursor.getMonth();
  const firstOfMonth = new Date(cursorYear, cursorMonth, 1);
  const lastOfMonth = new Date(cursorYear, cursorMonth + 1, 0);
  const firstWeekday = firstOfMonth.getDay(); // 0 = Sun

  const calendarDays = [
    // Leading empty slots before the 1st
    ...Array.from({ length: firstWeekday }, () => null),
    // Actual days
    ...Array.from({ length: lastOfMonth.getDate() }, (_, idx) => {
      const day = idx + 1;
      const key = `${cursorYear}-${cursorMonth + 1}-${day}`;
      const isToday =
        today.getFullYear() === cursorYear &&
        today.getMonth() === cursorMonth &&
        today.getDate() === day;
      return { key, label: String(day), isToday };
    }),
  ];

  const MONTH_NAMES = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ];

  const [toastVisible, setToastVisible] = useState(false);
  const [toastTitle, setToastTitle] = useState("");
  const [toastDescription, setToastDescription] = useState<string | undefined>(
    undefined
  );
  const [toastVariant, setToastVariant] = useState<
    "success" | "error" | "warning" | "info"
  >("info");
  const toastTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(
    null
  );

  // Keep a combined time string for potential future summary usage
  useEffect(() => {
    setScheduleTime(`${scheduleHour}:${scheduleMinute} ${schedulePeriod}`);
  }, [scheduleHour, scheduleMinute, schedulePeriod]);

  const showToast = (
    title: string,
    description?: string,
    variant: "success" | "error" | "warning" | "info" = "info"
  ) => {
    if (toastTimeoutRef.current) {
      clearTimeout(toastTimeoutRef.current);
    }

    setToastTitle(title);
    setToastDescription(description);
    setToastVariant(variant);
    setToastVisible(true);

    toastTimeoutRef.current = setTimeout(() => {
      setToastVisible(false);
      toastTimeoutRef.current = null;
    }, 2500);
  };

  // Set the tab state when component mounts
  useEffect(() => {
    setLastVisitedTab("/(tabs)/listrecipient");
  }, [setLastVisitedTab]);

  useEffect(() => {
    return () => {
      if (toastTimeoutRef.current) {
        clearTimeout(toastTimeoutRef.current);
      }
    };
  }, []);

  const handlePhoneChange = (value: string) => {
    const formatted = formatPhoneNumber(value);
    setPhoneNumber(formatted);
  };

  const validateForm = () => {
    if (!fullName.trim()) {
      showToast(
        t("addrecipient.validationErrorTitle"),
        t("addrecipient.validationFullNameRequired"),
        "error"
      );
      return false;
    }

    if (!phoneNumber.trim()) {
      showToast(
        t("addrecipient.validationErrorTitle"),
        t("addrecipient.validationPhoneRequired"),
        "error"
      );
      return false;
    }

    const cleanPhone = phoneNumber.replace(/[^+\d]/g, "");
    if (cleanPhone.length < 7) {
      showToast(
        t("addrecipient.validationErrorTitle"),
        t("addrecipient.validationPhoneInvalid"),
        "error"
      );
      return false;
    }

    return true;
  };

  const handleAddRecipient = async () => {
    Keyboard.dismiss();

    if (!validateForm()) return;

    setIsSubmitting(true);
    setHasAttemptedSubmit(true);

    await addRecipient({
      fullName: fullName.trim(),
      phoneNumber: phoneNumber.trim(),
    });

    setIsSubmitting(false);
  };

  // Show error if any
  useEffect(() => {
    if (addError) {
      showToast(
        t("addrecipient.toastErrorTitle"),
        addError || t("addrecipient.toastAddError"),
        "error"
      );
      // Clear the error after showing it
      clearAddError();
      // Reset submission state
      setHasAttemptedSubmit(false);
    }
  }, [addError, clearAddError]);

  // Show success when operation completes without error
  useEffect(() => {
    if (hasAttemptedSubmit && !loading && !addError && !isSubmitting) {
      // Operation completed successfully
      router.replace(ROUTES.RECIPIENT_ADDED);

      awardPoints("add_recipient").catch((error) => {
        console.warn(
          "[AddRecipient] Failed to award add recipient points",
          error
        );
      });
    }
  }, [loading, addError, isSubmitting, hasAttemptedSubmit]);

  const isFormValid =
    fullName.trim() &&
    phoneNumber.trim() &&
    phoneNumber.replace(/[^+\d]/g, "").length >= 7;

  return (
    <ScreenWrapper edges={[]}>
      <View className="flex-1 w-full justify-between">
        <ScrollView
          className="flex-1"
          contentContainerStyle={{ paddingBottom: 32 }}
        >
          {/* Header */}
          <View className="">
            <BackButton />
          </View>

          <View className="px-5 pt-4">
            <Text
              className="text-xl font-dmsans-bold text-primary"
              numberOfLines={1}
            >
              {t("addrecipient.title")}
            </Text>
            <Text className="text-sm font-dmsans text-gray-500 mt-1">
              {t("addrecipient.sectionSubtitle")}
            </Text>
          </View>

          {/* Client details card */}
          <View className="px-5 pt-6">
            <View className="bg-white rounded-md  py-5 space-y-5">
              {/* Client type toggle */}
              <View className="flex-row items-center justify-between mb-1">
                <Text className="text-xs font-dmsans text-gray-500">
                  {t("addrecipient.clientTypeLabel", "Client type")}
                </Text>
                <View className="flex-row bg-[#F3F4F6] rounded-full p-[2px]">
                  {(["Individual", "Business"] as const).map((type) => {
                    const isActive = clientType === type;
                    return (
                      <TouchableOpacity
                        key={type}
                        className={`px-3 py-1 rounded-full ${
                          isActive ? "bg-primary" : "bg-transparent"
                        }`}
                        onPress={() => setClientType(type)}
                      >
                        <Text
                          className={`text-[11px] font-dmsans-medium ${
                            isActive ? "text-white" : "text-gray-500"
                          }`}
                        >
                          {type}
                        </Text>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              </View>

              <View>
                <Label className="text-xs font-dmsans text-gray-500 mb-2">
                  {t("addrecipient.fullNameLabel")}
                </Label>
                <Input
                  placeholder={t("addrecipient.fullNamePlaceholder")}
                  value={fullName}
                  onChangeText={setFullName}
                  editable={!isSubmitting}
                  containerClassName="w-full"
                  borderClassName="border-[#D9DBE9] bg-white"
                  placeholderColor="#7E7E7E"
                  textClassName="text-[#000] text-sm"
                />
              </View>

              <View>
                <Label className="text-xs font-dmsans text-gray-500 mb-2">
                  {t("addrecipient.phoneLabel")}
                </Label>
                <Input
                  placeholder={t("addrecipient.phonePlaceholder")}
                  value={phoneNumber}
                  onChangeText={handlePhoneChange}
                  keyboardType="phone-pad"
                  editable={!isSubmitting}
                  containerClassName="w-full"
                  borderClassName="border-[#D9DBE9] bg-white"
                  placeholderColor="#7E7E7E"
                  textClassName="text-[#000] text-sm"
                />
              </View>

              {/* Actions for account & schedule (UI-only) */}
              <View className="pt-2 flex-row gap-3">
                <Button
                  className="flex-1 bg-white border border-primary rounded-2xl"
                  onPress={() => setAccountSheetVisible(true)}
                >
                  <Text className="text-primary font-dmsans-medium text-sm">
                    {t("addrecipient.addAccountButton", "Add Account")}
                  </Text>
                </Button>
                <Button
                  className="flex-1 bg-primary/5 border border-primary rounded-2xl"
                  onPress={() => setScheduleSheetVisible(true)}
                >
                  <Text className="text-primary font-dmsans-medium text-sm">
                    {t("addrecipient.setScheduleButton", "Set Schedule")}
                  </Text>
                </Button>
              </View>
            </View>
          </View>
        </ScrollView>

        <View className="w-full px-5 pb-8">
          <Button
            className="bg-primary rounded-3xl"
            onPress={handleAddRecipient}
            disabled={!isFormValid || isSubmitting || loading}
          >
            <Text className="font-dmsans text-white">
              {isSubmitting || loading
                ? t("addrecipient.addButtonLoading")
                : t("addrecipient.addButton")}
            </Text>
          </Button>
        </View>
      </View>
      <ModalToast
        visible={toastVisible}
        title={toastTitle}
        description={toastDescription}
        variant={toastVariant}
      />

      {/* Bottom sheet: Add Account (UI-only, matches Edit Profile add account) */}
      <BottomSheet
        visible={accountSheetVisible}
        onClose={() => setAccountSheetVisible(false)}
        maxHeightRatio={0.9}
      >
        <View className="mb-4">
          <Text className="text-xl font-dmsans-bold text-primary text-center">
            {t("addrecipient.accountSheetTitle", "Add Account")}
          </Text>
        </View>

        <View className="mb-4 ">
          <Text className="text-base font-dmsans text-black mb-2">
            {t("addrecipient.accountBankLabel", "Bank")}
          </Text>
          <View className="flex-row flex-wrap justify-between">
            {PROFILE_BANK_OPTIONS.map((bank) => {
              const isSelected = selectedBank === bank.id;
              const initials = bank.name
                .split(" ")
                .map((part) => part[0])
                .join("")
                .toUpperCase()
                .slice(0, 2);

              return (
                <TouchableOpacity
                  key={bank.id}
                  activeOpacity={0.8}
                  onPress={() => setSelectedBank(bank.id)}
                  className={`items-center justify-between px-3 py-4 mb-3 rounded-2xl border ${
                    isSelected
                      ? "border-primary bg-primary/5"
                      : "border-gray-200 bg-white"
                  }`}
                  style={{ width: "30%" }}
                >
                  <View className="w-10 h-10 mb-2 rounded-full bg-primary/10 items-center justify-center">
                    <Text className="text-primary font-dmsans-bold text-sm">
                      {initials}
                    </Text>
                  </View>
                  <Text
                    className="text-center text-xs font-dmsans text-gray-800"
                    numberOfLines={2}
                  >
                    {bank.name}
                  </Text>
                </TouchableOpacity>
              );
            })}
          </View>
        </View>

        <View className="mb-4">
          <Text className="text-base font-dmsans text-black mb-2">
            {accountLabel}
          </Text>
          <Input
            placeholder={accountPlaceholder}
            value={accountNumberInput}
            onChangeText={(text) =>
              setAccountNumberInput(text.replace(/[^0-9]/g, ""))
            }
            containerClassName="w-full mb-4"
            borderClassName="border-[#E5E7EB] bg-white rounded-[4px]"
            placeholderColor="#9CA3AF"
            textClassName="text-[#111827] text-sm"
            keyboardType="number-pad"
          />
        </View>

        <View className="mb-4">
          <Button
            className="bg-primary rounded-3xl w-full"
            onPress={() => setAccountSheetVisible(false)}
            disabled={!selectedBank || !accountNumberInput.trim()}
          >
            <Text className="font-dmsans text-white">
              {t("common.save", "Save")}
            </Text>
          </Button>
        </View>
      </BottomSheet>

      {/* Bottom sheet: Set Schedule (UI-only with dropdowns & calendar) */}
      <BottomSheet
        visible={scheduleSheetVisible}
        onClose={() => setScheduleSheetVisible(false)}
        maxHeightRatio={0.95}
      >
        <View className="w-full px-5 pt-4 pb-6">
          <Text className="text-base font-dmsans-bold text-primary mb-1">
            {t("addrecipient.scheduleSheetTitle", "Set Schedule")}
          </Text>
          <Text className="text-xs font-dmsans text-gray-500 mb-4">
            {t(
              "addrecipient.scheduleSheetSubtitle",
              "Choose a simple reminder schedule for this client. This is UI-only for now."
            )}
          </Text>
          <View className="space-y-4">
            {/* Frequency dropdown */}
            <View>
              <Label className="text-[11px] font-dmsans text-gray-500 mb-1">
                {t("addrecipient.scheduleFrequencyLabel", "Frequency")}
              </Label>
              <Dropdown
                value={scheduleFrequency || null}
                options={[
                  { label: "Daily", value: "daily" },
                  { label: "Weekly", value: "weekly" },
                  { label: "Monthly", value: "monthly" },
                  { label: "Custom", value: "custom" },
                ]}
                onSelect={(val) => setScheduleFrequency(val)}
                placeholder={t(
                  "addrecipient.scheduleFrequencyPlaceholder",
                  "Daily / Weekly / Monthly / Custom"
                )}
              />
            </View>

            {/* Time-of-day selector: 3-column wheel (hour, minute, AM/PM) */}
            <View>
              <Label className="text-[11px] font-dmsans text-gray-500 mt-3 mb-1">
                {t("addrecipient.scheduleTimeLabel", "Time of day")}
              </Label>
              <View className="flex-row bg-white rounded-2xl border border-[#E5E7EB] px-3 py-3">
                {/* Hour wheel */}
                <View className="flex-1 items-center">
                  <Text className="text-[10px] font-dmsans text-gray-400 mb-1">
                    {t("addrecipient.scheduleHourLabel", "Hour")}
                  </Text>
                  <Picker
                    style={{
                      width: "100%",
                      height: 150,
                      backgroundColor: "transparent",
                    }}
                    pickerData={HOURS}
                    selectedValue={scheduleHour}
                    onValueChange={(val: string) => setScheduleHour(val)}
                    textColor="#9CA3AF"
                    selectTextColor="#16A34A"
                    isCyclic
                  />
                </View>

                {/* Minute wheel */}
                <View className="flex-1 items-center">
                  <Text className="text-[10px] font-dmsans text-gray-400 mb-1">
                    {t("addrecipient.scheduleMinuteLabel", "Min")}
                  </Text>
                  <Picker
                    style={{
                      width: "100%",
                      height: 150,
                      backgroundColor: "transparent",
                    }}
                    pickerData={MINUTES}
                    selectedValue={scheduleMinute}
                    onValueChange={(val: string) => setScheduleMinute(val)}
                    textColor="#9CA3AF"
                    selectTextColor="#16A34A"
                    isCyclic
                  />
                </View>

                {/* AM/PM wheel */}
                <View className="w-16 items-center">
                  <Text className="text-[10px] font-dmsans text-gray-400 mb-1">
                    {t("addrecipient.schedulePeriodLabel", "AM/PM")}
                  </Text>
                  <Picker
                    style={{
                      width: "100%",
                      height: 150,
                      backgroundColor: "transparent",
                    }}
                    pickerData={PERIODS}
                    selectedValue={schedulePeriod}
                    onValueChange={(val: string) =>
                      setSchedulePeriod(val as "AM" | "PM")
                    }
                    textColor="#9CA3AF"
                    selectTextColor="#16A34A"
                  />
                </View>
              </View>
            </View>

            {/* Date selector - calendar with header & weekdays */}
            <View>
              <Label className="text-[11px] font-dmsans mt-3 text-gray-500 mb-2">
                {t("addrecipient.scheduleDateLabel", "Date")}
              </Label>
              {/* Month header */}
              <View className="flex-row items-center justify-between mb-2">
                <TouchableOpacity
                  onPress={() => {
                    setCalendarCursor(
                      (prev) =>
                        new Date(prev.getFullYear(), prev.getMonth() - 1, 1)
                    );
                  }}
                  className="p-1"
                >
                  <ChevronLeft size={18} color="#6B7280" />
                </TouchableOpacity>
                <Text className="text-sm font-dmsans-medium text-gray-800">
                  {MONTH_NAMES[cursorMonth]} {cursorYear}
                </Text>
                <TouchableOpacity
                  onPress={() => {
                    setCalendarCursor(
                      (prev) =>
                        new Date(prev.getFullYear(), prev.getMonth() + 1, 1)
                    );
                  }}
                  className="p-1"
                >
                  <ChevronRight size={18} color="#6B7280" />
                </TouchableOpacity>
              </View>

              {/* Weekday labels */}
              <View className="flex-row mb-1">
                {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((d) => (
                  <View key={d} className="flex-1 items-center">
                    <Text className="text-[10px] font-dmsans text-gray-400">
                      {d}
                    </Text>
                  </View>
                ))}
              </View>

              {/* Day grid: 7 columns (Sun-Sat) */}
              <View className="space-y-[4px]">
                {Array.from(
                  { length: Math.ceil(calendarDays.length / 7) },
                  (_, rowIndex) => {
                    const row = calendarDays.slice(
                      rowIndex * 7,
                      rowIndex * 7 + 7
                    );
                    return (
                      <View key={rowIndex} className="flex-row">
                        {row.map((day, idx) => {
                          if (!day) {
                            return (
                              <View
                                key={`empty-${rowIndex}-${idx}`}
                                className="flex-1 items-center justify-center"
                              />
                            );
                          }

                          const safeDay = day as {
                            key: string;
                            label: string;
                            isToday: boolean;
                          };

                          const isSelected = scheduleDate === safeDay.key;
                          const isToday = safeDay.isToday;

                          return (
                            <View
                              key={safeDay.key}
                              className="flex-1 items-center justify-center"
                            >
                              <TouchableOpacity
                                activeOpacity={0.8}
                                onPress={() => setScheduleDate(safeDay.key)}
                                className={`items-center justify-center rounded-full border ${
                                  isSelected
                                    ? "bg-primary border-primary"
                                    : "bg-white border-transparent"
                                }`}
                                style={{ width: 32, height: 32 }}
                              >
                                <Text
                                  className={`text-xs font-dmsans-medium ${
                                    isSelected
                                      ? "text-white"
                                      : isToday
                                      ? "text-primary"
                                      : "text-gray-800"
                                  }`}
                                >
                                  {safeDay.label}
                                </Text>
                              </TouchableOpacity>
                              {isToday && !isSelected && (
                                <Text className="text-[8px] font-dmsans text-primary mt-0.5">
                                  {t(
                                    "addrecipient.scheduleTodayLabel",
                                    "Today"
                                  )}
                                </Text>
                              )}
                            </View>
                          );
                        })}
                      </View>
                    );
                  }
                )}
              </View>
            </View>
          </View>
          <View className="flex-row gap-3 mt-5">
            <Button
              className="flex-1 bg-white border border-[#E5E7EB] rounded-2xl"
              onPress={() => setScheduleSheetVisible(false)}
            >
              <Text className="text-gray-700 font-dmsans-medium text-sm">
                {t("common.cancel", "Cancel")}
              </Text>
            </Button>
            <Button
              className="flex-1 bg-primary rounded-2xl"
              onPress={() => setScheduleSheetVisible(false)}
            >
              <Text className="text-white font-dmsans-medium text-sm">
                {t("common.save", "Save")}
              </Text>
            </Button>
          </View>
        </View>
      </BottomSheet>
    </ScreenWrapper>
  );
}