import { useState, useEffect, useCallback } from 'react';

export interface Widget { id: string; title: string }

export const __api = {
  fetchWidgets: async (): Promise<Widget[]> => [
    { id: 'w1', title: 'Visits' },
    { id: 'w2', title: 'Orders' },
  ],
};

// TODO: useDashboardWidgets, useUserPreferences, useDashboardUI 셋으로 분리하세요.
export function useDashboard() {
  const [widgets, setWidgets] = useState<Widget[]>([]);
  const [widgetsLoading, setWidgetsLoading] = useState(true);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [dashboardLayout, setDashboardLayout] = useState<'grid' | 'list'>('grid');
  const [searchOpen, setSearchOpen] = useState(false);
  const [modalOpen, setModalOpen] = useState<string | null>(null);

  useEffect(() => {
    __api.fetchWidgets()
      .then(setWidgets)
      .finally(() => setWidgetsLoading(false));
  }, []);

  const refreshWidgets = useCallback(async () => {
    setWidgetsLoading(true);
    const w = await __api.fetchWidgets();
    setWidgets(w);
    setWidgetsLoading(false);
  }, []);

  return {
    widgets,
    widgetsLoading,
    refreshWidgets,
    sidebarCollapsed,
    setSidebarCollapsed,
    dashboardLayout,
    setDashboardLayout,
    searchOpen,
    setSearchOpen,
    modalOpen,
    setModalOpen,
  };
}