fotospiel-app/resources/js/admin/pages/EventMembersPage.tsx

import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Loader2, Mail, Sparkles, Trash2, Users } from 'lucide-react';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

import { AdminLayout } from '../components/AdminLayout';
import {
  EventMember,
  getEvent,
  getEventMembers,
  inviteEventMember,
  removeEventMember,
  TenantEvent,
} from '../api';
import { isAuthError } from '../auth/tokens';
import { ADMIN_EVENTS_PATH } from '../constants';

type InviteForm = {
  email: string;
  name: string;
  role: string;
};

const emptyInvite: InviteForm = {
  email: '',
  name: '',
  role: 'member',
};

export default function EventMembersPage() {
  const params = useParams<{ slug?: string }>();
  const [searchParams] = useSearchParams();
  const slug = params.slug ?? searchParams.get('slug') ?? null;
  const navigate = useNavigate();

  const [event, setEvent] = React.useState<TenantEvent | null>(null);
  const [members, setMembers] = React.useState<EventMember[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [invite, setInvite] = React.useState<InviteForm>(emptyInvite);
  const [inviting, setInviting] = React.useState(false);
  const [membersUnavailable, setMembersUnavailable] = React.useState(false);

  React.useEffect(() => {
    if (!slug) {
      setError('Kein Event-Slug angegeben.');
      setLoading(false);
      return;
    }

    let cancelled = false;
    (async () => {
      try {
        setLoading(true);
        const eventData = await getEvent(slug);
        if (cancelled) return;
        setEvent(eventData);

        const response = await getEventMembers(slug);
        if (cancelled) return;
        setMembers(response.data);
        setMembersUnavailable(false);
      } catch (err) {
        if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
          setMembersUnavailable(true);
        } else if (!isAuthError(err)) {
          setError('Mitglieder konnten nicht geladen werden.');
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [slug]);

  async function handleInvite(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!slug) return;
    if (!invite.email.trim()) {
      setError('Bitte gib eine E-Mail-Adresse ein.');
      return;
    }
    setInviting(true);
    try {
      const member = await inviteEventMember(slug, {
        email: invite.email.trim(),
        name: invite.name.trim() || undefined,
        role: invite.role,
      });
      setMembers((prev) => [member, ...prev]);
      setInvite(emptyInvite);
      setMembersUnavailable(false);
    } catch (err) {
      if (err instanceof Error && err.message.includes('Mitgliederverwaltung')) {
        setMembersUnavailable(true);
      } else if (!isAuthError(err)) {
        setError('Einladung konnte nicht verschickt werden.');
      }
    } finally {
      setInviting(false);
    }
  }

  async function handleRemove(member: EventMember) {
    if (!slug) return;
    if (!window.confirm(`${member.name} wirklich entfernen?`)) return;
    try {
      await removeEventMember(slug, member.id);
      setMembers((prev) => prev.filter((entry) => entry.id !== member.id));
    } catch (err) {
      if (!isAuthError(err)) {
        setError('Mitglied konnte nicht entfernt werden.');
      }
    }
  }

  const actions = (
    <Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
      <ArrowLeft className="h-4 w-4" />
      Zurueck zur Uebersicht
    </Button>
  );

  return (
    <AdminLayout
      title="Event Mitglieder"
      subtitle="Verwalte Moderatoren, Admins und Helfer fuer dieses Event."
      actions={actions}
    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>Fehler</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {loading ? (
        <MembersSkeleton />
      ) : !event ? (
        <Alert variant="destructive">
          <AlertTitle>Event nicht gefunden</AlertTitle>
          <AlertDescription>Bitte kehre zur Eventliste zurueck.</AlertDescription>
        </Alert>
      ) : (
        <>
          <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
            <CardHeader>
              <CardTitle className="text-xl text-slate-900">{renderName(event.name)}</CardTitle>
              <CardDescription className="text-sm text-slate-600">
                Status: {event.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-6 lg:grid-cols-2">
              <section className="space-y-3">
                <h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
                  <Sparkles className="h-4 w-4 text-pink-500" />
                  Mitglieder
                </h3>
                {membersUnavailable ? (
                  <Alert>
                    <AlertTitle>Feature noch nicht aktiviert</AlertTitle>
                    <AlertDescription>
                      Die Mitgliederverwaltung ist fuer dieses Event noch nicht verfuegbar. Bitte kontaktiere den Support,
                      um das Feature freizuschalten.
                    </AlertDescription>
                  </Alert>
                ) : members.length === 0 ? (
                  <EmptyState message="Noch keine Mitglieder eingeladen." />
                ) : (
                  <div className="space-y-2">
                    {members.map((member) => (
                      <div
                        key={member.id}
                        className="flex flex-col gap-3 rounded-2xl border border-slate-100 bg-white/90 p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between"
                      >
                        <div>
                          <p className="text-sm font-semibold text-slate-900">{member.name}</p>
                          <p className="text-xs text-slate-600">{member.email}</p>
                          <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
                            <span>Status: {member.status ?? 'aktiv'}</span>
                            {member.joined_at && <span>Beigetreten: {formatDate(member.joined_at)}</span>}
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Badge variant="outline" className="border-pink-200 text-pink-600">
                            {mapRole(member.role)}
                          </Badge>
                          <Button variant="outline" size="sm" onClick={() => void handleRemove(member)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </section>

              <section className="space-y-3">
                <h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
                  <Users className="h-4 w-4 text-emerald-500" />
                  Neues Mitglied einladen
                </h3>
                <form className="space-y-3 rounded-2xl border border-emerald-100 bg-white/90 p-4 shadow-sm" onSubmit={handleInvite}>
                  <div className="space-y-2">
                    <Label htmlFor="invite-email">E-Mail</Label>
                    <Input
                      id="invite-email"
                      type="email"
                      placeholder="person@example.com"
                      value={invite.email}
                      onChange={(event) => setInvite((prev) => ({ ...prev, email: event.target.value }))}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="invite-name">Name (optional)</Label>
                    <Input
                      id="invite-name"
                      placeholder="Name"
                      value={invite.name}
                      onChange={(event) => setInvite((prev) => ({ ...prev, name: event.target.value }))}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="invite-role">Rolle</Label>
                    <Select
                      value={invite.role}
                      onValueChange={(value) => setInvite((prev) => ({ ...prev, role: value }))}
                    >
                      <SelectTrigger id="invite-role">
                        <SelectValue placeholder="Rolle waehlen" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="tenant_admin">Tenant-Admin</SelectItem>
                        <SelectItem value="member">Mitglied</SelectItem>
                        <SelectItem value="guest">Gast</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <Button type="submit" className="w-full" disabled={inviting}>
                    {inviting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Mail className="h-4 w-4" />}
                    {' '}Einladung senden
                  </Button>
                </form>
              </section>
            </CardContent>
          </Card>
        </>
      )}
    </AdminLayout>
  );
}

function EmptyState({ message }: { message: string }) {
  return (
    <div className="flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-6 text-center">
      <p className="text-xs text-slate-600">{message}</p>
    </div>
  );
}

function MembersSkeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 3 }).map((_, index) => (
        <div key={index} className="h-40 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
      ))}
    </div>
  );
}

function renderName(name: TenantEvent['name']): string {
  if (typeof name === 'string') {
    return name;
  }
  return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? 'Unbenanntes Event';
}

function mapRole(role: string): string {
  switch (role) {
    case 'tenant_admin':
      return 'Tenant-Admin';
    case 'member':
      return 'Mitglied';
    case 'guest':
      return 'Gast';
    default:
      return role;
  }
}

function formatDate(value: string | null | undefined): string {
  if (!value) return '--';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '--';
  return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' });
}