import { DarkTheme, DefaultTheme, type Theme } from "@react-navigation/native";

export const THEME = {
  light: {
    background: "rgba(255,243,238,1)",
    foreground: "rgba(37,22,21,1)",
    card: "rgba(255,249,244,1)",
    cardForeground: "rgba(37,22,21,1)",
    popover: "rgba(255,249,244,1)",
    popoverForeground: "rgba(37,22,21,1)",
    primary: "rgba(233,87,82,1)",
    primaryForeground: "rgba(255,249,244,1)",
    secondary: "rgba(255,226,216,1)",
    secondaryForeground: "rgba(66,37,32,1)",
    muted: "rgba(255,234,227,1)",
    mutedForeground: "rgba(118,93,88,1)",
    accent: "rgba(255,222,207,1)",
    accentForeground: "rgba(66,37,32,1)",
    destructive: "rgba(239,67,94,1)",
    destructiveForeground: "rgba(255,249,244,1)",
    border: "rgba(237,213,209,1)",
    input: "rgba(244,206,198,1)",
    ring: "rgba(233,87,82,1)",
    radius: "0.625rem",
  },
  dark: {
    background: "rgba(25,21,21,1)",
    foreground: "rgba(255,241,238,1)",
    card: "rgba(35,30,29,1)",
    cardForeground: "rgba(255,241,238,1)",
    popover: "rgba(35,30,29,1)",
    popoverForeground: "rgba(255,241,238,1)",
    primary: "rgba(233,87,82,1)",
    primaryForeground: "rgba(0,0,0,1)",
    secondary: "rgba(16,9,10,1)",
    secondaryForeground: "rgba(255,241,238,1)",
    muted: "rgba(9,5,5,1)",
    mutedForeground: "rgba(176,153,151,1)",
    accent: "rgba(197,156,221,1)",
    accentForeground: "rgba(255,249,244,1)",
    destructive: "rgba(255,40,90,1)",
    destructiveForeground: "rgba(255,249,244,1)",
    border: "rgba(105,93,92,1)",
    input: "rgba(16,9,10,1)",
    ring: "rgba(151,170,81,1)",
    radius: "0.625rem",
  },
} as const;

export const NAV_THEME: Record<"light" | "dark", Theme> = {
  light: {
    ...DefaultTheme,
    colors: {
      background: THEME.light.background,
      border: THEME.light.border,
      card: THEME.light.card,
      notification: THEME.light.destructive,
      primary: THEME.light.primary,
      text: THEME.light.foreground,
    },
  },
  dark: {
    ...DarkTheme,
    colors: {
      background: THEME.dark.background,
      border: THEME.dark.border,
      card: THEME.dark.card,
      notification: THEME.dark.destructive,
      primary: THEME.dark.primary,
      text: THEME.dark.foreground,
    },
  },
};

// ── Persistent theme helpers ──────────────────────────────────────
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useEffect } from "react";
import { useColorScheme } from "nativewind";

export type AppTheme = "light" | "dark" | "system";
const THEME_KEY = "app_theme_preference";

export async function saveTheme(theme: AppTheme): Promise<void> {
  try {
    await AsyncStorage.setItem(THEME_KEY, theme);
  } catch {}
}

export async function loadTheme(): Promise<AppTheme> {
  try {
    const v = await AsyncStorage.getItem(THEME_KEY);
    if (v === "light" || v === "dark" || v === "system") return v;
  } catch {}
  return "system";
}

/** Drop this in the root _layout to restore the saved theme on every app launch. */
export function useRestoreTheme() {
  const { setColorScheme } = useColorScheme();
  useEffect(() => {
    // Only set it once on load
    loadTheme().then((t) => {
      if (t) setColorScheme(t);
    });
  }, []);
}