myeasycms-v2/apps/web/app/[locale]/home/[account]/members-cms/invitations/invitations-view.tsx

'use client';

import { useState, useCallback } from 'react';

import { useRouter } from 'next/navigation';

import { Mail, XCircle, Send } from 'lucide-react';
import { useTranslations } from 'next-intl';

import {
  inviteMemberToPortal,
  revokePortalInvitation,
} from '@kit/member-management/actions/member-actions';
import { formatDate } from '@kit/shared/dates';
import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
import { useActionWithToast } from '@kit/ui/use-action-with-toast';

interface Invitation {
  id: string;
  member_id: string;
  email: string;
  status: string;
  created_at: string;
  expires_at: string;
  accepted_at: string | null;
}

interface MemberOption {
  id: string;
  first_name: string;
  last_name: string;
  email: string | null;
}

interface InvitationsViewProps {
  invitations: Invitation[];
  members: MemberOption[];
  accountId: string;
  account: string;
}

const STATUS_LABELS: Record<string, string> = {
  pending: 'Ausstehend',
  accepted: 'Angenommen',
  revoked: 'Widerrufen',
  expired: 'Abgelaufen',
};

const STATUS_COLORS: Record<
  string,
  'default' | 'secondary' | 'destructive' | 'outline'
> = {
  pending: 'default',
  accepted: 'secondary',
  revoked: 'destructive',
  expired: 'outline',
};

export function InvitationsView({
  invitations,
  members,
  accountId,
}: InvitationsViewProps) {
  const t = useTranslations('members');
  const router = useRouter();
  const [showDialog, setShowDialog] = useState(false);
  const [selectedMemberId, setSelectedMemberId] = useState('');
  const [email, setEmail] = useState('');

  const { execute: executeInvite, isPending: isInviting } = useActionWithToast(
    inviteMemberToPortal,
    {
      successMessage: 'Einladung gesendet',
      onSuccess: () => {
        setShowDialog(false);
        setSelectedMemberId('');
        setEmail('');
        router.refresh();
      },
    },
  );

  const { execute: executeRevoke, isPending: isRevoking } = useActionWithToast(
    revokePortalInvitation,
    {
      successMessage: 'Einladung widerrufen',
      onSuccess: () => router.refresh(),
    },
  );

  const handleInvite = useCallback(() => {
    if (!selectedMemberId || !email) return;
    executeInvite({
      memberId: selectedMemberId,
      accountId,
      email,
    });
  }, [executeInvite, selectedMemberId, accountId, email]);

  const handleRevoke = useCallback(
    (invitationId: string) => {
      if (!window.confirm('Einladung wirklich widerrufen?')) return;
      executeRevoke({ invitationId });
    },
    [executeRevoke],
  );

  // When a member is selected, pre-fill email
  const handleMemberChange = useCallback(
    (memberId: string) => {
      setSelectedMemberId(memberId);
      const member = members.find((m) => m.id === memberId);
      if (member?.email) {
        setEmail(member.email);
      }
    },
    [members],
  );

  return (
    <div className="space-y-6">
      {/* Actions */}
      <div className="flex justify-end">
        <Button
          onClick={() => setShowDialog(true)}
          data-test="invite-member-btn"
        >
          <Send className="mr-2 h-4 w-4" />
          Einladung senden
        </Button>
      </div>

      {/* Send Invitation Dialog */}
      {showDialog && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Mail className="h-4 w-4" />
              Einladung senden
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <label className="mb-1 block text-sm font-medium">
                  Mitglied
                </label>
                <select
                  value={selectedMemberId}
                  onChange={(e) => handleMemberChange(e.target.value)}
                  data-test="invite-member-select"
                  className="border-input bg-background flex h-9 w-full rounded-md border px-3 py-1 text-sm"
                >
                  <option value="">— Mitglied auswählen —</option>
                  {members.map((m) => (
                    <option key={m.id} value={m.id}>
                      {m.last_name}, {m.first_name}
                      {m.email ? ` (${m.email})` : ''}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium">
                  E-Mail-Adresse
                </label>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder={t('invitations.emailPlaceholder')}
                  data-test="invite-email-input"
                  className="border-input bg-background flex h-9 w-full rounded-md border px-3 py-1 text-sm"
                />
              </div>
              <div className="flex gap-2">
                <Button
                  onClick={handleInvite}
                  disabled={!selectedMemberId || !email || isInviting}
                  data-test="invite-submit-btn"
                >
                  {isInviting ? 'Sende...' : 'Einladung senden'}
                </Button>
                <Button variant="outline" onClick={() => setShowDialog(false)}>
                  Abbrechen
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Invitations Table */}
      <Card>
        <CardHeader>
          <CardTitle>Einladungen ({invitations.length})</CardTitle>
        </CardHeader>
        <CardContent>
          {invitations.length === 0 ? (
            <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
              <Mail className="text-muted-foreground mb-4 h-10 w-10" />
              <h3 className="text-lg font-semibold">
                Keine Einladungen vorhanden
              </h3>
              <p className="text-muted-foreground mt-1 text-sm">
                {t('invitations.emptyDescription')}
              </p>
            </div>
          ) : (
            <div className="overflow-x-auto rounded-md border">
              <table className="w-full min-w-[640px] text-sm">
                <thead>
                  <tr className="bg-muted/50 border-b">
                    <th scope="col" className="p-3 text-left font-medium">
                      E-Mail
                    </th>
                    <th scope="col" className="p-3 text-left font-medium">
                      Status
                    </th>
                    <th scope="col" className="p-3 text-left font-medium">
                      Erstellt
                    </th>
                    <th scope="col" className="p-3 text-left font-medium">
                      Läuft ab
                    </th>
                    <th scope="col" className="p-3 text-left font-medium">
                      Aktionen
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {invitations.map((inv) => (
                    <tr key={inv.id} className="border-b">
                      <td className="p-3">{inv.email}</td>
                      <td className="p-3">
                        <Badge
                          variant={STATUS_COLORS[inv.status] ?? 'secondary'}
                        >
                          {STATUS_LABELS[inv.status] ?? inv.status}
                        </Badge>
                      </td>
                      <td className="p-3 text-xs">
                        {formatDate(inv.created_at)}
                      </td>
                      <td className="p-3 text-xs">
                        {formatDate(inv.expires_at)}
                      </td>
                      <td className="p-3">
                        {inv.status === 'pending' && (
                          <Button
                            variant="ghost"
                            size="sm"
                            disabled={isRevoking}
                            onClick={() => handleRevoke(inv.id)}
                            data-test={`revoke-invitation-${inv.id}`}
                          >
                            <XCircle className="mr-1 h-4 w-4" />
                            Widerrufen
                          </Button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}