// Overlay for reading and editing the MATLAB implementation. Edits take
// effect on the next debounced render and live only as long as the page.

import { useState } from 'react';
import { DEFAULT_MFILES, EXECUTED_BY_APP, type MFile } from '../mfiles';
import type { RenderError } from '../hooks/useRenderer';
import CodeEditor from './CodeEditor';

interface Props {
  mfiles: MFile[];
  onChangeFile: (name: string, source: string) => void;
  onResetFile: (name: string) => void;
  onResetAll: () => void;
  onClose: () => void;
  onRenderFull: () => void;
  error: RenderError | null;
  busy: boolean;
}

function defaultSourceOf(name: string): string {
  return DEFAULT_MFILES.find((f) => f.name === name)?.source ?? '';
}

export default function CodePanel({
  mfiles,
  onChangeFile,
  onResetFile,
  onResetAll,
  onClose,
  onRenderFull,
  error,
  busy,
}: Props) {
  const [selected, setSelected] = useState(
    mfiles.find((f) => EXECUTED_BY_APP.has(f.name))?.name ?? mfiles[0]?.name ?? '',
  );
  const file = mfiles.find((f) => f.name === selected) ?? mfiles[0];
  const dirty = (f: MFile) => f.source !== defaultSourceOf(f.name);
  const anyDirty = mfiles.some(dirty);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="code-panel" onClick={(e) => e.stopPropagation()}>
        <div className="code-header">
          <h2>MATLAB source</h2>
          <span className="code-note">
            Executed by numbl. Edits re-render as you type and are discarded on reload.
          </span>
          <button onClick={onRenderFull} disabled={busy}>
            Render full quality
          </button>
          <button onClick={onResetAll} disabled={!anyDirty}>
            Revert all
          </button>
          <button onClick={onClose}>Close</button>
        </div>
        <div className="code-body">
          <div className="code-files">
            {mfiles.map((f) => (
              <button
                key={f.name}
                className={f.name === file?.name ? 'active' : ''}
                onClick={() => setSelected(f.name)}
              >
                <span className="fname">
                  {f.name}
                  {dirty(f) ? <span className="dot" title="edited" /> : null}
                </span>
                <span className="ftag">{EXECUTED_BY_APP.has(f.name) ? 'in app' : 'CLI'}</span>
              </button>
            ))}
          </div>
          <div className="code-main">
            {file && (
              <>
                <div className="code-toolbar">
                  <span>{file.name}</span>
                  {!EXECUTED_BY_APP.has(file.name) && (
                    <span className="code-hint">
                      entry point for the numbl CLI; the app does not run this file
                    </span>
                  )}
                  <button
                    onClick={() => onResetFile(file.name)}
                    disabled={!dirty(file)}
                    style={{ marginLeft: 'auto' }}
                  >
                    Revert file
                  </button>
                </div>
                <CodeEditor
                  key={file.name}
                  source={file.source}
                  onChange={(src) => onChangeFile(file.name, src)}
                />
              </>
            )}
          </div>
        </div>
        {error && (
          <div className="code-error">
            <strong>{error.file ? `${error.file}${error.line ? `:${error.line}` : ''}` : 'error'}</strong>{' '}
            {error.message}
          </div>
        )}
      </div>
    </div>
  );
}