import React from 'react';
import AppearanceToggleDropdown from '@/components/appearance-dropdown';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../auth/context';

export default function SettingsPage() {
  const nav = useNavigate();
  const { user, logout } = useAuth();

  function handleLogout() {
    logout({ redirect: '/admin/login' });
  }

  return (
    <div className="mx-auto max-w-sm space-y-4 p-6">
      <div>
        <h1 className="text-lg font-semibold">Einstellungen</h1>
        {user && (
          <p className="mt-1 text-sm text-muted-foreground">
            Angemeldet als {user.name ?? user.email ?? 'Tenant Admin'} - Tenant #{user.tenant_id}
          </p>
        )}
      </div>
      <div>
        <div className="text-sm font-medium">Darstellung</div>
        <AppearanceToggleDropdown />
      </div>
      <div className="flex gap-2">
        <Button variant="destructive" onClick={handleLogout}>Abmelden</Button>
        <Button variant="secondary" onClick={() => nav(-1)}>Zurück</Button>
      </div>
    </div>
  );
}