import { useEffect, useState } from 'react'
import { api, type Settings } from '../api'

export default function SettingsPage() {
  const [settings, setSettings] = useState<Settings | null>(null)
  const [form, setForm] = useState({ poll_interval_seconds: '', default_quality: '', default_sub_group: '' })
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    api.settings.get().then((s) => {
      setSettings(s)
      setForm({
        poll_interval_seconds: s.poll_interval_seconds,
        default_quality: s.default_quality,
        default_sub_group: s.default_sub_group,
      })
    })
  }, [])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSaving(true)
    setError('')
    setSaved(false)
    try {
      const updated = await api.settings.update(form)
      setSettings(updated)
      setSaved(true)
      setTimeout(() => setSaved(false), 3000)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Save failed')
    } finally {
      setSaving(false)
    }
  }

  if (!settings) return <div className="empty-state"><div className="spinner" /></div>

  return (
    <>
      <div className="page-header">
        <h1>Settings</h1>
      </div>

      <form onSubmit={handleSubmit} style={{ maxWidth: 480 }}>
        <div className="card" style={{ marginBottom: 16 }}>
          <div style={{ marginBottom: 16, fontWeight: 600 }}>Polling</div>

          <div className="form-group" style={{ marginBottom: 16 }}>
            <label>Poll Interval (seconds)</label>
            <input
              type="number"
              min={60}
              value={form.poll_interval_seconds}
              onChange={(e) => setForm((f) => ({ ...f, poll_interval_seconds: e.target.value }))}
            />
            <p className="text-muted text-sm" style={{ marginTop: 4 }}>
              Minimum 60 seconds. Default is 900 (15 minutes).
            </p>
          </div>
        </div>

        <div className="card" style={{ marginBottom: 16 }}>
          <div style={{ marginBottom: 16, fontWeight: 600 }}>Defaults (applied to new shows)</div>

          <div className="form-group" style={{ marginBottom: 12 }}>
            <label>Default Quality</label>
            <input
              value={form.default_quality}
              onChange={(e) => setForm((f) => ({ ...f, default_quality: e.target.value }))}
              placeholder="1080p"
            />
          </div>

          <div className="form-group">
            <label>Default Sub Group</label>
            <input
              value={form.default_sub_group}
              onChange={(e) => setForm((f) => ({ ...f, default_sub_group: e.target.value }))}
              placeholder="SubsPlease"
            />
          </div>
        </div>

        <div className="card" style={{ marginBottom: 16 }}>
          <div style={{ marginBottom: 8, fontWeight: 600 }}>Torrent Output Directory</div>
          <code style={{ fontSize: 12, color: 'var(--text-muted)', wordBreak: 'break-all' }}>
            {settings.torrent_output_dir}
          </code>
          <p className="text-muted text-sm" style={{ marginTop: 6 }}>
            Configured via the <code>TORRENT_OUTPUT_DIR</code> environment variable.
          </p>
        </div>

        {error && <p style={{ color: 'var(--red)', marginBottom: 12 }}>{error}</p>}
        {saved && <p style={{ color: 'var(--green)', marginBottom: 12 }}>Settings saved.</p>}

        <button type="submit" disabled={saving}>
          {saving ? <span className="spinner" /> : 'Save Settings'}
        </button>
      </form>
    </>
  )
}