import React from 'react';
import '@testing-library/jest-dom';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import Settings from './Settings';

describe('Settings Component', () => {
    beforeEach(() => {
        vi.resetAllMocks();
        global.fetch = vi.fn();
        // Mock confirm
        global.confirm = vi.fn(() => true);
    });

    it('renders feed list', async () => {
        const mockFeeds = [
            { _id: 1, title: 'Tech News', url: 'http://tech.com/rss', category: 'tech' },
            { _id: 2, title: 'Gaming', url: 'http://gaming.com/rss', category: 'gaming' },
        ];

        (global.fetch as any).mockResolvedValueOnce({
            ok: true,
            json: async () => mockFeeds,
        });

        render(<Settings />);

        await waitFor(() => {
            expect(screen.getByText('Tech News')).toBeInTheDocument();
            expect(screen.getByText('http://tech.com/rss')).toBeInTheDocument();
            expect(screen.getByText('Gaming')).toBeInTheDocument();
        });
    });

    it('adds a new feed', async () => {
        (global.fetch as any)
            .mockResolvedValueOnce({ ok: true, json: async () => [] }) // Initial load
            .mockResolvedValueOnce({ ok: true, json: async () => ({}) }) // Add feed
            .mockResolvedValueOnce({ ok: true, json: async () => [{ _id: 3, title: 'New Feed', url: 'http://new.com/rss' }] }); // Refresh load

        render(<Settings />);

        // Wait for initial load to finish
        await waitFor(() => {
            expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
        });

        const input = screen.getByPlaceholderText('https://example.com/feed.xml');
        const button = screen.getByText('Add Feed');

        fireEvent.change(input, { target: { value: 'http://new.com/rss' } });
        fireEvent.click(button);

        await waitFor(() => {
            expect(global.fetch).toHaveBeenCalledWith('/api/feed/', expect.objectContaining({
                method: 'POST',
                body: JSON.stringify({ url: 'http://new.com/rss' }),
            }));
        });

        // Wait for refresh
        await waitFor(() => {
            expect(screen.getByText('New Feed')).toBeInTheDocument();
        });
    });

    it('deletes a feed', async () => {
        const mockFeeds = [
            { _id: 1, title: 'Tech News', url: 'http://tech.com/rss', category: 'tech' },
        ];

        (global.fetch as any)
            .mockResolvedValueOnce({ ok: true, json: async () => mockFeeds }) // Initial load
            .mockResolvedValueOnce({ ok: true }); // Delete

        render(<Settings />);

        await waitFor(() => {
            expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
            expect(screen.getByText('Tech News')).toBeInTheDocument();
        });

        const deleteBtn = screen.getByTitle('Delete Feed');
        fireEvent.click(deleteBtn);

        await waitFor(() => {
            expect(global.confirm).toHaveBeenCalled();
            expect(global.fetch).toHaveBeenCalledWith('/api/feed/1', expect.objectContaining({ method: 'DELETE' }));
            expect(screen.queryByText('Tech News')).not.toBeInTheDocument();
        });
    });
});
