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

// Mock event media fetch to avoid network/JSON parse noise
vi.mock('@/features/event/api/getEventMedia', () => ({
  getEventMedia: vi.fn().mockResolvedValue([]),
}));

// Optional: silence console.error noise in this suite
const ce = console.error;
console.error = (...args: any[]) => { /* noop in tests */ };
// restore after suite if needed (here we keep simple)

function makeOutput() {
  // minimal shape the component expects
  return {
    output: {
      linkedin: [{ text: [{ de: 'DE post', en: 'EN post', es: 'ES post' }] }],
      twitter: [{ text: [{ de: 'DE tw', en: 'EN tw', es: 'ES tw' }] }],
      facebook: [{ text: [{ de: 'DE fb', en: 'EN fb', es: 'ES fb' }] }],
      instagram: [{ text: [{ de: 'DE ig', en: 'EN ig', es: 'ES ig' }] }],
    },
    id: 'post-1',
  };
}

describe('PhotoPostWizard presenter', () => {
  it('selects image, types description and generates suggestions -> review', async () => {
    const user = userEvent.setup();

    const onGenerateSocialPosts = vi.fn().mockResolvedValue(makeOutput());

    // pass one image via props to avoid async fetch
    render(
      <PhotoPostWizard
        eventId={"e1"}
        onComplete={() => {}}
        images={[{ id: 'img-prop-1', url: 'https://example.com/img.jpg' }]}
        onGenerateSocialPosts={onGenerateSocialPosts}
      />
    );

    // Select image by clicking the small select hotspot (absolute top-right control)
    const selectControl = document.querySelector('div.absolute.top-1.right-1') as HTMLElement;
    if (selectControl) {
      await user.click(selectControl);
    }

    // Type description
    const desc = screen.getByPlaceholderText(/Was passiert auf dem Foto/i);
    await user.type(desc, 'Kurze Beschreibung');

    // Click "Vorschläge generieren"
    const genBtn = screen.getByRole('button', { name: /Vorschläge generieren/i });
    await user.click(genBtn);

    // After generation, review area should appear with editable textareas
    const textareas = await screen.findAllByRole('textbox');
    expect(textareas.length).toBeGreaterThan(0);
  });
});
