ImportEnvModal.jsx

import { useState } from 'react';
import { Modal, Input, Select, Switch, message, Alert } from 'antd';
import { Upload } from 'lucide-react';

const { TextArea } = Input;
const { Option } = Select;

export default function ImportEnvModal({ open, onClose, projectId, onSuccess }) {
  const [content, setContent] = useState('');
  const [format, setFormat] = useState('env');
  const [overwrite, setOverwrite] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      setContent(event.target.result);
      
      // Auto-detect format
      if (file.name.endsWith('.json')) {
        setFormat('json');
      } else {
        setFormat('env');
      }
    };
    reader.readAsText(file);
  };

  const handleImport = async () => {
    if (!content.trim()) {
      message.error('Please provide content to import');
      return;
    }

    setLoading(true);
    try {
      const result = await window.electronAPI.envVars.import({
        projectId,
        content,
        format,
        overwrite,
      });

      if (result.success) {
        const { imported, updated, skipped, total, errors } = result.data;
        
        let messageText = `Import complete: ${imported} imported`;
        if (updated > 0) messageText += `, ${updated} updated`;
        if (skipped > 0) messageText += `, ${skipped} skipped`;
        
        message.success(messageText);
        
        if (errors && errors.length > 0) {
          console.error('Import errors:', errors);
          message.warning(`${errors.length} variables had errors`);
        }
        
        onSuccess();
        handleClose();
      } else {
        message.error(result.error || 'Failed to import');
      }
    } catch (error) {
      message.error('Failed to import: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  const handleClose = () => {
    setContent('');
    setFormat('env');
    setOverwrite(false);
    onClose();
  };

  return (
    <Modal
      title={
        <div className="flex items-center gap-2">
          <Upload className="w-5 h-5" />
          <span>Import Environment Variables</span>
        </div>
      }
      open={open}
      onCancel={handleClose}
      onOk={handleImport}
      okText="Import"
      confirmLoading={loading}
      width={600}
      destroyOnClose
    >
      <div className="space-y-4">
        <Alert
          message="Import your existing .env or JSON files"
          description="Paste the content below or upload a file. Comments in .env files will be preserved as descriptions."
          type="info"
          showIcon
        />

        <div>
          <label className="block text-sm font-medium mb-2">
            Upload File (Optional)
          </label>
          <input
            type="file"
            accept=".env,.json,.txt"
            onChange={handleFileUpload}
            className="block w-full text-sm text-gray-400
              file:mr-4 file:py-2 file:px-4
              file:rounded-md file:border-0
              file:text-sm file:font-semibold
              file:bg-blue-600 file:text-white
              hover:file:bg-blue-700
              file:cursor-pointer cursor-pointer"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">Format</label>
          <Select
            value={format}
            onChange={setFormat}
            className="w-full"
          >
            <Option value="env">.env format (KEY=value)</Option>
            <Option value="json">JSON format</Option>
          </Select>
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">Content</label>
          <TextArea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder={
              format === 'env'
                ? '# Database configuration\nDB_HOST=localhost\nDB_PORT=5432\nDB_NAME=myapp'
                : '{\n  "DB_HOST": "localhost",\n  "DB_PORT": "5432",\n  "DB_NAME": "myapp"\n}'
            }
            rows={10}
            className="font-mono text-sm"
          />
        </div>

        <div className="flex items-center justify-between p-3 bg-gray-800 rounded-lg">
          <div>
            <div className="font-medium">Overwrite existing variables</div>
            <div className="text-sm text-gray-400">
              Update values if keys already exist
            </div>
          </div>
          <Switch
            checked={overwrite}
            onChange={setOverwrite}
          />
        </div>

        {format === 'env' && (
          <Alert
            message="Tip"
            description="Comments above variables (lines starting with #) will be imported as descriptions."
            type="success"
            showIcon
          />
        )}
      </div>
    </Modal>
  );
}