/**
 * SiteHierarchySection Component
 *
 * Tree view visualization of analysed pages showing parent-child relationships
 * and site structure hierarchy.
 *
 * Features:
 * - Expandable tree nodes
 * - Visual depth indicators
 * - Analysis status per node
 * - Element counts
 *
 * @component
 * @layer Presentation
 */

import { useState, useMemo } from 'react';
import { ChevronRight, ChevronDown, Globe, FileText, ExternalLink } from 'lucide-react';
import type { DiscoveredPage } from '@domain/entities';
import { AnalysisStatus } from '@domain/entities';
import { ANALYSIS_STATUS_CONFIG } from '@domain/constants';

interface SiteHierarchySectionProps {
  pages: DiscoveredPage[];
}

/**
 * Build tree structure from flat page list
 */
function buildTree(pages: DiscoveredPage[]): TreeNode[] {
  // Create map of pages by ID
  const pageMap = new Map<string, DiscoveredPage>();
  pages.forEach((page) => {
    pageMap.set(page.id, page);
  });

  // Find root pages (no parent)
  const rootPages = pages.filter((page) => !page.parentPageId);

  // Build tree recursively
  function buildNode(page: DiscoveredPage): TreeNode {
    const children = pages
      .filter((p) => p.parentPageId === page.id)
      .map((child) => buildNode(child))
      .sort((a, b) => a.page.url.localeCompare(b.page.url));

    return {
      page,
      children,
    };
  }

  return rootPages.map((page) => buildNode(page)).sort((a, b) => a.page.depth - b.page.depth);
}

/**
 * Tree Node Interface
 */
interface TreeNode {
  page: DiscoveredPage;
  children: TreeNode[];
}

/**
 * Analysis Status Badge
 */
function AnalysisStatusBadge({ status }: { status: AnalysisStatus }) {
  const config = ANALYSIS_STATUS_CONFIG[status];
  const colorClasses: Record<string, string> = {
    green: 'bg-green-100 text-green-800 border-green-200',
    blue: 'bg-blue-100 text-blue-800 border-blue-200',
    yellow: 'bg-yellow-100 text-yellow-800 border-yellow-200',
    orange: 'bg-orange-100 text-orange-800 border-orange-200',
    red: 'bg-red-100 text-red-800 border-red-200',
    gray: 'bg-gray-100 text-gray-700 border-gray-200',
  };

  // Extract color name from config.color (e.g., "text-green-600" -> "green")
  const colorName = config.color.split('-')[1] || 'gray';

  return (
    <span
      className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${colorClasses[colorName] || colorClasses.gray}`}
    >
      {config.label}
    </span>
  );
}

/**
 * TreeNode Component (Recursive)
 */
function TreeNodeComponent({ node, depth = 0 }: { node: TreeNode; depth?: number }) {
  const [isExpanded, setIsExpanded] = useState(depth < 2); // Auto-expand first 2 levels
  const hasChildren = node.children.length > 0;

  // Extract path from URL
  const urlPath = node.page.url.replace(/^https?:\/\/[^/]+/, '') || '/';

  return (
    <div>
      <div
        className={`flex items-center gap-2 py-2 px-3 hover:bg-gray-50 rounded-lg transition-colors ${
          hasChildren ? 'cursor-pointer' : ''
        }`}
        style={{ paddingLeft: `${depth * 24 + 12}px` }}
        onClick={() => hasChildren && setIsExpanded(!isExpanded)}
      >
        {/* Expand/Collapse Icon */}
        <div className="flex-shrink-0 w-4">
          {hasChildren ? (
            isExpanded ? (
              <ChevronDown size={16} className="text-gray-500" />
            ) : (
              <ChevronRight size={16} className="text-gray-500" />
            )
          ) : null}
        </div>

        {/* Page Icon */}
        <div className="flex-shrink-0">
          {depth === 0 ? (
            <Globe size={16} className="text-blue-600" />
          ) : (
            <FileText size={16} className="text-gray-500" />
          )}
        </div>

        {/* URL Path */}
        <a
          href={node.page.url}
          target="_blank"
          rel="noopener noreferrer"
          className="text-sm text-cyan-600 hover:text-cyan-800 hover:underline flex items-center gap-1 flex-1"
          onClick={(e) => e.stopPropagation()}
        >
          {urlPath}
          <ExternalLink size={12} />
        </a>

        {/* Element Count */}
        {node.page.elementCount !== undefined && (
          <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
            {node.page.elementCount} elements
          </span>
        )}

        {/* Analysis Status */}
        <AnalysisStatusBadge status={node.page.analysisStatus} />

        {/* Depth Badge */}
        <span className="text-xs text-gray-400">L{node.page.depth}</span>
      </div>

      {/* Children */}
      {hasChildren && isExpanded && (
        <div>
          {node.children.map((child) => (
            <TreeNodeComponent key={child.page.id} node={child} depth={depth + 1} />
          ))}
        </div>
      )}
    </div>
  );
}

/**
 * SiteHierarchySection Component
 */
export function SiteHierarchySection({ pages }: SiteHierarchySectionProps) {
  // Build tree structure
  const tree = useMemo(() => buildTree(pages), [pages]);

  // Calculate stats
  const stats = useMemo(() => {
    const depthCounts: Record<number, number> = {};
    let maxDepth = 0;

    pages.forEach((page) => {
      depthCounts[page.depth] = (depthCounts[page.depth] || 0) + 1;
      maxDepth = Math.max(maxDepth, page.depth);
    });

    return { depthCounts, maxDepth };
  }, [pages]);

  return (
    <div className="space-y-4">
      {/* Header with Stats */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center">
            <Globe className="w-5 h-5 text-purple-600" />
          </div>
          <div>
            <h3 className="text-lg font-semibold text-gray-900">Site Hierarchy</h3>
            <p className="text-sm text-gray-500">
              Tree view of analysed pages (max depth: {stats.maxDepth})
            </p>
          </div>
        </div>

        {/* Depth Distribution */}
        <div className="flex items-center gap-4">
          {Object.entries(stats.depthCounts)
            .sort(([a], [b]) => Number(a) - Number(b))
            .map(([depth, count]) => (
              <div key={depth} className="text-sm">
                <span className="text-gray-500">L{depth}:</span>{' '}
                <span className="font-medium text-gray-900">{count}</span>
              </div>
            ))}
        </div>
      </div>

      {/* Tree View */}
      <div className="bg-card rounded-lg border border-border shadow-sm p-4">
        {tree.length === 0 ? (
          <div className="text-center py-12 text-gray-500">
            <Globe className="mx-auto h-12 w-12 text-gray-400 mb-4" />
            <p>No pages to display</p>
          </div>
        ) : (
          <div className="space-y-1">
            {tree.map((node) => (
              <TreeNodeComponent key={node.page.id} node={node} />
            ))}
          </div>
        )}
      </div>

      {/* Legend */}
      <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
        <div className="text-sm font-medium text-gray-700 mb-2">Legend:</div>
        <div className="flex flex-wrap gap-4 text-xs text-gray-600">
          <div className="flex items-center gap-1">
            <Globe size={14} className="text-blue-600" />
            <span>Root page</span>
          </div>
          <div className="flex items-center gap-1">
            <FileText size={14} className="text-gray-500" />
            <span>Child page</span>
          </div>
          <div className="flex items-center gap-1">
            <span className="text-gray-400">L0, L1, L2...</span>
            <span>Depth level</span>
          </div>
        </div>
      </div>
    </div>
  );
}