import React, { useState, useMemo } from 'react';
import { BookOpen, ChevronRight, Loader2, CheckCircle, Map, Clock, Eye, Target } from 'lucide-react';
import { BlogSection } from '../types';

interface Props {
  sections: BlogSection[];
  activeSection: string;
  onSectionClick: (id: string) => void;
}

const Sidebar: React.FC<Props> = ({ sections, activeSection, onSectionClick }) => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [showMinimap, setShowMinimap] = useState(true);

  // Calculate reading progress
  const readingStats = useMemo(() => {
    const activeIndex = sections.findIndex(s => s.id === activeSection);
    const completedCount = sections.filter(s => !s.isLoading && !s.error && s.content).length;
    const totalWords = sections.reduce((acc, s) => acc + (s.content?.split(/\s+/).length || 0), 0);
    const readingTimeMin = Math.max(1, Math.ceil(totalWords / 200));
    const progressPercent = activeIndex >= 0 ? ((activeIndex + 1) / sections.length) * 100 : 0;
    
    return {
      activeIndex,
      completedCount,
      totalWords,
      readingTimeMin,
      progressPercent
    };
  }, [sections, activeSection]);

  const handleClick = (id: string) => {
    onSectionClick(id);
    const element = document.getElementById(`section-${id}`);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <nav 
      className={`
        hidden lg:block fixed left-0 top-24 h-[calc(100vh-8rem)] z-40
        transition-all duration-300 ease-out
        ${isCollapsed ? 'w-16' : 'w-72'}
      `}
    >
      <div className="h-full flex flex-col ml-6">
        {/* Header */}
        <div className="flex items-center justify-between mb-6 pr-4">
          {!isCollapsed && (
            <div className="flex items-center gap-2 text-sm font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
              <BookOpen size={14} />
              <span>Contents</span>
            </div>
          )}
          <button
            onClick={() => setIsCollapsed(!isCollapsed)}
            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          >
            <ChevronRight 
              size={16} 
              className={`transition-transform duration-300 ${isCollapsed ? '' : 'rotate-180'}`}
            />
          </button>
        </div>

        {/* Navigation Items */}
        <div className="flex-1 overflow-y-auto custom-scrollbar pr-4 space-y-1">
          {sections.map((section, index) => {
            const isActive = activeSection === section.id;
            const isLoading = section.isLoading;
            const isComplete = !section.isLoading && section.content && !section.error;
            const hasError = section.error;
            
            return (
              <button
                key={section.id}
                onClick={() => !isLoading && handleClick(section.id)}
                disabled={isLoading}
                className={`
                  w-full text-left transition-all duration-200 group relative
                  ${isCollapsed ? 'px-2 py-3' : 'px-4 py-3'}
                  rounded-xl
                  ${isLoading ? 'opacity-60 cursor-wait' : ''}
                  ${hasError ? 'opacity-70' : ''}
                  ${isActive 
                    ? 'bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300' 
                    : 'hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-600 dark:text-gray-400'
                  }
                `}
              >
                {/* Active Indicator */}
                <div 
                  className={`
                    absolute left-0 top-1/2 -translate-y-1/2 w-1 rounded-r-full
                    transition-all duration-300
                    ${isActive ? 'h-8 bg-brand-500' : 'h-0 bg-transparent'}
                  `}
                />
                
                {isCollapsed ? (
                  <div className={`
                    w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold relative
                    ${isLoading ? 'bg-gray-200 dark:bg-gray-700' : ''}
                    ${isActive && !isLoading
                      ? 'bg-brand-500 text-white' 
                      : 'bg-gray-100 dark:bg-gray-800 text-gray-500'
                    }
                  `}>
                    {isLoading ? (
                      <Loader2 size={14} className="animate-spin" />
                    ) : (
                      index + 1
                    )}
                    {/* Validation indicator dot */}
                    {section.validationStatus?.isValidated && (
                      <span className={`absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-gray-900 ${
                        section.validationStatus.overallScore >= 80 ? 'bg-green-500' :
                        section.validationStatus.overallScore >= 60 ? 'bg-amber-500' : 'bg-red-500'
                      }`} />
                    )}
                  </div>
                ) : (
                  <div className="flex items-start gap-3">
                    <span className={`
                      flex-shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-xs font-bold mt-0.5 relative
                      ${isLoading ? 'bg-gray-200 dark:bg-gray-700 animate-pulse' : ''}
                      ${isActive && !isLoading
                        ? 'bg-brand-500 text-white' 
                        : 'bg-gray-100 dark:bg-gray-800 text-gray-500 group-hover:bg-gray-200 dark:group-hover:bg-gray-700'
                      }
                    `}>
                      {isLoading ? (
                        <Loader2 size={10} className="animate-spin" />
                      ) : isComplete ? (
                        <CheckCircle size={10} className="text-green-500" />
                      ) : (
                        index + 1
                      )}
                    </span>
                    <div className="flex-1 min-w-0">
                      <span className={`
                        text-sm leading-snug transition-colors block
                        ${isLoading ? 'text-gray-400 dark:text-gray-600' : ''}
                        ${isActive && !isLoading ? 'font-semibold' : 'font-medium'}
                      `}>
                        {section.title}
                      </span>
                      {/* Validation score badge */}
                      {section.validationStatus?.isValidated && (
                        <span className={`inline-flex items-center gap-1 text-[10px] mt-0.5 px-1.5 py-0.5 rounded ${
                          section.validationStatus.overallScore >= 80 
                            ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' 
                            : section.validationStatus.overallScore >= 60 
                            ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400'
                            : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
                        }`}>
                          {section.validationStatus.overallScore >= 80 ? '✓' : section.validationStatus.overallScore >= 60 ? '!' : '✗'}
                          {section.validationStatus.overallScore}%
                          {section.validationStatus.wasRepaired && ' 🔧'}
                        </span>
                      )}
                    </div>
                  </div>
                )}
              </button>
            );
          })}
        </div>

        {/* Progress Indicator */}
        {!isCollapsed && (
          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-800 pr-4 space-y-3">
            {/* Generation Progress */}
            {sections.some(s => s.isLoading) && (
              <div>
                <div className="flex items-center justify-between text-xs text-brand-600 dark:text-brand-400 mb-2">
                  <span className="flex items-center gap-1">
                    <Loader2 size={10} className="animate-spin" />
                    Generating
                  </span>
                  <span>
                    {sections.filter(s => !s.isLoading).length}/{sections.length}
                  </span>
                </div>
                <div className="h-1.5 bg-brand-100 dark:bg-brand-900/30 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-brand-500 to-purple-500 rounded-full transition-all duration-500"
                  style={{ 
                    width: `${(sections.filter(s => !s.isLoading).length / sections.length) * 100}%` 
                  }}
                />
              </div>
            </div>
          )}
          
          {/* Reading Progress */}
          <div>
            <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
              <span className="flex items-center gap-1">
                <Eye size={10} />
                Reading
              </span>
              <span>
                {sections.findIndex(s => s.id === activeSection) + 1}/{sections.length}
              </span>
            </div>
            <div className="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
              <div 
                className="h-full bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-500 rounded-full transition-all duration-500"
                style={{ 
                  width: `${((sections.findIndex(s => s.id === activeSection) + 1) / sections.length) * 100}%` 
                }}
              />
            </div>
          </div>

          {/* Mini-map Toggle */}
          <button
            onClick={() => setShowMinimap(!showMinimap)}
            className={`
              w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-xs font-medium transition-colors
              ${showMinimap 
                ? 'bg-brand-50 dark:bg-brand-900/20 text-brand-600 dark:text-brand-400' 
                : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
              }
            `}
          >
            <span className="flex items-center gap-1.5">
              <Map size={12} />
              Mini-map
            </span>
            <span className="text-[10px] opacity-60">
              {showMinimap ? 'On' : 'Off'}
            </span>
          </button>

          {/* Visual Mini-map */}
          {showMinimap && (
            <div className="p-2 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
              <div className="flex gap-1 flex-wrap">
                {sections.map((section, index) => {
                  const isActive = activeSection === section.id;
                  const isPast = sections.findIndex(s => s.id === activeSection) > index;
                  const isLoading = section.isLoading;
                  const hasError = section.error;
                  
                  return (
                    <button
                      key={section.id}
                      onClick={() => handleClick(section.id)}
                      disabled={isLoading}
                      className={`
                        w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold transition-all
                        ${isActive 
                          ? 'bg-brand-500 text-white ring-2 ring-brand-500/30 scale-110' 
                          : isPast 
                          ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400' 
                          : isLoading
                          ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 animate-pulse'
                          : hasError
                          ? 'bg-red-100 dark:bg-red-900/30 text-red-500'
                          : 'bg-gray-100 dark:bg-gray-800 text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
                        }
                      `}
                      title={section.title}
                    >
                      {isActive ? <Target size={10} /> : index + 1}
                    </button>
                  );
                })}
              </div>
              <p className="text-[10px] text-gray-400 text-center mt-2">
                You are here: Section {readingStats.activeIndex + 1}
              </p>
            </div>
          )}

          {/* Estimated Time Remaining */}
          <div className="flex items-center justify-center gap-2 text-[10px] text-gray-400 py-1">
            <Clock size={10} />
            <span>
              ~{Math.max(1, readingStats.readingTimeMin - Math.ceil(readingStats.readingTimeMin * (readingStats.progressPercent / 100)))} min remaining
            </span>
          </div>
        </div>
      )}
    </div>
  </nav>
);
};

export default Sidebar;