import React from 'react';
import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
import { useLearnerHub } from '../LearnerHubContext';
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from '../../components/ui/sidebar';
import canvasIcon from '../../assets/canvas-icon.png';
import gitIcon from '../../assets/git-icon.png';

const stepIconMap: Record<string, string> = {
  'canvas-setup-check': canvasIcon,
  'learner-hub-git-clone': gitIcon,
};

export const LearnerHubSidebar: React.FC = () => {
  const { steps, currentStepIndex, stepValidation, goToStep } = useLearnerHub();

  const loadingCount = React.useMemo(() => {
    let count = 0;
    stepValidation.forEach(validation => { if (validation.isLoading) count++; });
    return count;
  }, [stepValidation]);

  const isLoading = loadingCount > 0;

  return (
    <Sidebar className="bg-secondary select-none">
      <SidebarContent>
        <SidebarGroup>
          <div className="flex items-center gap-2 px-2 mb-2">
            <SidebarGroupLabel className="text-foreground select-none flex-1">
              Setup Steps
            </SidebarGroupLabel>
            {isLoading && (
              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                <span>Checking {loadingCount} step{loadingCount !== 1 ? 's' : ''}...</span>
              </div>
            )}
          </div>
          <div className="border-b border-border mb-3 -mx-4" />
          <SidebarGroupContent>
            <SidebarMenu>
              {steps.map((step, index) => {
                const iconSrc = stepIconMap[step.id];
                const validation = stepValidation.get(step.id);
                const isComplete = validation?.isComplete ?? false;
                const isLoadingStep = validation?.isLoading ?? false;
                const isCurrent = index === currentStepIndex;

                return (
                  <SidebarMenuItem key={step.id}>
                    <SidebarMenuButton isActive={isCurrent} onClick={() => goToStep(index)}>
                      <div className="w-6 h-6 rounded overflow-hidden flex-shrink-0">
                        <img src={iconSrc} alt={step.title} className="w-full h-full object-cover" />
                      </div>
                      <div className="flex-1 min-w-0 text-left">
                        <div className="font-medium text-sm">
                          {step.title}
                          {!step.required && (
                            <span className={`ml-1 text-xs font-normal ${isCurrent ? 'text-white/70' : 'text-muted-foreground'}`}>
                              (Optional)
                            </span>
                          )}
                        </div>
                      </div>
                      <div className="flex-shrink-0">
                        {isLoadingStep ? (
                          <Loader2 className={`h-4 w-4 animate-spin ${isCurrent ? 'text-white' : 'text-blue-500'}`} />
                        ) : isComplete ? (
                          <CheckCircle2 className={`h-4 w-4 ${isCurrent ? 'text-white' : 'text-green-600'}`} />
                        ) : (
                          <AlertCircle className={`h-4 w-4 ${isCurrent ? 'text-white' : 'text-red-600 dark:text-red-500'}`} />
                        )}
                      </div>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
};
