import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { api, getToken, User } from '../api/client'

export default function Settings() {
  const [user, setUser] = useState<User | null>(null)
  const [copied, setCopied] = useState(false)
  const [rotating, setRotating] = useState(false)

  useEffect(() => {
    if (!getToken()) {
      window.location.href = '/login'
      return
    }
    api.me().then(setUser)
  }, [])

  async function copyKey() {
    if (!user) return
    await navigator.clipboard.writeText(user.api_key)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  async function rotateKey() {
    if (!confirm('Сгенерировать новый API-ключ? Старый перестанет работать.')) return
    setRotating(true)
    try {
      const res = await api.rotateApiKey()
      setUser(prev => prev ? { ...prev, api_key: res.api_key } : null)
    } catch (err: any) {
      alert('Ошибка: ' + err.message)
    } finally {
      setRotating(false)
    }
  }

  return (
    <div style={{ maxWidth: 600, margin: '0 auto', padding: 20 }}>
      <Link to="/dashboard" style={{ marginBottom: 16, display: 'block' }}>
        &larr; Назад
      </Link>

      <h1>Настройки</h1>

      {user && (
        <div>
          <p><strong>Email:</strong> {user.email}</p>
          <p>
            <strong>API Key:</strong>{' '}
            <code style={{ fontSize: 13 }}>{user.api_key}</code>
            <button onClick={copyKey} style={{ marginLeft: 8, fontSize: 12 }}>
              {copied ? 'Скопировано' : 'Копировать'}
            </button>
            <button onClick={rotateKey} disabled={rotating} style={{ marginLeft: 8, fontSize: 12 }}>
              {rotating ? 'Обновление...' : 'Сбросить'}
            </button>
          </p>
          <p>
            <strong>REST API:</strong>{' '}
            <code style={{ fontSize: 13 }}>
              POST /api/v1/search
            </code>
          </p>
          <p style={{ fontSize: 13, color: '#666' }}>
            Используйте <code>Authorization: Bearer &lt;API_Key&gt;</code> для доступа к API.
            Документация: <Link to="/api/docs">/api/docs</Link>
          </p>
          <p><strong>План:</strong> {user.plan}</p>
          <p><strong>Дата регистрации:</strong> {new Date(user.created_at).toLocaleDateString()}</p>
        </div>
      )}
    </div>
  )
}