import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';

export type CustomerThemeMode = 'light' | 'dark';

export type CustomerThemePalette = {
  background: string;
  surface: string;
  surfaceMuted: string;
  cardBorder: string;
  text: string;
  textMuted: string;
  textSoft: string;
  accent: string;
  accentText: string;
  chip: string;
  chipText: string;
  nav: string;
  navBorder: string;
  notice: string;
  noticeText: string;
  noticeBadge: string;
  noticeBadgeText: string;
  heroOverlay: string;
};

const themes: Record<CustomerThemeMode, CustomerThemePalette> = {
  light: {
    background: '#F6F3EF',
    surface: '#FFFFFF',
    surfaceMuted: '#FFF8F1',
    cardBorder: '#ECE7E1',
    text: '#111827',
    textMuted: '#6B7280',
    textSoft: '#94A3B8',
    accent: '#F97316',
    accentText: '#FFFFFF',
    chip: '#FFF1E7',
    chipText: '#111827',
    nav: '#FFFFFF',
    navBorder: '#E5E7EB',
    notice: '#121C2B',
    noticeText: '#F8FAFC',
    noticeBadge: '#F97316',
    noticeBadgeText: '#111827',
    heroOverlay: 'rgba(15,23,42,0.22)',
  },
  dark: {
    background: '#020617',
    surface: '#0F172A',
    surfaceMuted: '#111827',
    cardBorder: '#1E293B',
    text: '#F8FAFC',
    textMuted: '#CBD5E1',
    textSoft: '#94A3B8',
    accent: '#F97316',
    accentText: '#111827',
    chip: '#172033',
    chipText: '#F8FAFC',
    nav: '#0B1220',
    navBorder: '#1E293B',
    notice: '#121C2B',
    noticeText: '#F8FAFC',
    noticeBadge: '#F97316',
    noticeBadgeText: '#111827',
    heroOverlay: 'rgba(15,23,42,0.38)',
  },
};

type CustomerThemeState = {
  mode: CustomerThemeMode;
  setMode: (mode: CustomerThemeMode) => void;
  toggleMode: () => void;
};

export const useCustomerTheme = create<CustomerThemeState>()(
  persist(
    (set, get) => ({
      mode: 'light',
      setMode: (mode) => set({ mode }),
      toggleMode: () => set({ mode: get().mode === 'light' ? 'dark' : 'light' }),
    }),
    {
      name: 'chego-mobile-customer-theme',
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({ mode: state.mode }),
    },
  ),
);

export function getCustomerTheme(mode: CustomerThemeMode) {
  return themes[mode];
}