'use client'
import { useState } from 'react'

const inp: React.CSSProperties = {
  width: '100%', padding: '8px 12px', borderRadius: '6px',
  border: '1px solid var(--border-color)', background: 'var(--bg)',
  color: 'var(--text-primary)', fontSize: '14px', boxSizing: 'border-box',
}
const lbl: React.CSSProperties = {
  fontSize: '11px', fontWeight: 600, textTransform: 'uppercase',
  letterSpacing: '1px', color: 'var(--text-muted)', display: 'block', marginBottom: '6px',
}

export default function PasswortAendern() {
  const [current, setCurrent] = useState('')
  const [next, setNext] = useState('')
  const [confirm, setConfirm] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError(null)
    if (next !== confirm) { setError('Die neuen Passwörter stimmen nicht überein.'); return }
    if (next.length < 8) { setError('Das neue Passwort muss mindestens 8 Zeichen haben.'); return }
    setSaving(true)
    const res = await fetch('/api/admin/passwort', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ currentPassword: current, newPassword: next }),
    })
    const json = await res.json()
    setSaving(false)
    if (!res.ok) { setError(json.error ?? 'Fehler beim Speichern.'); return }
    setSuccess(true)
    setCurrent(''); setNext(''); setConfirm('')
    setTimeout(() => setSuccess(false), 3000)
  }

  return (
    <div style={{ maxWidth: '480px' }}>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <div>
          <label style={lbl}>Aktuelles Passwort</label>
          <input type="password" style={inp} value={current} onChange={e => setCurrent(e.target.value)} autoComplete="current-password" required />
        </div>
        <div>
          <label style={lbl}>Neues Passwort</label>
          <input type="password" style={inp} value={next} onChange={e => setNext(e.target.value)} autoComplete="new-password" required />
        </div>
        <div>
          <label style={lbl}>Neues Passwort bestätigen</label>
          <input type="password" style={inp} value={confirm} onChange={e => setConfirm(e.target.value)} autoComplete="new-password" required />
        </div>

        {error && (
          <p style={{ fontSize: '13px', color: '#f87171', padding: '10px 14px', borderRadius: '6px', background: 'rgba(248,113,113,0.1)', border: '1px solid rgba(248,113,113,0.3)' }}>
            {error}
          </p>
        )}

        <button
          type="submit"
          disabled={saving}
          style={{ padding: '10px', borderRadius: '6px', background: 'var(--accent)', color: '#fff', fontWeight: 700, border: 'none', cursor: 'pointer', fontSize: '14px' }}
        >
          {saving ? 'Wird gespeichert…' : success ? '✓ Passwort geändert' : 'Passwort ändern'}
        </button>
      </form>
    </div>
  )
}