import React, { useEffect, useState } from 'react';
import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider, CircularProgress } from '@mui/material';
import { Storage } from '@mui/icons-material';
import { useAppStore } from '../store/useAppStore';
import { SchemaService } from '../services/api';

const Sidebar: React.FC = () => {
  const { activeDatabase, setActiveDatabase, setActiveTable, activeTable } = useAppStore();
  const [databases, setDatabases] = useState<string[]>([]);
  const [tables, setTables] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [tablesLoading, setTablesLoading] = useState(false);

  useEffect(() => {
    const fetchDatabases = async () => {
      try {
        const response = await SchemaService.getDatabases();
        setDatabases(response.data);
      } catch (error) {
        console.error('Failed to fetch databases', error);
      } finally {
        setLoading(false);
      }
    };
    fetchDatabases();
  }, []);

  const handleDatabaseClick = async (db: string) => {
    if (activeDatabase === db) {
      setActiveDatabase(null);
      setTables([]);
      return;
    }
    
    setActiveDatabase(db);
    setTablesLoading(true);
    try {
      const response = await SchemaService.getTables(db);
      setTables(response.data);
    } catch (error) {
      console.error('Failed to fetch tables', error);
    } finally {
      setTablesLoading(false);
    }
  };

  return (
    <Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
        <Storage color="primary" />
        <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>Explorer</Typography>
      </Box>
      <Divider />
      
      <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
        {loading ? (
          <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress size={24} /></Box>
        ) : (
          <List dense sx={{ p: 0 }}>
            {databases.map((db) => (
              <React.Fragment key={db}>
                <ListItem disablePadding>
                  <ListItemButton 
                    onClick={() => handleDatabaseClick(db)}
                    selected={activeDatabase === db}
                    sx={{ py: 1 }}
                  >
                    <ListItemIcon sx={{ minWidth: 36 }}>
                      <Storage fontSize="small" color={activeDatabase === db ? 'primary' : 'inherit'} />
                    </ListItemIcon>
                    <ListItemText 
                      primary={<Typography variant="body2" sx={{ fontWeight: activeDatabase === db ? 600 : 400 }}>{db}</Typography>} 
                    />
                  </ListItemButton>
                </ListItem>
                
                {activeDatabase === db && (
                  <List dense sx={{ pl: 4, bgcolor: 'rgba(0,0,0,0.02)' }}>
                    {tablesLoading ? (
                      <ListItem><CircularProgress size={16} /></ListItem>
                    ) : tables.length === 0 ? (
                      <ListItem><Typography variant="caption" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>No tables found</Typography></ListItem>
                    ) : tables.map((table) => (
                      <ListItem key={table} disablePadding>
                        <ListItemButton 
                          selected={activeTable === table}
                          onClick={() => setActiveTable(table)}
                          sx={{ py: 0.5 }}
                        >
                          <ListItemText 
                            primary={<Typography variant="caption" sx={{ fontWeight: activeTable === table ? 600 : 400 }}>{table}</Typography>} 
                          />
                        </ListItemButton>
                      </ListItem>
                    ))}
                  </List>
                )}
              </React.Fragment>
            ))}
          </List>
        )}
      </Box>
      <Divider />
      <Box sx={{ p: 2 }}>
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          Connected to: 127.0.0.1
        </Typography>
      </Box>
    </Box>
  );
};

export default Sidebar;