import { Box, Typography } from '@mui/material';
import type { GroupWithTasks, TaskWithSteps, StepWithNotes } from '../types';

interface DesktopLayoutProps {
  groups: GroupWithTasks[];
  selectedGroup?: GroupWithTasks;
  selectedTask?: TaskWithSteps;
  selectedStep?: StepWithNotes;
  onGroupSelect: (group: GroupWithTasks | undefined) => void;
  onTaskSelect: (task: TaskWithSteps | undefined) => void;
  onStepSelect: (step: StepWithNotes | undefined) => void;
}

export function DesktopLayout({
  groups,
  selectedGroup,
  selectedTask,
  selectedStep,
  onGroupSelect,
  onTaskSelect,
  onStepSelect,
}: DesktopLayoutProps) {
  return (
    <Box sx={{ display: 'flex', height: '100vh' }}>
      {/* Groups panel */}
      <Box sx={{ width: 250, borderRight: 1, borderColor: 'divider', p: 2 }}>
        <Typography variant="h6" sx={{ mb: 2 }}>
          Groups
        </Typography>
        {groups.map((group) => (
          <Box
            key={group.id}
            sx={{
              p: 2,
              cursor: 'pointer',
              bgcolor: selectedGroup?.id === group.id ? 'action.selected' : 'transparent',
              '&:hover': { bgcolor: 'action.hover' },
            }}
            onClick={() => onGroupSelect(group)}
          >
            <Typography>{group.name}</Typography>
          </Box>
        ))}
      </Box>

      {/* Tasks panel */}
      {selectedGroup && (
        <Box sx={{ width: 250, borderRight: 1, borderColor: 'divider', p: 2 }}>
          <Typography variant="h6" sx={{ mb: 2 }}>
            Tasks
          </Typography>
          {selectedGroup.tasks.map((task) => (
            <Box
              key={task.id}
              sx={{
                p: 2,
                cursor: 'pointer',
                bgcolor: selectedTask?.id === task.id ? 'action.selected' : 'transparent',
                '&:hover': { bgcolor: 'action.hover' },
              }}
              onClick={() => onTaskSelect(task)}
            >
              <Typography>{task.name}</Typography>
            </Box>
          ))}
        </Box>
      )}

      {/* Steps panel */}
      {selectedTask && (
        <Box sx={{ width: 250, borderRight: 1, borderColor: 'divider', p: 2 }}>
          <Typography variant="h6" sx={{ mb: 2 }}>
            Steps
          </Typography>
          {selectedTask.steps.map((step) => (
            <Box
              key={step.id}
              sx={{
                p: 2,
                cursor: 'pointer',
                bgcolor: selectedStep?.id === step.id ? 'action.selected' : 'transparent',
                '&:hover': { bgcolor: 'action.hover' },
              }}
              onClick={() => onStepSelect(step)}
            >
              <Typography>{step.name}</Typography>
            </Box>
          ))}
        </Box>
      )}

      {/* Step details panel */}
      {selectedStep && (
        <Box sx={{ flex: 1, p: 2 }}>
          <Typography variant="h6" sx={{ mb: 2 }}>
            {selectedStep.name}
          </Typography>
          <Typography>{selectedStep.instructions}</Typography>
        </Box>
      )}
    </Box>
  );
}