import { Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import {
  mockDataWithNulls,
  mockHighScoresData,
  mockLowScoresData,
  mockScoresData,
  mockScoresDataWithNulls,
  mockTotalsData,
} from '../../../../mock/data/people-experience/heatmap';
import DropdownList from '../DropdownList';
import { DataSource, ScoreType, SegmentType } from '../types';

import Heatmap from './index';

// Componente mock de SegmentSelect
const MockSegmentSelect = ({
  onChange,
  value,
}: {
  onChange: (value: any) => void;
  value: any;
}) => {
  const segmentOptions = [
    {
      id: SegmentType.SEGMENTATION_GROUPS,
      name: 'Grupos de Segmentación',
    },
    {
      id: SegmentType.BOSSES,
      name: 'Jefaturas',
    },
    {
      id: SegmentType.DIRECT_BOSS,
      name: 'Jefe Directo',
    },
  ];

  return (
    <DropdownList
      options={segmentOptions}
      value={value}
      onChange={onChange}
    />
  );
};

const meta: Meta<typeof Heatmap> = {
  component: Heatmap,
  title: 'Composed Components/PeopleExperience/Heatmap',
  tags: ['autodocs'],
  decorators: [
    Story => (
      <Stack sx={{ height: '800px' }}>
        <Story />
      </Stack>
    ),
  ],
  args: {
    totalsData: mockTotalsData,
    scoresData: mockScoresData,
    loading: false,
    SegmentSelect: MockSegmentSelect,
    scoreSelectDisabled: false,
    defaultFilters: {
      dataSource: DataSource.TOPICS,
      scoreType: {
        id: ScoreType.SCORE,
        name: 'Puntaje',
      },
      segment: {
        id: SegmentType.SEGMENTATION_GROUPS,
        name: 'Grupos de Segmentación',
      },
      parentId: null,
    },
    onFiltersChange: () => {},
  },
};

export default meta;

type Story = StoryObj<typeof Heatmap>;

export const Default: Story = {
  args: {},
};

export const ShowingDifferences: Story = {
  args: {
    defaultFilters: {
      dataSource: DataSource.TOPICS,
      scoreType: {
        id: ScoreType.DIFFERENCE,
        name: 'Diferencia',
      },
      segment: {
        id: SegmentType.SEGMENTATION_GROUPS,
        name: 'Grupos de Segmentación',
      },
      parentId: null,
    },
  },
};

export const QuestionsView: Story = {
  args: {
    defaultFilters: {
      dataSource: DataSource.QUESTIONS,
      scoreType: {
        id: ScoreType.SCORE,
        name: 'Puntaje',
      },
      segment: {
        id: SegmentType.SEGMENTATION_GROUPS,
        name: 'Grupos de Segmentación',
      },
      parentId: null,
    },
  },
};

export const BossesSegment: Story = {
  args: {
    defaultFilters: {
      dataSource: DataSource.TOPICS,
      scoreType: {
        id: ScoreType.SCORE,
        name: 'Puntaje',
      },
      segment: {
        id: SegmentType.BOSSES,
        name: 'Jefaturas',
      },
      parentId: null,
    },
  },
};

export const Loading: Story = {
  args: {
    loading: true,
    totalsData: undefined,
    scoresData: undefined,
  },
};

export const WithScoreSelectDisabled: Story = {
  args: {
    scoreSelectDisabled: true,
  },
};

export const WithNullData: Story = {
  args: {
    totalsData: mockDataWithNulls,
    scoresData: mockScoresDataWithNulls,
  },
};

export const RestrictedToParent: Story = {
  args: {
    restrictToParentId: 2,
    defaultFilters: {
      dataSource: DataSource.TOPICS,
      scoreType: {
        id: ScoreType.SCORE,
        name: 'Puntaje',
      },
      segment: {
        id: SegmentType.BOSSES,
        name: 'Jefaturas',
      },
      parentId: 2,
    },
  },
};

export const LowScores: Story = {
  args: {
    scoresData: mockLowScoresData,
  },
  parameters: {
    docs: {
      description: {
        story:
          'Visualización de puntajes bajos (0.25-0.35) para identificar áreas críticas que necesitan mejora urgente.',
      },
    },
  },
};

export const HighScores: Story = {
  args: {
    scoresData: mockHighScoresData,
  },
  parameters: {
    docs: {
      description: {
        story:
          'Visualización de puntajes altos (0.85-0.95) que representan áreas de excelencia en la organización.',
      },
    },
  },
};

export const LowScoresDifferences: Story = {
  args: {
    scoresData: mockLowScoresData,
    defaultFilters: {
      dataSource: DataSource.TOPICS,
      scoreType: {
        id: ScoreType.DIFFERENCE,
        name: 'Diferencia',
      },
      segment: {
        id: SegmentType.SEGMENTATION_GROUPS,
        name: 'Grupos de Segmentación',
      },
      parentId: null,
    },
  },
  parameters: {
    docs: {
      description: {
        story:
          'Vista de diferencias en puntajes bajos para analizar tendencias de mejora o deterioro.',
      },
    },
  },
};

export const HighScoresDifferences: Story = {
  args: {
    scoresData: mockHighScoresData,
    defaultFilters: {
      dataSource: DataSource.TOPICS,
      scoreType: {
        id: ScoreType.DIFFERENCE,
        name: 'Diferencia',
      },
      segment: {
        id: SegmentType.SEGMENTATION_GROUPS,
        name: 'Grupos de Segmentación',
      },
      parentId: null,
    },
  },
  parameters: {
    docs: {
      description: {
        story:
          'Vista de diferencias en puntajes altos para monitorear el mantenimiento de la excelencia.',
      },
    },
  },
};