import React from 'react';
import { CheckCircle2, AlertCircle, AlertTriangle, Loader2 } from 'lucide-react';
import { useSetupWizard } from '../SetupWizardContext';
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from '../../components/ui/sidebar';
import homebrewIcon from '../../assets/homebrew-icon.png';
import dockerIcon from '../../assets/docker-icon.png';
import jfrogIcon from '../../assets/jfrog-icon.png';
import sshKeysIcon from '../../assets/ssh-keys-icon.png';
import terminalIcon from '../../assets/terminal-icon.png';
import gerritIcon from '../../assets/gerrit-icon.png';
import githubIcon from '../../assets/github-icon.png';
import gitIcon from '../../assets/git-icon.png';
import frpcIcon from '../../assets/frpc-icon.png';
import traefikIcon from '../../assets/traefik-icon.png';
import buildAndRunIcon from '../../assets/build-and-run.png';
import appIcon from '../../assets/app-icon.png';

const stepIconMap: Record<string, string> = {
  'homebrew-setup': homebrewIcon,
  'docker-setup': dockerIcon,
  'artifactory-setup': jfrogIcon,
  'ssh-keys-setup': sshKeysIcon,
  'inst-cli-install': terminalIcon,
  'gerrit-setup': gerritIcon,
  'github-setup': githubIcon,
  'git-setup': gitIcon,
  'frpc-setup': frpcIcon,
  'frpc-config': frpcIcon,
  'git-clone': gitIcon,
  'inst-cli-config-file': terminalIcon,
  'inst-cli-proxy': traefikIcon,
  'build-run': buildAndRunIcon,
  'chrome-extension': appIcon,
};

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

  // Count loading steps
  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 isLoading = validation?.isLoading ?? false;
                const hasWarnings = validation?.hasWarnings ?? 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">
                        {isLoading ? (
                          <Loader2 className={`h-4 w-4 animate-spin ${isCurrent ? 'text-white' : 'text-blue-500'}`} />
                        ) : isComplete && hasWarnings ? (
                          <AlertTriangle className={`h-4 w-4 ${isCurrent ? 'text-white' : 'text-yellow-600 dark:text-yellow-500'}`} />
                        ) : isComplete ? (
                          <CheckCircle2 className={`h-4 w-4 ${isCurrent ? 'text-white' : 'text-green-600'}`} />
                        ) : !step.required ? (
                          <AlertTriangle className={`h-4 w-4 ${isCurrent ? 'text-white' : 'text-yellow-600 dark:text-yellow-500'}`} />
                        ) : (
                          <AlertCircle className={`h-4 w-4 ${isCurrent ? 'text-white' : 'text-red-600 dark:text-red-500'}`} />
                        )}
                      </div>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
};
