import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { get } from '../../lib/api';
import { Box, IconButton, Typography } from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';

const HelpPage = () => {
  const { guildId } = useParams();
  const navigate = useNavigate();
  const [commands, setCommands] = useState([]);

  useEffect(() => {
    get(`/api/servers/${guildId}/commands`).then(res => {
        const cmds = res.data || [];
        // sort: locked commands first (preserve relative order), then others alphabetically
        const locked = cmds.filter(c => c.locked);
        const others = cmds.filter(c => !c.locked).sort((a, b) => a.name.localeCompare(b.name));
        setCommands([...locked, ...others]);
      })
      .catch(() => setCommands([]));
  }, [guildId]);

  const handleBack = () => {
    // Navigate back to server settings and instruct it to open Commands accordion
    navigate(`/server/${guildId}`, { state: { openCommands: true } });
  }

  return (
    <Box sx={{ padding: { xs: 2, sm: 3, md: 5 } }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 2 }, mb: 2 }}>
        <IconButton onClick={handleBack}><ArrowBackIcon /></IconButton>
        <Typography variant={{ xs: 'h5', sm: 'h5' }}>Commands List</Typography>
      </Box>
      <Box sx={{ marginTop: 2 }}>
        {commands.length === 0 && <Typography>No commands available.</Typography>}
        {commands.map(cmd => (
          <Box key={cmd.name} sx={{ border: '1px solid #eee', borderRadius: 1, padding: 1, marginTop: 1 }}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Typography sx={{ fontWeight: 'bold' }}>/{cmd.name}</Typography>
              <Typography sx={{ color: cmd.locked ? 'primary.main' : (cmd.enabled ? 'success.main' : 'text.secondary') }}>{cmd.locked ? 'Locked' : (cmd.enabled ? 'Enabled' : 'Disabled')}</Typography>
            </Box>
            <Typography sx={{ mt: 0.5 }}>{cmd.description}</Typography>
          </Box>
        ))}
      </Box>
    </Box>
  );
}

export default HelpPage;