import { ref, reactive } from 'vue';

export type ToastType = 'success' | 'error' | 'info' | 'warning';

export interface Toast {
  id: string;
  type: ToastType;
  message: string;
  duration?: number;
}

export interface Tag {
  id: string;
  value: string;
}

export interface City {
  id: string;
  name: string;
}

export interface District {
  id: string;
  name: string;
  cityId: string;
}

export interface Greeting {
  id: string;
  text: string;
}

const toasts = ref<Toast[]>([]);
const sidebarExpanded = ref(false);
const tags = ref<Tag[]>([]);
const cities = ref<City[]>([]);
const districts = reactive<Record<string, District[]>>({});
const greetings = ref<Greeting[]>([]);
const referencesLoaded = ref(false);

function addToast(message: string, type: ToastType = 'info', duration = 4000) {
  const id = `${Date.now()}-${Math.random()}`;
  toasts.value.push({ id, type, message, duration });
  if (duration > 0) {
    setTimeout(() => removeToast(id), duration);
  }
  return id;
}

function removeToast(id: string) {
  toasts.value = toasts.value.filter((t) => t.id !== id);
}

function setSidebarExpanded(value: boolean) {
  sidebarExpanded.value = value;
}

function setTags(data: Tag[]) { tags.value = data; }
function setCities(data: City[]) { cities.value = data; }
function setDistricts(cityId: string, data: District[]) { districts[cityId] = data; }
function setGreetings(data: Greeting[]) { greetings.value = data; }
function setReferencesLoaded() { referencesLoaded.value = true; }

export function useUi() {
  return reactive({
    toasts,
    sidebarExpanded,
    tags,
    cities,
    districts,
    greetings,
    referencesLoaded,
    addToast,
    removeToast,
    setSidebarExpanded,
    setTags,
    setCities,
    setDistricts,
    setGreetings,
    setReferencesLoaded,
  });
}