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

export function SettingsPanel() {
  const [, setSettings] = useState<ConnectionSettings | null>(null)
  const [apiUrl, setApiUrl] = useState('')
  const [apiKey, setApiKey] = useState('')
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)

  useEffect(() => {
    api.getSettings().then((s) => {
      setSettings(s)
      setApiUrl(s.api_url)
      setApiKey(s.api_key)
    })
  }, [])

  async function handleSave() {
    setSaving(true)
    setSaved(false)
    try {
      const updated = await api.updateSettings({ api_url: apiUrl, api_key: apiKey })
      setSettings(updated)
      setSaved(true)
      setTimeout(() => setSaved(false), 3000)
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h2 className="text-lg font-semibold mb-4">Connection Settings</h2>
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">API URL</label>
          <input
            type="url" value={apiUrl} onChange={(e) => setApiUrl(e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#6C63FF] focus:border-[#6C63FF] outline-none text-sm"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">API Key</label>
          <input
            type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)}
            placeholder="Enter API key"
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#6C63FF] focus:border-[#6C63FF] outline-none text-sm"
          />
          <a href={window.supacoContentBridge.pricingUrl} target="_blank" rel="noopener noreferrer"
            className="text-xs text-[#6C63FF] hover:underline mt-1 inline-block">
            Get your API key
          </a>
        </div>
      </div>
      <div className="mt-6 flex items-center gap-3">
        <button onClick={handleSave} disabled={saving}
          className="px-6 py-2.5 bg-[#6C63FF] text-white rounded-lg font-medium hover:bg-[#5B52E0] disabled:opacity-50 transition-colors">
          {saving ? 'Saving...' : 'Save Settings'}
        </button>
        {saved && <span className="text-sm text-green-600 font-medium">Settings saved!</span>}
      </div>
    </div>
  )
}