import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

import TimeWindowPicker from './TimeWindowPicker';

const dataRange = { earliest: '2025-01-01', latest: '2025-12-31' };

describe('TimeWindowPicker', () => {
  it('relabels the submit button to signal analyzing the selected period (SC-1)', () => {
    render(
      <TimeWindowPicker
        siteId={'1'}
        dataRange={dataRange}
        currentRun={{
          before_start: '2025-03-01',
          before_end: '2025-03-31',
          after_start: '2025-04-01',
          after_end: '2025-04-30',
        }}
      />,
    );

    // New label — must NOT be the old generic "Run Analysis".
    expect(screen.getByRole('button', { name: /Analyze this period/i })).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: /^Run Analysis$/i })).not.toBeInTheDocument();
  });

  it('pre-populates the date inputs from the currently-displayed run (SC-3)', () => {
    render(
      <TimeWindowPicker
        siteId={'1'}
        dataRange={dataRange}
        currentRun={{
          before_start: '2025-03-01',
          before_end: '2025-03-31',
          after_start: '2025-04-01',
          after_end: '2025-04-30',
        }}
      />,
    );

    // The "Custom" view exposes the date inputs initialized from currentRun.
    fireEvent.click(screen.getByRole('button', { name: /Custom/i }));

    expect((screen.getByLabelText(/Before Start/i) as HTMLInputElement).value).toBe('2025-03-01');
    expect((screen.getByLabelText(/Before End/i) as HTMLInputElement).value).toBe('2025-03-31');
    expect((screen.getByLabelText(/After Start/i) as HTMLInputElement).value).toBe('2025-04-01');
    expect((screen.getByLabelText(/After End/i) as HTMLInputElement).value).toBe('2025-04-30');
  });

  it('shows a "Selected:" preview of the chosen window so the relationship is visible (SC-3)', () => {
    render(
      <TimeWindowPicker
        siteId={'1'}
        dataRange={dataRange}
        currentRun={{
          before_start: '2025-03-01',
          before_end: '2025-03-31',
          after_start: '2025-04-01',
          after_end: '2025-04-30',
        }}
      />,
    );

    // TZ-safe range formatting (formatDateRange uses UTC) — Apr window vs Mar window.
    // Asserting concrete dates guards against the timezone off-by-one regression.
    expect(screen.getByText(/Selected:/i)).toBeInTheDocument();
    expect(screen.getByText(/Apr 1–30, 2025/)).toBeInTheDocument();
    expect(screen.getByText(/Mar 1–31, 2025/)).toBeInTheDocument();
  });

  it('hides the preview + submit button when the window is only partially set (render gate)', () => {
    render(
      <TimeWindowPicker
        siteId={'1'}
        dataRange={dataRange}
        currentRun={{
          before_start: '2025-03-01',
          before_end: '2025-03-31',
          after_start: '2025-04-01',
          after_end: null, // partial window — must NOT render preview/CTA
        }}
      />,
    );

    expect(screen.queryByText(/Selected:/i)).not.toBeInTheDocument();
    expect(
      screen.queryByRole('button', { name: /Analyze this period/i }),
    ).not.toBeInTheDocument();
  });

  it('does not pre-populate or preview when there is no current run', () => {
    render(<TimeWindowPicker siteId={'1'} dataRange={dataRange} currentRun={null} />);

    // No window chosen yet → no preview line, no submit button.
    expect(screen.queryByText(/Selected:/i)).not.toBeInTheDocument();
    expect(
      screen.queryByRole('button', { name: /Analyze this period/i }),
    ).not.toBeInTheDocument();
  });

  it('renders the empty state when no GSC data range is available (empty state)', () => {
    render(
      <TimeWindowPicker
        siteId={'1'}
        dataRange={{ earliest: null, latest: null }}
        currentRun={null}
      />,
    );

    expect(screen.getByText(/No GSC data available yet/i)).toBeInTheDocument();
  });
});