"use client";
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import React from 'react';
import Hero from '../Hero';
import { useSettingsStore } from '../../lib/store/settingsStore';

vi.mock('../../lib/store/settingsStore', () => ({
  useSettingsStore: vi.fn(),
}));

describe('Hero', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders title and description from settingsStore', async () => {
    const mockGetText = vi.fn().mockImplementation((key, fallback) => {
      if (key === 'hero_title') return 'Test Title Line 1\nTest Title Line 2';
      if (key === 'hero_desc') return 'Test Description Text';
      return fallback;
    });

    vi.mocked(useSettingsStore).mockImplementation((selector: (state: { getText: (key: string, fallback: string) => string; isInitialized: boolean }) => unknown) => selector({ getText: mockGetText, isInitialized: true }) as ReturnType<typeof selector>);

    render(<Hero onShopNavigate={vi.fn()} />);

    expect(await screen.findByText('Test Title Line 1')).toBeInTheDocument();
    expect(await screen.findByText('Test Title Line 2')).toBeInTheDocument();
    expect(await screen.findByText('Test Description Text')).toBeInTheDocument();
  });

  it('calls onShopNavigate when "مشاهده محصولات" button is clicked', () => {
    const mockGetText = vi.fn().mockImplementation((_key, fallback) => fallback);
    vi.mocked(useSettingsStore).mockImplementation((selector: (state: { getText: (key: string, fallback: string) => string; isInitialized: boolean }) => unknown) => selector({ getText: mockGetText, isInitialized: true }) as ReturnType<typeof selector>);

    const handleShopNavigate = vi.fn();
    render(<Hero onShopNavigate={handleShopNavigate} />);

    const shopBtn = screen.getByText('مشاهده محصولات');
    fireEvent.click(shopBtn);
    expect(handleShopNavigate).toHaveBeenCalled();
  });
});