import React, { useState } from 'react';
import { FaTimes, FaColumns, FaKey } from 'react-icons/fa';

const ColumnCreationPopup = ({ onClose, onCreateColumn, tableInfo }) => {
  const [columnName, setColumnName] = useState('');
  const [dataType, setDataType] = useState('TEXT');
  const [description, setDescription] = useState('');
  const [alias, setAlias] = useState('');
  const [isKey, setIsKey] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (columnName.trim() === '') return;
    
    onCreateColumn({
      name: columnName,
      data_type: dataType,
      description: description,
      alias: alias,
      is_key: isKey ? 1 : 0,
      tbl: tableInfo.tbl,
      sch: tableInfo.sch,
      con: tableInfo.con
    });
    
    onClose();
  };

  return (
    <div className="popup-overlay" style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000
    }}>
      <div className="popup-content" style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        width: '500px',
        maxWidth: '90%',
        maxHeight: '90vh',
        overflowY: 'auto',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
          <h2 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '10px', color: "black" }}>
            <FaColumns />
            Add New Column
          </h2>
          <button 
            onClick={onClose}
            style={{
              background: 'none',
              border: 'none',
              fontSize: '20px',
              cursor: 'pointer',
              color: '#999'
            }}
          >
            <FaTimes />
          </button>
        </div>

        <div style={{ marginBottom: '15px', padding: '10px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
          <p style={{ margin: 0, color: '#333' }}>
            <strong>Table:</strong> {tableInfo.tbl} 
            <br />
            <strong>Schema:</strong> {tableInfo.sch}
            <br />
            <strong>Database:</strong> {tableInfo.con}
          </p>
        </div>

        <form onSubmit={handleSubmit}>
          <div style={{ marginBottom: '15px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: "black" }}>
              Column Name:
            </label>
            <input
              type="text"
              value={columnName}
              onChange={(e) => setColumnName(e.target.value)}
              style={{
                width: '100%',
                padding: '8px',
                borderRadius: '4px',
                border: '1px solid #d9d9d9'
              }}
              placeholder="Enter column name"
              required
            />
          </div>

          <div style={{ marginBottom: '15px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: "black" }}>
              Data Type:
            </label>
            <select
              value={dataType}
              onChange={(e) => setDataType(e.target.value)}
              style={{
                width: '100%',
                padding: '8px',
                borderRadius: '4px',
                border: '1px solid #d9d9d9'
              }}
            >
              <option value="TEXT">TEXT</option>
              <option value="INTEGER">INTEGER</option>
              <option value="FLOAT">FLOAT</option>
              <option value="BOOLEAN">BOOLEAN</option>
              <option value="DATE">DATE</option>
              <option value="TIMESTAMP">TIMESTAMP</option>
              <option value="JSON">JSON</option>
            </select>
          </div>

          <div style={{ marginBottom: '15px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: "black" }}>
              Description:
            </label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              style={{
                width: '100%',
                padding: '8px',
                borderRadius: '4px',
                border: '1px solid #d9d9d9',
                minHeight: '80px'
              }}
              placeholder="Enter column description"
            />
          </div>

          <div style={{ marginBottom: '15px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: "black" }}>
              Display Alias:
            </label>
            <input
              type="text"
              value={alias}
              onChange={(e) => setAlias(e.target.value)}
              style={{
                width: '100%',
                padding: '8px',
                borderRadius: '4px',
                border: '1px solid #d9d9d9'
              }}
              placeholder="Enter display alias (optional)"
            />
          </div>

          <div style={{ marginBottom: '15px' }}>
            <label style={{ 
              display: 'flex', 
              alignItems: 'center', 
              gap: '8px',
              cursor: 'pointer',
              color: "black"
            }}>
              <input
                type="checkbox"
                checked={isKey}
                onChange={(e) => setIsKey(e.target.checked)}
                style={{ margin: 0 }}
              />
              <FaKey style={{ color: isKey ? '#faad14' : '#d9d9d9' }} />
              Is Key Column
            </label>
          </div>

          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '20px' }}>
            <button
              type="button"
              onClick={onClose}
              style={{
                padding: '8px 16px',
                background: 'white',
                color: '#333',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              Cancel
            </button>
            <button
              type="submit"
              style={{
                padding: '8px 16px',
                background: '#1890ff',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                gap: '5px'
              }}
            >
              <FaColumns size={14} />
              Add Column
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ColumnCreationPopup;