Chapter 16: Real-World Scenarios & UX Edge Cases

// src/hooks/useDebounce.ts
import { useEffect, useState } from 'react';

/**
 * Custom hook to debounce a value.
 * @param value The value to debounce.
 * @param delay The debounce delay in milliseconds.
 * @returns The debounced value.
 */
export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    // Set debouncedValue to value (after delay)
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Return a cleanup function that will be called every time
    // useEffect is re-executed (due to value or delay changing)
    // or when the component unmounts. This clears the previous timer.
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // Only re-call effect if value or delay changes

  return debouncedValue;
}

// src/components/AutosaveEditor.tsx
import React, { useState, useEffect, useRef } from 'react';
import { useDebounce } from '../hooks/useDebounce'; // Assuming you created this file

interface DocumentData {
  id: string;
  content: string;
  lastModified: string; // ISO string timestamp
}

// Simulate a backend API call
const mockBackend = {
  // This would typically fetch from a database
  fetchDocument: async (docId: string): Promise<DocumentData> => {
    console.log(`[Backend] Fetching document ${docId}...`);
    return new Promise((resolve) => {
      setTimeout(() => {
        const storedDoc = localStorage.getItem(`doc-${docId}`);
        if (storedDoc) {
          resolve(JSON.parse(storedDoc));
        } else {
          resolve({
            id: docId,
            content: 'Start typing your document here...',
            lastModified: new Date().toISOString(),
          });
        }
      }, 500);
    });
  },

  // This would typically save to a database, checking lastModified
  saveDocument: async (doc: DocumentData, currentServerModified: string): Promise<DocumentData | null> => {
    console.log(`[Backend] Attempting to save document ${doc.id}...`);
    return new Promise((resolve) => {
      setTimeout(() => {
        const serverDocString = localStorage.getItem(`doc-${doc.id}`);
        let serverDoc: DocumentData | null = null;
        if (serverDocString) {
          serverDoc = JSON.parse(serverDocString);
        }

        // Simulate conflict detection: if client's 'currentServerModified'
        // does not match the actual 'serverDoc.lastModified', a conflict occurred.
        if (serverDoc && serverDoc.lastModified !== currentServerModified) {
          console.warn(`[Backend] Conflict detected for doc ${doc.id}! Server version is newer.`);
          // In a real app, you'd send back the server's version and prompt the user.
          resolve(null); // Indicate conflict
          return;
        }

        const newDoc: DocumentData = {
          ...doc,
          lastModified: new Date().toISOString(), // Update timestamp on successful save
        };
        localStorage.setItem(`doc-${doc.id}`, JSON.stringify(newDoc));
        console.log(`[Backend] Document ${doc.id} saved successfully.`);
        resolve(newDoc);
      }, 1000);
    });
  },
};

const DOCUMENT_ID = 'my-important-doc';

export const AutosaveEditor: React.FC = () => {
  const [document, setDocument] = useState<DocumentData | null>(null);
  const [editorContent, setEditorContent] = useState('');
  const [isSaving, setIsSaving] = useState(false);
  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error' | 'conflict'>('idle');

  // Store the last known server-side lastModified timestamp.
  // This is crucial for optimistic locking / conflict detection.
  const serverLastModifiedRef = useRef<string>('');

  // Debounce the editor content to trigger saves only after a pause
  const debouncedEditorContent = useDebounce(editorContent, 1500); // 1.5 seconds debounce

  // Effect to load the document initially
  useEffect(() => {
    const loadDoc = async () => {
      const doc = await mockBackend.fetchDocument(DOCUMENT_ID);
      setDocument(doc);
      setEditorContent(doc.content);
      serverLastModifiedRef.current = doc.lastModified; // Initialize with server's timestamp
    };
    loadDoc();
  }, []);

  // Effect to handle autosaving when debounced content changes
  useEffect(() => {
    // Only attempt to save if document is loaded and content has actually changed
    // and it's not the initial load value
    if (document && editorContent !== document.content && !isSaving && saveStatus !== 'conflict') {
      const performAutosave = async () => {
        setIsSaving(true);
        setSaveStatus('saving');

        const updatedDoc: DocumentData = {
          ...document,
          content: debouncedEditorContent,
        };

        try {
          // Pass the last known server-side timestamp for conflict checking
          const savedDoc = await mockBackend.saveDocument(updatedDoc, serverLastModifiedRef.current);

          if (savedDoc) {
            setDocument(savedDoc);
            serverLastModifiedRef.current = savedDoc.lastModified; // Update ref with new timestamp
            setSaveStatus('saved');
            console.log('Autosave successful!');
          } else {
            // Conflict occurred or save failed
            setSaveStatus('conflict');
            console.error('Autosave conflict: Your changes could not be saved because the document was modified elsewhere.');
            // In a real app, you'd fetch the latest server version and show a merge UI.
          }
        } catch (error) {
          console.error('Autosave failed:', error);
          setSaveStatus('error');
        } finally {
          setIsSaving(false);
        }
      };

      if (debouncedEditorContent !== document.content) { // Ensure content genuinely changed
        performAutosave();
      }
    }
  }, [debouncedEditorContent, document, editorContent, isSaving, saveStatus]);

  if (!document) {
    return <div>Loading document...</div>;
  }

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h2>Autosave Editor</h2>
      <p>Status: {saveStatus === 'saving' ? 'Saving...' : saveStatus === 'saved' ? 'Saved!' : saveStatus === 'error' ? 'Error!' : saveStatus === 'conflict' ? 'Conflict! Resolve manually.' : 'Idle'}</p>
      {saveStatus === 'conflict' && (
        <p style={{ color: 'red' }}>
          **Conflict Detected!** Your changes might overwrite others. Please refresh or resolve manually.
        </p>
      )}
      <textarea
        value={editorContent}
        onChange={(e) => setEditorContent(e.target.value)}
        rows={15}
        cols={80}
        style={{ width: '100%', minHeight: '300px', padding: '10px', fontSize: '16px' }}
      />
      <p>Last Modified (Client): {document.lastModified ? new Date(document.lastModified).toLocaleString() : 'N/A'}</p>
      <p>Last Known Server Modified: {serverLastModifiedRef.current ? new Date(serverLastModifiedRef.current).toLocaleString() : 'N/A'}</p>
    </div>
  );
};

// src/App.tsx
import React from 'react';
import { AutosaveEditor } from './components/AutosaveEditor';
// ... other imports

function App() {
  return (
    <div className="App">
      <h1>My React App</h1>
      <AutosaveEditor />
    </div>
  );
}

export default App;

// src/components/ResumableUploader.tsx
import React, { useState, useRef, useEffect, useCallback } from 'react';

const CHUNK_SIZE = 1024 * 1024 * 5; // 5MB chunks for demonstration

interface UploadProgress {
  fileName: string;
  fileSize: number;
  uploadedBytes: number;
  uploadId: string; // A unique ID for this specific upload session
}

// Simulate a backend for chunk uploads
const mockUploadBackend = {
  // Initiates an upload and returns an uploadId and current progress
  initiateUpload: async (fileName: string, fileSize: number): Promise<UploadProgress> => {
    console.log(`[Backend] Initiating upload for ${fileName} (${fileSize} bytes)...`);
    return new Promise((resolve) => {
      setTimeout(() => {
        const uploadId = `upload-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
        const storedProgress = localStorage.getItem(`upload_progress_${uploadId}`); // Check for existing progress
        let uploadedBytes = 0;
        if (storedProgress) {
          const parsedProgress: UploadProgress = JSON.parse(storedProgress);
          uploadedBytes = parsedProgress.uploadedBytes;
          console.log(`[Backend] Resuming upload for ${fileName}. Already uploaded: ${uploadedBytes} bytes.`);
        } else {
          console.log(`[Backend] New upload for ${fileName}.`);
        }

        const progress: UploadProgress = { fileName, fileSize, uploadedBytes, uploadId };
        localStorage.setItem(`upload_progress_${uploadId}`, JSON.stringify(progress));
        resolve(progress);
      }, 500);
    });
  },

  // Uploads a single chunk
  uploadChunk: async (uploadId: string, chunk: Blob, startByte: number, endByte: number): Promise<UploadProgress | null> => {
    console.log(`[Backend] Uploading chunk for ${uploadId}: ${startByte}-${endByte}`);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // Simulate network error 10% of the time
        if (Math.random() < 0.1) {
          console.error(`[Backend] Simulated network error for chunk ${startByte}-${endByte}`);
          reject(new Error('Simulated network error'));
          return;
        }

        const storedProgress = localStorage.getItem(`upload_progress_${uploadId}`);
        if (!storedProgress) {
          console.error(`[Backend] Upload ID ${uploadId} not found.`);
          resolve(null);
          return;
        }

        const currentProgress: UploadProgress = JSON.parse(storedProgress);
        // Ensure we're not overwriting newer progress if chunks arrive out of order (less critical for sequential upload)
        const newUploadedBytes = Math.max(currentProgress.uploadedBytes, endByte);

        const updatedProgress: UploadProgress = {
          ...currentProgress,
          uploadedBytes: newUploadedBytes,
        };
        localStorage.setItem(`upload_progress_${uploadId}`, JSON.stringify(updatedProgress));
        resolve(updatedProgress);
      }, 800 + Math.random() * 500); // Simulate variable network latency
    });
  },

  // Completes the upload
  completeUpload: async (uploadId: string): Promise<boolean> => {
    console.log(`[Backend] Completing upload for ${uploadId}.`);
    return new Promise((resolve) => {
      setTimeout(() => {
        localStorage.removeItem(`upload_progress_${uploadId}`); // Clear progress
        console.log(`[Backend] Upload ${uploadId} completed and cleaned up.`);
        resolve(true);
      }, 300);
    });
  },
};

export const ResumableUploader: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  const [uploadProgress, setUploadProgress] = useState<UploadProgress | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const currentUploadIdRef = useRef<string | null>(null); // To keep track of the current upload session

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      setFile(event.target.files[0]);
      setUploadProgress(null); // Reset progress for new file
      setError(null);
      currentUploadIdRef.current = null; // Reset upload ID
    }
  };

  const uploadFile = useCallback(async () => {
    if (!file) {
      setError('Please select a file first.');
      return;
    }

    if (isUploading) return; // Prevent multiple simultaneous uploads

    setIsUploading(true);
    setError(null);

    try {
      let initialProgress: UploadProgress;
      if (currentUploadIdRef.current) {
        // If an upload ID already exists (e.g., resuming), retrieve its progress
        const stored = localStorage.getItem(`upload_progress_${currentUploadIdRef.current}`);
        if (stored) {
          initialProgress = JSON.parse(stored);
        } else {
          // If ID exists but no stored progress, re-initiate
          initialProgress = await mockUploadBackend.initiateUpload(file.name, file.size);
          currentUploadIdRef.current = initialProgress.uploadId;
        }
      } else {
        // New upload
        initialProgress = await mockUploadBackend.initiateUpload(file.name, file.size);
        currentUploadIdRef.current = initialProgress.uploadId;
      }

      setUploadProgress(initialProgress);
      let uploadedBytes = initialProgress.uploadedBytes;

      while (uploadedBytes < file.size) {
        const start = uploadedBytes;
        const end = Math.min(uploadedBytes + CHUNK_SIZE, file.size);
        const chunk = file.slice(start, end);

        if (!currentUploadIdRef.current) {
          // This can happen if the component unmounts or upload is cancelled
          throw new Error('Upload cancelled or ID lost.');
        }

        try {
          const updatedProgress = await mockUploadBackend.uploadChunk(currentUploadIdRef.current, chunk, start, end);
          if (updatedProgress) {
            setUploadProgress(updatedProgress);
            uploadedBytes = updatedProgress.uploadedBytes;
          } else {
            throw new Error('Failed to upload chunk: No progress returned.');
          }
        } catch (chunkError: any) {
          console.error(`Error uploading chunk ${start}-${end}:`, chunkError);
          setError(`Failed to upload chunk. Retrying... (or implement retry logic)`);
          // In a real application, you'd implement retry logic here,
          // possibly with exponential backoff before giving up.
          // For now, we'll just stop on error.
          throw chunkError; // Re-throw to exit the loop
        }
      }

      if (currentUploadIdRef.current) {
        await mockUploadBackend.completeUpload(currentUploadIdRef.current);
        setUploadProgress((prev) => prev ? { ...prev, uploadedBytes: file.size } : null); // Ensure 100%
        alert('File uploaded successfully!');
        setFile(null); // Clear file after successful upload
        if (fileInputRef.current) {
          fileInputRef.current.value = ''; // Clear file input
        }
        currentUploadIdRef.current = null;
      }
    } catch (err: any) {
      console.error('Upload failed:', err);
      setError(`Upload failed: ${err.message}`);
    } finally {
      setIsUploading(false);
    }
  }, [file, isUploading]);

  const cancelUpload = () => {
    if (currentUploadIdRef.current) {
      localStorage.removeItem(`upload_progress_${currentUploadIdRef.current}`);
    }
    setFile(null);
    setUploadProgress(null);
    setIsUploading(false);
    setError(null);
    currentUploadIdRef.current = null;
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
    alert('Upload cancelled!');
  };

  const progressPercentage = uploadProgress && file ? (uploadProgress.uploadedBytes / file.size) * 100 : 0;

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', marginTop: '20px' }}>
      <h2>Resumable File Uploader</h2>
      <input type="file" onChange={handleFileChange} ref={fileInputRef} disabled={isUploading} />
      {file && <p>Selected file: {file.name} ({(file.size / (1024 * 1024)).toFixed(2)} MB)</p>}

      <button onClick={uploadFile} disabled={!file || isUploading} style={{ margin: '10px 5px' }}>
        {uploadProgress && uploadProgress.uploadedBytes > 0 && uploadProgress.uploadedBytes < (file?.size || 0)
         ? 'Resume Upload' : 'Start Upload'}
      </button>
      <button onClick={cancelUpload} disabled={!isUploading && !file} style={{ margin: '10px 5px' }}>
        Cancel Upload
      </button>

      {isUploading && <p>Uploading...</p>}
      {uploadProgress && (
        <div>
          <progress value={uploadProgress.uploadedBytes} max={uploadProgress.fileSize} style={{ width: '100%' }} />
          <p>{progressPercentage.toFixed(2)}% uploaded ({uploadProgress.uploadedBytes} / {uploadProgress.fileSize} bytes)</p>
        </div>
      )}
      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
      <p style={{ fontSize: '0.8em', color: '#666' }}>
        * Simulate a network error by refreshing the page during an upload.
        When you click "Resume Upload", it should continue from where it left off.
      </p>
    </div>
  );
};

// src/App.tsx
import React from 'react';
import { AutosaveEditor } from './components/AutosaveEditor';
import { ResumableUploader } from './components/ResumableUploader';
// ... other imports

function App() {
  return (
    <div className="App">
      <h1>My React App</h1>
      <AutosaveEditor />
      <ResumableUploader />
    </div>
  );
}

export default App;

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
# or
yarn add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

// src/components/SortableList.tsx
import React, { useState } from 'react';
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
} from '@dnd-kit/core';
import {
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
  useSortable,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

interface ItemProps {
  id: string;
  children: React.ReactNode;
}

// Draggable and Sortable Item Component
const SortableItem: React.FC<ItemProps> = ({ id, children }) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    padding: '10px',
    margin: '5px 0',
    border: '1px solid #ddd',
    backgroundColor: isDragging ? '#e0f7fa' : 'white',
    borderRadius: '4px',
    cursor: 'grab',
    listStyle: 'none', // Remove default list styling for better control
    opacity: isDragging ? 0.8 : 1,
    zIndex: isDragging ? 10 : 0, // Bring dragged item to front
  };

  return (
    <li ref={setNodeRef} style={style as React.CSSProperties} {...attributes} {...listeners}>
      {children}
    </li>
  );
};

export const SortableList: React.FC = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']);

  // Dnd-kit sensors: PointerSensor for mouse/touch, KeyboardSensor for accessibility
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  // Helper to reorder array items
  const arrayMove = <T,>(array: T[], fromIndex: number, toIndex: number): T[] => {
    const newArray = [...array];
    const [removed] = newArray.splice(fromIndex, 1);
    newArray.splice(toIndex, 0, removed);
    return newArray;
  };

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;

    if (active.id !== over?.id) {
      setItems((currentItems) => {
        const oldIndex = currentItems.indexOf(active.id as string);
        const newIndex = currentItems.indexOf(over?.id as string);
        return arrayMove(currentItems, oldIndex, newIndex);
      });
    }
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', marginTop: '20px' }}>
      <h2>Sortable Task List</h2>
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter} // Strategy to determine what item is being dragged over
        onDragEnd={handleDragEnd}
      >
        <SortableContext
          items={items} // The unique identifiers for your sortable items
          strategy={verticalListSortingStrategy} // How items are sorted (vertical, horizontal, grid)
        >
          <ul style={{ padding: 0, margin: 0 }}>
            {items.map((item) => (
              <SortableItem key={item} id={item}>
                {item}
              </SortableItem>
            ))}
          </ul>
        </SortableContext>
      </DndContext>
    </div>
  );
};

// src/App.tsx
import React from 'react';
import { AutosaveEditor } from './components/AutosaveEditor';
import { ResumableUploader } from './components/ResumableUploader';
import { SortableList } from './components/SortableList';
// ... other imports

function App() {
  return (
    <div className="App">
      <h1>My React App</h1>
      <AutosaveEditor />
      <ResumableUploader />
      <SortableList />
    </div>
  );
}

export default App;

// src/components/ClipboardHandlers.tsx
import React, { useState, useCallback } from 'react';
import DOMPurify from 'dompurify'; // For sanitizing HTML

// Install DOMPurify:
// npm install dompurify
// npm install --save-dev @types/dompurify (for TypeScript)

// As of 2026-02-11, DOMPurify v3.0.6 is a stable version.

export const ClipboardHandlers: React.FC = () => {
  const [textToCopy] = useState('This is some text to copy to your clipboard!');
  const [copyStatus, setCopyStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const [pasteInput, setPasteInput] = useState('');
  const [sanitizedPasteOutput, setSanitizedPasteOutput] = useState('');
  const [rawPasteOutput, setRawPasteOutput] = useState('');

  // Function to copy text to clipboard
  const handleCopyToClipboard = useCallback(async () => {
    try {
      // Modern way: navigator.clipboard.writeText
      // Requires user gesture and can prompt for permission
      await navigator.clipboard.writeText(textToCopy);
      setCopyStatus('success');
      setTimeout(() => setCopyStatus('idle'), 2000); // Reset status after 2 seconds
    } catch (err) {
      console.error('Failed to copy text:', err);
      setCopyStatus('error');
      setTimeout(() => setCopyStatus('idle'), 2000);
      // Fallback for older browsers or specific contexts if needed:
      // const textArea = document.createElement('textarea');
      // textArea.value = textToCopy;
      // document.body.appendChild(textArea);
      // textArea.focus();
      // textArea.select();
      // try {
      //   document.execCommand('copy');
      //   setCopyStatus('success');
      // } catch (fallbackErr) {
      //   console.error('Fallback copy failed:', fallbackErr);
      //   setCopyStatus('error');
      // } finally {
      //   document.body.removeChild(textArea);
      // }
    }
  }, [textToCopy]);

  // Function to handle paste event and sanitize input
  const handlePaste = useCallback((event: React.ClipboardEvent<HTMLTextAreaElement>) => {
    event.preventDefault(); // Prevent default paste behavior

    const pastedText = event.clipboardData.getData('text/plain');
    setRawPasteOutput(pastedText);

    // Sanitize the pasted text to remove any potentially harmful HTML or unwanted styles
    // We're using DOMPurify for this.
    const cleanText = DOMPurify.sanitize(pastedText, { USE_PROFILES: { html: false } }); // Only allow plain text
    setSanitizedPasteOutput(cleanText);
    setPasteInput(cleanText); // Update the input with the sanitized text

    console.log('Raw pasted text:', pastedText);
    console.log('Sanitized pasted text:', cleanText);
  }, []);

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', marginTop: '20px' }}>
      <h2>Clipboard Interactions</h2>

      {/* Copy to Clipboard Section */}
      <h3>Copy Text</h3>
      <p>Text to copy: <strong>"{textToCopy}"</strong></p>
      <button onClick={handleCopyToClipboard}>
        {copyStatus === 'success' ? 'Copied!' : copyStatus === 'error' ? 'Failed!' : 'Copy to Clipboard'}
      </button>
      {copyStatus === 'error' && <span style={{ color: 'red', marginLeft: '10px' }}>Permission denied or browser unsupported.</span>}

      {/* Paste Handling Section */}
      <h3 style={{ marginTop: '20px' }}>Paste & Sanitize</h3>
      <p>Try pasting some rich text (e.g., from a Word document or another webpage) into the textarea below.</p>
      <textarea
        value={pasteInput}
        onChange={(e) => setPasteInput(e.target.value)}
        onPaste={handlePaste} // Custom paste handler
        rows={8}
        cols={60}
        placeholder="Paste here to see sanitization in action..."
        style={{ width: '100%', minHeight: '150px', padding: '10px', fontSize: '14px' }}
      />
      <p><strong>Raw Pasted Content:</strong></p>
      <pre style={{ whiteSpace: 'pre-wrap', backgroundColor: '#f0f0f0', padding: '10px', borderRadius: '4px' }}>
        {rawPasteOutput || 'N/A'}
      </pre>
      <p><strong>Sanitized Content (used in input):</strong></p>
      <pre style={{ whiteSpace: 'pre-wrap', backgroundColor: '#e6ffe6', padding: '10px', borderRadius: '4px' }}>
        {sanitizedPasteOutput || 'N/A'}
      </pre>
    </div>
  );
};

npm install dompurify
npm install --save-dev @types/dompurify # For TypeScript support

// src/App.tsx
import React from 'react';
import { AutosaveEditor } from './components/AutosaveEditor';
import { ResumableUploader } from './components/ResumableUploader';
import { SortableList } from './components/SortableList';
import { ClipboardHandlers } from './components/ClipboardHandlers';
// ... other imports

function App() {
  return (
    <div className="App">
      <h1>My React App</h1>
      <AutosaveEditor />
      <ResumableUploader />
      <SortableList />
      <ClipboardHandlers />
    </div>
  );
}

export default App;

// src/components/MultiTabSync.tsx
import React, { useState, useEffect, useRef, useCallback } from 'react';

// Name for our broadcast channel
const CHANNEL_NAME = 'app-sync-channel';

export const MultiTabSync: React.FC = () => {
  const [localCounter, setLocalCounter] = useState(0);
  const broadcastChannelRef = useRef<BroadcastChannel | null>(null);

  // Initialize BroadcastChannel
  useEffect(() => {
    // Check if BroadcastChannel is supported
    if (typeof window !== 'undefined' && 'BroadcastChannel' in window) {
      const channel = new BroadcastChannel(CHANNEL_NAME);
      broadcastChannelRef.current = channel;

      channel.onmessage = (event) => {
        // We only care about messages related to the counter
        if (event.data && event.data.type === 'UPDATE_COUNTER') {
          console.log(`[Tab ${window.name || window.innerWidth}] Received counter update: ${event.data.payload}`);
          setLocalCounter(event.data.payload);
        }
        if (event.data && event.data.type === 'LOGOUT') {
          console.log(`[Tab ${window.name || window.innerWidth}] Received logout signal.`);
          alert('You have been logged out in another tab!');
          // In a real app, you would clear auth tokens, redirect, etc.
          setLocalCounter(0); // Reset for demo
        }
      };

      // Cleanup function for useEffect
      return () => {
        console.log(`[Tab ${window.name || window.innerWidth}] Closing BroadcastChannel.`);
        channel.close();
      };
    } else {
      console.warn('BroadcastChannel API not supported in this browser.');
    }
  }, []); // Empty dependency array means this runs once on mount and cleans up on unmount

  // Function to increment counter and broadcast
  const incrementAndBroadcast = useCallback(() => {
    setLocalCounter((prevCounter) => {
      const newCounter = prevCounter + 1;
      if (broadcastChannelRef.current) {
        // Send a message to all other tabs listening on the same channel
        broadcastChannelRef.current.postMessage({
          type: 'UPDATE_COUNTER',
          payload: newCounter,
        });
        console.log(`[Tab ${window.name || window.innerWidth}] Broadcasted counter: ${newCounter}`);
      }
      return newCounter;
    });
  }, []);

  // Function to simulate logout and broadcast
  const simulateLogout = useCallback(() => {
    if (broadcastChannelRef.current) {
      broadcastChannelRef.current.postMessage({
        type: 'LOGOUT',
        payload: null,
      });
      console.log(`[Tab ${window.name || window.innerWidth}] Broadcasted logout signal.`);
    }
    alert('You initiated logout in this tab!');
    setLocalCounter(0); // Reset for demo
    // In a real app, clear local storage, redirect, etc.
  }, []);

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', marginTop: '20px' }}>
      <h2>Multi-Tab Synchronization (BroadcastChannel)</h2>
      <p>Open this page in multiple tabs to see synchronization in action.</p>
      <p>Current Counter: <strong>{localCounter}</strong></p>
      <button onClick={incrementAndBroadcast} style={{ margin: '10px 5px' }}>
        Increment & Sync Counter
      </button>
      <button onClick={simulateLogout} style={{ margin: '10px 5px', backgroundColor: '#f44336', color: 'white' }}>
        Simulate Logout
      </button>
      {!('BroadcastChannel' in window) && (
        <p style={{ color: 'orange' }}>Your browser does not support BroadcastChannel API.</p>
      )}
    </div>
  );
};

// src/App.tsx
import React from 'react';
import { AutosaveEditor } from './components/AutosaveEditor';
import { ResumableUploader } from './components/ResumableUploader';
import { SortableList } from './components/SortableList';
import { ClipboardHandlers } from './components/ClipboardHandlers';
import { MultiTabSync } from './components/MultiTabSync';
// ... other imports

function App() {
  return (
    <div className="App">
      <h1>My React App</h1>
      <AutosaveEditor />
      <ResumableUploader />
      <SortableList />
      <ClipboardHandlers />
      <MultiTabSync />
    </div>
  );
}

export default App;