import React from 'react';
import { LogOut, Palette } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

import AppearanceToggleDropdown from '@/components/appearance-dropdown';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

import { AdminLayout } from '../components/AdminLayout';
import { useAuth } from '../auth/context';

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

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

  const actions = (
    <Button
      variant="outline"
      onClick={() => navigate('/admin/events')}
      className="border-pink-200 text-pink-600 hover:bg-pink-50"
    >
      Zurueck zur Uebersicht
    </Button>
  );

  return (
    <AdminLayout
      title="Einstellungen"
      subtitle="Passe das Erscheinungsbild deines Dashboards an und verwalte deine Session."
      actions={actions}
    >
      <Card className="max-w-2xl border-0 bg-white/85 shadow-xl shadow-amber-100/60">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
            <Palette className="h-5 w-5 text-amber-500" /> Darstellung & Account
          </CardTitle>
          <CardDescription className="text-sm text-slate-600">
            Gestalte den Admin-Bereich so farbenfroh wie dein Gaesteportal.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <section className="space-y-2">
            <h2 className="text-sm font-semibold text-slate-800">Darstellung</h2>
            <p className="text-sm text-slate-600">
              Wechsel zwischen Hell- und Dunkelmodus oder uebernimm automatisch die Systemeinstellung.
            </p>
            <AppearanceToggleDropdown />
          </section>

          <section className="space-y-2">
            <h2 className="text-sm font-semibold text-slate-800">Angemeldeter Account</h2>
            <p className="text-sm text-slate-600">
              {user ? (
                <>
                  Eingeloggt als <span className="font-medium text-slate-900">{user.name ?? user.email ?? 'Tenant Admin'}</span>
                  {user.tenant_id && <> - Tenant #{user.tenant_id}</>}
                </>
              ) : (
                'Aktuell kein Benutzer geladen.'
              )}
            </p>
            <div className="flex flex-wrap gap-3 pt-2">
              <Button variant="destructive" onClick={handleLogout} className="flex items-center gap-2">
                <LogOut className="h-4 w-4" /> Abmelden
              </Button>
              <Button variant="ghost" onClick={() => navigate(-1)}>
                Abbrechen
              </Button>
            </div>
          </section>
        </CardContent>
      </Card>
    </AdminLayout>
  );
}