import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Trash2, Copy, RefreshCcw } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { MobileShell, HeaderActionButton } from './components/MobileShell';
import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
import { MobileField, MobileInput, MobileSelect } from './components/FormControls';
import { EventMember, getEventMembers, inviteEventMember, removeEventMember, trackOnboarding } from '../api';
import { isAuthError } from '../auth/tokens';
import { getApiErrorMessage } from '../lib/apiError';
import toast from 'react-hot-toast';
import { MobileSheet } from './components/Sheet';
import { adminPath } from '../constants';
import { useBackNavigation } from './hooks/useBackNavigation';
import { useAdminTheme } from './theme';

export default function MobileEventMembersPage() {
  const { slug: slugParam } = useParams<{ slug?: string }>();
  const slug = slugParam ?? null;
  const navigate = useNavigate();
  const { t } = useTranslation('management');
  const { textStrong, text, muted, border, primary, danger } = useAdminTheme();

  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({ name: '', email: '', role: 'member' as EventMember['role'] });
  const [saving, setSaving] = React.useState(false);
  const emailInputRef = React.useRef<HTMLInputElement | null>(null);
  const [search, setSearch] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState<'all' | 'pending' | 'active' | 'invited'>('all');
  const [roleFilter, setRoleFilter] = React.useState<'all' | 'member' | 'tenant_admin'>('all');
  const [confirmRemove, setConfirmRemove] = React.useState<EventMember | null>(null);
  const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));

  const load = React.useCallback(async () => {
    if (!slug) return;
    setLoading(true);
    setError(null);
    try {
      const result = await getEventMembers(slug, 1);
      setMembers(result.data);
    } catch (err) {
      if (!isAuthError(err)) {
        setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Mitglieder konnten nicht geladen werden.')));
      }
    } finally {
      setLoading(false);
    }
  }, [slug, t]);

  React.useEffect(() => {
    void load();
  }, [load]);

  const normalizedEmail = invite.email.trim();
  const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail);
  const canInvite = Boolean(normalizedEmail) && isEmailValid && !saving;

  const filteredMembers = members.filter((member) => {
    if (statusFilter !== 'all') {
      const currentStatus = member.status ?? 'pending';
      if (currentStatus !== statusFilter) return false;
    }
    if (roleFilter !== 'all' && member.role !== roleFilter) return false;
    if (!search.trim()) return true;
    const hay = `${member.name ?? ''} ${member.email ?? ''}`.toLowerCase();
    return hay.includes(search.toLowerCase());
  });

  const statusOptions = [
    { key: 'all', label: t('events.members.filters.statusAll', 'All statuses') },
    { key: 'pending', label: t('events.members.filters.statusPending', 'Pending') },
    { key: 'active', label: t('events.members.filters.statusActive', 'Active') },
    { key: 'invited', label: t('events.members.filters.statusInvited', 'Invited') },
  ] as const;

  const roleOptions = [
    { key: 'all', label: t('events.members.filters.roleAll', 'All roles') },
    { key: 'tenant_admin', label: t('events.members.filters.roleAdmin', 'Admins') },
    { key: 'member', label: t('events.members.filters.roleMember', 'Members') },
  ] as const;

  const resolveStatus = (status?: string) => {
    switch (status ?? 'pending') {
      case 'active':
        return { label: t('events.members.statuses.active', 'Active'), tone: 'success' as const };
      case 'invited':
        return { label: t('events.members.statuses.invited', 'Invited'), tone: 'warning' as const };
      case 'pending':
        return { label: t('events.members.statuses.pending', 'Pending'), tone: 'warning' as const };
      default:
        return { label: t('events.members.statuses.unknown', 'Unknown'), tone: 'muted' as const };
    }
  };

  async function handleInvite() {
    if (!slug || !normalizedEmail) return;
    if (!isEmailValid) {
      toast.error(t('events.members.emailInvalid', 'Please enter a valid email address.'));
      return;
    }
    setSaving(true);
    setError(null);
    try {
      const member = await inviteEventMember(slug, {
        email: normalizedEmail,
        name: invite.name.trim() || undefined,
        role: invite.role,
      });
      setMembers((prev) => [member, ...prev]);
      setInvite({ name: '', email: '', role: 'member' });
      void trackOnboarding('invite_created', { event_slug: slug });
      toast.success(t('events.members.inviteSuccess', 'Einladung gesendet'));
    } catch (err) {
      if (!isAuthError(err)) {
        setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Einladung fehlgeschlagen.')));
        toast.error(t('events.members.inviteFailed', 'Einladung fehlgeschlagen.'));
      }
    } finally {
      setSaving(false);
    }
  }

  async function handleRemove(member: EventMember) {
    if (!slug) return;
    try {
      await removeEventMember(slug, member.id);
      setMembers((prev) => prev.filter((m) => m.id !== member.id));
      toast.success(t('events.members.removeSuccess', 'Mitglied entfernt'));
    } catch (err) {
      if (!isAuthError(err)) {
        setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Mitglied konnte nicht entfernt werden.')));
        toast.error(t('events.members.removeFailed', 'Mitglied konnte nicht entfernt werden.'));
      }
    }
  }

  return (
    <MobileShell
      activeTab="home"
      title={t('events.members.title', 'Guest Management')}
      onBack={back}
      headerActions={
        <HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>
          <RefreshCcw size={18} color={textStrong} />
        </HeaderActionButton>
      }
    >
      {error ? (
        <MobileCard>
          <Text fontWeight="700" color={danger}>
            {error}
          </Text>
        </MobileCard>
      ) : null}

      <MobileCard space="$3">
        <Text fontSize="$md" fontWeight="800" color={textStrong}>
          {t('events.members.inviteTitle', 'Invite Member')}
        </Text>
        <YStack space="$2">
          <MobileField label={t('events.members.name', 'Name')}>
            <MobileInput
              type="text"
              value={invite.name}
              onChange={(e) => setInvite((prev) => ({ ...prev, name: e.target.value }))}
              placeholder={t('events.members.namePlaceholder', 'Alex Example')}
            />
          </MobileField>
          <MobileField label={t('events.members.email', 'Email')}>
            <MobileInput
              type="email"
              value={invite.email}
              onChange={(e) => setInvite((prev) => ({ ...prev, email: e.target.value }))}
              placeholder={t('events.members.emailPlaceholder', 'alex@example.com')}
              ref={emailInputRef}
            />
          </MobileField>
          <MobileField label={t('events.members.role', 'Role')}>
            <MobileSelect
              value={invite.role}
              onChange={(e) => setInvite((prev) => ({ ...prev, role: e.target.value as EventMember['role'] }))}
            >
              <option value="member">{t('events.members.roleMember', 'Member')}</option>
              <option value="tenant_admin">{t('events.members.roleAdmin', 'Admin')}</option>
            </MobileSelect>
          </MobileField>
          <CTAButton
            label={saving ? t('common.saving', 'Saving...') : t('events.members.invite', 'Send Invite')}
            onPress={() => handleInvite()}
            disabled={!canInvite}
          />
          {saving ? (
            <Text fontSize="$xs" color={muted}>
              {t('common.processing', 'Processing...')}
            </Text>
          ) : null}
          {!isEmailValid && invite.email.trim().length > 0 ? (
            <Text fontSize="$xs" color={danger}>
              {t('events.members.emailInvalid', 'Please enter a valid email address.')}
            </Text>
          ) : null}
        </YStack>
      </MobileCard>

      {members.length > 0 || search.trim().length > 0 ? (
        <MobileInput
          type="search"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder={t('events.members.search', 'Search members')}
          compact
        />
      ) : null}

      {members.length > 0 ? (
        <YStack space="$2">
          <Text fontSize="$xs" fontWeight="700" color={muted}>
            {t('events.members.filters.statusLabel', 'Status')}
          </Text>
          <XStack space="$2" flexWrap="wrap">
            {statusOptions.map((option) => {
              const isActive = statusFilter === option.key;
              return (
                <Pressable key={option.key} onPress={() => setStatusFilter(option.key)}>
                  <XStack
                    paddingHorizontal="$3"
                    paddingVertical="$1.5"
                    borderRadius={999}
                    borderWidth={1}
                    borderColor={isActive ? primary : border}
                    backgroundColor={isActive ? primary : 'transparent'}
                  >
                    <Text fontSize="$xs" fontWeight="700" color={isActive ? 'white' : text}>
                      {option.label}
                    </Text>
                  </XStack>
                </Pressable>
              );
            })}
          </XStack>
          <Text fontSize="$xs" fontWeight="700" color={muted}>
            {t('events.members.filters.roleLabel', 'Role')}
          </Text>
          <XStack space="$2" flexWrap="wrap">
            {roleOptions.map((option) => {
              const isActive = roleFilter === option.key;
              return (
                <Pressable key={option.key} onPress={() => setRoleFilter(option.key)}>
                  <XStack
                    paddingHorizontal="$3"
                    paddingVertical="$1.5"
                    borderRadius={999}
                    borderWidth={1}
                    borderColor={isActive ? primary : border}
                    backgroundColor={isActive ? primary : 'transparent'}
                  >
                    <Text fontSize="$xs" fontWeight="700" color={isActive ? 'white' : text}>
                      {option.label}
                    </Text>
                  </XStack>
                </Pressable>
              );
            })}
          </XStack>
        </YStack>
      ) : null}

      <MobileCard space="$3">
        <Text fontSize="$md" fontWeight="800" color={textStrong}>
          {t('events.members.listTitle', 'Team & Guests')}
        </Text>
        {loading ? (
          <YStack space="$2">
            {Array.from({ length: 4 }).map((_, idx) => (
              <SkeletonCard key={`m-${idx}`} height={70} />
            ))}
          </YStack>
        ) : members.length === 0 ? (
          <YStack space="$2">
            <Text fontSize="$sm" fontWeight="700" color={textStrong}>
              {t('events.members.emptyTitle', 'Invite your team')}
            </Text>
            <Text fontSize="$xs" color={muted}>
              {t('events.members.emptyBody', 'Send the first invite so helpers can access the event.')}
            </Text>
          </YStack>
        ) : (
          <YStack space="$2">
            {filteredMembers.length === 0 ? (
              <YStack space="$1.5" padding="$2">
                <Text fontSize="$sm" fontWeight="700" color={textStrong}>
                  {t('events.members.emptyFilteredTitle', 'No matching members')}
                </Text>
                <Text fontSize="$xs" color={muted}>
                  {t('events.members.emptyFilteredBody', 'Adjust your search or filters to see members.')}
                </Text>
                <Pressable
                  onPress={() => {
                    setSearch('');
                    setStatusFilter('all');
                    setRoleFilter('all');
                  }}
                >
                  <Text fontSize="$xs" fontWeight="700" color={primary}>
                    {t('events.members.clearFilters', 'Clear filters')}
                  </Text>
                </Pressable>
              </YStack>
            ) : (
              filteredMembers.map((member) => {
                const statusInfo = resolveStatus(member.status);
                return (
                  <MobileCard key={member.id} padding="$3" borderColor={border}>
                    <XStack alignItems="center" justifyContent="space-between">
                      <YStack space="$1">
                        <Text fontSize="$sm" fontWeight="700" color={textStrong}>
                          {member.name || member.email || t('events.members.fallbackName', 'Guest')}
                        </Text>
                        <Text fontSize="$xs" color={muted}>
                          {member.email ?? ''}
                        </Text>
                        <XStack space="$1.5" alignItems="center">
                          <PillBadge tone={statusInfo.tone}>
                            {statusInfo.label}
                          </PillBadge>
                          <PillBadge tone={member.role === 'tenant_admin' ? 'success' : 'muted'}>
                            {member.role === 'tenant_admin'
                              ? t('events.members.admin', 'Admin')
                              : t('events.members.member', 'Member')}
                          </PillBadge>
                        </XStack>
                      </YStack>
                      <XStack space="$2">
                        <Pressable
                          aria-label={t('events.members.copyEmailLabel', 'Copy email')}
                          onPress={async () => {
                            if (!member.email) {
                              toast.error(t('events.members.copyEmailFailed', 'Kopieren nicht möglich'));
                              return;
                            }
                            try {
                              await navigator.clipboard.writeText(member.email);
                              toast.success(t('events.members.copyEmail', 'E-Mail kopiert'));
                            } catch {
                              toast.error(t('events.members.copyEmailFailed', 'Kopieren nicht möglich'));
                            }
                          }}
                        >
                          <Copy size={16} color={muted} />
                        </Pressable>
                        <Pressable aria-label={t('events.members.remove', 'Remove')} onPress={() => setConfirmRemove(member)}>
                          <Trash2 size={16} color={danger} />
                        </Pressable>
                      </XStack>
                    </XStack>
                  </MobileCard>
                );
              })
            )}
          </YStack>
        )}
      </MobileCard>

      <MobileSheet
        open={Boolean(confirmRemove)}
        onClose={() => setConfirmRemove(null)}
        title={t('events.members.confirmRemove', 'Mitglied entfernen?')}
        footer={
          <CTAButton
            label={t('events.members.remove', 'Remove')}
            onPress={() => {
              if (confirmRemove) {
                void handleRemove(confirmRemove);
              }
              setConfirmRemove(null);
            }}
          />
        }
        bottomOffsetPx={120}
      >
        <Text fontSize={12.5} color={muted}>
          {t('events.members.removeHint', 'Dieses Mitglied verliert den Zugang zum Event.')}
        </Text>
        <Text fontSize={13} fontWeight="700" color={textStrong}>
          {confirmRemove?.name || confirmRemove?.email}
        </Text>
      </MobileSheet>
    </MobileShell>
  );
}