import { colorPalette } from '@src/theme/hugo/colors';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import TreemapChart from '.';

const meta: Meta<typeof TreemapChart> = {
  component: TreemapChart,
  title: 'Composed Components/Charts/TreemapChart',
  tags: ['autodocs'],
  args: {
    data: {
      datasets: [
        {
          label: 'Products',
          tree: [
            { label: 'Product A', value: 45 },
            { label: 'Product B', value: 30 },
            { label: 'Product C', value: 15 },
            { label: 'Product D', value: 10 },
          ],
          key: 'value',
          groups: ['label'],
          spacing: 1,
          borderWidth: 0,
          borderRadius: 4,
          backgroundColor: (ctx: any) => {
            if (!ctx.raw) return colorPalette.newBase.brand[500];
            const colors = [
              colorPalette.newBase.brand[500],
              colorPalette.newBase.purple[500],
              colorPalette.newBase.green[500],
              colorPalette.newBase.skyBlue[500],
            ];
            return colors[ctx.dataIndex % colors.length];
          },
          labels: {
            display: true,
            formatter: (ctx: any) => ctx.raw?.label || '',
            color: '#fff',
            font: { size: 14, weight: 'bold' },
            position: 'top',
          },
        } as any,
      ],
    },
    options: {
      plugins: {
        legend: { display: false },
        tooltip: {
          displayColors: false,
          callbacks: {
            title: (items: any[]) => items[0]?.raw?.label || '',
            label: (item: any) => `Value: ${item.raw?.value || 0}`,
          },
        },
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof TreemapChart>;

export const Default: Story = {
  render: args => <TreemapChart {...args} />,
};

export const WithCustomColors: Story = {
  args: {
    data: {
      datasets: [
        {
          label: 'Departments',
          tree: [
            { label: 'Sales', value: 120 },
            { label: 'Marketing', value: 80 },
            { label: 'Engineering', value: 150 },
            { label: 'Support', value: 50 },
          ],
          key: 'value',
          groups: ['label'],
          spacing: 1,
          borderWidth: 0,
          borderRadius: 4,
          backgroundColor: (ctx: any) => {
            if (!ctx.raw) return colorPalette.newBase.brand[500];
            const colors = [
              colorPalette.newBase.green[500],
              colorPalette.newBase.brand[500],
              colorPalette.newBase.purple[500],
              colorPalette.newBase.skyBlue[500],
            ];
            return colors[ctx.dataIndex];
          },
          labels: {
            display: true,
            formatter: (ctx: any) => ctx.raw?.label || '',
            color: '#fff',
            font: { size: 14, weight: 'bold' },
            position: 'top',
          },
        } as any,
      ],
    },
  },
};

export const LargeDataset: Story = {
  args: {
    data: {
      datasets: [
        {
          label: 'Categories',
          tree: Array.from({ length: 12 }, (_, i) => ({
            label: `Category ${i + 1}`,
            value: Math.floor(Math.random() * 100) + 20,
          })),
          key: 'value',
          groups: ['label'],
          spacing: 1,
          borderWidth: 0,
          borderRadius: 4,
          backgroundColor: (ctx: any) => {
            if (!ctx.raw) return colorPalette.newBase.brand[500];
            const colors = [
              colorPalette.newBase.brand[500],
              colorPalette.newBase.purple[500],
              colorPalette.newBase.green[500],
              colorPalette.newBase.skyBlue[500],
              colorPalette.newBase.sunshine[500],
              colorPalette.newBase.pink[500],
            ];
            return colors[ctx.dataIndex % colors.length];
          },
          labels: {
            display: true,
            formatter: (ctx: any) => ctx.raw?.label || '',
            color: '#fff',
            font: { size: 12, weight: 'bold' },
            position: 'top',
          },
        } as any,
      ],
    },
    options: {
      maintainAspectRatio: false,
    },
  },
};

export const WithPercentageLabels: Story = {
  args: {
    data: {
      datasets: [
        {
          label: 'Products',
          tree: [
            { label: 'Product A', value: 45 },
            { label: 'Product B', value: 30 },
            { label: 'Product C', value: 15 },
            { label: 'Product D', value: 10 },
          ],
          key: 'value',
          groups: ['label'],
          spacing: 1,
          borderWidth: 0,
          borderRadius: 4,
          backgroundColor: (ctx: any) => {
            if (!ctx.raw) return colorPalette.newBase.brand[500];
            const colors = [
              colorPalette.newBase.brand[500],
              colorPalette.newBase.purple[500],
              colorPalette.newBase.green[500],
              colorPalette.newBase.skyBlue[500],
            ];
            return colors[ctx.dataIndex % colors.length];
          },
          labels: {
            display: true,
            formatter: (ctx: any) => {
              if (!ctx.raw) return '';
              const total = 100;
              const percentage = Math.round((ctx.raw.value / total) * 100);
              return `${ctx.raw.label}\n${percentage}%`;
            },
            color: '#fff',
            font: { size: 14, weight: 'bold' },
            position: 'top',
          },
        } as any,
      ],
    },
    options: {
      plugins: {
        tooltip: {
          displayColors: false,
          callbacks: {
            title: (items: any[]) => items[0]?.raw?.label || '',
            label: (item: any) => {
              const total = 100;
              const value = item.raw?.value || 0;
              const percentage = Math.round((value / total) * 100);
              return `${percentage}% (${value})`;
            },
          },
        },
      },
    },
  },
};

export const CompactSpacing: Story = {
  args: {
    data: {
      datasets: [
        {
          label: 'Products',
          tree: [
            { label: 'Product A', value: 45 },
            { label: 'Product B', value: 30 },
            { label: 'Product C', value: 15 },
            { label: 'Product D', value: 10 },
          ],
          key: 'value',
          groups: ['label'],
          spacing: 0,
          borderWidth: 0,
          borderRadius: 4,
          backgroundColor: (ctx: any) => {
            if (!ctx.raw) return colorPalette.newBase.brand[500];
            const colors = [
              colorPalette.newBase.brand[500],
              colorPalette.newBase.purple[500],
              colorPalette.newBase.green[500],
              colorPalette.newBase.skyBlue[500],
            ];
            return colors[ctx.dataIndex % colors.length];
          },
          labels: {
            display: true,
            formatter: (ctx: any) => ctx.raw?.label || '',
            color: '#fff',
            font: { size: 14, weight: 'bold' },
            position: 'top',
          },
        } as any,
      ],
    },
  },
};

export const LargeSpacing: Story = {
  args: {
    data: {
      datasets: [
        {
          label: 'Products',
          tree: [
            { label: 'Product A', value: 45 },
            { label: 'Product B', value: 30 },
            { label: 'Product C', value: 15 },
            { label: 'Product D', value: 10 },
          ],
          key: 'value',
          groups: ['label'],
          spacing: 8,
          borderWidth: 0,
          borderRadius: 4,
          backgroundColor: (ctx: any) => {
            if (!ctx.raw) return colorPalette.newBase.brand[500];
            const colors = [
              colorPalette.newBase.brand[500],
              colorPalette.newBase.purple[500],
              colorPalette.newBase.green[500],
              colorPalette.newBase.skyBlue[500],
            ];
            return colors[ctx.dataIndex % colors.length];
          },
          labels: {
            display: true,
            formatter: (ctx: any) => ctx.raw?.label || '',
            color: '#fff',
            font: { size: 14, weight: 'bold' },
            position: 'top',
          },
        } as any,
      ],
    },
  },
};