ProjectView.jsx

import { useState, useEffect } from 'react';
import { Table, Button, Space, Typography, Tag, Skeleton, Empty, Modal, message, Tooltip } from 'antd';
import { 
  PlusOutlined, 
  DownloadOutlined, 
  EditOutlined, 
  DeleteOutlined, 
  EyeOutlined, 
  EyeInvisibleOutlined, 
  CopyOutlined, 
  CheckOutlined,
  UploadOutlined 
} from '@ant-design/icons';
import EnvVarModal from './EnvVarModal';
import ImportEnvModal from './ImportEnvModal';

const { Title, Text } = Typography;

export default function ProjectView({ project, onProjectUpdate }) {
  const [envVars, setEnvVars] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [showImportModal, setShowImportModal] = useState(false);
  const [editingVar, setEditingVar] = useState(null);
  const [visibleValues, setVisibleValues] = useState({});
  const [copiedId, setCopiedId] = useState(null);

  useEffect(() => {
    loadEnvVars();
  }, [project.id]);

  const loadEnvVars = async () => {
    try {
      const result = await window.electronAPI.envVars.list(project.id);
      if (result.success) {
        setEnvVars(result.data);
      }
    } catch (error) {
      console.error('Failed to load env vars:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleCreate = async (data) => {
    const result = await window.electronAPI.envVars.create({
      ...data,
      projectId: project.id,
    });
    if (result.success) {
      await loadEnvVars();
      await onProjectUpdate();
      setShowModal(false);
    }
    return result;
  };

  const handleUpdate = async (data) => {
    const result = await window.electronAPI.envVars.update(data);
    if (result.success) {
      await loadEnvVars();
      setShowModal(false);
      setEditingVar(null);
    }
    return result;
  };

  const handleDelete = async (id) => {
    Modal.confirm({
      title: 'Delete Environment Variable',
      content: 'Are you sure you want to delete this environment variable?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        const result = await window.electronAPI.envVars.delete(id);
        if (result.success) {
          message.success('Environment variable deleted');
          await loadEnvVars();
          await onProjectUpdate();
        } else {
          message.error(result.error || 'Failed to delete');
        }
      },
    });
  };

  const handleExport = async (format) => {
    const result = await window.electronAPI.envVars.export({
      projectId: project.id,
      format,
    });
    
    if (result.success) {
      const blob = new Blob([result.data], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${project.name}.${format}`;
      a.click();
      URL.revokeObjectURL(url);
    }
  };

  const toggleValueVisibility = (id) => {
    setVisibleValues(prev => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  const copyToClipboard = async (text, id) => {
    await navigator.clipboard.writeText(text);
    setCopiedId(id);
    message.success('Copied to clipboard');
    setTimeout(() => setCopiedId(null), 2000);
  };

  const openEditModal = (envVar) => {
    setEditingVar(envVar);
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
    setEditingVar(null);
  };

  if (loading) {
    return (
      <div style={{ padding: 32 }}>
        <Skeleton active paragraph={{ rows: 8 }} />
      </div>
    );
  }

  const columns = [
    {
      title: 'Key',
      dataIndex: 'key',
      key: 'key',
      width: '25%',
      render: (text) => <Text code strong>{text}</Text>,
    },
    {
      title: 'Value',
      dataIndex: 'value',
      key: 'value',
      width: '40%',
      render: (text, record) => (
        <Space.Compact style={{ width: '100%' }}>
          <div style={{ 
            flex: 1, 
            background: '#1f1f1f', 
            padding: '4px 12px', 
            borderRadius: 6,
            fontFamily: 'monospace',
            fontSize: 13,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
          }}>
            {visibleValues[record.id] ? text : '••••••••'}
          </div>
          <Tooltip title={visibleValues[record.id] ? 'Hide value' : 'Show value'}>
            <Button
              type="text"
              icon={visibleValues[record.id] ? <EyeInvisibleOutlined /> : <EyeOutlined />}
              onClick={() => toggleValueVisibility(record.id)}
            />
          </Tooltip>
          <Tooltip title="Copy to clipboard">
            <Button
              type="text"
              icon={copiedId === record.id ? <CheckOutlined style={{ color: '#52c41a' }} /> : <CopyOutlined />}
              onClick={() => copyToClipboard(text, record.id)}
            />
          </Tooltip>
        </Space.Compact>
      ),
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
      width: '25%',
      render: (text) => <Text type="secondary">{text || '-'}</Text>,
    },
    {
      title: 'Actions',
      key: 'actions',
      width: '10%',
      align: 'right',
      render: (_, record) => (
        <Space size="small">
          <Tooltip title="Edit">
            <Button
              type="text"
              icon={<EditOutlined />}
              onClick={() => openEditModal(record)}
            />
          </Tooltip>
          <Tooltip title="Delete">
            <Button
              type="text"
              danger
              icon={<DeleteOutlined />}
              onClick={() => handleDelete(record.id)}
            />
          </Tooltip>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <div>
            <Title level={2} style={{ margin: 0, color: 'white' }}>{project.name}</Title>
            {project.description && (
              <Text type="secondary" style={{ marginTop: 8, display: 'block' }}>{project.description}</Text>
            )}
          </div>
          <Space>
            <Button
              icon={<UploadOutlined />}
              onClick={() => setShowImportModal(true)}
            >
              Import
            </Button>
            <Button
              icon={<DownloadOutlined />}
              onClick={() => handleExport('env')}
              disabled={envVars.length === 0}
            >
              Export .env
            </Button>
            <Button
              icon={<DownloadOutlined />}
              onClick={() => handleExport('json')}
              disabled={envVars.length === 0}
            >
              Export JSON
            </Button>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setShowModal(true)}
            >
              Add Variable
            </Button>
          </Space>
        </div>
        <Tag color="blue">
          {envVars.length} {envVars.length === 1 ? 'variable' : 'variables'}
        </Tag>
      </div>

      {envVars.length === 0 ? (
        <Empty
          description={
            <Space direction="vertical" size="small">
              <Text strong style={{ fontSize: 16 }}>No environment variables yet</Text>
              <Text type="secondary">Add your first environment variable to get started</Text>
            </Space>
          }
          style={{ 
            padding: '80px 0',
            background: '#141414',
            borderRadius: 8,
            border: '2px dashed #303030'
          }}
        >
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => setShowModal(true)}
          >
            Add Variable
          </Button>
        </Empty>
      ) : (
        <Table
          columns={columns}
          dataSource={envVars}
          rowKey="id"
          pagination={false}
          style={{ background: '#141414' }}
        />
      )}

      <EnvVarModal
        open={showModal}
        onClose={closeModal}
        onCreate={handleCreate}
        onUpdate={handleUpdate}
        editingVar={editingVar}
      />

      <ImportEnvModal
        open={showImportModal}
        onClose={() => setShowImportModal(false)}
        projectId={project.id}
        onSuccess={async () => {
          await loadEnvVars();
          await onProjectUpdate();
        }}
      />
    </div>
  );
}