import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

vi.mock('@tamagui/stacks', () => ({
  YStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
  XStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
}));

vi.mock('@tamagui/text', () => ({
  SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
}));

vi.mock('@tamagui/button', () => ({
  Button: ({ children, onPress, ...rest }: { children: React.ReactNode; onPress?: () => void }) => (
    <button type="button" onClick={onPress} {...rest}>
      {children}
    </button>
  ),
}));

vi.mock('../components/AppShell', () => ({
  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/shared/guest/components/PullToRefresh', () => ({
  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('../context/EventDataContext', () => ({
  useEventData: () => ({ token: 'demo', tasksEnabled: true }),
}));

vi.mock('../context/GuestIdentityContext', () => ({
  useOptionalGuestIdentity: () => ({ name: 'Alex' }),
}));

vi.mock('@/shared/guest/i18n/useTranslation', () => ({
  useTranslation: () => ({
    t: (key: string, options?: unknown, fallback?: string) => {
      if (typeof fallback === 'string') return fallback;
      if (typeof options === 'string') return options;
      return key;
    },
  }),
}));

vi.mock('@/shared/guest/i18n/LocaleContext', () => ({
  useLocale: () => ({ locale: 'de' }),
}));

vi.mock('../lib/guestTheme', () => ({
  useGuestThemeVariant: vi.fn(() => ({ isDark: false })),
}));

vi.mock('../lib/bento', () => ({
  getBentoSurfaceTokens: () => ({
    borderColor: '#eee',
    borderBottomColor: '#ddd',
    backgroundColor: '#fff',
    shadow: 'none',
  }),
}));

vi.mock('../lib/routes', () => ({
  buildEventPath: (_token: string, path: string) => `/e/demo${path}`,
}));

vi.mock('react-router-dom', () => ({
  useNavigate: () => vi.fn(),
}));

vi.mock('@/shared/guest/lib/localizeTaskLabel', () => ({
  localizeTaskLabel: (value: string | null) => value,
}));

vi.mock('../services/achievementsApi', () => ({
  fetchAchievements: vi.fn().mockResolvedValue({
    summary: { totalPhotos: 12, uniqueGuests: 4, tasksSolved: 2, likesTotal: 30 },
    personal: {
      guestName: 'Alex',
      photos: 3,
      tasks: 1,
      likes: 5,
      badges: [
        { id: 'b1', title: 'First upload', description: 'Upload one photo', earned: true, progress: 1, target: 1 },
      ],
    },
    leaderboards: {
      uploads: [{ guest: 'Sam', photos: 6, likes: 10 }],
      likes: [{ guest: 'Kai', photos: 2, likes: 12 }],
    },
    highlights: {
      topPhoto: {
        photoId: 1,
        guest: 'Sam',
        likes: 10,
        task: 'Smile',
        createdAt: new Date().toISOString(),
        thumbnail: null,
      },
      trendingEmotion: { emotionId: 1, name: 'Joy', count: 8 },
      timeline: [{ date: '2025-01-01', photos: 4, guests: 2 }],
    },
    feed: [
      {
        photoId: 9,
        guest: 'Mia',
        task: 'Dance',
        likes: 3,
        createdAt: new Date().toISOString(),
        thumbnail: null,
      },
    ],
  }),
}));

import AchievementsScreen from '../screens/AchievementsScreen';
import { useGuestThemeVariant } from '../lib/guestTheme';

describe('AchievementsScreen', () => {
  it('renders personal achievements content', async () => {
    render(<AchievementsScreen />);

    expect(await screen.findByText('Badges')).toBeInTheDocument();
    expect(screen.getByText('First upload')).toBeInTheDocument();
    expect(screen.getByText('Upload one photo')).toBeInTheDocument();
  });

  it('uses dark-mode feed row and placeholder styles when dark theme is active', async () => {
    vi.mocked(useGuestThemeVariant).mockReturnValue({ isDark: true });
    const { container } = render(<AchievementsScreen />);

    await userEvent.click(await screen.findByRole('button', { name: 'Feed' }));

    expect(container.querySelector('[backgroundcolor="rgba(255, 255, 255, 0.08)"]')).toBeTruthy();
    expect(container.querySelector('[backgroundcolor="rgba(255, 255, 255, 0.12)"]')).toBeTruthy();
  });
});
