/**
 * InfoCenterPage Component
 *
 * Main Info Center page with tenant selector and tabbed sections for:
 * - Statistics overview
 * - Site pages (hierarchy and discovered pages with rescan functionality)
 * - Training data
 *
 * @component
 * @layer Presentation
 */

import { useState, useEffect, useMemo } from 'react';
import { Database, FileQuestion } from 'lucide-react';
import { PageLayout } from '@/components/shared';
import { StatisticsCards } from './StatisticsCards';
import { SitePagesSection } from './SitePagesSection';
import { PatternDetectionSection } from './PatternDetectionSection';
import { ListingTemplateModal } from './ListingTemplateModal';
import { useInfoCenter } from '../../presentation/features/info-center/hooks';
import { useTenants } from '@/features/tenants/hooks';
import type { Tenant } from '@domain/entities';
import type { PageElement } from '@domain/entities/PageAnalysis';
import { ElementType, AnalysisStatus, PageStatus } from '@domain/entities';
import type { ListingTemplate } from '@archer/domain';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { ReliabilityStatusBadge } from '@/components/ui/ReliabilityStatusBadge';

/**
 * Tab Type
 */
type TabType = 'overview' | 'pages' | 'patterns';

/**
 * Tab Configuration
 */
const TABS: { id: TabType; label: string; description: string }[] = [
  { id: 'overview', label: 'Overview', description: 'Statistics and metrics' },
  { id: 'pages', label: 'Site Pages', description: 'Hierarchy and discovered pages' },
  { id: 'patterns', label: 'Patterns', description: 'AI-detected patterns' },
];

/**
 * InfoCenterPage Component
 */
export function InfoCenterPage() {
  const [tenants, setTenants] = useState<Tenant[]>([]);
  const [selectedTenantId, setSelectedTenantId] = useState<string>('');
  const [activeTab, setActiveTab] = useState<TabType>('overview');
  const [isInitialLoading, setIsInitialLoading] = useState(true);

  // Pagination state
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(50);

  // Modal state for ListingTemplateModal
  const [showTemplateModal, setShowTemplateModal] = useState(false);
  const [selectedTemplate, setSelectedTemplate] = useState<ListingTemplate | null>(null);

  // Use hooks for data management
  const { data: tenantsData } = useTenants();
  const loadedTenants = tenantsData?.tenants || [];

  const {
    discoveredPages,
    pageAnalyses,
    stats,
    isLoading,
    scanProgress,
    pagination,
    rescanPage,
    rescanAll,
    addUrlToScan,
    updateElement,
  } = useInfoCenter({
    tenantId: selectedTenantId,
    page,
    limit: pageSize,
    enableScanPolling: activeTab === 'pages', // Only poll when on pages tab
  });

  // Initialize tenants and auto-select first tenant
  useEffect(() => {
    if (loadedTenants.length > 0 && !selectedTenantId) {
      setTenants(loadedTenants);
      setSelectedTenantId(loadedTenants[0].id);
      setIsInitialLoading(false);
    }
  }, [loadedTenants, selectedTenantId]);

  // Reset to page 1 when tenant changes
  useEffect(() => {
    setPage(1);
  }, [selectedTenantId]);

  /**
   * Handle page change
   */
  const handlePageChange = (newPage: number) => {
    setPage(newPage);
  };

  /**
   * Handle page size change
   */
  const handlePageSizeChange = (newPageSize: number) => {
    setPageSize(newPageSize);
    setPage(1); // Reset to first page when page size changes
  };

  // TanStack Query automatically refetches when selectedTenantId changes.
  // The hook receives selectedTenantId, and the internal useCrawledPages/usePageAnalyses
  // hooks have query keys that include tenantId, so they refetch automatically.

  /**
   * Convert domain data to legacy format for child components
   *
   * This adapter ensures backward compatibility while we migrate components incrementally.
   */
  const legacyStats = useMemo(() => {
    // Calculate elements by type from analyses
    const elementsByType = {} as Record<ElementType, number>;
    Object.values(ElementType).forEach((type) => {
      elementsByType[type] = 0;
    });

    pageAnalyses.forEach((analysis) => {
      analysis.elements.forEach((element) => {
        elementsByType[element.type] = (elementsByType[element.type] || 0) + 1;
      });
    });

    // Calculate pages by status
    const pagesByStatus = {} as Record<PageStatus, number>;
    Object.values(PageStatus).forEach((status) => {
      pagesByStatus[status] = discoveredPages.filter((p) => p.status === status).length;
    });

    // Calculate pages by analysis status
    const pagesByAnalysisStatus = {} as Record<AnalysisStatus, number>;
    Object.values(AnalysisStatus).forEach((status) => {
      pagesByAnalysisStatus[status] = discoveredPages.filter((p) => p.analysisStatus === status).length;
    });

    return {
      tenantId: selectedTenantId,
      totalCrawledPages: stats.totalCrawledPages,
      totalAnalyzedPages: stats.totalAnalyzedPages,
      totalElements: stats.totalElements,
      coveragePercentage: stats.coveragePercentage,
      pendingAnalysis: stats.pendingAnalysis,
      failedAnalysis: stats.failedAnalysis,
      elementsByType: stats.elementsByType,
      lastCrawlDate: stats.lastCrawlDate,
      lastAnalysisDate: stats.lastAnalysisDate,
      pagesByStatus,
      pagesByAnalysisStatus,
      analysesByReliability: stats.analysesByReliability,
      withPatterns: stats.withPatterns,
    };
  }, [selectedTenantId, stats, discoveredPages, pageAnalyses]);

  /**
   * Pass domain entities directly (no conversion needed)
   */
  const legacyPages = useMemo(() => {
    return discoveredPages;
  }, [discoveredPages]);

  /**
   * Pass domain entities directly (no conversion needed)
   */
  const legacyAnalyses = useMemo(() => {
    return pageAnalyses;
  }, [pageAnalyses]);


  /**
   * Handle element update - delegates to hook
   */
  const handleElementUpdate = (analysisId: string, elementId: string, updatedElement: PageElement) => {
    updateElement(analysisId, elementId, updatedElement);
  };

  /**
   * Handle rescan all pages - delegates to hook
   */
  const handleRescanAll = async (tenantId: string) => {
    await rescanAll(tenantId);
  };

  /**
   * Handle rescan single page - delegates to hook
   */
  const handleRescanPage = async (pageId: string) => {
    await rescanPage(pageId);
  };

  /**
   * Handle add URL to scan - delegates to hook
   */
  const handleAddUrl = (tenantId: string, url: string) => {
    addUrlToScan(tenantId, url);
  };

  /**
   * Handle view template - opens modal
   */
  const handleViewTemplate = (template: ListingTemplate) => {
    setSelectedTemplate(template);
    setShowTemplateModal(true);
  };

  // Initial loading state (tenants)
  if (isInitialLoading) {
    return (
      <PageLayout
        title="Info Center"
        subtitle="Manage AI training data and website crawl information"
        icon={<Database size={24} />}
        gradient={true}
      >
        <div className="animate-pulse space-y-4">
          <div className="h-10 bg-gray-200 rounded w-1/4"></div>
          <div className="h-64 bg-gray-200 rounded"></div>
        </div>
      </PageLayout>
    );
  }

  // No tenants state
  if (tenants.length === 0) {
    return (
      <PageLayout
        title="Info Center"
        subtitle="Manage AI training data and website crawl information"
        icon={<Database size={24} />}
        gradient={true}
      >
        <div className="bg-card rounded-lg border border-border p-12 shadow-sm text-center">
          <Database className="mx-auto h-16 w-16 text-muted-foreground mb-4" />
          <h3 className="text-lg font-semibold text-foreground mb-2">No Tenants Available</h3>
          <p className="text-muted-foreground">
            Create a tenant first to view Info Center data
          </p>
        </div>
      </PageLayout>
    );
  }

  return (
    <PageLayout
      title="Info Center"
      subtitle="Manage AI training data and website crawl information"
      icon={<Database size={24} />}
      gradient={true}
      overlay={
        <ListingTemplateModal
          template={selectedTemplate}
          isOpen={showTemplateModal}
          onClose={() => {
            setShowTemplateModal(false);
            setSelectedTemplate(null);
          }}
        />
      }
    >
        {/* Tenant Selector */}
        <div className="flex items-center gap-4">
          <label className="text-sm font-medium text-gray-700">Select Tenant:</label>
          <select
            value={selectedTenantId}
            onChange={(e) => setSelectedTenantId(e.target.value)}
            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent shadow-sm"
          >
            {tenants.map((tenant) => (
              <option key={tenant.id} value={tenant.id}>
                {tenant.name} ({tenant.domain})
              </option>
            ))}
          </select>

          <div className="ml-auto text-sm text-gray-600">
            <span className="font-medium">{stats.totalCrawledPages}</span>{' '}
            crawled pages •{' '}
            <span className="font-medium">{stats.totalAnalyzedPages}</span>{' '}
            analyzed •{' '}
            <span className="font-medium">{stats.coveragePercentage}%</span>{' '}
            coverage
          </div>
        </div>

        {/* Tabs */}
        <div className="border-b border-gray-200">
          <nav className="-mb-px flex space-x-8">
            {TABS.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`
                  whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors
                  ${
                    activeTab === tab.id
                      ? 'border-cyan-500 text-cyan-600'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }
                `}
              >
                <div className="flex flex-col items-start">
                  <span>{tab.label}</span>
                  <span className="text-xs font-normal text-gray-400">{tab.description}</span>
                </div>
              </button>
            ))}
          </nav>
        </div>

        {/* Tab Content */}
        <div className="mt-6">
          {isLoading ? (
            <div className="animate-pulse space-y-4">
              <div className="h-32 bg-gray-200 rounded"></div>
              <div className="h-64 bg-gray-200 rounded"></div>
            </div>
          ) : (
            <>
              {activeTab === 'overview' && (
                <div className="space-y-6">
                  <StatisticsCards stats={legacyStats} />

                  {/* Pattern Detection Summary Card */}
                  {stats.withPatterns > 0 && (
                    <Card>
                      <CardHeader>
                        <CardTitle>Pattern Detection Summary</CardTitle>
                        <CardDescription>
                          AI-detected patterns across your analyzed pages
                        </CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                          <div>
                            <div className="text-2xl font-bold text-foreground">{stats.withPatterns}</div>
                            <div className="text-sm text-muted-foreground">Pages with Patterns</div>
                          </div>
                          <div>
                            <div className="text-2xl font-bold text-foreground">
                              {legacyAnalyses.reduce((acc, a) => acc + (a.getListingCount() || 0), 0)}
                            </div>
                            <div className="text-sm text-muted-foreground">Total Listing Templates</div>
                          </div>
                          <div>
                            <div className="text-2xl font-bold text-foreground">
                              {legacyAnalyses.filter(a => a.searchMechanism).length}
                            </div>
                            <div className="text-sm text-muted-foreground">Pages with Search</div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  )}
                </div>
              )}

              {activeTab === 'pages' && (
                <SitePagesSection
                  pages={legacyPages}
                  tenantId={selectedTenantId}
                  pageAnalyses={legacyAnalyses}
                  scanProgress={scanProgress}
                  pagination={pagination}
                  onRescanAll={handleRescanAll}
                  onRescanPage={handleRescanPage}
                  onAddUrl={handleAddUrl}
                  onElementUpdate={handleElementUpdate}
                  onPageChange={handlePageChange}
                  onPageSizeChange={handlePageSizeChange}
                />
              )}

              {activeTab === 'patterns' && (
                <div className="space-y-6">
                  {/* Empty state when no patterns */}
                  {stats.withPatterns === 0 && (
                    <Card>
                      <CardContent className="py-12">
                        <div className="text-center">
                          <FileQuestion className="w-16 h-16 mx-auto mb-4 text-gray-400" />
                          <h3 className="text-lg font-semibold mb-2">No pattern detection results</h3>
                          <p className="text-gray-600 mb-4">
                            Patterns will appear here once AI confirmation completes for analyzed pages.
                          </p>
                        </div>
                      </CardContent>
                    </Card>
                  )}

                  {/* Pattern cards for each analysis with patterns */}
                  {legacyAnalyses
                    .filter((analysis) => analysis.hasPatterns())
                    .map((analysis) => (
                      <Card key={analysis.id}>
                        <CardHeader>
                          <div className="flex items-center justify-between">
                            <div className="flex-1 min-w-0">
                              <CardTitle className="text-lg truncate">{analysis.url}</CardTitle>
                              <CardDescription className="mt-1">
                                Detected {analysis.getListingCount()} listing template(s)
                                {analysis.searchMechanism && ' • Search mechanism'}
                                {analysis.paginationMechanism && ' • Pagination mechanism'}
                              </CardDescription>
                            </div>
                            {analysis.reliabilityStatus && (
                              <ReliabilityStatusBadge status={analysis.reliabilityStatus} />
                            )}
                          </div>
                        </CardHeader>
                        <CardContent>
                          <PatternDetectionSection
                            analysis={analysis}
                            onViewTemplate={handleViewTemplate}
                          />
                        </CardContent>
                      </Card>
                    ))}
                </div>
              )}
            </>
          )}
        </div>
    </PageLayout>
  );
}