import React, { useState, useEffect } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  IconButton,
  Box,
  Typography,
  Divider,
  Grid,
  Paper,
  Chip,
  Alert,
  Autocomplete,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Checkbox
} from '@mui/material';
import {
  FaPlus as AddIcon,
  FaTrash as DeleteIcon,
  FaTimes as CloseIcon,
  FaTable as TableIcon,
  FaKey as KeyIcon,
  FaLink as LinkIcon,
  FaArrowLeft as BackIcon
} from 'react-icons/fa';

const AddTableModal = ({
  open,
  onClose,
  onAddTable,
  schemas = [],
  existingTables = [],
  position = 'center', // 'center' | 'bottom-right'
  tableTypes = [
    { value: 'fact', label: 'Fact Table' },
    { value: 'dimension', label: 'Dimension Table' },
    { value: 'stage', label: 'Stage Table' }
  ],
  columnTypes = [
    'INTEGER',
    'VARCHAR(255)',
    'VARCHAR(100)',
    'VARCHAR(50)',
    'TEXT',
    'DECIMAL(10,2)',
    'DECIMAL(15,2)',
    'DATE',
    'TIMESTAMP',
    'BOOLEAN',
    'BIGINT',
    'SMALLINT',
    'FLOAT',
    'DOUBLE'
  ]
}) => {
  // Main form state
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    tableType: '',
    schema: ''
  });

  // Dynamic sections state
  const [columns, setColumns] = useState([]);
  const [keys, setKeys] = useState([]);
  const [relations, setRelations] = useState([]);
  
  // Key types from API
  const [keyTypes, setKeyTypes] = useState([]);
  const [loadingKeyTypes, setLoadingKeyTypes] = useState(false);

  // Column types from API
  const [columnTypesFromAPI, setColumnTypesFromAPI] = useState([]);
  const [loadingColumnTypes, setLoadingColumnTypes] = useState(false);

  // Validation and UI state
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  // Keys section navigation state
  const [keysViewMode, setKeysViewMode] = useState('keys'); // 'keys' or 'columns'
  const [selectedKeyForColumns, setSelectedKeyForColumns] = useState(null);

  // Reset form when modal opens/closes
  useEffect(() => {
    if (open) {
      resetForm();
      fetchKeyTypes();
      fetchColumnTypes();
    }
  }, [open]);

  // Fetch key types from API
  const fetchKeyTypes = async () => {
    setLoadingKeyTypes(true);
    try {
      const response = await fetch('https://sandbox.kezel.io/api/qbt_table_key_type_list_get', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          token: "abdhsg",
          org: "sN05Pjv11qvH"
        })
      });
      const data = await response.json();
      
      if (data.status === 200 && data.items) {
        setKeyTypes(data.items);
      } else {
        console.error('Failed to fetch key types:', data.message);
      }
    } catch (error) {
      console.error('Error fetching key types:', error);
      // Fallback to default key types
      setKeyTypes([
        { kytp: 'PRIMARY', name: 'Primary' },
        { kytp: 'FOREIGN', name: 'Foreign' },
        { kytp: 'UNIQUE', name: 'Unique' }
      ]);
    } finally {
      setLoadingKeyTypes(false);
    }
  };

  // Fetch column types from API
  const fetchColumnTypes = async () => {
    setLoadingColumnTypes(true);
    try {
      const response = await fetch('https://sandbox.kezel.io/api/qbt_column_type_list_get', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          token: "abdhsg",
          org: "sN05Pjv11qvH"
        })
      });
      const data = await response.json();
      
      if (data.status === 200 && data.items) {
        setColumnTypesFromAPI(data.items);
      } else {
        console.error('Failed to fetch column types:', data.message);
        // Fallback to default column types
        setColumnTypesFromAPI([
          { cltp: 'VARCHAR', name: 'VARCHAR', description: 'Variable-length character string' },
          { cltp: 'INT', name: 'INT', description: 'Standard integer value' },
          { cltp: 'TEXT', name: 'TEXT', description: 'Variable-length character string for long text' },
          { cltp: 'DATE', name: 'DATE', description: 'Date value' },
          { cltp: 'TIMESTAMP', name: 'TIMESTAMP', description: 'Timestamp value' },
          { cltp: 'BOOLEAN', name: 'BOOLEAN', description: 'Logical boolean value' }
        ]);
      }
    } catch (error) {
      console.error('Error fetching column types:', error);
      // Fallback to default column types
      setColumnTypesFromAPI([
        { cltp: 'VARCHAR', name: 'VARCHAR', description: 'Variable-length character string' },
        { cltp: 'INT', name: 'INT', description: 'Standard integer value' },
        { cltp: 'TEXT', name: 'TEXT', description: 'Variable-length character string for long text' },
        { cltp: 'DATE', name: 'DATE', description: 'Date value' },
        { cltp: 'TIMESTAMP', name: 'TIMESTAMP', description: 'Timestamp value' },
        { cltp: 'BOOLEAN', name: 'BOOLEAN', description: 'Logical boolean value' }
      ]);
    } finally {
      setLoadingColumnTypes(false);
    }
  };

  const resetForm = () => {
    setFormData({
      name: '',
      description: '',
      tableType: '',
      schema: ''
    });
    setColumns([]);
    setKeys([]);
    setRelations([]);
    setKeyTypes([]);
    setLoadingKeyTypes(false);
    setColumnTypesFromAPI([]);
    setLoadingColumnTypes(false);
    setErrors({});
    setIsSubmitting(false);
    setKeysViewMode('keys');
    setSelectedKeyForColumns(null);
  };

  // Form field handlers
  const handleFormChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
    // Clear error when user starts typing
    if (errors[field]) {
      setErrors(prev => ({
        ...prev,
        [field]: null
      }));
    }
  };

  // Column management
  const addColumn = () => {
    const defaultColumnType = columnTypesFromAPI.length > 0 ? columnTypesFromAPI[0].name : 'VARCHAR';
    const newColumn = {
      id: Date.now(),
      name: '',
      type: defaultColumnType,
      isPrimaryKey: false,
      isForeignKey: false,
      isNullable: true
    };
    setColumns(prev => [...prev, newColumn]);
  };

  const updateColumn = (id, field, value) => {
    setColumns(prev => prev.map(col => 
      col.id === id ? { ...col, [field]: value } : col
    ));
    
    // Clear column errors when user starts typing
    if (field === 'name' && errors.columns?.[id]) {
      setErrors(prev => ({
        ...prev,
        columns: {
          ...prev.columns,
          [id]: null
        }
      }));
    }
  };

  // Helper function to check if column name is duplicate
  const isColumnNameDuplicate = (columnId, columnName) => {
    if (!columnName.trim()) return false;
    
    const trimmedName = columnName.trim().toLowerCase();
    return columns.some(col => 
      col.id !== columnId && 
      col.name.trim().toLowerCase() === trimmedName
    );
  };

  const removeColumn = (id) => {
    setColumns(prev => prev.filter(col => col.id !== id));
    // Remove any keys that reference this column or update key columns
    setKeys(prev => prev.map(key => ({
      ...key,
      columnIds: key.columnIds?.filter(colId => colId !== id) || [],
      keyColumns: key.keyColumns?.filter(keyCol => keyCol.columnId !== id) || []
    })).filter(key => key.keyColumns?.length > 0 || key.columnIds?.length > 0));
  };

  // Key management
  const addKey = () => {
    const defaultKeyType = keyTypes.length > 0 ? keyTypes[0].kytp : 'PRIMARY';
    const newKey = {
      id: Date.now(),
      name: '',
      columnIds: [], // Changed to array for multi-select
      keyType: defaultKeyType, // Use first available key type from API
      keyColumns: [] // Array of {columnId, sequence} objects
    };
    setKeys(prev => [...prev, newKey]);
  };

  const updateKey = (id, field, value) => {
    setKeys(prev => prev.map(key => 
      key.id === id ? { ...key, [field]: value } : key
    ));
  };

  const removeKey = (id) => {
    setKeys(prev => prev.filter(key => key.id !== id));
  };

  // Key column management
  const addColumnToKey = (keyId, columnId) => {
    setKeys(prev => prev.map(key => {
      if (key.id === keyId) {
        const existingSequences = key.keyColumns?.map(kc => kc.sequence) || [];
        const nextSequence = existingSequences.length > 0 ? Math.max(...existingSequences) + 1 : 1;
        
        return {
          ...key,
          columnIds: [...(key.columnIds || []), columnId],
          keyColumns: [...(key.keyColumns || []), { columnId, sequence: nextSequence }]
        };
      }
      return key;
    }));
  };

  const removeColumnFromKey = (keyId, columnId) => {
    setKeys(prev => prev.map(key => {
      if (key.id === keyId) {
        return {
          ...key,
          columnIds: (key.columnIds || []).filter(id => id !== columnId),
          keyColumns: (key.keyColumns || []).filter(kc => kc.columnId !== columnId)
        };
      }
      return key;
    }));
  };

  const updateKeyColumnSequence = (keyId, columnId, sequence) => {
    setKeys(prev => prev.map(key => {
      if (key.id === keyId) {
        return {
          ...key,
          keyColumns: (key.keyColumns || []).map(kc => 
            kc.columnId === columnId ? { ...kc, sequence: parseInt(sequence) || 1 } : kc
          )
        };
      }
      return key;
    }));
  };

  // Helper function to check for duplicate sequences within a key
  const hasSequenceDuplicates = (keyId) => {
    const key = keys.find(k => k.id === keyId);
    if (!key || !key.keyColumns) return false;
    
    const sequences = key.keyColumns.map(kc => kc.sequence);
    return sequences.length !== new Set(sequences).size;
  };

  // Keys section navigation functions
  const handleKeyRowClick = (keyId) => {
    setSelectedKeyForColumns(keyId);
    setKeysViewMode('columns');
  };

  const handleBackToKeys = () => {
    setKeysViewMode('keys');
    setSelectedKeyForColumns(null);
  };

  // Relation management
  const addRelation = () => {
    const newRelation = {
      id: Date.now(),
      targetTable: '',
      sourceKey: '',
      targetKey: '',
      relationType: '1:N' // 1:1, 1:N, N:M
    };
    setRelations(prev => [...prev, newRelation]);
  };

  const updateRelation = (id, field, value) => {
    setRelations(prev => prev.map(rel => 
      rel.id === id ? { ...rel, [field]: value } : rel
    ));
  };

  const removeRelation = (id) => {
    setRelations(prev => prev.filter(rel => rel.id !== id));
  };

  // Get available keys for relations
  const getAvailableKeys = () => {
    return keys.map(key => {
      const keyColumnNames = (key.keyColumns || [])
        .sort((a, b) => a.sequence - b.sequence)
        .map(kc => {
          const column = columns.find(col => col.id === kc.columnId);
          return column?.name || 'Unknown Column';
        })
        .join(', ');
      
      return {
        id: key.id,
        name: key.name,
        columnName: keyColumnNames || 'No columns selected'
      };
    });
  };

  // Get keys from selected target table
  const getTargetTableKeys = (tableId) => {
    const targetTable = existingTables.find(table => table.id === tableId);
    if (!targetTable || !targetTable.columns) return [];
    
    return targetTable.columns
      .filter(col => col.is_primary_key || col.is_foreign_key)
      .map(col => ({
        id: col.name,
        name: col.name,
        type: col.is_primary_key ? 'PRIMARY' : 'FOREIGN'
      }));
  };

  // Form validation
  const validateForm = () => {
    const newErrors = {};

    if (!formData.name.trim()) {
      newErrors.name = 'Table name is required';
    }

    if (!formData.schema) {
      newErrors.schema = 'Schema selection is required';
    }

    if (!formData.tableType) {
      newErrors.tableType = 'Table type is required';
    }

    // Validate columns
    const columnErrors = {};
    const columnNames = new Set();
    const duplicateNames = new Set();
    
    // First pass: identify duplicate names
    columns.forEach(col => {
      const trimmedName = col.name.trim().toLowerCase();
      if (trimmedName && columnNames.has(trimmedName)) {
        duplicateNames.add(trimmedName);
      }
      if (trimmedName) {
        columnNames.add(trimmedName);
      }
    });
    
    // Second pass: validate each column
    columns.forEach(col => {
      const trimmedName = col.name.trim();
      if (!trimmedName) {
        columnErrors[col.id] = 'Column name is required';
      } else if (duplicateNames.has(trimmedName.toLowerCase())) {
        columnErrors[col.id] = 'Column name must be unique within the table';
      }
    });

    if (Object.keys(columnErrors).length > 0) {
      newErrors.columns = columnErrors;
    }

    // Validate keys
    const keyErrors = {};
    keys.forEach(key => {
      if (!key.name.trim()) {
        keyErrors[key.id] = 'Key name is required';
      }
      if (!key.keyColumns || key.keyColumns.length === 0) {
        keyErrors[key.id] = 'At least one column must be selected';
      } else {
        // Check for duplicate sequences within the key
        const sequences = key.keyColumns.map(kc => kc.sequence);
        const duplicateSequences = sequences.filter((seq, index) => sequences.indexOf(seq) !== index);
        if (duplicateSequences.length > 0) {
          keyErrors[key.id] = `Duplicate sequence numbers found: ${[...new Set(duplicateSequences)].join(', ')}`;
        }
      }
    });

    if (Object.keys(keyErrors).length > 0) {
      newErrors.keys = keyErrors;
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Form submission
  const handleSubmit = async () => {
    if (!validateForm()) {
      return;
    }

    setIsSubmitting(true);

    try {
      // Prepare table data
      const tableData = {
        name: formData.name.trim(),
        description: formData.description.trim(),
        table_type: formData.tableType,
        schema: formData.schema,
        columns: columns.map(col => ({
          name: col.name.trim(),
          data_type: col.type,
          is_primary_key: keys.some(key => {
            const keyTypeObj = keyTypes.find(kt => kt.kytp === key.keyType);
            return key.keyColumns?.some(kc => kc.columnId === col.id) && 
                   keyTypeObj?.name?.toLowerCase() === 'primary';
          }),
          is_foreign_key: keys.some(key => {
            const keyTypeObj = keyTypes.find(kt => kt.kytp === key.keyType);
            return key.keyColumns?.some(kc => kc.columnId === col.id) && 
                   keyTypeObj?.name?.toLowerCase() === 'foreign';
          }),
          is_nullable: col.isNullable
        })),
        keys: keys.flatMap(key => 
          (key.keyColumns || []).map(kc => ({
            name: key.name.trim(),
            column_name: columns.find(col => col.id === kc.columnId)?.name || '',
            key_type: key.keyType,
            sequence: kc.sequence
          }))
        ),
        relations: relations.map(rel => ({
          target_table: rel.targetTable,
          source_key: rel.sourceKey,
          target_key: rel.targetKey,
          relation_type: rel.relationType
        }))
      };

      // Call the parent component's add table function
      await onAddTable(tableData);
      
      // Reset form (modal will be closed by parent component)
      resetForm();
    } catch (error) {
      console.error('Error adding table:', error);
      setErrors({ submit: 'Failed to add table. Please try again.' });
    } finally {
      setIsSubmitting(false);
    }
  };

  // Define positioning styles based on position prop
  const getDialogStyles = () => {
    if (position === 'bottom-right') {
      return {
        '& .MuiDialog-container': {
          justifyContent: 'flex-end',
          alignItems: 'flex-end',
          padding: '20px',
        },
        '& .MuiDialog-paper': {
          margin: 0,
          maxWidth: '780px', // Increased by 30% from 600px
          width: '780px',    // Increased by 30% from 600px
          maxHeight: '80vh',
          minHeight: '60vh',
          borderRadius: '12px',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
        }
      };
    }
    return {
      '& .MuiDialog-paper': {
        minHeight: '80vh',
        maxHeight: '90vh',
        maxWidth: '1170px', // Increased by 30% from 900px (lg breakpoint)
      }
    };
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth={position === 'bottom-right' ? false : 'lg'}
      fullWidth={position !== 'bottom-right'}
      sx={getDialogStyles()}
      PaperProps={{
        sx: position === 'bottom-right' ? {} : {
          minHeight: '80vh',
          maxHeight: '90vh'
        }
      }}
    >
      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 2, pb: 1 }}>
        <TableIcon color="primary" />
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          Add New Table
        </Typography>
        <IconButton onClick={onClose} size="small">
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent dividers sx={{ p: position === 'bottom-right' ? 2 : 3 }}>
        {errors.submit && (
          <Alert severity="error" sx={{ mb: 3 }}>
            {errors.submit}
          </Alert>
        )}

        {/* Basic Table Information */}
        <Paper elevation={1} sx={{ p: position === 'bottom-right' ? 2 : 3, mb: position === 'bottom-right' ? 2 : 3 }}>
          <Typography variant="h6" gutterBottom color="primary">
            Table Information
          </Typography>
          
          <Grid container spacing={3}>
            <Grid item xs={12} md={6}>
              <TextField
                fullWidth
                label="Table Name"
                value={formData.name}
                onChange={(e) => handleFormChange('name', e.target.value)}
                error={!!errors.name}
                helperText={errors.name}
                required
              />
            </Grid>
            
            <Grid item xs={12} md={6}>
              <FormControl fullWidth error={!!errors.tableType} required>
                <InputLabel>Table Type</InputLabel>
                <Select
                  value={formData.tableType}
                  onChange={(e) => handleFormChange('tableType', e.target.value)}
                  label="Table Type"
                >
                  {tableTypes.map(type => (
                    <MenuItem key={type.value} value={type.value}>
                      {type.label}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            
            <Grid item xs={12} md={6}>
              <FormControl fullWidth error={!!errors.schema} required>
                <InputLabel>Schema</InputLabel>
                <Select
                  value={formData.schema}
                  onChange={(e) => handleFormChange('schema', e.target.value)}
                  label="Schema"
                >
                  {schemas.map(schema => (
                    <MenuItem key={schema.sch} value={schema.sch}>
                      {schema.name || schema.sch}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Description"
                value={formData.description}
                onChange={(e) => handleFormChange('description', e.target.value)}
                multiline
                rows={3}
                placeholder="Enter table description..."
              />
            </Grid>
          </Grid>
        </Paper>

        {/* Columns Section */}
        <Paper elevation={1} sx={{ p: position === 'bottom-right' ? 2 : 3, mb: position === 'bottom-right' ? 2 : 3 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
            <Typography variant="h6" color="primary">
              Columns
            </Typography>
            <Button
              startIcon={<AddIcon />}
              onClick={addColumn}
              variant="outlined"
              size="small"
            >
              Add Column
            </Button>
          </Box>

          {columns.length === 0 ? (
            <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', py: 2 }}>
              No columns added yet. Click "Add Column" to get started.
            </Typography>
          ) : (
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {columns.map((column) => (
                <Paper key={column.id} variant="outlined" sx={{ p: 2 }}>
                  <Grid container spacing={2} alignItems="center">
                    <Grid item xs={12} md={4}>
                      <TextField
                        fullWidth
                        label="Column Name"
                        value={column.name}
                        onChange={(e) => updateColumn(column.id, 'name', e.target.value)}
                        error={!!errors.columns?.[column.id] || isColumnNameDuplicate(column.id, column.name)}
                        helperText={
                          errors.columns?.[column.id] || 
                          (isColumnNameDuplicate(column.id, column.name) ? 'Column name must be unique within the table' : '')
                        }
                        size="small"
                      />
                    </Grid>
                    <Grid item xs={12} md={3}>
                      <FormControl fullWidth size="small">
                        <InputLabel>Data Type</InputLabel>
                        <Select
                          value={column.type}
                          onChange={(e) => updateColumn(column.id, 'type', e.target.value)}
                          label="Data Type"
                          disabled={loadingColumnTypes}
                        >
                          {loadingColumnTypes ? (
                            <MenuItem value="">Loading...</MenuItem>
                          ) : columnTypesFromAPI.length > 0 ? (
                            columnTypesFromAPI.map(type => (
                              <MenuItem key={type.cltp} value={type.name} title={type.description}>
                                <Box>
                                  <Typography variant="body2" component="div">
                                    {type.name}
                                  </Typography>
                                  <Typography variant="caption" color="text.secondary" component="div">
                                    {type.description}
                                  </Typography>
                                </Box>
                              </MenuItem>
                            ))
                          ) : (
                            columnTypes.map(type => (
                              <MenuItem key={type} value={type}>
                                {type}
                              </MenuItem>
                            ))
                          )}
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} md={4}>
                      <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
                        <Chip
                          label="Nullable"
                          variant={column.isNullable ? "filled" : "outlined"}
                          size="small"
                          onClick={() => updateColumn(column.id, 'isNullable', !column.isNullable)}
                          color={column.isNullable ? "default" : "primary"}
                        />
                      </Box>
                    </Grid>
                    <Grid item xs={12} md={1}>
                      <IconButton
                        onClick={() => removeColumn(column.id)}
                        color="error"
                        size="small"
                      >
                        <DeleteIcon />
                      </IconButton>
                    </Grid>
                  </Grid>
                </Paper>
              ))}
            </Box>
          )}
        </Paper>

        {/* Keys Section */}
        <Paper elevation={1} sx={{ p: position === 'bottom-right' ? 2 : 3, mb: position === 'bottom-right' ? 2 : 3 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
            <Typography variant="h6" color="primary">
              <KeyIcon style={{ marginRight: '8px', verticalAlign: 'middle' }} />
              Keys
              {keysViewMode === 'columns' && selectedKeyForColumns && (
                <Typography component="span" variant="body2" sx={{ ml: 2, color: 'text.secondary' }}>
                  - {keys.find(k => k.id === selectedKeyForColumns)?.name || 'Unnamed Key'}
                </Typography>
              )}
            </Typography>
            
            {keysViewMode === 'keys' ? (
              <Button
                startIcon={<AddIcon />}
                onClick={addKey}
                variant="outlined"
                size="small"
                disabled={columns.length === 0}
              >
                Add Key
              </Button>
            ) : (
              <Button
                startIcon={<BackIcon />}
                onClick={handleBackToKeys}
                variant="outlined"
                size="small"
              >
                Add Key
              </Button>
            )}
          </Box>

          {keysViewMode === 'keys' ? (
            // Keys Table View
            <TableContainer component={Paper} variant="outlined">
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell padding="checkbox">
                      <Checkbox disabled />
                    </TableCell>
                    <TableCell>Key Name</TableCell>
                    <TableCell>Key Type</TableCell>
                    <TableCell width="100">Actions</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {keys.map((key) => (
                    <TableRow 
                      key={key.id} 
                      hover 
                      onClick={() => handleKeyRowClick(key.id)}
                      sx={{ cursor: 'pointer' }}
                    >
                      <TableCell padding="checkbox">
                        <Checkbox
                          checked={false}
                          onChange={(e) => e.stopPropagation()}
                        />
                      </TableCell>
                      <TableCell>
                        <TextField
                          value={key.name}
                          onChange={(e) => {
                            e.stopPropagation();
                            updateKey(key.id, 'name', e.target.value);
                          }}
                          onClick={(e) => e.stopPropagation()}
                          size="small"
                          variant="standard"
                          error={!!errors.keys?.[key.id]}
                          helperText={errors.keys?.[key.id]}
                          placeholder="Enter key name"
                          fullWidth
                        />
                      </TableCell>
                      <TableCell>
                        <FormControl size="small" variant="standard" sx={{ minWidth: 120 }}>
                          <Select
                            value={key.keyType}
                            onChange={(e) => {
                              e.stopPropagation();
                              updateKey(key.id, 'keyType', e.target.value);
                            }}
                            onClick={(e) => e.stopPropagation()}
                            disabled={loadingKeyTypes}
                          >
                            {loadingKeyTypes ? (
                              <MenuItem value="">Loading...</MenuItem>
                            ) : (
                              keyTypes.map((keyType) => (
                                <MenuItem key={keyType.kytp} value={keyType.kytp}>
                                  {keyType.name} Key
                                </MenuItem>
                              ))
                            )}
                          </Select>
                        </FormControl>
                      </TableCell>
                      <TableCell>
                        <IconButton
                          onClick={(e) => {
                            e.stopPropagation();
                            removeKey(key.id);
                          }}
                          color="error"
                          size="small"
                        >
                          <DeleteIcon />
                        </IconButton>
                      </TableCell>
                    </TableRow>
                  ))}
                  {/* Empty row for adding new key */}
                  <TableRow hover onClick={addKey} sx={{ cursor: 'pointer', backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
                    <TableCell padding="checkbox">
                      <Checkbox disabled />
                    </TableCell>
                    <TableCell>
                      <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
                        Click to add new key...
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="body2" color="text.secondary">
                        -
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <AddIcon style={{ color: '#ccc' }} />
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </TableContainer>
          ) : (
            // Columns Table View for Selected Key
            selectedKeyForColumns && (
              <TableContainer component={Paper} variant="outlined">
                <Table>
                  <TableHead>
                    <TableRow>
                      <TableCell padding="checkbox">
                        <Checkbox disabled />
                      </TableCell>
                      <TableCell>Column Name</TableCell>
                      <TableCell>Sequence</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {columns.map((column) => {
                      const selectedKey = keys.find(k => k.id === selectedKeyForColumns);
                      const keyColumn = selectedKey?.keyColumns?.find(kc => kc.columnId === column.id);
                      const isSelected = !!keyColumn;
                      const hasSequenceError = hasSequenceDuplicates(selectedKeyForColumns);
                      
                      return (
                        <TableRow key={column.id}>
                          <TableCell padding="checkbox">
                            <Checkbox
                              checked={isSelected}
                              onChange={(e) => {
                                if (e.target.checked) {
                                  addColumnToKey(selectedKeyForColumns, column.id);
                                } else {
                                  removeColumnFromKey(selectedKeyForColumns, column.id);
                                }
                              }}
                            />
                          </TableCell>
                          <TableCell>{column.name || 'Unnamed Column'}</TableCell>
                          <TableCell>
                            {isSelected ? (
                              <TextField
                                type="number"
                                value={keyColumn?.sequence || 1}
                                onChange={(e) => updateKeyColumnSequence(selectedKeyForColumns, column.id, e.target.value)}
                                size="small"
                                inputProps={{ min: 1, style: { width: '80px' } }}
                                error={hasSequenceError}
                                helperText={hasSequenceError ? 'Duplicate' : ''}
                              />
                            ) : (
                              <Typography variant="body2" color="text.secondary">-</Typography>
                            )}
                          </TableCell>
                        </TableRow>
                      );
                    })}
                    {/* Empty row for adding new column */}
                    <TableRow sx={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
                      <TableCell padding="checkbox">
                        <Checkbox disabled />
                      </TableCell>
                      <TableCell>
                        <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
                          Select columns above to add to this key...
                        </Typography>
                      </TableCell>
                      <TableCell>
                        <Typography variant="body2" color="text.secondary">
                          -
                        </Typography>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            )
          )}

          {/* Show message when no columns exist */}
          {columns.length === 0 && (
            <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', py: 2 }}>
              Add columns first before defining keys.
            </Typography>
          )}
        </Paper>

        {/* Relations Section */}
        <Paper elevation={1} sx={{ p: position === 'bottom-right' ? 2 : 3 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
            <Typography variant="h6" color="primary">
              <LinkIcon style={{ marginRight: '8px', verticalAlign: 'middle' }} />
              Relations
            </Typography>
            <Button
              startIcon={<AddIcon />}
              onClick={addRelation}
              variant="outlined"
              size="small"
              disabled={keys.length === 0 || existingTables.length === 0}
            >
              Add Relation
            </Button>
          </Box>

          {relations.length === 0 ? (
            <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', py: 2 }}>
              {keys.length === 0 
                ? "Define keys first before creating relations."
                : existingTables.length === 0
                ? "No existing tables available for relations."
                : "No relations defined yet. Click \"Add Relation\" to create table relationships."
              }
            </Typography>
          ) : (
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {relations.map((relation) => (
                <Paper key={relation.id} variant="outlined" sx={{ p: 2 }}>
                  <Grid container spacing={2} alignItems="center">
                    <Grid item xs={12} md={3}>
                      <FormControl fullWidth size="small">
                        <InputLabel>Target Table</InputLabel>
                        <Select
                          value={relation.targetTable}
                          onChange={(e) => updateRelation(relation.id, 'targetTable', e.target.value)}
                          label="Target Table"
                        >
                          {existingTables.map(table => (
                            <MenuItem key={table.id} value={table.id}>
                              {table.name}
                            </MenuItem>
                          ))}
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} md={2}>
                      <FormControl fullWidth size="small">
                        <InputLabel>Source Key</InputLabel>
                        <Select
                          value={relation.sourceKey}
                          onChange={(e) => updateRelation(relation.id, 'sourceKey', e.target.value)}
                          label="Source Key"
                        >
                          {getAvailableKeys().map(key => (
                            <MenuItem key={key.id} value={key.id}>
                              {key.name} ({key.columnName})
                            </MenuItem>
                          ))}
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} md={2}>
                      <FormControl fullWidth size="small">
                        <InputLabel>Target Key</InputLabel>
                        <Select
                          value={relation.targetKey}
                          onChange={(e) => updateRelation(relation.id, 'targetKey', e.target.value)}
                          label="Target Key"
                          disabled={!relation.targetTable}
                        >
                          {getTargetTableKeys(relation.targetTable).map(key => (
                            <MenuItem key={key.id} value={key.id}>
                              {key.name} ({key.type})
                            </MenuItem>
                          ))}
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} md={2}>
                      <FormControl fullWidth size="small">
                        <InputLabel>Relation Type</InputLabel>
                        <Select
                          value={relation.relationType}
                          onChange={(e) => updateRelation(relation.id, 'relationType', e.target.value)}
                          label="Relation Type"
                        >
                          <MenuItem value="1:1">One to One</MenuItem>
                          <MenuItem value="1:N">One to Many</MenuItem>
                          <MenuItem value="N:M">Many to Many</MenuItem>
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} md={1}>
                      <IconButton
                        onClick={() => removeRelation(relation.id)}
                        color="error"
                        size="small"
                      >
                        <DeleteIcon />
                      </IconButton>
                    </Grid>
                  </Grid>
                </Paper>
              ))}
            </Box>
          )}
        </Paper>
      </DialogContent>

      <DialogActions sx={{ p: position === 'bottom-right' ? 2 : 3, gap: 1 }}>
        <Button onClick={onClose} variant="outlined">
          Cancel
        </Button>
        <Button
          onClick={handleSubmit}
          variant="contained"
          disabled={isSubmitting}
          startIcon={isSubmitting ? null : <AddIcon />}
        >
          {isSubmitting ? 'Adding Table...' : 'Add Table'}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default AddTableModal;