import React, { useState, useEffect } from 'react';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Trash } from 'lucide-react';

const VariableModal = ({ open, onOpenChange }) => {
  const [variables, setVariables] = useState([]);

  useEffect(() => {
    if (open) {
      const globals = window.globals || {};
      setVariables(Object.entries(globals).map(([key, value]) => ({ key, value })));
    }
  }, [open]);

  const handleKeyChange = (index, newKey) => {
    const newVariables = [...variables];
    const oldKey = newVariables[index].key;
    newVariables[index].key = newKey;
    setVariables(newVariables);

    const globals = window.globals || {};
    const value = globals[oldKey];
    delete globals[oldKey];
    globals[newKey] = value;
    window.globals = globals;
  };

  const handleValueChange = (index, newValue) => {
    const newVariables = [...variables];
    newVariables[index].value = newValue;
    setVariables(newVariables);

    const globals = window.globals || {};
    globals[newVariables[index].key] = newValue;
    window.globals = globals;
  };

  const handleDelete = (index) => {
    const key = variables[index].key;
    const newVariables = variables.filter((_, i) => i !== index);
    setVariables(newVariables);

    const globals = window.globals || {};
    delete globals[key];
    window.globals = globals;
  };

  const handleAdd = () => {
    setVariables([...variables, { key: '', value: '' }]);
  };

  return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>환경 변수</DialogTitle>
          </DialogHeader>
          <div>
            <div className="font-medium mb-2">Globals</div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>키</TableHead>
                  <TableHead>값</TableHead>
                  <TableHead>
                    <Button variant="secondary" size="sm" onClick={handleAdd}>
                      추가
                    </Button>
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {variables.map((variable, index) => (
                    <TableRow key={index}>
                      <TableCell>
                        <Input
                            value={variable.key}
                            onChange={(e) => handleKeyChange(index, e.target.value)}
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                            value={variable.value}
                            onChange={(e) => handleValueChange(index, e.target.value)}
                        />
                      </TableCell>
                      <TableCell>
                        <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleDelete(index)}
                        >
                          <Trash className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
          <DialogFooter>
            <Button variant="secondary" onClick={() => onOpenChange(false)}>
              닫기
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
  );
};

export default VariableModal;
