import { useState, useEffect } from 'react'

type PageId = 'overview' | 'scan' | 'process' | 'identify' | 'auto-match' | 'search' | 'modify' | 'tags' | 'faces-maintenance' | 'user-identified-faces' | 'user-reported-photos' | 'user-tagged-photos' | 'user-uploaded-photos' | 'users'

const HELP_PAGE_STORAGE_KEY = 'help_current_page'

export default function Help() {
  // Load saved page from sessionStorage on mount, default to 'overview'
  const [currentPage, setCurrentPage] = useState<PageId>(() => {
    try {
      const saved = sessionStorage.getItem(HELP_PAGE_STORAGE_KEY)
      if (saved && ['overview', 'scan', 'process', 'identify', 'auto-match', 'search', 'modify', 'tags', 'faces-maintenance', 'user-identified-faces', 'user-reported-photos', 'user-tagged-photos', 'user-uploaded-photos', 'users'].includes(saved)) {
        return saved as PageId
      }
    } catch (error) {
      console.error('Error loading help page from sessionStorage:', error)
    }
    return 'overview'
  })

  // Save current page to sessionStorage whenever it changes
  useEffect(() => {
    try {
      sessionStorage.setItem(HELP_PAGE_STORAGE_KEY, currentPage)
    } catch (error) {
      console.error('Error saving help page to sessionStorage:', error)
    }
  }, [currentPage])

  const renderPageContent = () => {
    switch (currentPage) {
      case 'overview':
        return <NavigationOverview onPageClick={setCurrentPage} />
      case 'scan':
        return <ScanPageHelp onBack={() => setCurrentPage('overview')} />
      case 'process':
        return <ProcessPageHelp onBack={() => setCurrentPage('overview')} />
      case 'identify':
        return <IdentifyPageHelp onBack={() => setCurrentPage('overview')} />
      case 'auto-match':
        return <AutoMatchPageHelp onBack={() => setCurrentPage('overview')} />
      case 'search':
        return <SearchPageHelp onBack={() => setCurrentPage('overview')} />
      case 'modify':
        return <ModifyPageHelp onBack={() => setCurrentPage('overview')} />
      case 'tags':
        return <TagsPageHelp onBack={() => setCurrentPage('overview')} />
      case 'faces-maintenance':
        return <FacesMaintenancePageHelp onBack={() => setCurrentPage('overview')} />
      case 'user-identified-faces':
        return <UserIdentifiedFacesPageHelp onBack={() => setCurrentPage('overview')} />
      case 'user-reported-photos':
        return <UserReportedPhotosPageHelp onBack={() => setCurrentPage('overview')} />
      case 'user-tagged-photos':
        return <UserTaggedPhotosPageHelp onBack={() => setCurrentPage('overview')} />
      case 'user-uploaded-photos':
        return <UserUploadedPhotosPageHelp onBack={() => setCurrentPage('overview')} />
      case 'users':
        return <UsersPageHelp onBack={() => setCurrentPage('overview')} />
      default:
        return <NavigationOverview onPageClick={setCurrentPage} />
    }
  }

  return (
    <div className="max-w-4xl mx-auto">
      {renderPageContent()}
    </div>
  )
}

function NavigationOverview({ onPageClick }: { onPageClick: (page: PageId) => void }) {
  const mainNavItems = [
    { id: 'scan' as PageId, icon: '🗂️', label: 'Scan', description: 'Import photos from folders or upload files' },
    { id: 'process' as PageId, icon: '⚙️', label: 'Process', description: 'Detect and process faces in photos' },
    { id: 'identify' as PageId, icon: '👤', label: 'Identify People', description: 'Manually identify people in faces' },
    { id: 'auto-match' as PageId, icon: '🤖', label: 'Auto-Match', description: 'Automatically match similar faces to previously identified faces' },
    { id: 'search' as PageId, icon: '🔍', label: 'Search Photos', description: 'Search and filter photos' },
    { id: 'modify' as PageId, icon: '✏️', label: 'Modify People', description: 'Edit person information' },
    { id: 'tags' as PageId, icon: '🏷️', label: 'Tag Photos', description: 'Tag photos and manage photo tags' },
  ]

  const maintenanceNavItems = [
    { id: 'faces-maintenance' as PageId, icon: '🔧', label: 'Faces', description: 'Remove unwanted faces from the database (under Maintenance tab)' },
    { id: 'user-identified-faces' as PageId, icon: '✅', label: 'User Identified Faces', description: 'Approve or deny face identifications made by users (under Maintenance tab)' },
    { id: 'user-reported-photos' as PageId, icon: '🚨', label: 'User Reported Photos', description: 'Review and manage photos reported by users (under Maintenance tab)' },
    { id: 'user-tagged-photos' as PageId, icon: '🏷️', label: 'User Tagged Photos', description: 'Approve or deny tags suggested by users (under Maintenance tab)' },
    { id: 'user-uploaded-photos' as PageId, icon: '📤', label: 'User Uploaded Photos', description: 'Approve or reject photos uploaded by users (under Maintenance tab)' },
    { id: 'users' as PageId, icon: '👥', label: 'Users', description: 'Manage backend users, frontend users, and roles (under Maintenance tab)' },
  ]

  return (
    <div className="bg-white rounded-lg shadow p-6">
      <h2 className="text-2xl font-bold text-gray-900 mb-4">Navigation Overview</h2>
      <p className="text-gray-700 mb-6">
        The application uses a <strong>left sidebar navigation</strong> with the following pages. Click on any page to learn more about it:
      </p>
      
      <div className="mb-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-3">Main Pages</h3>
        <div className="grid grid-cols-1 gap-3">
          {mainNavItems.map((item) => (
            <button
              key={item.id}
              onClick={() => onPageClick(item.id)}
              className="flex items-center gap-4 p-4 hover:bg-gray-50 rounded-lg border border-gray-200 text-left transition-colors"
            >
              <span className="text-2xl">{item.icon}</span>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-semibold text-gray-900">{item.label}</span>
                </div>
                <p className="text-sm text-gray-600 mt-1">{item.description}</p>
              </div>
              <span className="text-gray-400">→</span>
            </button>
          ))}
        </div>
      </div>

      <div>
        <h3 className="text-lg font-semibold text-gray-800 mb-3">Maintenance Tab</h3>
        <p className="text-sm text-gray-600 mb-3">These pages are located under the <strong>Maintenance</strong> tab in the navigation sidebar:</p>
        <div className="grid grid-cols-1 gap-3">
          {maintenanceNavItems.map((item) => (
            <button
              key={item.id}
              onClick={() => onPageClick(item.id)}
              className="flex items-center gap-4 p-4 hover:bg-gray-50 rounded-lg border border-gray-200 text-left transition-colors"
            >
              <span className="text-2xl">{item.icon}</span>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-semibold text-gray-900">{item.label}</span>
                </div>
                <p className="text-sm text-gray-600 mt-1">{item.description}</p>
              </div>
              <span className="text-gray-400">→</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

function PageHelpLayout({ title, onBack, children }: { title: string; onBack: () => void; children: React.ReactNode }) {
  return (
    <div className="bg-white rounded-lg shadow p-6">
      <div className="flex items-center gap-4 mb-6">
        <button
          onClick={onBack}
          className="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 font-medium"
        >
          ← Back
        </button>
        <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
      </div>
      {children}
    </div>
  )
}

function ScanPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Scan Page" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Import photos into your collection from folders or upload files</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Folder Selection:</strong> Browse and select folders containing photos</li>
            <li><strong>Recursive Scanning:</strong> Option to scan subdirectories recursively (enabled by default)</li>
            <li><strong>Duplicate Detection:</strong> Automatically detects and skips duplicate photos</li>
            <li><strong>Real-time Progress:</strong> Live progress tracking during import</li>
            
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <p className="text-gray-700 font-medium mb-2">Folder Scan:</p>
          <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
            <li>Click "Browse Folder" button</li>
            <li>Select a folder containing photos</li>
            <li>Toggle "Subdirectories recursively" if you want to include subfolders (enabled by default)</li>
            <li>Click "Start Scan" button</li>
            <li>Monitor progress in the progress bar</li>
            <li>View results (photos added, existing photos skipped)</li>
          </ol>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">What Happens</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            
            <li>Photos are added to database</li>
            <li>Faces are NOT detected yet (use Process page for that)</li>
          </ul>
        </div>
        
      </div>
    </PageHelpLayout>
  )
}

function ProcessPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Process Page" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Detect faces in imported photos and generate face encodings</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">    
            <li><strong>Batch Size:</strong> Configure how many photos to process at once</li>
            <li><strong>Real-time Progress:</strong> Live progress tracking</li>
            <li><strong>Job Cancellation:</strong> Stop processing if needed</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
            <li>Optionally set <strong>Batch Size</strong> - the amount of photos to process (leave empty to process all unprocessed photos)</li>
            <li>Click "Start Processing" button</li>
            <li>Monitor progress:
              <ul className="list-disc list-inside ml-4 mt-1">
                <li>Progress bar shows overall completion</li>
                <li>Photo count shows photos processed</li>
                <li>Face count shows faces detected and stored</li>
              </ul>
            </li>
            <li>Wait for completion or click "Stop Processing" to cancel</li>
          </ol>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">What Happens</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Each unprocessed photo is analyzed</li>
            <li>Faces are detected and located</li>      
            <li>Photos are marked as processed</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>You can cancel and resume later</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function IdentifyPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Identify People" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Identify people in photos and videos. This page has two tabs: "Identify Faces" for identifying people through detected faces, and "Identify People in Videos" for directly identifying people in video files.</p>
        </div>
        
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tab 1: Identify Faces</h3>
          <div className="mb-4">
            <h4 className="text-md font-semibold text-gray-700 mb-2">Features:</h4>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li><strong>Face Navigation:</strong> Browse through unidentified faces using Prev/Next buttons</li>
              <li><strong>Filters:</strong> Filter by date taken, tags, quality, and excluded faces</li>
              <li><strong>Unique Faces Only:</strong> Hide similar faces (faces with 60%+ similarity to others)</li>
              <li><strong>Batch Size:</strong> Control how many faces to load at once</li>
              <li><strong>Similar Faces Panel:</strong> View and identify multiple similar faces at once</li>
              <li><strong>Exclude Faces:</strong> Block faces from identification (e.g., for false detections or unwanted faces)</li>
         
            </ul>
          </div>
          
          <div className="mb-4">
            <h4 className="text-md font-semibold text-gray-700 mb-2">How to Identify Faces:</h4>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Identify page (you'll be on the "Identify Faces" tab by default)</li>
              <li>Optionally adjust filters:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click "Filters" to expand filter options</li>
                  <li>Set date range, minimum quality, or select tags</li>
                  <li>Choose sort order (Quality, Date Taken, or Date Processed)</li>
                  <li>Check "Include excluded faces" to show faces that have been excluded from identification</li>
                  <li>Click "Apply Filters" to load faces</li>
                </ul>
              </li>
              <li>Toggle "Unique faces only" checkbox to hide duplicate faces (recommended)</li>
              <li>View the current face on the left panel</li>
              <li>To exclude a face from identification:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click the 🚫 button next to the face counter</li>
                  <li>The face will be marked as excluded and automatically skipped</li>
                  <li>Excluded faces are hidden by default (check "Include excluded faces" in filters to see them)</li>
                  <li>Click the 🚫 button again to include the face back in identification</li>
                </ul>
              </li>
              <li>Choose how to identify:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li><strong>Select existing person:</strong> Choose from the dropdown at the top</li>
                  <li><strong>Create new person:</strong> Enter First Name, Last Name (required), Middle Name, Maiden Name, and Date of Birth (optional)</li>
                </ul>
              </li>
              <li>Optionally use similar faces:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Check "Compare with similar faces" to see similar faces on the right</li>
                  <li>Check boxes next to similar faces you want to identify together</li>
                  <li>All selected faces will be identified to the same person</li>
                </ul>
              </li>
              <li>Click "Identify" button to save the identification</li>
              <li>Use "Refresh" button to reload faces and start from the beginning</li>
            </ol>
          </div>
          
          <div className="mb-4">
            <h4 className="text-md font-semibold text-gray-700 mb-2">Confidence Colors (Similar Faces):</h4>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li>🟢 <strong>80%+</strong> = Very High (Almost Certain)</li>
              <li>🟡 <strong>70%+</strong> = High (Likely Match)</li>
              <li>🟠 <strong>60%+</strong> = Medium (Possible Match)</li>
              <li>🔴 <strong>50%+</strong> = Low (Questionable)</li>
              <li>⚫ <strong>&lt;50%</strong> = Very Low (Unlikely)</li>
            </ul>
          </div>
        </div>
        
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tab 2: Identify People in Videos</h3>
          <div className="mb-4">
            <h4 className="text-md font-semibold text-gray-700 mb-2">Features:</h4>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li><strong>Video List:</strong> Browse all videos in your collection</li>
              <li><strong>Filters:</strong> Filter by date range, person name, and whether videos have identified people</li>
              <li><strong>Video Player:</strong> Watch videos directly in the browser</li>
              <li><strong>Multiple People:</strong> Each video can have multiple people identified</li>
              <li><strong>People Management:</strong> View and remove people from videos</li>
            </ul>
          </div>
          
          <div className="mb-4">
            <h4 className="text-md font-semibold text-gray-700 mb-2">How to Identify People in Videos:</h4>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Click the "Identify People in Videos" tab</li>
              <li>Optionally use filters to find specific videos:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click "Filters" to expand filter options</li>
                  <li>Enter folder path, date range, person name, or filter by whether videos have people</li>
                  <li>Videos will automatically reload when filters change</li>
                </ul>
              </li>
              <li>Select a video from the list on the left</li>
              <li>The video will play in the right panel, and you'll see a list of currently identified people</li>
              <li>To add a person:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li><strong>Select existing person:</strong> Choose from the "Existing Person" dropdown</li>
                  <li><strong>Create new person:</strong> Enter First Name and Last Name (required), plus optional Middle Name, Maiden Name, and Date of Birth</li>
                </ul>
              </li>
              <li>Click "Add Person to Video" button</li>
              <li>To remove a person: Click "Remove" button next to their name in the identified people list</li>
            </ol>
          </div>
        </div>
        
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Use the "Unique faces only" filter to reduce duplicate faces when identifying photos</li>
            <li>Use similar faces panel to identify multiple faces at once</li>
            <li>Date filtering helps focus on specific time periods or events</li>
            <li>Tag filtering lets you identify faces only from photos with specific tags</li>
            <li>Click on face images to open the full photo in a new window</li>
            <li>For videos, you can identify multiple people in the same video</li>
            <li>Use the exclude (🚫) button to exclude unknown, unwanted faces, or low-quality faces from appearing in your identification workflow</li>
            <li>Excluded faces are hidden by default, but you can view them by checking "Include excluded faces" in the filters</li>
         
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function AutoMatchPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Auto-Match Page" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Automatically match unidentified faces to previously identified people, with options for automatic matching or manual review</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Automatic Matching:</strong> Run auto-match to automatically identify faces that meet quality criteria</li>
            <li><strong>Manual Review:</strong> Review and approve matches one person at a time</li>
            <li><strong>Person Search:</strong> Search for specific people by last name</li>
            <li><strong>Person-Centric View:</strong> Shows identified person on left, potential matches on right</li>
            <li><strong>Match Confidence:</strong> Color-coded confidence percentages for each match</li>
            <li><strong>Bulk Selection:</strong> Select all or clear all matches at once</li>
            <li><strong>Refresh:</strong> Reload the list of people and matches</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Automatic Matching:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Auto-Match page</li>
              <li>Click "🚀 Run Auto-Match" button</li>
              <li>The system will automatically match unidentified faces to identified people based on:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Similarity higher than 70%</li>
                  <li>Picture quality higher than 50%</li>
                  <li>Profile faces are excluded for better accuracy</li>
                </ul>
              </li>
              <li>A summary will show how many faces were auto-matched</li>
              <li>Auto-matched faces are immediately identified - no manual review needed</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Manual Review Workflow:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Auto-Match page</li>
              <li>People with potential matches will load automatically</li>
            
              <li>View the identified person on the left panel (with their reference photo)</li>
              <li>View potential matches on the right panel</li>
              <li>Review each match:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Check the confidence percentage (shown as a colored badge)</li>
                  <li>Click on face thumbnails to see the full photo</li>
                  <li>Check boxes next to faces you want to identify to this person</li>
                </ul>
              </li>
              <li>Use "☑️ Select All" or "☐ Clear All" to quickly select/deselect all matches</li>
              <li>Click "💾 Save changes for [Person Name]" button to save your selections</li>
              <li>Use "⏮️ Back" and "⏭️ Next" buttons (or Prev/Next in the person panel) to navigate between people</li>
              <li>Use the search box to find specific people by last name</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Understanding Match Confidence:</p>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li><strong>Green badge (70%+):</strong> High confidence - usually accurate matches</li>
              <li><strong>Yellow badge (60-69%):</strong> Medium confidence - review carefully</li>
              <li><strong>Orange badge (&lt;60%):</strong> Low confidence - review very carefully</li>
            </ul>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Start with "Run Auto-Match" to automatically identify high-confidence matches - this saves a lot of time!</li>
            <li>After auto-matching, use manual review for any remaining matches that need your attention</li>
            <li>Click on face thumbnails to see the full photo - this helps verify matches</li>
            <li>High confidence matches (70%+) are usually accurate, but always verify if unsure</li>
            <li>Use the search box to quickly find specific people instead of navigating through the list</li>
            <li>If you make a mistake, you can go back and uncheck faces, then save again</li>
            <li>Use "Refresh" if you've identified faces elsewhere and want to see updated match lists</li>
            <li>After auto-matching, navigate to Modify People page, to view and unmatch any wrongly identified faces</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function SearchPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Search Photos" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Search and filter photos by various criteria, manage favorites, tag photos, and view photos in a full-screen viewer</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Search Types</h3>
          <p className="text-gray-700 mb-2">Choose from these search types:</p>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Search photos by name:</strong> Find photos containing specific people</li>
            <li><strong>Search photos by date:</strong> Find photos taken within a date range</li>
            <li><strong>Search photos by tags:</strong> Find photos with specific tags</li>
            <li><strong>Photos without faces:</strong> Find photos that have no detected faces</li>
            <li><strong>Photos without tags:</strong> Find photos that have no tags assigned</li>
            <li><strong>Search processed photos:</strong> Find photos that have been processed for faces</li>
            <li><strong>Search un-processed photos:</strong> Find photos that haven't been processed yet</li>
            <li><strong>Favorite photos:</strong> View all your favorite photos</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Media Type Filter:</strong> Filter to show only photos, only videos, or both</li>
            <li><strong>Tag Matching:</strong> When searching by tags, choose "ANY" (photos with any tag) or "ALL" (photos with all selected tags)</li>
            <li><strong>Photo Selection:</strong> Select individual photos or use "Select all" to select all results</li>
            <li><strong>Favorites Management:</strong> Add or remove photos from your favorites</li>
            <li><strong>Bulk Tagging:</strong> Tag multiple photos at once</li>
            <li><strong>Photo Deletion:</strong> Delete selected photos (requires permission)</li>
            <li><strong>Photo Viewer:</strong> View all search results in a full-screen slideshow</li>
            <li><strong>Sorting:</strong> Sort results by person, tags, processed status, path, or date taken</li>
            <li><strong>Open Folder:</strong> Click the folder icon to open the photo's folder in your file manager</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Searching for Photos:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Search page</li>
              <li>Select a search type from the dropdown</li>
              <li>Enter search criteria based on the search type:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li><strong>By name:</strong> Enter person name(s), separated by commas (e.g., "John, Jane, Bob")</li>
                  <li><strong>By date:</strong> Enter "From date" and/or "To date"</li>
                  <li><strong>By tags:</strong> Select one or more tags (hold Ctrl/Cmd to select multiple), choose "ANY" or "ALL" match mode</li>
                  <li><strong>Other types:</strong> No additional input needed - just select the type</li>
                </ul>
              </li>
              <li>Optionally set media type filter (All, Photos, or Videos)</li>
              <li>Click "Search" button</li>
              <li>View results in the table below</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Working with Search Results:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Click checkboxes to select individual photos</li>
              <li>Use "Select all" to select all photos in current results</li>
              <li>Use "Unselect All" to clear selection</li>
              <li>Click on a photo path to open the photo in a new window</li>
              <li>Click the folder icon (📁) to open the photo's folder in your file manager</li>
              <li>Click the star icon (⭐) to toggle favorite status for individual photos</li>
              <li>Click column headers to sort results</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Bulk Actions on Selected Photos:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Select one or more photos using checkboxes</li>
              <li>Choose an action:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li><strong>Tag selected photos:</strong> Opens a dialog to add or remove tags from all selected photos</li>
                  <li><strong>⭐ (Star icon):</strong> Add selected photos to favorites (or remove if viewing favorites)</li>
                  <li><strong>🗑 Delete selected:</strong> Permanently delete selected photos (requires permission, cannot be undone)</li>
                  <li><strong>▶ Play photos:</strong> Opens all search results in a full-screen photo viewer</li>
                </ul>
              </li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Using the Photo Viewer:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Click "▶ Play photos" button to open the full-screen viewer</li>
              <li>If you have photos selected, the viewer will start with the first selected photo</li>
              <li>Use arrow keys or on-screen buttons to navigate between photos</li>
              <li>Press Escape or click the X button to close the viewer</li>
            </ol>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>When searching by name, you can enter multiple names separated by commas to find photos with any of those people</li>
            <li>Use "ANY" tag matching to find photos with at least one of the selected tags</li>
            <li>Use "ALL" tag matching to find photos that have all selected tags</li>
            <li>Favorite photos are personal to each user - your favorites won't affect other users</li>
            <li>Sorting helps organize large result sets - click column headers to change sort order</li>
            <li>The photo viewer loads all search results, so it works great for browsing through large collections</li>
            <li>Deleting photos is permanent - make sure you really want to delete before confirming</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function ModifyPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Modify People" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Edit person information, view and remove incorrect identifications</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Person Search:</strong> Search for people by last name or maiden name</li>
            <li><strong>Person List:</strong> View all people with face and video counts</li>
            <li><strong>Information Editing:</strong> Update names and date of birth</li>
            <li><strong>Face Management:</strong> View all faces linked to a person, select and unmatch faces</li>
            <li><strong>Video Management:</strong> View all videos linked to a person, remove people from videos</li>
            <li><strong>Bulk Operations:</strong> Select and unmatch multiple faces or videos at once</li>
            <li><strong>Person Deletion:</strong> Remove person records completely (with confirmation)</li>
            <li><strong>Resizable Panels:</strong> Adjust the width of the people list panel by dragging the divider</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Finding and Selecting a Person:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Modify page</li>
              <li>Optionally search for a person by entering their last name or maiden name in the search box</li>
              <li>Click "Search" to filter the list, or "Clear" to show all people</li>
              <li>Click on a person's name in the left panel to select them</li>
              <li>The person's faces and videos will load in the right panels</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Editing Person Information:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Select a person from the list</li>
              <li>Click the edit icon (✏️) next to their name</li>
              <li>In the dialog, update any fields:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>First Name (required)</li>
                  <li>Last Name (required)</li>
                  <li>Middle Name (optional)</li>
                  <li>Maiden Name (optional)</li>
                  <li>Date of Birth (optional)</li>
                </ul>
              </li>
              <li>Click "Save" to update the information</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Managing Faces:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Select a person to view their faces</li>
              <li>Faces are shown in a grid - click on a face thumbnail to open the full photo</li>
              <li>To unmatch a single face: Check the box next to the face, then click "Unmatch Selected"</li>
              <li>To unmatch multiple faces:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Use "Select All" to select all faces, or check individual boxes</li>
                  <li>Click "Unmatch Selected" button</li>
                  <li>Confirm the unmatch action</li>
                </ul>
              </li>
              <li>Click the expand/collapse button (▼/▶) next to "Faces" to show or hide the faces panel</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Managing Videos:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Select a person to view their videos</li>
              <li>Videos are shown in a list with filename and date taken</li>
              <li>To remove a person from a single video: Click "Unmatch" next to the video</li>
              <li>To remove a person from multiple videos:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Check boxes next to videos you want to unmatch</li>
                  <li>Click "Unmatch Selected" button</li>
                  <li>Confirm the unmatch action</li>
                </ul>
              </li>
              <li>Click the expand/collapse button (▼/▶) next to "Videos" to show or hide the videos panel</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Deleting a Person:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Select a person from the list</li>
              <li>Click the delete icon (🗑️) next to their name</li>
              <li>Read the warning message carefully - this will:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Unlink all faces from this person</li>
                  <li>Remove all video linkages</li>
                  <li>Delete all person encodings</li>
                  <li>Permanently delete the person record</li>
                </ul>
              </li>
              <li>Click "Delete" to confirm, or "Cancel" to abort</li>
              <li>⚠️ <strong>Warning:</strong> This action cannot be undone!</li>
            </ol>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Use the search function to quickly find people by last name or maiden name</li>
            <li>You can resize the people panel by dragging the divider between panels</li>
            <li>Collapse the Faces or Videos panels if you don't need to see them - saves screen space</li>
            <li>Unmatching faces/videos doesn't delete them - it just removes the link to the person</li>
            <li>After unmatching, faces will appear as unidentified again in the Identify page</li>
            <li>Person deletion is permanent - make absolutely sure before confirming</li>
            <li>Click on face thumbnails to see the full photo and verify it's the right person</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function TagsPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Tag Photos" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Manage photo tags, assign tags to photos individually or in bulk, and identify faces from tagged photos</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>View Modes:</strong> Switch between List view (table) and Icons view (thumbnail grid)</li>
            <li><strong>Folder Grouping:</strong> Photos are organized by folder - expand/collapse folders to see photos</li>
            <li><strong>Photo Selection:</strong> Select individual photos or entire folders at once</li>
            <li><strong>Tag Management:</strong> Create, edit, and delete tags</li>
            <li><strong>Multiple Tagging Methods:</strong> Tag individual photos, all photos in a folder, or multiple selected photos</li>
            <li><strong>Identify Faces:</strong> Open Identify page with faces from selected photos</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Managing Tags:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Click "Manage Tags" button at the top</li>
              <li>To create a tag: Enter tag name in the input field and click "Add tag"</li>
              <li>To edit a tag: Click "Edit" next to the tag, change the name, and click "Save"</li>
              <li>To delete tags: Check boxes next to tags you want to delete, then click "Delete selected tags"</li>
              <li>Note: Tags are case-insensitive - "Vacation" and "vacation" are treated as the same tag</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Selecting Photos:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Use the checkbox in the table header to select/deselect all photos</li>
              <li>Use the checkbox next to a folder name to select/deselect all photos in that folder</li>
              <li>Click individual photo checkboxes to select specific photos</li>
              <li>Click "Clear Selected" to clear all selections</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Tagging Photos:</p>
            <p className="text-gray-600 mb-2">There are three ways to tag photos:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li><strong>Tag Individual Photo:</strong>
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click the tag icon (🏷️) next to a photo</li>
                  <li>In the dialog, select an existing tag from the dropdown or enter a new tag name</li>
                  <li>Click "Add" to add the tag</li>
                  <li>To remove tags: Check boxes next to tags you want to remove, then click "Remove selected tags"</li>
                </ul>
              </li>
              <li><strong>Tag All Photos in a Folder:</strong>
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click the tag icon (🏷️) next to a folder name</li>
                  <li>In the dialog, select or enter a tag name</li>
                  <li>Click "Add" to tag all photos in that folder</li>
                </ul>
              </li>
              <li><strong>Tag Multiple Selected Photos:</strong>
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Select multiple photos using checkboxes</li>
                  <li>Click "Tag Selected Photos" button at the top</li>
                  <li>In the dialog, select or enter a tag name</li>
                  <li>Click "Add" to tag all selected photos</li>
                  <li>To remove tags: Check boxes next to common tags (tags present in all selected photos), then click "Remove selected tags"</li>
                </ul>
              </li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Identifying Faces from Photos:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Select one or more photos that have been processed and contain faces</li>
              <li>Click "👤 Identify Faces" button at the top</li>
              <li>The Identify page will open in a new tab, showing only faces from the selected photos</li>
              <li>Note: Only processed photos with unidentified faces will be included</li>
            </ol>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Use descriptive tag names like "Vacation 2024", "Family Reunion", "Birthday Party"</li>
            <li>Folder-level tagging is great for organizing photos by event or location</li>
            <li>Tags are case-insensitive, so "vacation" and "Vacation" are the same</li>
            <li>Use the Icons view to see photo thumbnails - helpful for visual identification</li>
            <li>Use the List view for detailed information about each photo</li>
            <li>You can identify faces directly from the Tags page - no need to go to Search first</li>
            <li>When removing tags from multiple photos, only tags that exist in ALL selected photos will be shown</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function FacesMaintenancePageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Faces Maintenance (Maintenance Tab)" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-4">
            <strong>Location:</strong> This page is located under the <strong>Maintenance</strong> tab in the navigation sidebar.
          </p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Remove unwanted faces from the database, primarily low-quality face detections or false positives</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Quality Filtering:</strong> Filter faces by quality range using two sliders (min and max)</li>
            <li><strong>Batch Size:</strong> Control how many faces to load at once</li>
            <li><strong>Face List:</strong> View all faces with thumbnails, person names, file paths, and quality scores</li>
            <li><strong>Sorting:</strong> Sort faces by person name or quality score</li>
            <li><strong>Bulk Selection:</strong> Select all faces or individual faces</li>
            <li><strong>Bulk Deletion:</strong> Delete multiple faces at once</li>
            <li><strong>Photo Preview:</strong> Click on face thumbnails to see the full photo</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Filtering Faces by Quality:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Faces Maintenance page</li>
              <li>Use the "Quality Range" sliders to set minimum and maximum quality values</li>
              <li>The faces list will automatically update to show only faces within that quality range</li>
              <li>For example, set min to 0% and max to 45% to see only low-quality faces</li>
              <li>Adjust "Batch Size" if you want to load more or fewer faces at once</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Selecting Faces:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Check individual boxes next to faces you want to delete</li>
              <li>Or click "Select All" to select all faces currently shown</li>
              <li>Click "Unselect All" to clear your selection</li>
              <li>The number of selected faces is shown at the top</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Deleting Faces:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Select one or more faces using checkboxes</li>
              <li>Click "Delete Selected" button</li>
              <li>Review the confirmation dialog - it shows how many faces will be deleted</li>
              <li>Click "Delete" to confirm, or "Cancel" to abort</li>
              <li>⚠️ <strong>Warning:</strong> Deletion is permanent and cannot be undone!</li>
              <li>After deletion, the face list will automatically refresh</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Sorting and Viewing:</p>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li>Click column headers to sort by "Person Name" or "Quality"</li>
              <li>Click again to reverse the sort order</li>
              <li>Click on face thumbnails to open the full photo in a new window</li>
              <li>This helps verify that a face detection is correct before deleting</li>
            </ul>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Start with a quality range filter (e.g., 0-45%) to focus on low-quality faces first</li>
            <li>Click on face thumbnails to verify they're actually faces before deleting</li>
            <li>Unidentified faces are easier to delete - identified faces should be reviewed more carefully</li>
            <li>Use sorting to group faces by person or quality for easier review</li>
            <li>Regular maintenance helps keep your database clean and improves search/identification accuracy</li>
            <li>If you're unsure about a face, leave it - you can always come back later</li>
            <li>Deleting a face doesn't delete the photo - only the face detection record is removed</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function UserIdentifiedFacesPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="User Identified Faces (Maintenance Tab)" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-4">
            <strong>Location:</strong> This page is located under the <strong>Maintenance</strong> tab in the navigation sidebar.
          </p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Review and approve or deny face identifications made by users. When users identify faces in the frontend, their identifications require admin approval before being applied to the main database.</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Pending Identifications List:</strong> View all face identifications submitted by users</li>
            <li><strong>Face Preview:</strong> See the face thumbnail and click to view the full photo</li>
            <li><strong>User Information:</strong> See which user submitted each identification</li>
            <li><strong>Person Details:</strong> View the person name and date of birth that the user entered</li>
            <li><strong>Status Filtering:</strong> Filter by pending, approved, or denied status</li>
            <li><strong>Include Denied:</strong> Option to view previously denied identifications</li>
            <li><strong>Bulk Decisions:</strong> Approve or deny multiple identifications at once</li>
            <li><strong>Identification Report:</strong> View statistics about user identifications</li>
            <li><strong>Database Cleanup:</strong> Delete denied records (admin only)</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Reviewing Identifications:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Maintenance tab, then click "User Identified Faces"</li>
              <li>View the list of pending identifications</li>
              <li>For each identification:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click on the face thumbnail to see the full photo</li>
                  <li>Review the person name and date of birth entered by the user</li>
                  <li>Check which user submitted the identification</li>
                </ul>
              </li>
              <li>Make a decision for each identification:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Check "Approve" to accept the identification (creates person if needed, links face to person)</li>
                  <li>Check "Deny" to reject the identification</li>
                </ul>
              </li>
              <li>Click "Submit Decisions" button to process all selected decisions</li>
              <li>View the summary showing how many were approved and denied</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Viewing Reports:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Click the report button (if available) to view identification statistics</li>
              <li>Optionally set date range filters</li>
              <li>View total users, total faces identified, and per-user statistics</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Filtering and Cleanup:</p>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li>Check "Include denied" to see previously denied identifications</li>
              <li>Use "Clear Database" (admin only) to delete all denied records</li>
            </ul>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">What Happens</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>When Approved:</strong> The face is linked to the person (creates person if doesn't exist), person encoding is created, and status is updated to 'approved'</li>
            <li><strong>When Denied:</strong> The status is updated to 'denied' in the database, but the face remains unidentified</li>
            <li>Approved identifications are immediately applied to the main database</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Click on face thumbnails to see the full photo - this helps verify the identification is correct</li>
            <li>Review the person name carefully - if a person with that name already exists, the face will be linked to them</li>
            <li>You can approve or deny multiple identifications at once by checking boxes and clicking "Submit Decisions"</li>
            <li>Denied identifications can be viewed later by checking "Include denied"</li>
            <li>Use the identification report to track user activity and identify patterns</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function UserReportedPhotosPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="User Reported Photos (Maintenance Tab)" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-4">
            <strong>Location:</strong> This page is located under the <strong>Maintenance</strong> tab in the navigation sidebar.
          </p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Review photos that users have reported as inappropriate or problematic. Decide whether to keep the photos in the collection or remove them permanently.</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Reported Photos List:</strong> View all photos reported by users</li>
            <li><strong>Photo Preview:</strong> Click on photo thumbnails to view full-size images or videos</li>
            <li><strong>Report Details:</strong> See who reported the photo, when it was reported, and any comments</li>
            <li><strong>Status Filtering:</strong> Filter by pending, reviewed, or dismissed status</li>
            <li><strong>Review Decisions:</strong> Choose to keep or remove each reported photo</li>
            <li><strong>Review Notes:</strong> Add notes about your decision for record-keeping</li>
            <li><strong>Bulk Decisions:</strong> Make decisions on multiple photos at once</li>
            <li><strong>Database Cleanup:</strong> Delete kept/removed records from temporary database(admin only)</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Reviewing Reported Photos:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Maintenance tab, then click "User Reported Photos"</li>
              <li>View the list of reported photos</li>
              <li>For each photo:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click on the photo thumbnail to view the full image or video</li>
                  <li>Read the report comment (if provided by the user)</li>
                  <li>Review who reported it and when</li>
                </ul>
              </li>
              <li>Make a decision:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Check "Keep" if the photo is appropriate and should remain in the collection</li>
                  <li>Check "Remove" if the photo should be permanently deleted</li>
                </ul>
              </li>
              <li>Optionally add review notes explaining your decision</li>
              <li>Click "Submit Decisions" to process all selected decisions</li>
              <li>View the summary showing how many were kept and removed</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Filtering:</p>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li>Use the status dropdown to filter by pending, reviewed, or dismissed</li>
              <li>Reviewed and dismissed photos are shown with reduced opacity</li>
            </ul>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">What Happens</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>When Kept:</strong> The photo remains in the database, status is updated to 'reviewed'</li>
            <li><strong>When Removed:</strong> The photo is permanently deleted from the database, along with all associated faces, encodings, and tags - this cannot be undone!</li>
            <li>Review notes are saved for record-keeping</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">⚠️ Important Warnings</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Removing photos is permanent!</strong> This deletes the photo file, all detected faces, encodings, and tags</li>
            <li>Always review the full photo before making a removal decision</li>
            <li>Consider the user's report comment carefully</li>
            <li>Use review notes to document your reasoning for future reference</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Always click on photo thumbnails to view the full image before making a decision</li>
            <li>Read the report comment to understand why the user reported it</li>
            <li>Add review notes to document your decision - helpful for future reference</li>
            <li>You can make decisions on multiple photos at once by checking boxes and clicking "Submit Decisions"</li>
            <li>Use the status filter to focus on pending reports that need attention</li>
            <li>Use "Clear Database" (admin only) to clean up old reviewed records</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function UserTaggedPhotosPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="User Tagged Photos (Maintenance Tab)" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-4">
            <strong>Location:</strong> This page is located under the <strong>Maintenance</strong> tab in the navigation sidebar.
          </p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Review tags that users have suggested for photos. Approve tags to add them to photos, or deny tags that are inappropriate or incorrect.</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Pending Linkages List:</strong> View all tag suggestions submitted by users</li>
            <li><strong>Photo Preview:</strong> Click on photo thumbnails to view full-size images or videos</li>
            <li><strong>Tag Information:</strong> See the proposed tag name and whether it's a new tag or existing tag</li>
            <li><strong>Current Tags:</strong> View tags already assigned to the photo</li>
            <li><strong>User Information:</strong> See which user suggested each tag</li>
            <li><strong>Status Filtering:</strong> Filter by pending, approved, or denied status</li>
            <li><strong>Sorting:</strong> Sort by photo, tag, submitted by, submitted at, or status</li>
            <li><strong>Bulk Selection:</strong> Select all to approve or deny at once</li>
            <li><strong>Database Cleanup:</strong> Delete approved/denied records from temporary danatase(admin only)</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Reviewing Tag Suggestions:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Maintenance tab, then click "User Tagged Photos"</li>
              <li>View the list of pending tag linkages</li>
              <li>For each suggestion:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click on the photo thumbnail to view the full image or video</li>
                  <li>Review the proposed tag name</li>
                  <li>Check if it's a new tag (yellow badge) or existing tag (green badge with ID)</li>
                  <li>See what tags are already on the photo</li>
                  <li>Review any notes provided by the user</li>
                </ul>
              </li>
              <li>Make a decision:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Check "Approve" to add the tag to the photo (creates tag if it's new)</li>
                  <li>Check "Deny" to reject the tag suggestion</li>
                </ul>
              </li>
              <li>Click "Submit Decisions" to process all selected decisions</li>
              <li>View the summary showing how many were approved, denied, and how many new tags were created</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Bulk Operations:</p>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li>Use "Select All to Approve" to approve all pending suggestions</li>
              <li>Use "Select All to Deny" to deny all pending suggestions</li>
              <li>You can still review and change individual decisions before submitting</li>
            </ul>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Filtering and Sorting:</p>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li>Use the status dropdown to filter by pending, approved, or denied</li>
              <li>Click column headers to sort by different criteria</li>
              <li>Click again to reverse the sort order</li>
            </ul>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">What Happens</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>When Approved:</strong> The tag is created (if new) or linked to the photo (if existing), and the linkage is created in the database</li>
            <li><strong>When Denied:</strong> The status is updated to 'denied' but no tag is added</li>
            <li>New tags are automatically created when approved</li>
            <li>Tags are case-insensitive - "Vacation" and "vacation" are treated as the same tag</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Click on photo thumbnails to see the full image - this helps verify if the tag is appropriate</li>
            <li>Check existing tags to avoid duplicates or conflicting tags</li>
            <li>New tags (yellow badge) will be created when approved - make sure the tag name is appropriate</li>
            <li>Existing tags (green badge) will be linked to the photo - verify it makes sense</li>
            <li>Use bulk selection for quick approval of many similar suggestions</li>
            <li>Review user notes if provided - they may explain why the tag was suggested</li>
            <li>Use sorting to group similar tags together for easier review</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function UserUploadedPhotosPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="User Uploaded Photos (Maintenance Tab)" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-4">
            <strong>Location:</strong> This page is located under the <strong>Maintenance</strong> tab in the navigation sidebar.
          </p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Review photos and videos that users have uploaded. Approve uploads to add them to the main collection, or reject them if they don't meet your standards.</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Pending Photos List:</strong> View all photos and videos uploaded by users</li>
            <li><strong>Photo/Video Preview:</strong> Click on thumbnails to view full-size images or play videos</li>
            <li><strong>File Information:</strong> See filename, file size, and media type</li>
            <li><strong>User Information:</strong> See which user uploaded each file</li>
            <li><strong>Status Filtering:</strong> Filter by pending, approved, or rejected status</li>
            <li><strong>Sorting:</strong> Sort by photo, uploaded by, file info, submitted at, or status</li>
            <li><strong>Bulk Selection:</strong> Select all to approve or reject at once</li>
            <li><strong>Rejection Reasons:</strong> Add reasons when rejecting photos (optional)</li>
            <li><strong>Bulk Rejection Reason:</strong> Apply the same rejection reason to multiple photos</li>
            <li><strong>File Cleanup:</strong> Delete files from temporary space of approved/rejected photos/videos(admin only)</li>
            <li><strong>Database Cleanup:</strong> Delete records from temporary database of approved/rejected photos/videos (admin only)</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Reviewing Uploaded Photos:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Maintenance tab, then click "User Uploaded Photos"</li>
              <li>View the list of pending uploads</li>
              <li>For each upload:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click on the thumbnail to view the full image or play the video</li>
                  <li>Review the filename, file size, and media type</li>
                  <li>Check which user uploaded it and when</li>
                </ul>
              </li>
              <li>Make a decision:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Check "Approve" to add the photo/video to the main collection (copies file, imports to database)</li>
                  <li>Check "Reject" to decline the upload (optionally add a rejection reason)</li>
                </ul>
              </li>
              <li>If rejecting, optionally enter a rejection reason (can be applied to multiple photos using bulk rejection reason)</li>
              <li>Click "Submit Decisions" to process all selected decisions</li>
              <li>View the summary showing how many were approved and rejected</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Bulk Operations:</p>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li>Use "Select All to Approve" to approve all pending uploads</li>
              <li>Use "Select All to Reject" to reject all pending uploads</li>
              <li>Enter a bulk rejection reason to apply the same reason to all rejected photos</li>
              <li>You can still review and change individual decisions before submitting</li>
            </ul>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Cleanup Operations (Admin Only):</p>
            <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
              <li>Use "Cleanup Files" to delete files from temporary space for approved/rejected photos</li>
              <li>Use "Clear Database" to delete records from the temporary database for approved/rejected photos</li>
              <li>These operations help free up storage space after reviewing uploads</li>
            </ul>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">What Happens</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>When Approved:</strong> The file is copied from the upload directory to main photo storage, imported into the database (like a scan), and status is updated to 'approved'</li>
            <li><strong>When Rejected:</strong> The status is updated to 'rejected' with optional rejection reason, the file remains in the upload directory</li>
            <li>Approved photos are immediately available in the main collection and can be processed for faces</li>
            <li>Duplicate detection works the same as regular scans - duplicates are skipped</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Always click on thumbnails to view the full image or video before making a decision</li>
            <li>Check file sizes - very large files may take time to process</li>
            <li>Use rejection reasons to provide feedback to users about why uploads were rejected</li>
            <li>Use bulk rejection reason to quickly apply the same reason to multiple rejections</li>
            <li>You can approve or reject multiple uploads at once for efficiency</li>
            <li>Use sorting to organize uploads by user, date, or file type</li>
            <li>After approving, photos will need to be processed (Process page) to detect faces</li>
            <li>Use cleanup operations periodically to free up storage space</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

function UsersPageHelp({ onBack }: { onBack: () => void }) {
  return (
    <PageHelpLayout title="Users (Maintenance Tab)" onBack={onBack}>
      <div className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-4">
            <strong>Location:</strong> This page is located under the <strong>Maintenance</strong> tab in the navigation sidebar.
          </p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Purpose</h3>
          <p className="text-gray-700">Manage user accounts for both the current system and the Photos Viewer web application. Create users, edit their information, assign roles, and manage permissions.</p>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Features</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Three Tabs:</strong> Backend Users, Frontend Users, and Manage Roles</li>
            <li><strong>Backend Users:</strong> Manage users for the current system and thier access</li>
            <li><strong>Frontend Users:</strong> Manage users for the Photos Viewer web application (their login accounts)</li>
            <li><strong>Manage Roles:</strong> Configure permissions for different user roles for current system(admin only)</li>
            <li><strong>User Creation:</strong> Create new users with required information</li>
            <li><strong>User Editing:</strong> Update user information, passwords, roles, and permissions</li>
            <li><strong>User Deletion:</strong> Remove users from the system (with restrictions)</li>
            <li><strong>Filtering:</strong> Filter backend users by status (active/inactive) and role</li>
            <li><strong>Sorting:</strong> Sort users by various criteria (username, email, name, status, role, dates)</li>
            <li><strong>Frontend Permission:</strong> Grant backend users access to the Photos Viewer web application</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">How to Use</h3>
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Backend Users Tab:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Navigate to Maintenance tab, then click "Users"</li>
              <li>You'll be on the "Backend Users" tab by default</li>
              <li>To create a user:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click "+ Add User" button</li>
                  <li>Enter username, password (min 6 characters), email, and full name</li>
                  <li>Select a role from the dropdown (Admin, Manager, Moderator, Reviewer, Editor, Importer, Viewer)</li>
                  <li>Check "Active" to make the user active</li>
                  <li>Optionally check "Give the user Frontend permission" to create a matching frontend account</li>
                  <li>Click "Create"</li>
                </ul>
              </li>
              <li>To edit a user:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click "Edit" next to the user</li>
                  <li>Update email, full name, password (optional), status, or role</li>
                  <li>Optionally grant frontend permission if the user doesn't have a frontend account</li>
                  <li>Click "Save"</li>
                </ul>
              </li>
              <li>To delete a user: Click "Delete" next to the user (users who identified faces cannot be deleted)</li>
              <li>Use filters to show only active/inactive users or specific roles</li>
              <li>Click column headers to sort users</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Frontend Users Tab:</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Click the "Front End Users" tab</li>
              <li>To create a frontend user:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click "+ Add User" button</li>
                  <li>Enter email, name, and password (min 6 characters)</li>
                  <li>Select role (Admin or User)</li>
                  <li>Check "Grant write access" if the user should be able to upload/identify/tag</li>
                  <li>Click "Create"</li>
                </ul>
              </li>
              <li>To edit a frontend user:
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Click "Edit" next to the user</li>
                  <li>Update email, name, role, or write access</li>
                  <li>Click "Save"</li>
                </ul>
              </li>
              <li>To delete a frontend user: Click "Delete" next to the user</li>
              <li>Click column headers to sort users</li>
            </ol>
          </div>
          
          <div className="mb-3">
            <p className="text-gray-700 font-medium mb-2">Manage Roles Tab (for users for current system):</p>
            <ol className="list-decimal list-inside space-y-1 text-gray-600 ml-4">
              <li>Click the "Manage Roles" tab (only visible if you have permission)</li>
              <li>View the permissions matrix showing which roles have access to which features</li>
              <li>Check or uncheck boxes to grant or revoke permissions for specific roles</li>
              <li>Click "Save Changes" to apply your modifications</li>
              <li>Click "Reset" to revert to the last saved state</li>
            </ol>
          </div>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Current System User Roles</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li><strong>Admin:</strong> Full system access</li>
            <li><strong>Manager:</strong> Administrative privileges</li>
            <li><strong>Moderator:</strong> Can review user submissions</li>
            <li><strong>Reviewer:</strong> Can review and approve content</li>
            <li><strong>Editor:</strong> Can edit content</li>
            <li><strong>Importer:</strong> Can import photos</li>
            <li><strong>Viewer:</strong> Read-only access</li>
          </ul>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Tips</h3>
          <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
            <li>Backend users and frontend users are separate - a user can have both accounts</li>
            <li>Use "Give the user Frontend permission" when creating/editing backend users to automatically create a matching frontend account</li>
            <li>Passwords must be at least 6 characters long</li>
            <li>Usernames and emails must be unique (case-insensitive)</li>
            <li>Users who have identified faces cannot be deleted - set them inactive instead</li>
            <li>Use filters to quickly find specific users or roles</li>
            <li>Use sorting to organize users by different criteria</li>
            <li>Role permissions can be customized in the "Manage Roles" tab (admin only)</li>
            <li>Frontend users need write access to upload photos, identify faces, or tag photos</li>
          </ul>
        </div>
      </div>
    </PageHelpLayout>
  )
}

