import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { DraftActions } from './DraftActions';
import { ThumbsUp, ThumbsDown, Copy } from 'lucide-react';
import type { Draft } from '@/lib/db/draft-service';

// Mock chat store to provide currentDraft for CopyButton rendering
vi.mock('@/lib/store/chat-store', () => ({
  useChatStore: vi.fn(),
}));

import { useChatStore } from '@/lib/store/chat-store';

describe('DraftActions', () => {
  const mockDraft: Draft = {
    id: 1,
    sessionId: 'session-1',
    title: 'Test Draft',
    content: '# Test Draft\n\nThis is test content.',
    tags: ['test'],
    createdAt: Date.now(),
    status: 'draft',
  };

  const mockState = {
    currentDraft: mockDraft,
    startRefinement: vi.fn().mockResolvedValue(undefined),
    copyDraftToClipboard: vi.fn().mockResolvedValue(true),
  };

  beforeEach(() => {
    vi.clearAllMocks();
    // Mock useChatStore to return currentDraft for CopyButton tests
    (useChatStore as vi.Mock).mockImplementation((selector) => {
      return selector(mockState);
    });
  });
  it('renders Thumbs Up and Thumbs Down buttons', () => {
    render(
      <DraftActions
        onApprove={vi.fn()}
        onReject={vi.fn()}
      />
    );

    expect(screen.getByRole('button', { name: /approve, copy to clipboard, and mark as completed/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /request changes/i })).toBeInTheDocument();
  });

  it('calls onApprove when Thumbs Up is clicked', () => {
    const handleApprove = vi.fn();

    render(
      <DraftActions
        onApprove={handleApprove}
        onReject={vi.fn()}
      />
    );

    const approveButton = screen.getByRole('button', { name: /approve, copy to clipboard, and mark as completed/i });
    fireEvent.click(approveButton);

    expect(handleApprove).toHaveBeenCalledTimes(1);
  });

  it('calls onReject when Thumbs Down is clicked', () => {
    const handleReject = vi.fn();

    render(
      <DraftActions
        onApprove={vi.fn()}
        onReject={handleReject}
      />
    );

    const rejectButton = screen.getByRole('button', { name: /request changes/i });
    fireEvent.click(rejectButton);

    expect(handleReject).toHaveBeenCalledTimes(1);
  });

  it('renders Thumbs Up button with correct styling', () => {
    render(
      <DraftActions
        onApprove={vi.fn()}
        onReject={vi.fn()}
      />
    );

    const approveButton = screen.getByRole('button', { name: /approve, copy to clipboard, and mark as completed/i });
    expect(approveButton).toHaveClass('bg-slate-800', 'hover:bg-slate-700');
  });

  it('renders Thumbs Down button with outline style', () => {
    render(
      <DraftActions
        onApprove={vi.fn()}
        onReject={vi.fn()}
      />
    );

    const rejectButton = screen.getByRole('button', { name: /request changes/i });
    expect(rejectButton).toHaveClass('border');
  });

  it('has minimum touch target height of 44px', () => {
    render(
      <DraftActions
        onApprove={vi.fn()}
        onReject={vi.fn()}
      />
    );

    const approveButton = screen.getByRole('button', { name: /approve, copy to clipboard, and mark as completed/i });
    const rejectButton = screen.getByRole('button', { name: /request changes/i });

    // Check min-height class
    expect(approveButton).toHaveClass('min-h-[44px]');
    expect(rejectButton).toHaveClass('min-h-[44px]');
  });

  it('renders Thumbs Up and Thumbs Down icons', () => {
    render(
      <DraftActions
        onApprove={vi.fn()}
        onReject={vi.fn()}
      />
    );

    // Check that icons are rendered via lucide-react
    const approveButton = screen.getByRole('button', { name: /approve, copy to clipboard, and mark as completed/i });
    const rejectButton = screen.getByRole('button', { name: /request changes/i });

    // Icons should be present (lucide-react icons are SVG)
    expect(approveButton.querySelector('svg')).toBeInTheDocument();
    expect(rejectButton.querySelector('svg')).toBeInTheDocument();
  });

  it('uses sticky footer positioning', () => {
    const { container } = render(
      <DraftActions
        onApprove={vi.fn()}
        onReject={vi.fn()}
      />
    );

    const footer = container.querySelector('.sticky');
    expect(footer).toBeInTheDocument();
  });

  describe('Story 2.4: Copy Only Button', () => {
    it('does not render Copy Only button when onCopyOnly is not provided', () => {
      render(
        <DraftActions
          onApprove={vi.fn()}
          onReject={vi.fn()}
        />
      );

      expect(screen.queryByRole('button', { name: /copy to clipboard without closing/i })).not.toBeInTheDocument();
    });

    it('renders Copy Only button when onCopyOnly is provided and currentDraft exists', () => {
      render(
        <DraftActions
          onApprove={vi.fn()}
          onReject={vi.fn()}
          onCopyOnly={vi.fn()}
        />
      );

      expect(screen.getByRole('button', { name: /copy to clipboard without closing/i })).toBeInTheDocument();
    });

    it('calls onCopyOnly when Copy Only button is clicked', async () => {
      const handleCopyOnly = vi.fn();

      render(
        <DraftActions
          onApprove={vi.fn()}
          onReject={vi.fn()}
          onCopyOnly={handleCopyOnly}
        />
      );

      const copyOnlyButton = screen.getByRole('button', { name: /copy to clipboard without closing/i });
      fireEvent.click(copyOnlyButton);

      // Wait for async copy operation to complete
      await waitFor(() => {
        expect(handleCopyOnly).toHaveBeenCalledTimes(1);
      });
    });

    it('renders Copy Only button with outline style', () => {
      render(
        <DraftActions
          onApprove={vi.fn()}
          onReject={vi.fn()}
          onCopyOnly={vi.fn()}
        />
      );

      const copyOnlyButton = screen.getByRole('button', { name: /copy to clipboard without closing/i });
      expect(copyOnlyButton).toHaveClass('border');
    });

    it('renders Copy icon in Copy Only button', () => {
      render(
        <DraftActions
          onApprove={vi.fn()}
          onReject={vi.fn()}
          onCopyOnly={vi.fn()}
        />
      );

      const copyOnlyButton = screen.getByRole('button', { name: /copy to clipboard without closing/i });
      expect(copyOnlyButton.querySelector('svg')).toBeInTheDocument();
    });

    it('has minimum touch target height of 44px for Copy Only button', () => {
      render(
        <DraftActions
          onApprove={vi.fn()}
          onReject={vi.fn()}
          onCopyOnly={vi.fn()}
        />
      );

      const copyOnlyButton = screen.getByRole('button', { name: /copy to clipboard without closing/i });
      expect(copyOnlyButton).toHaveClass('min-h-[44px]');
    });

    it('renders all three buttons when onCopyOnly is provided', () => {
      render(
        <DraftActions
          onApprove={vi.fn()}
          onReject={vi.fn()}
          onCopyOnly={vi.fn()}
        />
      );

      // Should have 3 buttons: Not Quite, Just Copy, Approve
      const buttons = screen.getAllByRole('button');
      expect(buttons).toHaveLength(3);
    });
  });
});
