import { create } from 'zustand';
import { API_BASE } from '@homaroma/types';

export interface MenuLink {
  label: Record<string, string>;
  url?: string;
  links?: MenuLink[];
  imageUrl?: string | null; // รูปที่แสดงเมื่อ Hover ลิงก์
}

export interface MenuColumn {
  title: Record<string, string>;
  links: MenuLink[];
  iconUrl?: string | null; // รูปประจำคอลัมน์ (1:1)
}

export interface MegaMenuPayload {
  id?: string;
  nodeId?: string;
  label: Record<string, string>;
  url?: string;
  columns?: MenuColumn[];
  rootImageUrl?: string | null; // รูปหลักฝั่งซ้ายสุด (1:1)
}

interface MenuState {
  megaMenu: MegaMenuPayload[];
  isLoading: boolean;
  fetchMegaMenu: () => Promise<void>;
}

export const useMenuStore = create<MenuState>((set) => ({
  megaMenu: [],
  isLoading: false,
  fetchMegaMenu: async () => {
    set({ isLoading: true });
    try {
      const response = await fetch(`${API_BASE}/menus/main`);
      const data = await response.json();
      set({ megaMenu: data.payload || [], isLoading: false });
    } catch (error) {
      console.error('Failed to fetch mega menu', error);
      set({ isLoading: false });
    }
  }
}));