import { BaseEntryEditor } from './BaseEntryEditor';

const CreateForm = ({ formData, setFormData }) => (
  <>
    <div>
      <label className="block text-sm font-medium text-gray-700">Script</label>
      <textarea
        value={formData.script || ''}
        onChange={e => setFormData({...formData, script: e.target.value})}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
        rows={4}
      />
    </div>
    <div>
      <div className="flex items-center mb-2">
        <input
          type="checkbox"
          checked={formData.timeout !== null}
          onChange={e => setFormData({
            ...formData,
            timeout: e.target.checked ? 1 : null
          })}
          className="rounded border-gray-300"
        />
        <label className="ml-2 text-sm font-medium text-gray-700">Custom Timeout (seconds)</label>
      </div>
      <input
        type="number"
        value={formData.timeout || ''}
        onChange={e => setFormData({...formData, timeout: e.target.value ? Number(e.target.value) : null})}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100"
        step="0.1"
        disabled={formData.timeout === null}
      />
    </div>
    <div>
      <div className="flex items-center mb-2">
        <input
          type="checkbox"
          checked={formData.limit !== null}
          onChange={e => setFormData({
            ...formData,
            limit: e.target.checked ? 1024 : null
          })}
          className="rounded border-gray-300"
        />
        <label className="ml-2 text-sm font-medium text-gray-700">Custom Memory Limit (bytes)</label>
      </div>
      <input
        type="number"
        value={formData.limit || ''}
        onChange={e => setFormData({...formData, limit: e.target.value ? Number(e.target.value) : null})}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100"
        disabled={formData.limit === null}
      />
    </div>
  </>
);

const EditForm = ({ formData, setFormData }) => (
  <>
    <CreateForm formData={formData} setFormData={setFormData} />
    <div>
      <label className="block text-sm font-medium text-gray-700">Standard Output</label>
      <textarea
        value={formData.stdout || ''}
        onChange={e => setFormData({...formData, stdout: e.target.value})}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
        rows={4}
      />
    </div>
    <div>
      <label className="block text-sm font-medium text-gray-700">Standard Error</label>
      <textarea
        value={formData.stderr || ''}
        onChange={e => setFormData({...formData, stderr: e.target.value})}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
        rows={4}
      />
    </div>
    <div>
      <div className="flex items-center mb-2">
        <input
          type="checkbox"
          checked={formData.exit_code !== null}
          onChange={e => setFormData({
            ...formData,
            exit_code: e.target.checked ? 0 : null
          })}
          className="rounded border-gray-300"
        />
        <label className="ml-2 text-sm font-medium text-gray-700">Exit Code</label>
      </div>
      <input
        type="number"
        value={formData.exit_code ?? ''}
        onChange={e => setFormData({...formData, exit_code: e.target.value ? Number(e.target.value) : null})}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100"
        disabled={formData.exit_code === null}
      />
    </div>
    <div>
      <label className="flex items-center">
        <input
          type="checkbox"
          checked={formData.timed_out || false}
          onChange={e => setFormData({...formData, timed_out: e.target.checked})}
          className="rounded border-gray-300"
        />
        <span className="ml-2 text-sm text-gray-700">Timed Out</span>
      </label>
    </div>
  </>
);

const ViewMode = ({ formData }) => (
  <>
    <div>
      <span className="text-sm font-medium text-gray-700">Script:</span>
      <pre className="mt-1 text-sm text-gray-900 bg-gray-50 p-2 rounded">{formData.script || ''}</pre>
    </div>
    <div>
      <span className="text-sm font-medium text-gray-700">Timeout:</span>
      <span className="ml-2 text-sm text-gray-900">{formData.timeout || 'None'}</span>
    </div>
    <div>
      <span className="text-sm font-medium text-gray-700">Memory Limit:</span>
      <span className="ml-2 text-sm text-gray-900">{formData.limit || 'None'}</span>
    </div>
    <div>
      <span className="text-sm font-medium text-gray-700">Standard Output:</span>
      <pre className="mt-1 text-sm text-gray-900 bg-gray-50 p-2 rounded">{formData.stdout || ''}</pre>
    </div>
    <div>
      <span className="text-sm font-medium text-gray-700">Standard Error:</span>
      <pre className="mt-1 text-sm text-gray-900 bg-gray-50 p-2 rounded">{formData.stderr || ''}</pre>
    </div>
    {formData.exit_code !== null && (
      <div>
        <span className="text-sm font-medium text-gray-700">Exit Code:</span>
        <span className="ml-2 text-sm text-gray-900">{formData.exit_code}</span>
      </div>
    )}
    <div>
      <span className="text-sm text-gray-700">
        {formData.timed_out ? '⚠ Timed Out' : '✓ Within Timeout'}
      </span>
    </div>
  </>
);

export const RepeatEntryEditor = (props) => (
  <BaseEntryEditor {...props}>
    {({ formData, setFormData, isEditing, isNew }) => {
      if (isNew) {
        return <CreateForm formData={formData} setFormData={setFormData} />;
      }
      if (isEditing) {
        return <EditForm formData={formData} setFormData={setFormData} />;
      }
      return <ViewMode formData={formData} />;
    }}
  </BaseEntryEditor>
);