import { useState } from 'react'
import { useAuth } from '../lib/AuthContext'
import { ApiError } from '../lib/api'

export default function Login() {
  const { login } = useAuth()
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError(null)
    setSubmitting(true)
    try {
      await login(username, password)
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Login failed')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="flex h-screen w-screen items-center justify-center bg-page">
      <form
        onSubmit={handleSubmit}
        style={{
          width: '380px',
          backgroundColor: 'rgba(10, 10, 12, 0.92)',
          border: '1px solid rgba(200, 164, 52, 0.12)',
          borderRadius: '14px',
          padding: '32px',
        }}
      >
        <h1
          style={{
            fontSize: '20px',
            fontWeight: 700,
            letterSpacing: '1px',
            textTransform: 'uppercase',
            color: '#C8A434',
            marginBottom: '4px',
          }}
        >
          ArchNest
        </h1>
        <p style={{ fontSize: '12px', color: '#7A7D85', marginBottom: '24px' }}>Sign in to your dashboard</p>

        <label style={fieldLabel}>Username</label>
        <input
          style={fieldInput}
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          autoFocus
          required
        />

        <label style={{ ...fieldLabel, marginTop: '14px' }}>Password</label>
        <input
          style={fieldInput}
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />

        {error && (
          <p style={{ fontSize: '12px', color: '#E74C3C', marginTop: '12px' }}>{error}</p>
        )}

        <button
          type="submit"
          disabled={submitting}
          className="cursor-pointer transition-opacity"
          style={{
            width: '100%',
            marginTop: '22px',
            height: '38px',
            borderRadius: '8px',
            border: 'none',
            fontSize: '13px',
            fontWeight: 600,
            color: '#0A0B0D',
            backgroundColor: '#C8A434',
            boxShadow: '0 0 14px rgba(200,164,52,0.2)',
            opacity: submitting ? 0.6 : 1,
          }}
        >
          {submitting ? 'Signing in…' : 'Sign In'}
        </button>
      </form>
    </div>
  )
}

const fieldLabel: React.CSSProperties = {
  fontSize: '11px',
  color: '#7A7D85',
  marginBottom: '6px',
  display: 'block',
}

const fieldInput: React.CSSProperties = {
  width: '100%',
  height: '36px',
  borderRadius: '8px',
  border: '1px solid rgba(200,164,52,0.12)',
  backgroundColor: 'rgba(255,255,255,0.03)',
  color: '#E8E6E0',
  fontSize: '13px',
  padding: '0 12px',
  outline: 'none',
}
