import { renderWithProviders as render, screen, fireEvent } from '../../test/render';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { FloatingMediaWrapper } from './FloatingMediaWrapper';
import React from 'react';

// The component reads/writes `xertica-media-player-${playerId}` in localStorage
// to persist the floating window's position/size. Clear it between tests so one
// test's saved state can't leak into another's initial render.
beforeEach(() => {
  localStorage.clear();
});

describe('FloatingMediaWrapper', () => {
  it('renders children inline (no portal) when not floating', () => {
    render(
      <FloatingMediaWrapper isFloating={false} setIsFloating={vi.fn()}>
        <div data-testid="media-content">content</div>
      </FloatingMediaWrapper>
    );
    expect(screen.getByTestId('media-content')).toBeInTheDocument();
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });

  it('renders a placeholder plus a portaled floating player when floating', () => {
    render(
      <FloatingMediaWrapper isFloating={true} setIsFloating={vi.fn()} playerId="basic">
        <div data-testid="media-content">content</div>
      </FloatingMediaWrapper>
    );
    // Placeholder shown in the page flow
    expect(screen.getByText('Reproduzindo em janela flutuante')).toBeInTheDocument();
    // Portaled floating dialog, rendered into document.body
    const dialog = screen.getByRole('dialog');
    expect(dialog).toBeInTheDocument();
    expect(dialog).toHaveAttribute('aria-label', 'Reproduzindo Mídia');
    // Children are rendered once, inside the portal
    expect(screen.getByTestId('media-content')).toBeInTheDocument();
  });

  it('uses the title prop for the dialog aria-label and header text when provided', () => {
    render(
      <FloatingMediaWrapper
        isFloating={true}
        setIsFloating={vi.fn()}
        title="My Podcast"
        playerId="titled"
      >
        <div>content</div>
      </FloatingMediaWrapper>
    );
    expect(screen.getByRole('dialog')).toHaveAttribute('aria-label', 'My Podcast');
    expect(screen.getByText('My Podcast')).toBeInTheDocument();
  });

  it('calls setIsFloating(false) when "Restore to page" is clicked', () => {
    const setIsFloating = vi.fn();
    render(
      <FloatingMediaWrapper isFloating={true} setIsFloating={setIsFloating} playerId="restore">
        <div>content</div>
      </FloatingMediaWrapper>
    );
    fireEvent.click(screen.getByRole('button', { name: 'Restaurar para a página' }));
    expect(setIsFloating).toHaveBeenCalledWith(false);
  });

  it('calls onCloseMedia (preferred over onClose) when the close button is clicked', () => {
    const onClose = vi.fn();
    const onCloseMedia = vi.fn();
    render(
      <FloatingMediaWrapper
        isFloating={true}
        setIsFloating={vi.fn()}
        onClose={onClose}
        onCloseMedia={onCloseMedia}
        playerId="close-both"
      >
        <div>content</div>
      </FloatingMediaWrapper>
    );
    fireEvent.click(screen.getByLabelText('Fechar player'));
    expect(onCloseMedia).toHaveBeenCalledTimes(1);
    expect(onClose).not.toHaveBeenCalled();
  });

  it('falls back to onClose when onCloseMedia is not provided', () => {
    const onClose = vi.fn();
    render(
      <FloatingMediaWrapper
        isFloating={true}
        setIsFloating={vi.fn()}
        onClose={onClose}
        playerId="close-fallback"
      >
        <div>content</div>
      </FloatingMediaWrapper>
    );
    fireEvent.click(screen.getByLabelText('Fechar player'));
    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it('restores position and size from a previously saved localStorage entry', () => {
    localStorage.setItem(
      'xertica-media-player-restore-test',
      JSON.stringify({ position: { x: 42, y: 84 }, size: { width: 400, height: 225 } })
    );
    render(
      <FloatingMediaWrapper isFloating={true} setIsFloating={vi.fn()} playerId="restore-test">
        <div>content</div>
      </FloatingMediaWrapper>
    );
    const dialog = screen.getByRole('dialog');
    expect(dialog).toHaveStyle({
      transform: 'translate(42px, 84px)',
      width: '400px',
      height: '225px',
    });
  });
});