import { useEffect, useState } from 'react';
import type { PublicConfig } from '../../shared/types.ts';
import { OUTPUT_HEIGHTS } from '../../shared/types.ts';
import { api } from '../api.ts';
import { Icon } from '../components/Icon.tsx';

export function Settings() {
  const [cfg, setCfg] = useState<PublicConfig | null>(null);
  const [key, setKey] = useState('');
  const [status, setStatus] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = () => api.config().then(setCfg).catch((e) => setError(e.message));
  useEffect(() => {
    document.title = 'Settings · Takes';
    load();
  }, []);

  const save = async (patch: Record<string, unknown>) => {
    try {
      await api.saveConfig(patch);
      await load();
      setStatus('Saved');
      setTimeout(() => setStatus(null), 1500);
    } catch (e) {
      setError((e as Error).message);
    }
  };

  if (!cfg) return <div className="page loading">{error ?? 'Loading…'}</div>;

  return (
    <div className="page">
      <header className="topbar">
        <a className="btn ghost" href="#/">
          <Icon name="back" /> Videos
        </a>
        <div className="topbar-title">Settings</div>
        <div className="spacer" />
        {status && <span className="save-state saved">{status}</span>}
      </header>
      {error && <div className="banner error">{error}</div>}
      <main className="settings">
        <section className="panel">
          <h4>Library</h4>
          <p>
            Videos are stored in <code>{cfg.libraryDir}</code>. Start the app with <code>--dir</code> to use another directory.
          </p>
        </section>

        <section className="panel">
          <h4>Transcription (Deepgram)</h4>
          <p className="muted small">
            The key is stored in <code>config.json</code> in the library directory, readable only by you. Audio is sent to Deepgram only when a take is transcribed.
          </p>
          <div className="row">
            <input type="password" className="grow" placeholder={cfg.hasDeepgramKey ? 'A key is saved (enter a new one to replace it)' : 'Deepgram API key'} value={key} onChange={(e) => setKey(e.target.value)} />
            <button
              className="btn primary"
              disabled={!key.trim()}
              onClick={async () => {
                await save({ deepgramApiKey: key });
                setKey('');
              }}
            >
              Save key
            </button>
            {cfg.hasDeepgramKey && (
              <button className="btn ghost danger" onClick={() => save({ deepgramApiKey: '' })}>
                Remove
              </button>
            )}
          </div>
          <label className="field">
            <span>Model</span>
            <input defaultValue={cfg.deepgramModel} onBlur={(e) => e.target.value !== cfg.deepgramModel && save({ deepgramModel: e.target.value })} />
          </label>
          <label className="check">
            <input type="checkbox" checked={cfg.autoTranscribe} onChange={(e) => save({ autoTranscribe: e.target.checked })} />
            Transcribe new takes automatically
          </label>
        </section>

        <section className="panel">
          <h4>Background removal</h4>
          <p className="muted small">
            By default the camera background is removed on this computer&rsquo;s CPU. To use a machine with an NVIDIA GPU instead, enter its ssh destination (for example <code>office</code> or <code>user@host</code>). It must accept key-based login without a password prompt and have Python 3.10 or later and ffmpeg; the first job installs onnxruntime-gpu in <code>~/.cache/takes/venv</code> there. Each camera track is copied to that machine for processing and then deleted from it.
          </p>
          <label className="field">
            <span>ssh host</span>
            <input placeholder="This computer" defaultValue={cfg.matteHost} onBlur={(e) => e.target.value.trim() !== cfg.matteHost && save({ matteHost: e.target.value })} />
          </label>
          <label className="field">
            <span>Setup command on that host</span>
            <input placeholder="e.g. module load python ffmpeg" defaultValue={cfg.matteSetup} onBlur={(e) => e.target.value.trim() !== cfg.matteSetup && save({ matteSetup: e.target.value })} />
          </label>
        </section>

        <section className="panel">
          <h4>Defaults</h4>
          <label className="row">
            <span>Countdown before recording</span>
            <select value={cfg.defaultCountdown} onChange={(e) => save({ defaultCountdown: parseInt(e.target.value) })}>
              {[0, 3, 5, 10].map((n) => (
                <option key={n} value={n}>
                  {n === 0 ? 'None' : `${n} s`}
                </option>
              ))}
            </select>
          </label>
          <label className="row">
            <span>Camera resolution</span>
            <select value={cfg.defaultCameraHeight} onChange={(e) => save({ defaultCameraHeight: parseInt(e.target.value) })}>
              <option value={720}>720p</option>
              <option value={1080}>1080p</option>
            </select>
          </label>
          <label className="row">
            <span>Export resolution for new videos</span>
            <select value={cfg.defaultOutputHeight} onChange={(e) => save({ defaultOutputHeight: parseInt(e.target.value) })}>
              {OUTPUT_HEIGHTS.map((h) => (
                <option key={h} value={h}>
                  {h}p
                </option>
              ))}
            </select>
          </label>
          <p className="muted small">The recorder remembers your last choices; these defaults apply until you change them there.</p>
        </section>
      </main>
    </div>
  );
}