import BackButtonTitle from "@/components/ui/BackButtonTitle";
import { useColor } from "@/hooks/useColor";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { CalendarBlankIcon, SignInIcon } from "phosphor-react-native";
import { ScrollView, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function AccountActivityScreen() {
  const { user } = useAuthStore((state) => state);
  const { primary } = useColor();

  const formatDateTime = (dateStr: string | null) => {
    if (!dateStr) return "N/A";
    try {
      const date = new Date(dateStr);
      return date.toLocaleDateString("en-US", {
        year: "numeric",
        month: "short",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
    } catch {
      return dateStr;
    }
  };

  return (
    <ScrollView className="bg-white px-4">
      <SafeAreaView>
        <BackButtonTitle title="Account Activity" />

        <View className="mt-6 gap-y-4">
          {/* Last Login */}
          <View className="p-5 rounded-2xl border border-slate-100 bg-slate-50">
            <View className="flex-row items-center gap-4">
              <View
                className="w-14 h-14 rounded-2xl items-center justify-center"
                style={{ backgroundColor: "#dcfce7" }}
              >
                <SignInIcon size={26} color="#15803d" weight="fill" />
              </View>
              <View className="flex-1">
                <Text className="text-xs font-manrope text-slate-400 uppercase tracking-wide">
                  Last Login
                </Text>
                <Text className="text-[17px] font-manrope-bold text-slate-800 mt-1">
                  {formatDateTime(user?.last_login_at ?? null)}
                </Text>
              </View>
            </View>
          </View>

          {/* Account Created */}
          <View className="p-5 rounded-2xl border border-slate-100 bg-slate-50">
            <View className="flex-row items-center gap-4">
              <View
                className="w-14 h-14 rounded-2xl items-center justify-center"
                style={{ backgroundColor: "#f3e8ff" }}
              >
                <CalendarBlankIcon size={26} color="#7e22ce" weight="fill" />
              </View>
              <View className="flex-1">
                <Text className="text-xs font-manrope text-slate-400 uppercase tracking-wide">
                  Account Created
                </Text>
                <Text className="text-[17px] font-manrope-bold text-slate-800 mt-1">
                  {formatDateTime(user?.created_at ?? null)}
                </Text>
              </View>
            </View>
          </View>

          {/* Account Status */}
          <View
            className="p-5 rounded-2xl border border-slate-100"
            style={{ backgroundColor: primary[5] }}
          >
            <Text className="text-sm font-manrope-bold text-slate-700 mb-4">
              Account Details
            </Text>
            <View className="gap-y-3">
              <DetailRow label="Account ID" value={`#${user?.id || "—"}`} />
              <DetailRow label="Username" value={user?.username || "—"} />
              <DetailRow
                label="Status"
                value={user?.status || "—"}
                valueColor={user?.status === "active" ? "#16a34a" : "#dc2626"}
              />
              <DetailRow
                label="Balance"
                value={`$${user?.balance?.toFixed(2) || "0.00"}`}
                valueColor={primary.base}
              />
            </View>
          </View>
        </View>

        <View className="h-10" />
      </SafeAreaView>
    </ScrollView>
  );
}

function DetailRow({
  label,
  value,
  valueColor,
}: {
  label: string;
  value: string;
  valueColor?: string;
}) {
  return (
    <View className="flex-row items-center justify-between py-2 border-b border-slate-100">
      <Text className="text-sm font-manrope text-slate-500">{label}</Text>
      <Text
        className="text-sm font-manrope-bold capitalize"
        style={{ color: valueColor || "#1e293b" }}
      >
        {value}
      </Text>
    </View>
  );
}
