import { useState } from 'react';
import { auth } from '../api/client';
import Button from '../components/ui/Button';
import { Input } from '../components/ui/Input';
import { useAuthStore } from '../store';
import { Shield, Key, Info } from 'lucide-react';

export default function Settings() {
  const user = useAuthStore((s) => s.user);
  const [pw, setPw] = useState({ current: '', new: '', confirm: '' });
  const [msg, setMsg] = useState('');
  const [err, setErr] = useState('');

  const handlePw = async (e) => {
    e.preventDefault();
    setMsg(''); setErr('');
    if (pw.new !== pw.confirm) { setErr('Passwörter stimmen nicht überein'); return; }
    try {
      await auth.changePassword({ currentPassword: pw.current, newPassword: pw.new });
      setMsg('Passwort erfolgreich geändert');
      setPw({ current: '', new: '', confirm: '' });
    } catch (e) {
      setErr(e.response?.data?.error || 'Fehler beim Ändern');
    }
  };

  return (
    <div className="space-y-4 animate-fade-in max-w-xl">
      <div className="card space-y-3">
        <div className="flex items-center gap-2 mb-1">
          <Shield size={16} className="text-accent" />
          <h2 className="text-sm font-semibold text-white">Konto</h2>
        </div>
        <div className="bg-surface-2 rounded-lg px-4 py-3">
          <p className="text-xs text-muted">Benutzername</p>
          <p className="text-sm font-medium text-white mt-0.5">{user?.username}</p>
        </div>
        <div className="bg-surface-2 rounded-lg px-4 py-3">
          <p className="text-xs text-muted">Rolle</p>
          <p className="text-sm font-medium text-white mt-0.5">{user?.role}</p>
        </div>
      </div>

      <div className="card space-y-4">
        <div className="flex items-center gap-2">
          <Key size={16} className="text-accent" />
          <h2 className="text-sm font-semibold text-white">Passwort ändern</h2>
        </div>
        <form onSubmit={handlePw} className="space-y-3">
          <Input label="Aktuelles Passwort" type="password" value={pw.current} onChange={(e) => setPw((p) => ({ ...p, current: e.target.value }))} required />
          <Input label="Neues Passwort" type="password" value={pw.new} onChange={(e) => setPw((p) => ({ ...p, new: e.target.value }))} required />
          <Input label="Passwort bestätigen" type="password" value={pw.confirm} onChange={(e) => setPw((p) => ({ ...p, confirm: e.target.value }))} required />
          {msg && <p className="text-success text-sm">{msg}</p>}
          {err && <p className="text-danger text-sm">{err}</p>}
          <Button type="submit">Passwort ändern</Button>
        </form>
      </div>

      <div className="card">
        <div className="flex items-center gap-2 mb-3">
          <Info size={16} className="text-accent" />
          <h2 className="text-sm font-semibold text-white">System-Info</h2>
        </div>
        <div className="space-y-2 text-xs text-muted">
          <p>API-Endpunkt: <code className="text-accent bg-surface-3 px-1 rounded">/api</code></p>
          <p>Plugin API Key: In <code className="text-accent bg-surface-3 px-1 rounded">api/.env</code> konfigurieren</p>
          <p>Standard-Login: <code className="text-accent bg-surface-3 px-1 rounded">admin / admin123</code></p>
        </div>
      </div>
    </div>
  );
}