import { useState } from 'react';
import '../style/AddAppModal.css';

function AppModal({ mode = 'add', initialData = {}, onSubmit, onClose, sections = [] }) {
  const [open, setOpen] = useState(true);
  const [section, setSection] = useState(initialData.section || '');
  const [customSection, setCustomSection] = useState(false);
  const [name, setName] = useState(initialData.name || '');
  const [icon, setIcon] = useState(initialData.icon || '');
  const [description, setDescription] = useState(initialData.description || '');
  const [url, setUrl] = useState(initialData.url || '');

  const handleSubmit = async (e) => {
    e.preventDefault();

    const appData = {
      name,
      icon,
      description,
      url,
    };

    const payload = {
      section,
      app: appData,
    };

    if (mode === 'edit') {
      payload.original_name = initialData.original_name || initialData.name;
    }

    await onSubmit(payload);
    setOpen(false);
    if (onClose) onClose();
  };

  if (!open) return null;

  return (
    <div className="modal-overlay" onClick={() => { setOpen(false); if (onClose) onClose(); }}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>{mode === 'edit' ? 'Edit App' : 'Add New App'}</h2>
        <form onSubmit={handleSubmit}>
          <select
            value={customSection ? '__new__' : section}
            onChange={(e) => {
              const val = e.target.value;
              if (val === '__new__') {
                setSection('');
                setCustomSection(true);
              } else {
                setSection(val);
                setCustomSection(false);
              }
            }}
            required={!customSection}
            disabled={mode === 'edit'}
          >
            <option value="" disabled>Select a section</option>
            {sections.map((s) => (
              <option key={s.name} value={s.name}>
                {s.name}
              </option>
            ))}
            <option value="__new__">➕ Create new section...</option>
          </select>

          {customSection && (
            <input
              type="text"
              placeholder="New section name"
              value={section}
              onChange={(e) => setSection(e.target.value)}
              required
            />
          )}

          <input
            type="text"
            placeholder="App name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
          />
          <input
            type="text"
            placeholder="Icon name (e.g. grafana.svg) or full URL"
            value={icon}
            onChange={(e) => setIcon(e.target.value)}
          />
          <input
            type="text"
            placeholder="Description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
          <input
            type="text"
            placeholder="App URL"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            required
          />
          <button type="submit">{mode === 'edit' ? 'Update' : 'Add'}</button>
        </form>
      </div>
    </div>
  );
}

export default AppModal;