import BackButtonTitle from "@/components/ui/BackButtonTitle";
import { useGetQuery } from "@/hooks/mutate/useGetQuery";
import { useTranslations } from "@/providers/TranslationProviders";
import { useMemo } from "react";
import { ActivityIndicator, I18nManager, ScrollView, Text, useWindowDimensions, View } from "react-native";
import RenderHtml, { MixedStyleDeclaration } from "react-native-render-html";
import { SafeAreaView } from "react-native-safe-area-context";

export const tagsStyles: Record<string, MixedStyleDeclaration> = {
  h1: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#1e293b",
    marginBottom: 16,
    fontFamily: "Manrope_700Bold",
  },
  h2: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#334155",
    marginTop: 20,
    marginBottom: 10,
    fontFamily: "Manrope_700Bold",
  },
  h3: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#334155",
    marginTop: 15,
    marginBottom: 8,
    fontFamily: "Manrope_700Bold",
  },
  p: {
    fontSize: 14,
    color: "#475569",
    lineHeight: 22,
    marginBottom: 12,
    fontFamily: "Manrope_500Medium",
  },
  span: {
    fontSize: 14,
    color: "#475569",
    fontFamily: "Manrope_500Medium",
  },
  li: {
    fontSize: 14,
    color: "#475569",
    marginBottom: 8,
    fontFamily: "Manrope_500Medium",
  },
  ul: {
    marginBottom: 12,
  },
  ol: {
    marginBottom: 12,
  },
  strong: {
    fontWeight: "bold",
    fontFamily: "Manrope_700Bold",
  },
  em: {
    fontStyle: "italic",
    fontFamily: "Manrope_500Medium",
  },
};

export default function TermsAndConditions() {
  const { tran, locale } = useTranslations();
  const { width } = useWindowDimensions();

  const { data: pageData, isLoading } = useGetQuery({
    url: "settings/pages/terms-and-conditions",
  });

  const contentHtml = useMemo(() => {
    if (!pageData) return null;

    // The backend returns a Page object with sections.
    // Usually terms and conditions is in a section with slug 'terms-and-conditions'
    const section = pageData.sections?.find((s: any) => s.slug === "terms-and-conditions");

    // Try to get content for current locale, fallback to 'en'
    if (section && section.content?.content_body) {
      return section.content.content_body[locale.code] || section.content.content_body.en;
    }

    return null;
  }, [pageData, locale.code]);

  return (
    <SafeAreaView className="flex-1 bg-white px-6">
      <BackButtonTitle title="Terms and Conditions" />
      <ScrollView className="flex-1  bg-white py-6" showsVerticalScrollIndicator={false}>
        {isLoading ? (
          <View className="py-10 justify-center items-center">
            <ActivityIndicator size="large" color="#000" />
            <Text className="mt-4 font-manrope-medium text-slate-500">{tran("Loading...")}</Text>
          </View>
        ) : contentHtml ? (
          <RenderHtml contentWidth={width} source={{ html: contentHtml }} tagsStyles={tagsStyles} baseStyle={{ direction: I18nManager.isRTL ? "rtl" : "ltr" }} />
        ) : (
          <View className="py-10 justify-center items-center">
            <Text className="font-manrope-medium text-slate-500">{tran("No content available.")}</Text>
          </View>
        )}
        <View className="pb-10" />
      </ScrollView>
    </SafeAreaView>
  );
}
