import React from 'react';
import { HardDrive, RotateCcw, Upload, Download } from 'lucide-react';
import { useBackupRestore, BackupRestoreStep } from '../BackupRestoreContext';
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from '../../components/ui/sidebar';

interface StepItem {
  id: BackupRestoreStep;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
}

const steps: StepItem[] = [
  {
    id: 'backup',
    title: 'Backup',
    description: 'Create a new database backup',
    icon: HardDrive,
  },
  {
    id: 'restore',
    title: 'Restore',
    description: 'Restore a database from backup',
    icon: RotateCcw,
  },
  {
    id: 'export',
    title: 'Export',
    description: 'Export a backup as a portable file',
    icon: Upload,
  },
  {
    id: 'import',
    title: 'Import',
    description: 'Import a backup from an exported file',
    icon: Download,
  },
];

export const BackupRestoreSidebar: React.FC = () => {
  const { currentStep, goToStep } = useBackupRestore();

  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">
              Options
            </SidebarGroupLabel>
          </div>
          <div className="border-b border-border mb-3 -mx-4" />
          <SidebarGroupContent>
            <SidebarMenu>
              {steps.map((step) => {
                const Icon = step.icon;
                const isActive = currentStep === step.id;

                return (
                  <SidebarMenuItem key={step.id}>
                    <SidebarMenuButton
                      isActive={isActive}
                      onClick={() => goToStep(step.id)}
                    >
                      <div className="w-6 h-6 flex-shrink-0 flex items-center justify-center">
                        <Icon className={`h-5 w-5 ${isActive ? 'text-white' : 'text-foreground'}`} />
                      </div>
                      <div className="flex-1 min-w-0 text-left">
                        <div className="font-medium text-sm">{step.title}</div>
                      </div>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
};
