App.tsx

import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import { X } from 'lucide-react';
import { Domain, DomainStatus, DomainStats, SortField, SortOrder, DomainGroup, SSLStatus } from './types';
import { parseCSV, exportToCSV } from './utils/csvHelper';
import { config } from './lib/config';
import { loadDomains, saveDomains, loadSettings, saveSettings, AppSettings, loadGroupsResult, saveGroups, addGroup, removeGroup, updateGroup } from './utils/storage';
import { useNotification } from './components/NotificationProvider';
import { useAuth } from './components/AuthProvider';
import { StatsOverview } from './components/StatsOverview';
import { DomainTable } from './components/DomainTable';
import { HistoryChart } from './components/HistoryChart';
import { GroupManager } from './components/GroupManager';
import { requestNotificationPermission, sendDomainDownNotification, sendDomainUpNotification, sendNotification, playAlertSound } from './services/notificationService';
import { validateAndNormalizeUrl } from './services/domainService';

// New Components & Hooks
import { useMonitoring } from './hooks/useMonitoring';
import { Header } from './components/Dashboard/Header';
import { SettingsPanel } from './components/Dashboard/SettingsPanel';
import { HeroSection } from './components/Dashboard/HeroSection';
import { FilterBar } from './components/Dashboard/FilterBar';
import { BulkImportModal } from './components/Dashboard/BulkImportModal';
import { DomainDetailModal } from './components/Dashboard/DomainDetailModal';
import { ConfirmModal } from './components/Dashboard/ConfirmModal';
import { SkipLinks } from './components/Accessibility';
import { BottomPanel } from './components/BottomPanel';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { useAnnounce } from './components/Accessibility';
import { logger } from './utils/logger';
import { loadQaResults, mergeQaResults } from './utils/qaResults';

// Simple UUID generator
const generateId = () => Math.random().toString(36).substr(2, 9);

const App: React.FC = () => {
  const domainsLoadFailedRef = useRef(false);
  const [domains, setDomains] = useState<Domain[]>(() => {
    const { domains: loaded, loadFailed } = loadDomains();
    domainsLoadFailedRef.current = loadFailed;
    return loaded;
  });
  const groupsLoadFailedRef = useRef(false);
  const [groups, setGroups] = useState<DomainGroup[]>(() => {
    const { groups: loaded, loadFailed } = loadGroupsResult();
    groupsLoadFailedRef.current = loadFailed;
    return loaded;
  });
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [newDomainUrl, setNewDomainUrl] = useState('');
  const [inputError, setInputError] = useState<string | null>(null);
  const [filter, setFilter] = useState('');
  const [showSettings, setShowSettings] = useState(false);
  const [showBulkImport, setShowBulkImport] = useState(false);
  const [viewingDetailId, setViewingDetailId] = useState<string | null>(null);
  const [settings, setSettings] = useState<AppSettings>(() => loadSettings());
  const [statusFilter, setStatusFilter] = useState<DomainStatus | 'ALL'>(() => (localStorage.getItem('domainpulse_status_filter') as DomainStatus | 'ALL' | null) || 'ALL');
  const [sslFilter, setSslFilter] = useState<SSLStatus | 'ALL'>(() => (localStorage.getItem('domainpulse_ssl_filter') as SSLStatus | 'ALL' | null) || 'ALL');
  const [groupFilter, setGroupFilter] = useState<string | 'ALL'>(() => localStorage.getItem('domainpulse_group_filter') || 'ALL');
  const [viewingHistoryId, setViewingHistoryId] = useState<string | null>(null);
  const [showGroupManager, setShowGroupManager] = useState(false);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  // Previous per-domain statuses for down/up notification transitions. Held in
  // a ref, not state: the notifications effect writes it every run, and if it
  // were state (in the effect's deps) that write would retrigger the effect
  // forever — "Maximum update depth exceeded" the moment notifications are on.
  const previousStatusesRef = useRef<Map<string, DomainStatus>>(new Map());
  const outageNotifiedRef = useRef<Set<string>>(new Set());
  const expiryNotifiedRef = useRef<Set<string>>(new Set());
  
  const [sortField, setSortField] = useState<SortField>(() => (localStorage.getItem('domainpulse_sort_field') as SortField) || 'lastChecked');
  const [sortOrder, setSortOrder] = useState<SortOrder>(() => (localStorage.getItem('domainpulse_sort_order') as SortOrder) || 'desc');

  const { showSuccess, showError, showInfo } = useNotification();
  const { logout, isAuthenticated } = useAuth();
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { announce, Announcer } = useAnnounce();

  // Monitoring Hook
  const {
    isCheckingAll,
    checkProgress,
    checkBatch,
    checkAllDomains,
    checkSingleDomain,
    checkSingleGmb
  } = useMonitoring({
    domains,
    setDomains,
    maxHistoryRecords: settings.maxHistoryRecords,
    customUserAgent: settings.customUserAgent,
    checkTimeout: settings.checkTimeout,
    showSuccess
  });

  // Refs for stability
  const domainsRef = useRef(domains);
  const checkAllDomainsRef = useRef(checkAllDomains);

  useEffect(() => {
    domainsRef.current = domains;
    checkAllDomainsRef.current = checkAllDomains;
  }, [domains, checkAllDomains]);

  // Persistence Effects — skip save when load failed and state is still empty,
  // so corrupt localStorage is not overwritten with [].
  useEffect(() => {
    if (domainsLoadFailedRef.current && domains.length === 0) return;
    domainsLoadFailedRef.current = false;
    saveDomains(domains);
  }, [domains]);

  useEffect(() => {
    localStorage.setItem('domainpulse_status_filter', statusFilter);
    localStorage.setItem('domainpulse_ssl_filter', sslFilter);
    localStorage.setItem('domainpulse_group_filter', groupFilter);
    localStorage.setItem('domainpulse_sort_field', sortField);
    localStorage.setItem('domainpulse_sort_order', sortOrder);
  }, [statusFilter, sslFilter, groupFilter, sortField, sortOrder]);

  useEffect(() => {
    if (groupsLoadFailedRef.current && groups.length === 0) return;
    groupsLoadFailedRef.current = false;
    saveGroups(groups);
  }, [groups]);

  // Load the latest QA snapshot (published by `npm run qa:crawl`) once on mount
  // and merge form/call-button results into the matching domains by URL.
  useEffect(() => {
    let active = true;
    loadQaResults().then((results) => {
      if (!active || results.size === 0) return;
      setDomains((prev) => mergeQaResults(prev, results));
    });
    return () => { active = false; };
  }, []);

  useEffect(() => {
    saveSettings(settings);
    if (settings.darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [settings]);

  // Actions
  const addDomain = useCallback((urlInput: string, groupId?: string, tags?: string[]) => {
    setInputError(null);
    const validation = validateAndNormalizeUrl(urlInput);
    if (!validation.valid || !validation.url) {
      setInputError(validation.error || 'Invalid domain');
      return;
    }
    const normalized = validation.url;
    if (domains.some(d => d.url === normalized)) {
      setInputError('This domain is already being monitored.');
      return;
    }
    if (domains.length >= config.domain.maxDomains) {
      setInputError(`Limit reached — you can monitor up to ${config.domain.maxDomains} domains.`);
      return;
    }
    const newDomain: Domain = {
      id: generateId(),
      url: normalized,
      status: DomainStatus.Unknown,
      addedAt: new Date(),
      history: [],
      groupId,
      tags: tags || []
    };
    setDomains(prev => [newDomain, ...prev]);
    setNewDomainUrl('');
    showSuccess(`Added ${normalized} to monitoring`);
    void checkSingleDomain(newDomain.id, normalized);
  }, [domains, checkSingleDomain, showSuccess]);

  const handleBulkImport = useCallback((newUrls: string[]) => {
    const existingUrls = new Set(domains.map(d => d.url));
    const validNewDomains: Domain[] = [];
    let errorCount = 0;
    let duplicateCount = 0;
    let skippedForLimit = 0;
    const remainingSlots = Math.max(0, config.domain.maxDomains - domains.length);

    newUrls.forEach(urlInput => {
      const validation = validateAndNormalizeUrl(urlInput);
      if (!validation.valid || !validation.url) {
        errorCount++;
        return;
      }

      const normalized = validation.url;
      if (existingUrls.has(normalized)) {
        duplicateCount++;
        return;
      }

      if (validNewDomains.length >= remainingSlots) {
        skippedForLimit++;
        return;
      }

      validNewDomains.push({
        id: generateId(),
        url: normalized,
        status: DomainStatus.Unknown,
        addedAt: new Date(),
        history: [],
        tags: []
      } as Domain);
      
      existingUrls.add(normalized);
    });

    if (validNewDomains.length > 0) {
      setDomains(prev => [...validNewDomains, ...prev]);
      showSuccess(`Successfully imported ${validNewDomains.length} domains`);
      void checkBatch(validNewDomains);
    }

    if (skippedForLimit > 0) {
      showError(`${skippedForLimit} skipped — ${config.domain.maxDomains}-domain limit reached.`);
    }

    if (errorCount > 0 || duplicateCount > 0) {
      showInfo(`Imported with ${duplicateCount} duplicates and ${errorCount} invalid URLs skipped.`);
    }
  }, [domains, checkBatch, showSuccess, showInfo]);

  const removeDomain = useCallback((id: string) => {
    setDomains(prev => prev.filter(d => d.id !== id));
    if (selectedIds.has(id)) {
      const newSelected = new Set(selectedIds);
      newSelected.delete(id);
      setSelectedIds(newSelected);
    }
    showInfo('Domain removed');
  }, [selectedIds, showInfo]);

  const removeSelectedDomains = useCallback(() => {
    setShowDeleteConfirm(true);
  }, []);

  const confirmDeleteSelected = useCallback(() => {
    setDomains(prev => prev.filter(d => !selectedIds.has(d.id)));
    setSelectedIds(new Set());
    showInfo(`Removed ${selectedIds.size} domains`);
    setShowDeleteConfirm(false);
  }, [selectedIds, showInfo]);

  const checkSelectedDomains = useCallback(() => {
    if (isCheckingAll || selectedIds.size === 0) return;
    const domainsToCheck = domainsRef.current.filter(d => selectedIds.has(d.id) && d.status !== DomainStatus.Checking);
    if (domainsToCheck.length === 0) return;
    void checkBatch(domainsToCheck);
    showSuccess(`Checking ${domainsToCheck.length} domains`);
  }, [isCheckingAll, selectedIds, checkBatch, showSuccess]);

  const assignSelectedToGroup = useCallback((groupId?: string) => {
    setDomains(prev => prev.map(d => 
      selectedIds.has(d.id) ? { ...d, groupId } : d
    ));
    const groupName = groupId ? groups.find(g => g.id === groupId)?.name : 'no group';
    showSuccess(`Assigned ${selectedIds.size} domains to ${groupName}`);
  }, [selectedIds, groups, showSuccess]);

  const handleFileUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      const content = event.target?.result as string;
      const parsed = parseCSV(content);
      const urls = parsed.map((p) => p.url).filter((u): u is string => Boolean(u));
      if (urls.length === 0) {
        showError('No valid URLs found in CSV.');
        return;
      }
      handleBulkImport(urls);
    };
    reader.readAsText(file);
    e.target.value = '';
  }, [handleBulkImport, showError]);

  // CSV Export with error handling
  const handleExportCSV = useCallback(() => {
    try {
      exportToCSV(domains);
      showSuccess('Domains exported successfully');
    } catch (error) {
      logger.error('CSV export failed', error);
      showError('Failed to export domains. Please try again.');
    }
  }, [domains, showSuccess, showError]);

  // Notifications — skip transient Checking state so down/up alerts fire correctly.
  useEffect(() => {
    if (!settings.enableNotifications) return;
    domains.forEach(domain => {
      if (domain.status === DomainStatus.Checking) return;
      const prevStatus = previousStatusesRef.current.get(domain.id);

      if (domain.status === DomainStatus.Alive) {
        outageNotifiedRef.current.delete(domain.id);
      }

      let consecutiveDowns = 0;
      for (let i = domain.history.length - 1; i >= 0; i--) {
        if (domain.history[i]?.status === DomainStatus.Down) consecutiveDowns++;
        else break;
      }

      if (domain.status === DomainStatus.Down && consecutiveDowns >= 2 && !outageNotifiedRef.current.has(domain.id)) {
        outageNotifiedRef.current.add(domain.id);
        if (settings.playSound) playAlertSound();
        sendDomainDownNotification(domain.url, domain.statusCode);
        showError(`${domain.url} is down!`);
      }

      if (!prevStatus || prevStatus === domain.status) return;
      if (domain.status === DomainStatus.Alive && prevStatus === DomainStatus.Down) {
        sendDomainUpNotification(domain.url, domain.latency);
        showSuccess(`${domain.url} is back up!`);
      }
    });
    const newMap = new Map(previousStatusesRef.current);
    domains.forEach(d => {
      if (d.status !== DomainStatus.Checking) newMap.set(d.id, d.status);
    });
    previousStatusesRef.current = newMap.size > config.monitoring.maxPreviousStatuses
      ? new Map(Array.from(newMap.entries()).slice(-config.monitoring.maxPreviousStatuses))
      : newMap;
  }, [domains, settings.enableNotifications, settings.playSound, showError, showSuccess]);

  // Proactive SSL / domain-expiry warnings (once per asset per session).
  useEffect(() => {
    if (!settings.enableNotifications) return;
    domains.forEach((domain) => {
      const sslUrgent = domain.ssl?.status === SSLStatus.Expiring || domain.ssl?.status === SSLStatus.Expired;
      const domainUrgent = domain.expiry?.status === 'expiring' || domain.expiry?.status === 'expired';
      if (!sslUrgent && !domainUrgent) return;

      const key = sslUrgent ? `ssl:${domain.id}` : `expiry:${domain.id}`;
      if (expiryNotifiedRef.current.has(key)) return;
      expiryNotifiedRef.current.add(key);

      const label = sslUrgent
        ? `SSL ${domain.ssl?.status === SSLStatus.Expired ? 'expired' : `expires in ${domain.ssl?.daysUntilExpiry ?? '?'}d`}`
        : `Domain ${domain.expiry?.status === 'expired' ? 'expired' : `expires in ${domain.expiry?.daysUntilExpiry ?? '?'}d`}`;

      void sendNotification({
        title: 'Expiry warning',
        body: `${domain.url}: ${label}`,
      });
      showInfo(`${domain.url}: ${label}`);
    });
  }, [domains, settings.enableNotifications, showInfo]);

  // Auto-refresh on the configured interval (silent background checks).
  useEffect(() => {
    if (!settings.autoRefresh) return;
    const intervalMs = Math.min(
      Math.max(settings.refreshInterval, config.monitoring.minRefreshInterval),
      config.monitoring.maxRefreshInterval,
    );
    const timer = setInterval(() => {
      void checkAllDomainsRef.current(true);
    }, intervalMs);
    return () => clearInterval(timer);
  }, [settings.autoRefresh, settings.refreshInterval]);

  // Keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Cmd+K: Focus search input
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        const searchInput = document.querySelector('input[placeholder*="Filter domains"]') as HTMLInputElement;
        if (searchInput) {
          searchInput.focus();
          searchInput.select();
        }
      }
      // Cmd+Enter: Check all domains
      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
        e.preventDefault();
        void checkAllDomains();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [checkAllDomains]);

  // Computed Stats
  const stats: DomainStats = useMemo(() => {
    const total = domains.length;
    const alive = domains.filter(d => d.status === DomainStatus.Alive).length;
    const down = domains.filter(d => d.status === DomainStatus.Down).length;
    const unknown = domains.filter(d => d.status === DomainStatus.Unknown || d.status === DomainStatus.Checking).length;
    const responsiveDomains = domains.filter(d => d.latency !== undefined && d.latency > 0);
    const avgLatency = responsiveDomains.length > 0
      ? responsiveDomains.reduce((acc, curr) => acc + (curr.latency || 0), 0) / responsiveDomains.length
      : 0;
    const totalRecords = domains.reduce((acc, d) => acc + d.history.length, 0);
    const aliveRecords = domains.reduce((acc, d) => 
      acc + d.history.filter(h => h.status === DomainStatus.Alive).length, 0
    );
    const uptime = totalRecords > 0 ? (aliveRecords / totalRecords) * 100 : 100;

    // Trend comparison: split each domain's history at the mid-point
    // and compare the second-half alive rate / avgLatency vs first-half
    let prevAlive = 0, prevTotal = 0, prevLatSum = 0, prevLatCount = 0;
    let currAlive = 0, currTotal = 0, currLatSum = 0, currLatCount = 0;

    for (const d of domains) {
      const half = Math.floor(d.history.length / 2);
      const first = d.history.slice(0, half);
      const second = d.history.slice(half);
      prevAlive  += first.filter(h => h.status === DomainStatus.Alive).length;
      prevTotal  += first.length;
      for (const r of first) { if (r.latency > 0) { prevLatSum += r.latency; prevLatCount++; } }
      currAlive  += second.filter(h => h.status === DomainStatus.Alive).length;
      currTotal  += second.length;
      for (const r of second) { if (r.latency > 0) { currLatSum += r.latency; currLatCount++; } }
    }

    const prevUptime = prevTotal > 0 ? (prevAlive / prevTotal) * 100 : 100;
    const currUptime = currTotal > 0 ? (currAlive / currTotal) * 100 : 100;
    const prevDown = prevTotal - prevAlive;
    const currDown = currTotal - currAlive;
    const prevAvgLat = prevLatCount > 0 ? prevLatSum / prevLatCount : 0;
    const currAvgLat = currLatCount > 0 ? currLatSum / currLatCount : 0;

    const pct = (a: number, b: number) => (b > 0 ? ((a - b) / b) * 100 : 0);

    const prevAliveRate = prevTotal > 0 ? (prevAlive / prevTotal) * 100 : 100;
    const currAliveRate = currTotal > 0 ? (currAlive / currTotal) * 100 : 100;

    return {
      total, alive, down, unknown, avgLatency, uptime,
      trends: {
        alive:  pct(currAliveRate, prevAliveRate) > 1  ? 'up' : pct(currAliveRate, prevAliveRate) < -1 ? 'down' : 'stable',
        down:   pct(currDown, prevDown) > 5  ? 'up' : pct(currDown, prevDown) < -5 ? 'down' : 'stable',
        latency: pct(currAvgLat, prevAvgLat) > 10 ? 'up' : pct(currAvgLat, prevAvgLat) < -10 ? 'down' : 'stable',
        uptime: pct(currUptime, prevUptime) > 1  ? 'up' : pct(currUptime, prevUptime) < -1 ? 'down' : 'stable',
      },
    };
  }, [domains]);

  // Filter Counts - optimized single-pass computation
  const filterCounts = useMemo(() => {
    const statusCounts: Record<DomainStatus, number> = {
      [DomainStatus.Alive]: 0,
      [DomainStatus.Down]: 0,
      [DomainStatus.Unknown]: 0,
      [DomainStatus.Checking]: 0,
      [DomainStatus.Error]: 0,
    };
    
    const sslCounts: Record<SSLStatus, number> = {
      [SSLStatus.Valid]: 0,
      [SSLStatus.Expiring]: 0,
      [SSLStatus.Expired]: 0,
      [SSLStatus.Invalid]: 0,
      [SSLStatus.Unknown]: 0,
    };
    
    const groupCounts = new Map<string, number>();
    groups.forEach(g => groupCounts.set(g.id, 0));
    
    // Single pass through domains array
    domains.forEach(d => {
      statusCounts[d.status]++;
      sslCounts[d.ssl?.status || SSLStatus.Unknown]++;
      if (d.groupId) {
        const current = groupCounts.get(d.groupId) || 0;
        groupCounts.set(d.groupId, current + 1);
      }
    });
    
    groupCounts.set('ALL', domains.length);
    
    return { statusCounts, sslCounts, groupCounts };
  }, [domains, groups]);

  // Filtering and Sorting
  const displayDomains = useMemo(() => {
    const normalizedFilter = filter.trim().toLowerCase();
    const filtered = domains.filter(d => {
      const matchesSearch = d.url.toLowerCase().includes(normalizedFilter);
      const matchesStatus = statusFilter === 'ALL' || d.status === statusFilter;
      const matchesSSL = sslFilter === 'ALL' || d.ssl?.status === sslFilter;
      const matchesGroup = groupFilter === 'ALL' || d.groupId === groupFilter;
      return matchesSearch && matchesStatus && matchesSSL && matchesGroup;
    });

    filtered.sort((a, b) => {
      let comparison = 0;
      switch (sortField) {
        case 'url': comparison = a.url.localeCompare(b.url); break;
        case 'status': {
          const statusOrder: Record<DomainStatus, number> = {
            [DomainStatus.Down]: 0,
            [DomainStatus.Error]: 1,
            [DomainStatus.Checking]: 2,
            [DomainStatus.Unknown]: 3,
            [DomainStatus.Alive]: 4,
          };
          comparison = (statusOrder[a.status] ?? 5) - (statusOrder[b.status] ?? 5);
          break;
        }
        case 'latency': comparison = (a.latency || 0) - (b.latency || 0); break;
        case 'lastChecked': comparison = (a.lastChecked?.getTime() || 0) - (b.lastChecked?.getTime() || 0); break;
        case 'ssl': {
          const sslOrder = { [SSLStatus.Valid]: 0, [SSLStatus.Expiring]: 1, [SSLStatus.Expired]: 2, [SSLStatus.Invalid]: 3, [SSLStatus.Unknown]: 4 };
          comparison = (sslOrder[a.ssl?.status || SSLStatus.Unknown] ?? 4) - (sslOrder[b.ssl?.status || SSLStatus.Unknown] ?? 4);
          break;
        }
        case 'expiry': {
          const expiryOrder = { active: 0, expiring: 1, expired: 2, unknown: 3 };
          comparison = (expiryOrder[a.expiry?.status || 'unknown'] ?? 3) - (expiryOrder[b.expiry?.status || 'unknown'] ?? 3);
          break;
        }
      }
      return sortOrder === 'asc' ? comparison : -comparison;
    });
    return filtered;
  }, [domains, filter, statusFilter, sslFilter, groupFilter, sortField, sortOrder]);

  const viewingHistory = useMemo(() => {
    if (!viewingHistoryId) return null;
    return domains.find(d => d.id === viewingHistoryId) || null;
  }, [viewingHistoryId, domains]);

  const viewingDetail = useMemo(() => {
    if (!viewingDetailId) return null;
    return domains.find(d => d.id === viewingDetailId) || null;
  }, [viewingDetailId, domains]);

  const handleClearFilters = useCallback(() => {
    setFilter('');
    setStatusFilter('ALL');
    setSslFilter('ALL');
    setGroupFilter('ALL');
  }, []);

  const handleToggleSelect = useCallback((id: string) => {
    setSelectedIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }, []);

  const handleToggleAll = useCallback(() => {
    setSelectedIds(prev => {
      const allVisibleSelected = displayDomains.every(d => prev.has(d.id));
      if (allVisibleSelected) {
        const next = new Set(prev);
        displayDomains.forEach(d => next.delete(d.id));
        return next;
      }
      const next = new Set(prev);
      displayDomains.forEach(d => next.add(d.id));
      return next;
    });
  }, [displayDomains]);

  const handleSort = useCallback((field: SortField) => {
    setSortField(prevField => {
      if (prevField === field) {
        setSortOrder(prevOrder => prevOrder === 'asc' ? 'desc' : 'asc');
        return prevField;
      }
      setSortOrder('asc');
      return field;
    });
  }, []);

  const scrollToDomain = useCallback((domainId: string) => {
    const element = document.getElementById(`domain-${domainId}`);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
      element.classList.add('ring-2', 'ring-emerald-500', 'ring-offset-2', 'ring-offset-zinc-950');
      setTimeout(() => element.classList.remove('ring-2', 'ring-emerald-500', 'ring-offset-2', 'ring-offset-zinc-950'), 3000);
    }
  }, []);

  return (
    <div className={`min-h-screen bg-zinc-950 bg-premium-dark-subtle text-zinc-100 font-sans transition-colors duration-300 ${isCheckingAll ? 'animate-pulse-slow' : ''}`}>
      {/* Accessibility: Skip Links */}
      <SkipLinks />
      
      {/* Accessibility: Screen Reader Announcements */}
      <Announcer />

      <Header
        settings={settings}
        toggleDarkMode={() => setSettings(s => ({ ...s, darkMode: !s.darkMode }))}
        showSettings={showSettings}
        setShowSettings={setShowSettings}
        logout={logout}
        isAuthenticated={isAuthenticated}
      />

      <main id="main-content" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-32 bg-dot-pattern">
        {showSettings && (
          <SettingsPanel 
            settings={settings}
            setSettings={setSettings}
            onClose={() => setShowSettings(false)}
            showSuccess={showSuccess}
            showError={showError}
            showInfo={showInfo}
            requestNotificationPermission={requestNotificationPermission}
          />
        )}

        <HeroSection 
          domainCount={domains.length}
          newDomainUrl={newDomainUrl}
          setNewDomainUrl={setNewDomainUrl}
          inputError={inputError}
          setInputError={setInputError}
          onAddDomain={addDomain}
          onShowBulkImport={() => setShowBulkImport(true)}
        />

        <StatsOverview stats={stats} />

        {showBulkImport && (
          <BulkImportModal 
            onClose={() => setShowBulkImport(false)}
            onImport={handleBulkImport}
          />
        )}

        {isCheckingAll && checkProgress.total > 0 && (
          <div className="sticky top-16 z-10 mb-6 animate-in fade-in slide-in-from-top-2">
            <div className="glass-card rounded-xl p-4 border border-emerald-500/20 shadow-lg shadow-emerald-500/5">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium text-zinc-200">Checking domains...</span>
                <span className="text-xs font-mono text-zinc-400">{checkProgress.current} / {checkProgress.total}</span>
              </div>
              <div className="w-full h-2 bg-zinc-800 rounded-full overflow-hidden" role="progressbar" aria-valuenow={checkProgress.current} aria-valuemin={0} aria-valuemax={checkProgress.total}>
                <div className="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 transition-all duration-300 shadow-glow-emerald" style={{ width: `${(checkProgress.current / checkProgress.total) * 100}%` }} />
              </div>
            </div>
          </div>
        )}

        <div className="space-y-6">
          <div id="filters">
            <FilterBar
              filter={filter} setFilter={setFilter}
              statusFilter={statusFilter} setStatusFilter={setStatusFilter}
              sslFilter={sslFilter} setSslFilter={setSslFilter}
              groupFilter={groupFilter} setGroupFilter={setGroupFilter}
              groups={groups} setShowGroupManager={setShowGroupManager}
              sortField={sortField} handleSort={handleSort} sortOrder={sortOrder}
              selectedCount={selectedIds.size}
              isCheckingAll={isCheckingAll}
              onCheckBatch={checkSelectedDomains}
              onCheckAll={() => checkAllDomains()}
              onRemoveSelected={removeSelectedDomains}
              onAssignGroup={assignSelectedToGroup}
              handleFileUpload={handleFileUpload}
              onExportCSV={handleExportCSV}
              domainCount={domains.length}
              filterCounts={filterCounts}
            />
          </div>

          <div id="domain-table" role="region" aria-label="Domain list">
            <DomainTable
              domains={displayDomains}
              groups={groups}
              isFiltered={filter.length > 0 || statusFilter !== 'ALL' || sslFilter !== 'ALL' || groupFilter !== 'ALL'}
              onClearFilters={handleClearFilters}
              latencyThresholdMs={settings.latencyThreshold}
              selectedIds={selectedIds}
              onToggleSelect={handleToggleSelect}
              onToggleAll={handleToggleAll}
              onRemove={removeDomain}
              onUpdate={(id, url) => {
                const validation = validateAndNormalizeUrl(url);
                if (!validation.valid || !validation.url) {
                  showError('Invalid domain format.');
                  return;
                }
                setDomains(prev => prev.map(d => d.id === id ? { ...d, url: validation.url! } : d));
                void checkSingleDomain(id, validation.url);
              }}
              onCheck={(id) => {
                const domain = domains.find(d => d.id === id);
                if (domain?.url) void checkSingleDomain(id, domain.url);
              }}
              onEditTags={(id, tags) => setDomains(prev => prev.map(d => d.id === id ? { ...d, tags } : d))}
              onEditGroup={(id, groupId) => setDomains(prev => prev.map(d => d.id === id ? { ...d, groupId } : d))}
              onViewHistory={(domain) => setViewingHistoryId(domain.id)}
              onViewDetails={(domain) => setViewingDetailId(domain.id)}
            />
          </div>
        </div>
      </main>

      {/* Bottom Panel - Alerts & Stats (Collapsible) */}
      <BottomPanel domains={domains} stats={stats} onViewDomain={scrollToDomain} />

      <footer id="footer" className="text-center py-8 text-sm text-zinc-400" role="contentinfo">
        <div className="max-w-7xl mx-auto px-4">
          <p>Built by Sean G</p>
          <div className="mt-2 text-xs text-zinc-500">
            <kbd className="px-2 py-1 bg-zinc-800/80 border border-zinc-700 rounded mx-1 text-zinc-400">⌘K</kbd> Focus search
            <kbd className="px-2 py-1 bg-zinc-800/80 border border-zinc-700 rounded mx-1 text-zinc-400">⌘Enter</kbd> Check all
          </div>
        </div>
      </footer>

      {viewingDetail && (
        <DomainDetailModal
          domain={viewingDetail}
          onClose={() => setViewingDetailId(null)}
          onSetGmbPlaceId={(id, placeId) =>
            setDomains(prev => prev.map(d => d.id === id ? { ...d, gmbPlaceId: placeId || undefined } : d))
          }
          onCheckGmb={(id, placeId) => checkSingleGmb(id, placeId)}
        />
      )}

      {viewingHistory && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4" onClick={() => setViewingHistoryId(null)}>
          <div className="bg-zinc-900 rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border border-zinc-800" onClick={(e) => e.stopPropagation()}>
            <div className="sticky top-0 bg-zinc-900/90 backdrop-blur-md border-b border-zinc-800 px-6 py-4 flex items-center justify-between">
              <div>
                <h2 className="text-lg font-semibold text-zinc-100">Uptime History — {viewingHistory.url}</h2>
                <p className="text-xs text-zinc-500 mt-0.5">
                  Monitored since {viewingHistory.addedAt.toLocaleDateString()} · {viewingHistory.history.length} checks recorded
                </p>
              </div>
              <button onClick={() => setViewingHistoryId(null)} aria-label="Close" className="p-2 hover:bg-zinc-800 rounded-lg text-zinc-400 hover:text-zinc-200 transition-colors"><X size={20} /></button>
            </div>
            <div className="p-6">
              <HistoryChart domain={viewingHistory} />
            </div>
          </div>
        </div>
      )}

      {showGroupManager && (
        <GroupManager
          groups={groups}
          onAddGroup={(group) => { addGroup(group); setGroups([...groups, group]); }}
          onUpdateGroup={(id, updates) => { updateGroup(id, updates); setGroups(groups.map(g => g.id === id ? { ...g, ...updates } : g)); }}
          onRemoveGroup={(id) => { removeGroup(id); setGroups(groups.filter(g => g.id !== id)); setDomains(domains.map(d => d.groupId === id ? { ...d, groupId: undefined } : d)); }}
          onClose={() => setShowGroupManager(false)}
        />
      )}

      <ConfirmModal
        isOpen={showDeleteConfirm}
        onClose={() => setShowDeleteConfirm(false)}
        onConfirm={confirmDeleteSelected}
        title="Delete Domains"
        message={`Are you sure you want to remove ${selectedIds.size} domain${selectedIds.size === 1 ? '' : 's'}? This action cannot be undone.`}
        confirmText="Delete"
        cancelText="Cancel"
        variant="danger"
      />

    </div>
  );
};

export default App;