import Pagination from '@design-system/Inputs/Pagination';
import { List } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react';

import {
  type ParticipationItem,
  type ParticipationSegmentFilter,
  SegmentType,
  SortFilter,
} from '../../../types';
import ParticipationListItem from '../ParticipationListItem';

import ParticipationDashboard from '.';

const segments: ParticipationSegmentFilter[] = [
  {
    id: 'all',
    type: SegmentType.SEGMENTATION_GROUPS,
    title: 'Grupos de segmentación',
  },
  { id: 'bosses', type: SegmentType.BOSSES, title: 'Líderes' },
  { id: 'direct', type: SegmentType.DIRECT_BOSS, title: 'Líder directo' },
  { id: 'age', type: SegmentType.AGE, title: 'Edad' },
  { id: 'seniority', type: SegmentType.SENIORITY, title: 'Antigüedad' },
];

const sampleItems: ParticipationItem[] = [
  {
    id: 1,
    title: 'Departamento de Ingeniería',
    subtitle: '50 colaboradores',
    totalReviews: 50,
    completedReviews: 36,
    participationPercentage: 72,
    hasChildren: true,
    childrenAmount: 2,
  },
  {
    id: 2,
    title: 'Departamento de Marketing',
    subtitle: '30 colaboradores',
    totalReviews: 30,
    completedReviews: 28,
    participationPercentage: 93,
    hasChildren: false,
    childrenAmount: 0,
  },
  {
    id: 3,
    title: 'Sin asignación',
    subtitle: null,
    totalReviews: 0,
    completedReviews: 0,
    participationPercentage: 0,
    hasChildren: false,
    childrenAmount: 0,
  },
];

const sampleItemsWithAvatars: ParticipationItem[] = [
  {
    id: 1,
    title: 'Ana García',
    subtitle: 'Ingeniería',
    totalReviews: 50,
    completedReviews: 36,
    participationPercentage: 72,
    hasChildren: false,
    childrenAmount: 0,
    avatarSrc: 'https://i.pravatar.cc/150?img=1',
    avatarAlt: 'Ana García',
  },
  {
    id: 2,
    title: 'Carlos Rodríguez',
    subtitle: 'Marketing',
    totalReviews: 30,
    completedReviews: 28,
    participationPercentage: 93,
    hasChildren: false,
    childrenAmount: 0,
    avatarSrc: 'https://i.pravatar.cc/150?img=3',
    avatarAlt: 'Carlos Rodríguez',
  },
  {
    id: 3,
    title: 'María López',
    subtitle: 'Recursos Humanos',
    totalReviews: 20,
    completedReviews: 10,
    participationPercentage: 50,
    hasChildren: false,
    childrenAmount: 0,
    avatarAlt: 'María López',
  },
  {
    id: 4,
    title: 'Sin asignación',
    subtitle: null,
    totalReviews: 0,
    completedReviews: 0,
    participationPercentage: 0,
    hasChildren: false,
    childrenAmount: 0,
  },
];

const meta: Meta<typeof ParticipationDashboard> = {
  title:
    'Composed Components/PeopleExperience/SurveyResults/Participation/ParticipationDashboard',
  component: ParticipationDashboard,
  parameters: {
    layout: 'padded',
  },
  args: {
    segments,
    selectedSegment: segments[0],
    onSegmentChange: () => {},
    sortOrder: SortFilter.ASC,
    onSortChange: () => {},
    items: sampleItems,
    noDataMessage: 'Sin datos suficientes',
    emptyState: {
      title: 'Sin resultados',
      description: 'No se encontraron participantes para esta selección.',
    },
    formatRatioLabel: (completed, total) => `${completed} / ${total}`,
    paginationController: null,
    labels: {
      showBy: 'Mostrar según',
      ascending: 'Ascendente',
      descending: 'Descendente',
      searchPlaceholder: 'Buscar...',
    },
  },
};

export default meta;

type Story = StoryObj<typeof ParticipationDashboard>;

export const Default: Story = {};

export const WithSortAndSearch: Story = {
  args: {
    showSort: true,
    showSearch: true,
    searchQuery: '',
    onSearchChange: () => {},
    renderChildren: (item: ParticipationItem, isExpanded: boolean) =>
      isExpanded ? (
        <List disablePadding>
          <ParticipationListItem
            primary={`Sub-equipo A — ${item.title}`}
            secondary="15 colaboradores"
            value={80}
            ratioLabel="12 / 15"
            noDataMessage="Sin datos"
            isEmpty={false}
            depth={1}
            expandable
          >
            {(isSubExpanded: boolean) =>
              isSubExpanded ? (
                <List disablePadding>
                  <ParticipationListItem
                    primary="Turno mañana"
                    secondary="8 colaboradores"
                    value={100}
                    ratioLabel="8 / 8"
                    noDataMessage="Sin datos"
                    isEmpty={false}
                    depth={2}
                  />
                  <ParticipationListItem
                    primary="Turno tarde"
                    secondary="7 colaboradores"
                    value={57}
                    ratioLabel="4 / 7"
                    noDataMessage="Sin datos"
                    isEmpty={false}
                    depth={2}
                  />
                </List>
              ) : null
            }
          </ParticipationListItem>
          <ParticipationListItem
            primary={`Sub-equipo B — ${item.title}`}
            secondary="10 colaboradores"
            value={50}
            ratioLabel="5 / 10"
            noDataMessage="Sin datos"
            isEmpty={false}
            depth={1}
            isLastItem
          />
        </List>
      ) : null,
  },
};

export const Loading: Story = {
  args: {
    isLoading: true,
    items: undefined,
  },
};

export const Empty: Story = {
  args: {
    items: [],
  },
};

export const WithPagination: Story = {
  args: {
    showSort: true,
    paginationController: (
      <Pagination
        page={1}
        totalPages={3}
        limit={10}
        limitOptions={[10, 20, 30]}
        onChangePage={() => {}}
        onChangeLimit={() => {}}
      />
    ),
  },
};

export const WithAvatars: Story = {
  args: {
    items: sampleItemsWithAvatars,
  },
};
