import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import ChartCard from '@/components/charts/ChartCard';
import type { ChartTab, LegendToggle } from '@/components/charts/ChartCard';

describe('ChartCard', () => {
  describe('tabbed mode', () => {
    const tabs: ChartTab[] = [
      { key: 'tab1', label: 'Total Income', content: <div>Income Content</div> },
      { key: 'tab2', label: 'Total Works', content: <div>Works Content</div> },
      { key: 'tab3', label: 'Operating Status', content: <div>Status Content</div> },
    ];

    it('renders tab buttons when tabs prop is provided', () => {
      render(
        <ChartCard title="Revenue" tabs={tabs}>
          <div>Fallback</div>
        </ChartCard>
      );

      expect(screen.getByText('Total Income')).toBeInTheDocument();
      expect(screen.getByText('Total Works')).toBeInTheDocument();
      expect(screen.getByText('Operating Status')).toBeInTheDocument();
    });

    it('shows first tab content by default', () => {
      render(
        <ChartCard title="Revenue" tabs={tabs}>
          <div>Fallback</div>
        </ChartCard>
      );

      expect(screen.getByText('Income Content')).toBeInTheDocument();
      expect(screen.queryByText('Works Content')).not.toBeInTheDocument();
    });

    it('clicking a tab shows its content', () => {
      render(
        <ChartCard title="Revenue" tabs={tabs}>
          <div>Fallback</div>
        </ChartCard>
      );

      fireEvent.click(screen.getByText('Total Works'));
      expect(screen.getByText('Works Content')).toBeInTheDocument();
      expect(screen.queryByText('Income Content')).not.toBeInTheDocument();
    });
  });

  describe('non-tabbed mode', () => {
    it('renders children directly when no tabs provided', () => {
      render(
        <ChartCard title="Simple Chart">
          <div>Chart Content Here</div>
        </ChartCard>
      );

      expect(screen.getByText('Simple Chart')).toBeInTheDocument();
      expect(screen.getByText('Chart Content Here')).toBeInTheDocument();
    });

    it('renders title as heading', () => {
      render(
        <ChartCard title="My Chart">
          <div>Content</div>
        </ChartCard>
      );

      expect(screen.getByText('My Chart')).toBeInTheDocument();
    });
  });

  describe('legend toggles', () => {
    const legendItems: LegendToggle[] = [
      { key: 'thisYear', label: 'This Year', color: '#c8e600', enabled: true },
      { key: 'lastYear', label: 'Last Year', color: '#a0a0a0', enabled: true },
    ];

    it('renders legend toggle buttons with colored dots', () => {
      render(
        <ChartCard title="Chart" legendItems={legendItems}>
          <div>Content</div>
        </ChartCard>
      );

      expect(screen.getByText('This Year')).toBeInTheDocument();
      expect(screen.getByText('Last Year')).toBeInTheDocument();
    });

    it('clicking legend toggle calls onLegendToggle with the key', () => {
      const onToggle = vi.fn();
      render(
        <ChartCard title="Chart" legendItems={legendItems} onLegendToggle={onToggle}>
          <div>Content</div>
        </ChartCard>
      );

      fireEvent.click(screen.getByText('This Year'));
      expect(onToggle).toHaveBeenCalledWith('thisYear');
    });

    it('disabled legend item has reduced opacity', () => {
      const items: LegendToggle[] = [
        { key: 'disabled', label: 'Disabled Series', color: '#ff0000', enabled: false },
      ];

      render(
        <ChartCard title="Chart" legendItems={items}>
          <div>Content</div>
        </ChartCard>
      );

      const button = screen.getByText('Disabled Series').closest('button');
      expect(button?.className).toContain('opacity-50');
    });
  });
});