import React, { useEffect, useState, useCallback } from 'react';
import { 
  Box, 
  Paper, 
  Typography, 
  CircularProgress, 
  Button, 
  Divider, 
  IconButton, 
  Tooltip, 
  Snackbar, 
  Alert,
  AlertTitle
} from '@mui/material';
import { PlayArrow, History, Save, CleaningServices, Close } from '@mui/icons-material';
import { DataGrid } from '@mui/x-data-grid';
import type { GridColDef, GridPaginationModel } from '@mui/x-data-grid';
import Editor from '@monaco-editor/react';
import { useAppStore } from '../store/useAppStore';
import { SchemaService } from '../services/api';

const MainContent: React.FC = () => {
  const { activeTable, activeDatabase, darkMode } = useAppStore();
  const [columns, setColumns] = useState<GridColDef[]>([]);
  const [rows, setRows] = useState<any[]>([]);
  const [rowCount, setRowCount] = useState(0);
  const [loadingSchema, setLoadingSchema] = useState(false);
  const [loadingData, setLoadingData] = useState(false);
  const [sqlQuery, setSqlQuery] = useState('');
  const [isCustomQuery, setIsCustomQuery] = useState(false);
  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
    page: 0,
    pageSize: 100,
  });

  // Custom Alert State
  const [errorInfo, setErrorInfo] = useState<{ open: boolean; message: string; title: string }>({
    open: false,
    message: '',
    title: ''
  });

  const handleCloseError = () => setErrorInfo({ ...errorInfo, open: false });

  // Helper to map SQL types to MUI X Data Grid types
  const mapSqlTypeToMuiType = (sqlType: string): 'string' | 'number' | 'date' | 'dateTime' | 'boolean' => {
    sqlType = sqlType.toLowerCase();
    if (sqlType.includes('int') || sqlType.includes('decimal') || sqlType.includes('float') || sqlType.includes('double')) return 'number';
    if (sqlType.includes('datetime') || sqlType.includes('timestamp')) return 'dateTime';
    if (sqlType.includes('date')) return 'date';
    if (sqlType.includes('bool') || sqlType.includes('tinyint(1)')) return 'boolean';
    return 'string';
  };

  // Set initial SQL query when table changes
  useEffect(() => {
    if (activeTable && activeDatabase) {
      setSqlQuery(`SELECT * FROM ${activeDatabase}.${activeTable} LIMIT 1000;`);
      setIsCustomQuery(false);
    }
  }, [activeTable, activeDatabase]);

  // Fetch Schema
  useEffect(() => {
    const fetchSchema = async () => {
      if (!activeTable || !activeDatabase || isCustomQuery) return;
      
      setLoadingSchema(true);
      try {
        const schemaRes = await SchemaService.getTableSchema(activeTable, activeDatabase);
        const cols: GridColDef[] = schemaRes.data.map((col: any) => {
          const type = mapSqlTypeToMuiType(col.Type);
          return {
            field: col.Field,
            headerName: col.Field,
            type: type,
            width: 200,
            minWidth: 100,
            valueGetter: (value: any) => {
              if ((type === 'date' || type === 'dateTime') && value && typeof value === 'string') {
                return new Date(value);
              }
              return value;
            },
          };
        });
        setColumns(cols);
        setPaginationModel({ page: 0, pageSize: 100 });
      } catch (error) {
        console.error('Failed to fetch table schema', error);
      } finally {
        setLoadingSchema(false);
      }
    };

    fetchSchema();
  }, [activeTable, activeDatabase, isCustomQuery]);

  // Fetch Data
  const fetchData = useCallback(async () => {
    if (!activeTable || !activeDatabase || isCustomQuery) return;

    setLoadingData(true);
    try {
      const params = {
        skip: paginationModel.page * paginationModel.pageSize,
        take: paginationModel.pageSize,
        requireTotalCount: true,
        database: activeDatabase,
      };

      const response = await SchemaService.getTableData(activeTable, params);
      
      const dataWithIds = response.data.data.map((row: any, index: number) => ({
        id: row.id || row.ID || `row-${index}-${paginationModel.page}`,
        ...row,
      }));

      setRows(dataWithIds);
      setRowCount(response.data.totalCount || 0);
    } catch (error) {
      console.error('Data loading error', error);
    } finally {
      setLoadingData(false);
    }
  }, [activeTable, activeDatabase, paginationModel, isCustomQuery]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handleExecute = async () => {
    if (!sqlQuery) return;
    setLoadingData(true);
    setIsCustomQuery(true);
    try {
      const response = await SchemaService.executeQuery(sqlQuery);
      const rawData = response.data.data;
      
      if (rawData && rawData.length > 0) {
        const fields = Object.keys(rawData[0]);
        const newCols: GridColDef[] = fields.map(field => ({
          field,
          headerName: field,
          width: 150,
          flex: fields.length < 6 ? 1 : 0
        }));
        setColumns(newCols);
        
        const dataWithIds = rawData.map((row: any, index: number) => ({
          id: row.id || row.ID || `row-${index}`,
          ...row,
        }));
        setRows(dataWithIds);
        setRowCount(response.data.count);
      } else {
        setRows([]);
        setRowCount(0);
      }
    } catch (error: any) {
      console.error('Execution error', error);
      const msg = error.response?.data?.error || 'An unexpected error occurred during SQL execution.';
      setErrorInfo({
        open: true,
        title: 'SQL Execution Error',
        message: msg
      });
    } finally {
      setLoadingData(false);
    }
  };

  if (!activeTable) {
    return (
      <Box sx={{ flexGrow: 1, p: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'background.default' }}>
        <Typography variant="h6" color="text.secondary">Select a table to view data</Typography>
      </Box>
    );
  }

  return (
    <Box sx={{ flexGrow: 1, p: 3, bgcolor: 'background.default', display: 'flex', flexDirection: 'column', width: '100%', minWidth: 0, overflow: 'hidden', gap: 2 }}>
      {/* SQL Editor Section */}
      <Paper elevation={0} sx={{ 
        flexShrink: 0, 
        borderRadius: 3, 
        overflow: 'hidden', 
        border: 1, 
        borderColor: 'divider',
        bgcolor: darkMode ? '#111827' : '#ffffff',
        boxShadow: '0 4px 20px rgba(0,0,0,0.1)'
      }}>
        <Box sx={{ px: 3, py: 1.5, display: 'flex', alignItems: 'center', justifyContent: 'space-between', bgcolor: 'rgba(0,0,0,0.02)' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 800, opacity: 0.8, letterSpacing: 1 }}>SQL EDITOR</Typography>
            <Divider orientation="vertical" flexItem sx={{ height: 16, my: 'auto' }} />
            <Typography variant="caption" sx={{ opacity: 0.5, fontWeight: 500 }}>
              {isCustomQuery ? 'Custom Query' : `${activeDatabase}.${activeTable}`}
            </Typography>
          </Box>
          <Box sx={{ display: 'flex', gap: 1 }}>
            <Tooltip title="Clear Editor">
              <IconButton size="small" onClick={() => setSqlQuery('')}><CleaningServices fontSize="small" /></IconButton>
            </Tooltip>
            <Tooltip title="Save Query">
              <IconButton size="small"><Save fontSize="small" /></IconButton>
            </Tooltip>
            <Tooltip title="Query History">
              <IconButton size="small"><History fontSize="small" /></IconButton>
            </Tooltip>
            <Button 
              variant="contained" 
              size="small" 
              onClick={handleExecute}
              disabled={loadingData}
              startIcon={loadingData ? <CircularProgress size={16} color="inherit" /> : <PlayArrow />}
              sx={{ ml: 1, px: 3, borderRadius: 2, textTransform: 'none', fontWeight: 700, boxShadow: '0 4px 12px rgba(0, 97, 255, 0.3)' }}
            >
              Execute
            </Button>
          </Box>
        </Box>
        <Editor
          height="220px"
          defaultLanguage="sql"
          theme={darkMode ? 'vs-dark' : 'light'}
          value={sqlQuery}
          onChange={(value) => setSqlQuery(value || '')}
          options={{
            minimap: { enabled: false },
            fontSize: 14,
            fontFamily: "'Fira Code', 'Cascadia Code', Consolas, monospace",
            lineNumbers: 'on',
            scrollBeyondLastLine: false,
            automaticLayout: true,
            padding: { top: 16, bottom: 16 },
            cursorSmoothCaretAnimation: 'on',
            smoothScrolling: true
          }}
        />
      </Paper>

      {/* Data Section */}
      <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
        <Box sx={{ mb: 1.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Typography variant="h6" sx={{ fontWeight: 800 }}>
              {isCustomQuery ? 'Query Results' : 'Table Results'}
            </Typography>
            <Box sx={{ px: 1.5, py: 0.5, borderRadius: 10, bgcolor: 'rgba(0, 97, 255, 0.1)', color: 'primary.main' }}>
              <Typography variant="caption" sx={{ fontWeight: 700 }}>{rowCount} rows found</Typography>
            </Box>
          </Box>
          {isCustomQuery && (
            <Button 
              size="small" 
              variant="outlined"
              onClick={() => setIsCustomQuery(false)} 
              sx={{ textTransform: 'none', borderRadius: 2 }}
            >
              Back to Table View
            </Button>
          )}
        </Box>
        
        <Paper sx={{ 
          flexGrow: 1, 
          borderRadius: 3, 
          overflow: 'hidden', 
          display: 'flex', 
          flexDirection: 'column', 
          width: '100%', 
          border: 1, 
          borderColor: 'divider',
          boxShadow: '0 4px 12px rgba(0,0,0,0.05)'
        }}>
          {(loadingSchema && !isCustomQuery) ? (
            <Box sx={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
              <CircularProgress />
            </Box>
          ) : (
            <DataGrid
              rows={rows}
              columns={columns}
              rowCount={rowCount}
              loading={loadingData}
              paginationMode={isCustomQuery ? 'client' : 'server'}
              paginationModel={paginationModel}
              onPaginationModelChange={setPaginationModel}
              pageSizeOptions={[25, 50, 100]}
              sx={{
                border: 'none',
                width: '100%',
                height: '100%',
                '& .MuiDataGrid-cell:focus': { outline: 'none' },
                '& .MuiDataGrid-columnHeader:focus': { outline: 'none' },
                '& .MuiDataGrid-row:nth-of-type(even)': {
                  bgcolor: (theme) => theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.02)' : 'rgba(255, 255, 255, 0.02)',
                },
                '& .MuiDataGrid-row:hover': {
                  bgcolor: (theme) => theme.palette.mode === 'light' ? 'rgba(0, 97, 255, 0.04)' : 'rgba(0, 97, 255, 0.08)',
                },
                '& .MuiDataGrid-columnHeaderTitle': {
                  fontWeight: 700,
                  opacity: 0.8
                }
              }}
              slotProps={{
                loadingOverlay: {
                  variant: 'linear-progress',
                  noRowsVariant: 'linear-progress',
                }
              }}
            />
          )}
        </Paper>
      </Box>

      {/* Custom Alert (Snackbar) */}
      <Snackbar 
        open={errorInfo.open} 
        autoHideDuration={10000} 
        onClose={handleCloseError}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <Alert 
          onClose={handleCloseError} 
          severity="error" 
          variant="filled"
          sx={{ 
            width: '100%', 
            maxWidth: 600, 
            borderRadius: 2,
            boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
            '& .MuiAlert-message': { wordBreak: 'break-word' }
          }}
          action={
            <IconButton size="small" color="inherit" onClick={handleCloseError}>
              <Close fontSize="small" />
            </IconButton>
          }
        >
          <AlertTitle sx={{ fontWeight: 800 }}>{errorInfo.title}</AlertTitle>
          <Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>
            {errorInfo.message}
          </Typography>
        </Alert>
      </Snackbar>
    </Box>
  );
};

export default MainContent;