CopyToProjectModal.jsx

import { useState, useEffect } from 'react';
import { Modal, Select, Switch, message, Alert, Tag, Space } from 'antd';
import { Copy } from 'lucide-react';

const { Option } = Select;

export default function CopyToProjectModal({ 
  open, 
  onClose, 
  sourceProject, 
  selectedVarIds, 
  allProjects,
  onSuccess 
}) {
  const [targetProjectId, setTargetProjectId] = useState(null);
  const [overwrite, setOverwrite] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (open) {
      setTargetProjectId(null);
      setOverwrite(false);
    }
  }, [open]);

  const handleCopy = async () => {
    if (!targetProjectId) {
      message.error('Please select a target project');
      return;
    }

    if (selectedVarIds.length === 0) {
      message.error('No variables selected to copy');
      return;
    }

    setLoading(true);
    try {
      const result = await window.electronAPI.envVars.copyToProject({
        sourceProjectId: sourceProject.id,
        targetProjectId,
        envVarIds: selectedVarIds,
        overwrite,
      });

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

  // Filter out the source project from target options
  const availableProjects = allProjects.filter(p => p.id !== sourceProject.id);
  const targetProject = availableProjects.find(p => p.id === targetProjectId);

  return (
    <Modal
      title={
        <div className="flex items-center gap-2">
          <Copy className="w-5 h-5" />
          <span>Copy Variables to Another Project</span>
        </div>
      }
      open={open}
      onCancel={onClose}
      onOk={handleCopy}
      okText="Copy Variables"
      confirmLoading={loading}
      width={550}
      destroyOnClose
    >
      <div className="space-y-4">
        <Alert
          message={`Copying ${selectedVarIds.length} variable${selectedVarIds.length !== 1 ? 's' : ''} from ${sourceProject.name}`}
          description="Select the target project where you want to copy these variables."
          type="info"
          showIcon
        />

        <div>
          <label className="block text-sm font-medium mb-2">
            Source Project
          </label>
          <div className="p-3 bg-gray-800 rounded-lg">
            <div className="font-medium">{sourceProject.name}</div>
            {sourceProject.description && (
              <div className="text-sm text-gray-400 mt-1">
                {sourceProject.description}
              </div>
            )}
            <Tag color="blue" className="mt-2">
              {selectedVarIds.length} variable{selectedVarIds.length !== 1 ? 's' : ''} selected
            </Tag>
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">
            Target Project <span className="text-red-500">*</span>
          </label>
          <Select
            value={targetProjectId}
            onChange={setTargetProjectId}
            placeholder="Select target project"
            className="w-full"
            showSearch
            optionFilterProp="children"
          >
            {availableProjects.map(project => (
              <Option key={project.id} value={project.id}>
                <div>
                  <div className="font-medium">{project.name}</div>
                  {project.description && (
                    <div className="text-xs text-gray-400">
                      {project.description}
                    </div>
                  )}
                </div>
              </Option>
            ))}
          </Select>
          {availableProjects.length === 0 && (
            <div className="text-sm text-gray-400 mt-2">
              No other projects available. Create a new project first.
            </div>
          )}
        </div>

        {targetProject && (
          <div className="p-3 bg-gray-800 rounded-lg">
            <div className="text-sm text-gray-400 mb-1">Target Project</div>
            <div className="font-medium">{targetProject.name}</div>
            {targetProject._count && (
              <Tag color="green" className="mt-2">
                {targetProject._count.envVars} existing variable{targetProject._count.envVars !== 1 ? 's' : ''}
              </Tag>
            )}
          </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 in target
            </div>
          </div>
          <Switch
            checked={overwrite}
            onChange={setOverwrite}
          />
        </div>

        <Alert
          message="Note"
          description={
            <Space direction="vertical" size="small">
              <div>• Variables will be encrypted with the same master key</div>
              <div>• Descriptions will be copied along with values</div>
              <div>• All operations will be logged in audit history</div>
              {!overwrite && <div>• Existing keys in target will be skipped</div>}
            </Space>
          }
          type="warning"
          showIcon
        />
      </div>
    </Modal>
  );
}