import { create } from 'zustand';

interface ConsoleMessage {
  id: string;
  platform: 'roblox' | 'web' | 'mobile' | 'desktop' | 'system';
  message: string;
  timestamp: Date;
  type: 'log' | 'warn' | 'error';
}

interface NexusSyncEvent {
  id: string;
  timestamp: Date;
  source: string;
  target: string;
  variable: string;
  value: any;
  latency?: number;
  type: 'sync' | 'ack' | 'conflict' | 'resolved';
}

interface SyncState {
  variable: string;
  roblox: any;
  web: any;
  mobile: any;
  desktop: any;
  status: 'synced' | 'syncing' | 'conflict';
}

interface AppStore {
  // Console
  consoleMessages: ConsoleMessage[];
  addConsoleMessage: (message: Omit<ConsoleMessage, 'id' | 'timestamp'>) => void;
  clearConsole: () => void;
  
  // Nexus Sync
  syncEvents: NexusSyncEvent[];
  syncStates: SyncState[];
  addSyncEvent: (event: Omit<NexusSyncEvent, 'id' | 'timestamp'>) => void;
  updateSyncState: (state: SyncState) => void;
  
  // UI State
  leftSidebarOpen: boolean;
  rightSidebarOpen: boolean;
  bottomPanelOpen: boolean;
  bottomPanelTab: 'console' | 'terminal' | 'nexus' | 'deploy';
  editorTab: 'editor' | 'preview' | 'nexus-monitor';
  
  toggleLeftSidebar: () => void;
  toggleRightSidebar: () => void;
  toggleBottomPanel: () => void;
  setBottomPanelTab: (tab: 'console' | 'terminal' | 'nexus' | 'deploy') => void;
  setEditorTab: (tab: 'editor' | 'preview' | 'nexus-monitor') => void;
  
  // Modals
  newProjectModalOpen: boolean;
  deployModalOpen: boolean;
  settingsModalOpen: boolean;
  commandPaletteOpen: boolean;
  
  setNewProjectModalOpen: (open: boolean) => void;
  setDeployModalOpen: (open: boolean) => void;
  setSettingsModalOpen: (open: boolean) => void;
  setCommandPaletteOpen: (open: boolean) => void;
}

export const useAppStore = create<AppStore>((set, get) => ({
  // Console
  consoleMessages: [
    { id: '1', platform: 'system', message: 'AeThex Studio initialized', timestamp: new Date(), type: 'log' },
    { id: '2', platform: 'roblox', message: 'Connected to Roblox Studio', timestamp: new Date(), type: 'log' },
    { id: '3', platform: 'web', message: 'Web server started on port 3000', timestamp: new Date(), type: 'log' },
  ],
  
  addConsoleMessage: (message) => {
    const newMessage: ConsoleMessage = {
      ...message,
      id: Math.random().toString(36).substr(2, 9),
      timestamp: new Date(),
    };
    set({ consoleMessages: [...get().consoleMessages, newMessage] });
  },
  
  clearConsole: () => set({ consoleMessages: [] }),
  
  // Nexus Sync
  syncEvents: [],
  syncStates: [
    { variable: 'playerX', roblox: 120, web: 120, mobile: 120, desktop: 120, status: 'synced' },
    { variable: 'playerY', roblox: 85, web: 85, mobile: 85, desktop: 85, status: 'synced' },
    { variable: 'health', roblox: 100, web: 98, mobile: 100, desktop: 100, status: 'syncing' },
    { variable: 'inventory', roblox: '[...]', web: '[...]', mobile: '[...]', desktop: '[...]', status: 'synced' },
    { variable: 'score', roblox: 1250, web: 1250, mobile: 1250, desktop: 1250, status: 'synced' },
  ],
  
  addSyncEvent: (event) => {
    const newEvent: NexusSyncEvent = {
      ...event,
      id: Math.random().toString(36).substr(2, 9),
      timestamp: new Date(),
    };
    set({ syncEvents: [newEvent, ...get().syncEvents].slice(0, 100) });
  },
  
  updateSyncState: (state) => {
    const { syncStates } = get();
    const index = syncStates.findIndex(s => s.variable === state.variable);
    if (index >= 0) {
      const newStates = [...syncStates];
      newStates[index] = state;
      set({ syncStates: newStates });
    } else {
      set({ syncStates: [...syncStates, state] });
    }
  },
  
  // UI State
  leftSidebarOpen: true,
  rightSidebarOpen: true,
  bottomPanelOpen: true,
  bottomPanelTab: 'console',
  editorTab: 'editor',
  
  toggleLeftSidebar: () => set({ leftSidebarOpen: !get().leftSidebarOpen }),
  toggleRightSidebar: () => set({ rightSidebarOpen: !get().rightSidebarOpen }),
  toggleBottomPanel: () => set({ bottomPanelOpen: !get().bottomPanelOpen }),
  setBottomPanelTab: (tab) => set({ bottomPanelTab: tab }),
  setEditorTab: (tab) => set({ editorTab: tab }),
  
  // Modals
  newProjectModalOpen: false,
  deployModalOpen: false,
  settingsModalOpen: false,
  commandPaletteOpen: false,
  
  setNewProjectModalOpen: (open) => set({ newProjectModalOpen: open }),
  setDeployModalOpen: (open) => set({ deployModalOpen: open }),
  setSettingsModalOpen: (open) => set({ settingsModalOpen: open }),
  setCommandPaletteOpen: (open) => set({ commandPaletteOpen: open }),
}));