import { createContext, useContext } from "react";
import { useColorScheme } from "react-native";

type ThemeColors = {
  primary: string;
  primaryLight: string;
  secondary: string;
  background: string;
  surface: string;
  card: string;
  border: string;
  text: string;
  textSecondary: string;
  textTertiary: string;
  error: string;
  errorLight: string;
  star: string;
};

type Theme = {
  colors: ThemeColors;
  spacing: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
  };
  radius: {
    sm: number;
    md: number;
    lg: number;
    xl: number;
  };
};

const LightTheme: Theme = {
  colors: {
    primary: "#2563EB",
    primaryLight: "#DBEAFE",
    secondary: "#059669",
    background: "#FFFFFF",
    surface: "#F9FAFB",
    card: "#FFFFFF",
    border: "#E5E7EB",
    text: "#111827",
    textSecondary: "#6B7280",
    textTertiary: "#9CA3AF",
    error: "#DC2626",
    errorLight: "#FEE2E2",
    star: "#F59E0B",
  },
  spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
  radius: { sm: 6, md: 12, lg: 16, xl: 24 },
};

const DarkTheme: Theme = {
  colors: {
    primary: "#60A5FA",
    primaryLight: "#1E3A5F",
    secondary: "#34D399",
    background: "#111827",
    surface: "#1F2937",
    card: "#1F2937",
    border: "#374151",
    text: "#F9FAFB",
    textSecondary: "#9CA3AF",
    textTertiary: "#6B7280",
    error: "#F87171",
    errorLight: "#451111",
    star: "#FBBF24",
  },
  spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
  radius: { sm: 6, md: 12, lg: 16, xl: 24 },
};

export type { Theme };

const ThemeContext = createContext<Theme>(LightTheme);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const scheme = useColorScheme();
  const theme = scheme === "dark" ? DarkTheme : LightTheme;
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

export function useTheme() {
  return useContext(ThemeContext);
}