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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      setLoading(true);
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUser(data);
      setLoading(false);
    };
    fetchUser();
  }, [userId]);

  const handleUpdate = useCallback((updates) => {
    setUser(prev => ({ ...prev, ...updates }));
  }, []);

  const displayName = useMemo(() => 
    user ? `${user.firstName} ${user.lastName}` : 'Unknown',
    [user]
  );

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h1>{displayName}</h1>
      <button onClick={() => handleUpdate({ active: true })}>
        Activate
      </button>
    </div>
  );
}

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue';

const count = ref(0);
const user = reactive({
  name: 'John',
  email: 'john@example.com'
});

const displayName = computed(() => 
  user.name.toUpperCase()
);

watch(count, (newCount, oldCount) => {
  console.log(`Count changed from ${oldCount} to ${newCount}`);
});

onMounted(() => {
  console.log('Component mounted');
});

const increment = () => count.value++;
</script>

<template>
  <div>
    <h1>{{ displayName }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

import { Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-counter',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div>
      <h2>Counter: {{ count() }}</h2>
      <p>Doubled: {{ doubled() }}</p>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  increment() {
    this.count.update(n => n + 1);
  }

  decrement() {
    this.count.update(n => n - 1);
  }
}

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    size: {
      control: 'radio',
      options: ['sm', 'md', 'lg']
    }
  }
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Click Me',
    size: 'md'
  }
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Cancel',
    size: 'md'
  }
};

// SearchBar.stories.tsx (Molecule)
import { SearchBar } from './SearchBar';

export default {
  title: 'Molecules/SearchBar',
  component: SearchBar
};

export const Default = () => <SearchBar placeholder="Search..." />;

// Basic Props Interface
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  children: React.ReactNode;
}

function Button({ 
  variant, 
  size = 'md', 
  disabled = false, 
  onClick, 
  children 
}: ButtonProps) {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// Generic Props with Type Parameter
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyExtractor: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map(item => (
        <li key={keyExtractor(item)}>
          {renderItem(item)}
        </li>
      ))}
    </ul>
  );
}

// Extending HTML Attributes
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
}

function Input({ label, error, ...props }: InputProps) {
  return (
    <div>
      <label>{label}</label>
      <input {...props} />
      {error && <span className="error">{error}</span>}
    </div>
  );
}

// Higher-Order Component Pattern
function withAuth<P extends object>(
  Component: React.ComponentType<P>
) {
  return function AuthenticatedComponent(props: P) {
    const { user, loading } = useAuth();

    if (loading) return <div>Loading...</div>;
    if (!user) return <Navigate to="/login" />;

    return <Component {...props} user={user} />;
  };
}

// Usage
const ProtectedDashboard = withAuth(Dashboard);

// Render Props Pattern
function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return render({ data, loading });
}

// Usage
<DataFetcher 
  url="/api/users" 
  render={({ data, loading }) => 
    loading ? <Spinner /> : <UserList users={data} />
  } 
/>

// Compound Components Pattern
const Select = ({ children, value, onChange }) => {
  return (
    <div className="select">
      {React.Children.map(children, child =>
        React.cloneElement(child, { selected: value, onSelect: onChange })
      )}
    </div>
  );
};

Select.Option = ({ value, selected, onSelect, children }) => (
  <div 
    className={selected === value ? 'selected' : ''}
    onClick={() => onSelect(value)}
  >
    {children}
  </div>
);

// Usage
<Select value={selected} onChange={setSelected}>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { api } from './api';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

setupListeners(store.dispatch);

// counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
  value: number;
  status: 'idle' | 'loading';
}

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0, status: 'idle' } as CounterState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

// api.ts - RTK Query
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User', 'Post'],
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => '/users',
      providesTags: ['User'],
    }),
    getUserById: builder.query<User, string>({
      query: (id) => `/users/${id}`,
      providesTags: (result, error, id) => [{ type: 'User', id }],
    }),
    createUser: builder.mutation<User, Partial<User>>({
      query: (body) => ({
        url: '/users',
        method: 'POST',
        body,
      }),
      invalidatesTags: ['User'],
    }),
  }),
});

export const { useGetUsersQuery, useGetUserByIdQuery, useCreateUserMutation } = api;

// Component usage
function UserList() {
  const { data: users, isLoading, error } = useGetUsersQuery();
  const [createUser] = useCreateUserMutation();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading users</div>;

  return (
    <div>
      {users?.map(user => <div key={user.id}>{user.name}</div>)}
      <button onClick={() => createUser({ name: 'New User' })}>
        Add User
      </button>
    </div>
  );
}

import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

// Basic store
const useCountStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

// Advanced store with TypeScript, persist, and devtools
interface BearState {
  bears: number;
  fish: number;
  actions: {
    addBear: () => void;
    removeBear: () => void;
    addFish: (amount: number) => void;
  };
}

const useBearStore = create<BearState>()(
  devtools(
    persist(
      immer((set, get) => ({
        bears: 0,
        fish: 0,
        actions: {
          addBear: () => set((state) => { state.bears += 1; }),
          removeBear: () => set((state) => { state.bears -= 1; }),
          addFish: (amount) => set((state) => { 
            state.fish += amount; 
          }),
        },
      })),
      { name: 'bear-storage' }
    )
  )
);

// Separate selectors for optimization
const useBears = () => useBearStore((state) => state.bears);
const useActions = () => useBearStore((state) => state.actions);

// Component usage
function BearCounter() {
  const bears = useBears();
  const { addBear, removeBear } = useActions();

  return (
    <div>
      <h1>Bears: {bears}</h1>
      <button onClick={addBear}>Add Bear</button>
      <button onClick={removeBear}>Remove Bear</button>
    </div>
  );
}

// Async actions
const useUserStore = create((set, get) => ({
  user: null,
  loading: false,
  fetchUser: async (id) => {
    set({ loading: true });
    const response = await fetch(`/api/users/${id}`);
    const user = await response.json();
    set({ user, loading: false });
  },
}));

// AuthContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  isAuthenticated: boolean;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

// Custom hook with validation
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

// Provider component
export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = async (email: string, password: string) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    });
    const userData = await response.json();
    setUser(userData);
  };

  const logout = () => {
    setUser(null);
  };

  const value = {
    user,
    login,
    logout,
    isAuthenticated: !!user,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

// Usage in component
function Profile() {
  const { user, logout, isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <div>Please login</div>;
  }

  return (
    <div>
      <h1>Welcome, {user?.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

// App.tsx with provider
function App() {
  return (
    <AuthProvider>
      <Profile />
    </AuthProvider>
  );
}

import { 
  atom, 
  selector, 
  atomFamily, 
  selectorFamily,
  useRecoilState, 
  useRecoilValue 
} from 'recoil';

// Basic atom
const textState = atom({
  key: 'textState',
  default: '',
});

// Selector for derived state
const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

// Async selector
const currentUserQuery = selector({
  key: 'currentUserQuery',
  get: async ({ get }) => {
    const userId = get(currentUserIdState);
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  },
});

// Atom family for dynamic state
const todoState = atomFamily({
  key: 'todoState',
  default: (id) => ({
    id,
    text: '',
    completed: false,
  }),
});

// Selector family for filtered data
const filteredTodosSelector = selectorFamily({
  key: 'filteredTodosSelector',
  get: (filter) => ({ get }) => {
    const todos = get(todoListState);
    switch (filter) {
      case 'completed':
        return todos.filter(todo => todo.completed);
      case 'active':
        return todos.filter(todo => !todo.completed);
      default:
        return todos;
    }
  },
});

// Component usage
function TextInput() {
  const [text, setText] = useRecoilState(textState);
  const charCount = useRecoilValue(charCountState);

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Character Count: {charCount}</p>
    </div>
  );
}

// App with RecoilRoot
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <TextInput />
    </RecoilRoot>
  );
}

import { makeAutoObservable, runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';

// Store class
class TodoStore {
  todos = [];
  filter = 'all';

  constructor() {
    makeAutoObservable(this);
  }

  // Computed property
  get filteredTodos() {
    switch (this.filter) {
      case 'active':
        return this.todos.filter(todo => !todo.completed);
      case 'completed':
        return this.todos.filter(todo => todo.completed);
      default:
        return this.todos;
    }
  }

  get completedCount() {
    return this.todos.filter(todo => todo.completed).length;
  }

  // Actions
  addTodo(text) {
    this.todos.push({
      id: Date.now(),
      text,
      completed: false,
    });
  }

  toggleTodo(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }

  setFilter(filter) {
    this.filter = filter;
  }

  // Async action
  async fetchTodos() {
    const response = await fetch('/api/todos');
    const todos = await response.json();
    runInAction(() => {
      this.todos = todos;
    });
  }
}

// Create store instance
const todoStore = new TodoStore();

// Observer component - automatically re-renders on observable changes
const TodoList = observer(() => {
  const { filteredTodos, addTodo, toggleTodo } = todoStore;

  return (
    <div>
      <ul>
        {filteredTodos.map(todo => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            {todo.text}
          </li>
        ))}
      </ul>
      <button onClick={() => addTodo('New Todo')}>Add</button>
    </div>
  );
});

// React Context for store
import { createContext, useContext } from 'react';

const StoreContext = createContext(todoStore);

export const useStore = () => useContext(StoreContext);

import useSWR, { mutate, useSWRConfig } from 'swr';
import useSWRMutation from 'swr/mutation';

// Fetcher function
const fetcher = (url) => fetch(url).then(res => res.json());

// Basic usage
function UserProfile({ userId }) {
  const { data, error, isLoading, mutate } = useSWR(
    `/api/users/${userId}`,
    fetcher,
    {
      revalidateOnFocus: true,
      revalidateOnReconnect: true,
      dedupingInterval: 5000,
    }
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={() => mutate()}>Refresh</button>
    </div>
  );
}

// Mutation with optimistic update
async function updateUser(url, { arg }) {
  await fetch(url, {
    method: 'PUT',
    body: JSON.stringify(arg),
  });
}

function EditProfile({ userId }) {
  const { trigger } = useSWRMutation(`/api/users/${userId}`, updateUser);

  const handleUpdate = async (updates) => {
    // Optimistic update
    mutate(
      `/api/users/${userId}`,
      (current) => ({ ...current, ...updates }),
      false // Don't revalidate yet
    );

    try {
      await trigger(updates);
    } catch (error) {
      // Revert on error
      mutate(`/api/users/${userId}`);
    }
  };

  return <button onClick={() => handleUpdate({ name: 'New Name' })}>Update</button>;
}

// Global configuration
import { SWRConfig } from 'swr';

function App() {
  return (
    <SWRConfig
      value={{
        refreshInterval: 30000,
        fetcher: (url) => fetch(url).then(res => res.json()),
        onError: (error) => console.error(error),
      }}
    >
      <UserProfile userId="123" />
    </SWRConfig>
  );
}

// Infinite loading
import useSWRInfinite from 'swr/infinite';

function UserList() {
  const getKey = (pageIndex, previousPageData) => {
    if (previousPageData && !previousPageData.hasMore) return null;
    return `/api/users?page=${pageIndex}&limit=10`;
  };

  const { data, size, setSize, isLoading } = useSWRInfinite(getKey, fetcher);

  const users = data ? data.flatMap(page => page.users) : [];
  const hasMore = data?.[data.length - 1]?.hasMore;

  return (
    <div>
      {users.map(user => <div key={user.id}>{user.name}</div>)}
      {hasMore && (
        <button onClick={() => setSize(size + 1)}>Load More</button>
      )}
    </div>
  );
}

// Actions - describe what happened
const ActionTypes = {
  ADD_TODO: 'ADD_TODO',
  TOGGLE_TODO: 'TOGGLE_TODO',
  SET_FILTER: 'SET_FILTER',
};

const addTodo = (text) => ({
  type: ActionTypes.ADD_TODO,
  payload: { id: Date.now(), text, completed: false },
});

const toggleTodo = (id) => ({
  type: ActionTypes.TOGGLE_TODO,
  payload: { id },
});

// Reducer - specifies how state changes
function todosReducer(state = [], action) {
  switch (action.type) {
    case ActionTypes.ADD_TODO:
      return [...state, action.payload];
    
    case ActionTypes.TOGGLE_TODO:
      return state.map(todo =>
        todo.id === action.payload.id
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    
    default:
      return state;
  }
}

// Store - holds state, provides dispatch
import { createStore, combineReducers } from 'redux';

const rootReducer = combineReducers({
  todos: todosReducer,
  filter: filterReducer,
});

const store = createStore(rootReducer);

// View - subscribes and dispatches
import { useSelector, useDispatch } from 'react-redux';

function TodoList() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => dispatch(toggleTodo(todo.id))}
          />
          {todo.text}
        </div>
      ))}
      <button onClick={() => dispatch(addTodo('New Todo'))}>
        Add Todo
      </button>
    </div>
  );
}

// Data Flow:
// 1. User clicks button → dispatch(action)
// 2. Action sent to reducer
// 3. Reducer creates new state
// 4. Store notifies subscribers
// 5. Component re-renders with new state

// Apollo Client setup
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          posts: {
            merge(existing = [], incoming) {
              return [...existing, ...incoming];
            },
          },
        },
      },
      User: {
        fields: {
          fullName: {
            read(_, { readField }) {
              return `${readField('firstName')} ${readField('lastName')}`;
            },
          },
        },
      },
    },
  }),
});

// GraphQL queries and mutations
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

const CREATE_USER = gql`
  mutation CreateUser($input: UserInput!) {
    createUser(input: $input) {
      id
      name
      email
    }
  }
`;

// Component with query
import { useQuery, useMutation } from '@apollo/client';

function UserList() {
  const { data, loading, error } = useQuery(GET_USERS, {
    pollInterval: 30000, // Refetch every 30s
    fetchPolicy: 'cache-and-network',
  });

  const [createUser] = useMutation(CREATE_USER, {
    // Optimistic response
    optimisticResponse: {
      createUser: {
        __typename: 'User',
        id: 'temp-id',
        name: 'New User',
        email: 'temp@example.com',
      },
    },
    // Update cache after mutation
    update(cache, { data: { createUser } }) {
      const existing = cache.readQuery({ query: GET_USERS });
      cache.writeQuery({
        query: GET_USERS,
        data: {
          users: [...existing.users, createUser],
        },
      });
    },
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data.users.map(user => (
        <div key={user.id}>{user.name} - {user.email}</div>
      ))}
      <button onClick={() => createUser({ 
        variables: { input: { name: 'John', email: 'john@example.com' } } 
      })}>
        Add User
      </button>
    </div>
  );
}

// Cache normalization example
// Apollo automatically normalizes:
// { users: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }] }
// Into:
// {
//   ROOT_QUERY: { users: [ref('User:1'), ref('User:2')] },
//   'User:1': { id: 1, name: 'John' },
//   'User:2': { id: 2, name: 'Jane' }
// }

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function TodoList() {
  const queryClient = useQueryClient();

  // Fetch todos
  const { data: todos } = useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const res = await fetch('/api/todos');
      return res.json();
    },
  });

  // Mutation with optimistic update
  const updateTodoMutation = useMutation({
    mutationFn: async (updatedTodo) => {
      const res = await fetch(`/api/todos/${updatedTodo.id}`, {
        method: 'PUT',
        body: JSON.stringify(updatedTodo),
      });
      return res.json();
    },
    // Optimistic update
    onMutate: async (updatedTodo) => {
      // Cancel outgoing refetches
      await queryClient.cancelQueries({ queryKey: ['todos'] });

      // Snapshot current value
      const previousTodos = queryClient.getQueryData(['todos']);

      // Optimistically update cache
      queryClient.setQueryData(['todos'], (old) =>
        old.map((todo) =>
          todo.id === updatedTodo.id ? updatedTodo : todo
        )
      );

      // Return context with snapshot
      return { previousTodos };
    },
    // Rollback on error
    onError: (err, updatedTodo, context) => {
      queryClient.setQueryData(['todos'], context.previousTodos);
      console.error('Update failed, rolled back:', err);
    },
    // Refetch after success
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });

  const deleteTodoMutation = useMutation({
    mutationFn: async (id) => {
      await fetch(`/api/todos/${id}`, { method: 'DELETE' });
    },
    onMutate: async (deletedId) => {
      await queryClient.cancelQueries({ queryKey: ['todos'] });
      const previousTodos = queryClient.getQueryData(['todos']);

      // Optimistically remove from UI
      queryClient.setQueryData(['todos'], (old) =>
        old.filter((todo) => todo.id !== deletedId)
      );

      return { previousTodos };
    },
    onError: (err, deletedId, context) => {
      queryClient.setQueryData(['todos'], context.previousTodos);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });

  const handleToggle = (todo) => {
    updateTodoMutation.mutate({
      ...todo,
      completed: !todo.completed,
    });
  };

  return (
    <div>
      {todos?.map((todo) => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => handleToggle(todo)}
          />
          {todo.text}
          <button onClick={() => deleteTodoMutation.mutate(todo.id)}>
            Delete
          </button>
        </div>
      ))}
    </div>
  );
}

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

// Custom WebSocket hook
function useWebSocket(url) {
  const [messages, setMessages] = useState([]);
  const [connectionStatus, setConnectionStatus] = useState('disconnected');
  const ws = useRef(null);
  const reconnectTimeoutRef = useRef(null);

  const connect = () => {
    ws.current = new WebSocket(url);

    ws.current.onopen = () => {
      console.log('Connected');
      setConnectionStatus('connected');
    };

    ws.current.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setMessages((prev) => [...prev, data]);
    };

    ws.current.onerror = (error) => {
      console.error('WebSocket error:', error);
      setConnectionStatus('error');
    };

    ws.current.onclose = () => {
      console.log('Disconnected');
      setConnectionStatus('disconnected');
      
      // Auto-reconnect after 3 seconds
      reconnectTimeoutRef.current = setTimeout(() => {
        console.log('Reconnecting...');
        connect();
      }, 3000);
    };
  };

  useEffect(() => {
    connect();

    return () => {
      if (reconnectTimeoutRef.current) {
        clearTimeout(reconnectTimeoutRef.current);
      }
      if (ws.current) {
        ws.current.close();
      }
    };
  }, [url]);

  const sendMessage = (message) => {
    if (ws.current?.readyState === WebSocket.OPEN) {
      ws.current.send(JSON.stringify(message));
    }
  };

  return { messages, sendMessage, connectionStatus };
}

// Component using WebSocket
function ChatRoom() {
  const { messages, sendMessage, connectionStatus } = useWebSocket(
    'ws://localhost:8080'
  );
  const [input, setInput] = useState('');

  const handleSend = () => {
    sendMessage({ type: 'chat', text: input, timestamp: Date.now() });
    setInput('');
  };

  return (
    <div>
      <div>Status: {connectionStatus}</div>
      <div>
        {messages.map((msg, i) => (
          <div key={i}>{msg.text}</div>
        ))}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && handleSend()}
      />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

// Socket.io alternative
import io from 'socket.io-client';

function useSocketIO(url) {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = io(url, {
      reconnection: true,
      reconnectionDelay: 1000,
      reconnectionAttempts: 5,
    });

    newSocket.on('connect', () => {
      console.log('Socket.io connected');
    });

    setSocket(newSocket);

    return () => newSocket.close();
  }, [url]);

  return socket;
}

// IndexedDB helper class
class DatabaseManager {
  constructor(dbName, version = 1) {
    this.dbName = dbName;
    this.version = version;
    this.db = null;
  }

  async open() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);

      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve(this.db);
      };

      request.onupgradeneeded = (event) => {
        const db = event.target.result;

        // Create object stores
        if (!db.objectStoreNames.contains('todos')) {
          const todoStore = db.createObjectStore('todos', { 
            keyPath: 'id', 
            autoIncrement: true 
          });
          todoStore.createIndex('completed', 'completed', { unique: false });
          todoStore.createIndex('createdAt', 'createdAt', { unique: false });
        }
      };
    });
  }

  async add(storeName, data) {
    const transaction = this.db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    return new Promise((resolve, reject) => {
      const request = store.add(data);
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  async getAll(storeName) {
    const transaction = this.db.transaction([storeName], 'readonly');
    const store = transaction.objectStore(storeName);
    return new Promise((resolve, reject) => {
      const request = store.getAll();
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  async update(storeName, data) {
    const transaction = this.db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    return new Promise((resolve, reject) => {
      const request = store.put(data);
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  async delete(storeName, key) {
    const transaction = this.db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    return new Promise((resolve, reject) => {
      const request = store.delete(key);
      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
}

// React hook for IndexedDB
function useIndexedDB(dbName, storeName) {
  const [db, setDb] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const initDB = async () => {
      const manager = new DatabaseManager(dbName);
      await manager.open();
      setDb(manager);
      setLoading(false);
    };
    initDB();
  }, [dbName]);

  const addItem = async (data) => {
    if (!db) return;
    return db.add(storeName, data);
  };

  const getAllItems = async () => {
    if (!db) return [];
    return db.getAll(storeName);
  };

  const updateItem = async (data) => {
    if (!db) return;
    return db.update(storeName, data);
  };

  const deleteItem = async (key) => {
    if (!db) return;
    return db.delete(storeName, key);
  };

  return { addItem, getAllItems, updateItem, deleteItem, loading };
}

// Component using IndexedDB
function TodoApp() {
  const [todos, setTodos] = useState([]);
  const { addItem, getAllItems, updateItem, deleteItem, loading } = 
    useIndexedDB('TodoDB', 'todos');

  useEffect(() => {
    if (!loading) {
      loadTodos();
    }
  }, [loading]);

  const loadTodos = async () => {
    const items = await getAllItems();
    setTodos(items);
  };

  const handleAdd = async (text) => {
    const newTodo = {
      text,
      completed: false,
      createdAt: Date.now(),
    };
    await addItem(newTodo);
    loadTodos();
  };

  const handleToggle = async (todo) => {
    await updateItem({ ...todo, completed: !todo.completed });
    loadTodos();
  };

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => handleToggle(todo)}
          />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

// EventEmitter class
class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
    
    // Return unsubscribe function
    return () => this.off(event, listener);
  }

  once(event, listener) {
    const onceWrapper = (...args) => {
      listener(...args);
      this.off(event, onceWrapper);
    };
    return this.on(event, onceWrapper);
  }

  emit(event, ...args) {
    if (!this.events[event]) return;
    this.events[event].forEach(listener => listener(...args));
  }

  off(event, listenerToRemove) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(
      listener => listener !== listenerToRemove
    );
  }

  removeAllListeners(event) {
    if (event) {
      delete this.events[event];
    } else {
      this.events = {};
    }
  }
}

// Global event bus instance
const eventBus = new EventEmitter();

// React hook for event subscriptions
function useEventListener(event, handler) {
  useEffect(() => {
    const unsubscribe = eventBus.on(event, handler);
    return unsubscribe; // Cleanup on unmount
  }, [event, handler]);
}

// Components using event bus
function UserProfile() {
  const [user, setUser] = useState(null);

  // Subscribe to user updates
  useEventListener('user:updated', (updatedUser) => {
    setUser(updatedUser);
  });

  return <div>{user?.name}</div>;
}

function UpdateButton() {
  const handleUpdate = () => {
    const newUser = { id: 1, name: 'John Updated' };
    // Emit event to all subscribers
    eventBus.emit('user:updated', newUser);
  };

  return <button onClick={handleUpdate}>Update User</button>;
}

// Custom DOM Events
function NotificationSystem() {
  useEffect(() => {
    const handleNotification = (event) => {
      console.log('Notification:', event.detail);
    };

    window.addEventListener('app:notification', handleNotification);
    return () => window.removeEventListener('app:notification', handleNotification);
  }, []);

  return <div>Notification System</div>;
}

function TriggerNotification() {
  const notify = () => {
    const event = new CustomEvent('app:notification', {
      detail: {
        message: 'Hello World',
        type: 'info',
        timestamp: Date.now(),
      },
    });
    window.dispatchEvent(event);
  };

  return <button onClick={notify}>Send Notification</button>;
}

// Advanced: Typed EventEmitter with TypeScript
interface Events {
  'user:login': (user: User) => void;
  'user:logout': () => void;
  'notification': (message: string) => void;
}

class TypedEventEmitter<T extends Record<string, (...args: any[]) => void>> {
  private events = new Map<keyof T, Set<T[keyof T]>>();

  on<K extends keyof T>(event: K, listener: T[K]): () => void {
    if (!this.events.has(event)) {
      this.events.set(event, new Set());
    }
    this.events.get(event)!.add(listener);
    return () => this.off(event, listener);
  }

  emit<K extends keyof T>(event: K, ...args: Parameters<T[K]>): void {
    this.events.get(event)?.forEach(listener => listener(...args));
  }

  off<K extends keyof T>(event: K, listener: T[K]): void {
    this.events.get(event)?.delete(listener);
  }
}

const typedEventBus = new TypedEventEmitter<Events>();
typedEventBus.on('user:login', (user) => console.log(user));
typedEventBus.emit('user:login', { id: 1, name: 'John' });

import React from 'react';

// Form submission with preventDefault
function LoginForm() {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault(); // Prevent page reload
    
    const formData = new FormData(event.currentTarget);
    const email = formData.get('email') as string;
    const password = formData.get('password') as string;
    
    console.log({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit">Login</button>
    </form>
  );
}

// Click event with stopPropagation
function NestedButtons() {
  const handleParentClick = () => {
    console.log('Parent clicked');
  };

  const handleChildClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation(); // Prevent parent handler from firing
    console.log('Child clicked');
  };

  return (
    <div onClick={handleParentClick} style={{ padding: '20px', background: '#eee' }}>
      <button onClick={handleChildClick}>
        Click me (won't trigger parent)
      </button>
    </div>
  );
}

// Input change with proper typing
function SearchInput() {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    console.log('Search:', value);
  };

  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      event.preventDefault();
      console.log('Search submitted');
    }
  };

  return (
    <input
      type="text"
      onChange={handleChange}
      onKeyPress={handleKeyPress}
      placeholder="Search..."
    />
  );
}

// Mouse events with coordinates
function TrackMouse() {
  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
    const { clientX, clientY, pageX, pageY } = event;
    console.log('Client:', clientX, clientY);
    console.log('Page:', pageX, pageY);
  };

  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    // Access native event for browser-specific features
    console.log('Native event:', event.nativeEvent);
    console.log('Button clicked:', event.button); // 0=left, 1=middle, 2=right
  };

  return (
    <div 
      onMouseMove={handleMouseMove}
      onClick={handleClick}
      style={{ width: '300px', height: '300px', background: '#f0f0f0' }}
    >
      Move mouse here
    </div>
  );
}

// Focus events
function FocusExample() {
  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
    event.target.style.borderColor = 'blue';
  };

  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
    event.target.style.borderColor = 'gray';
  };

  return (
    <input
      type="text"
      onFocus={handleFocus}
      onBlur={handleBlur}
      placeholder="Focus me"
    />
  );
}