import {
  Icon,
  ICON_CATALOG,
  ICON_SECTIONS,
  STATUS_CATALOG,
  STATUS_INDICATORS,
  ICON_COLOR_TOKENS,
  HEROICON_COMPONENT_NAMES,
  ICON_VARIANTS,
} from './Icon';

export default {
  title: 'Atoms/Icon',
  component: Icon,
  tags: ['autodocs'],
  argTypes: {
    name: {
      control: 'select',
      options: [...ICON_CATALOG, ...STATUS_CATALOG],
    },
    variant: {
      control: 'select',
      options: ICON_VARIANTS,
    },
    color: {
      control: 'select',
      options: ICON_COLOR_TOKENS,
    },
    size: {
      control: { type: 'number', min: 12, max: 64, step: 4 },
    },
  },
};

export const Playground = {
  args: {
    name: 'home',
    variant: '24-outline',
    color: 'gray-600',
    size: 32,
    className: '',
  },
};

export const IconGallery = {
  render: () => (
    <div className="space-y-10">
      {Object.entries(ICON_SECTIONS).map(([section, icons]) => (
        <div key={section}>
          <p className="text-body-md font-semibold uppercase tracking-wide text-gray-500 mb-4">
            {section.replace('-', ' ')}
          </p>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            {icons.map(({ name }) => (
              <div
                key={name}
                className="flex flex-col items-center gap-2 rounded-lg border border-gray-100 bg-white p-4 shadow-sm"
              >
                <Icon name={name} size={32} className="text-gray-800" />
                <code className="text-xs font-medium text-gray-600">{name}</code>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  ),
};

export const StatusIndicators = {
  render: () => {
    const grouped = STATUS_INDICATORS.reduce((acc, item) => {
      acc[item.group] = acc[item.group] || [];
      acc[item.group].push(item);
      return acc;
    }, {});

    return (
      <div className="space-y-8">
        {Object.entries(grouped).map(([group, items]) => (
          <div key={group}>
            <p className="text-body-md font-medium capitalize text-gray-700 mb-3">{group}</p>
            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
              {items.map((indicator) => (
                <div
                  key={indicator.id}
                  className="flex flex-col items-center gap-2 rounded-lg border border-gray-100 bg-white p-3 text-center shadow-sm"
                >
                  <Icon name={indicator.id} size={18} />
                  <code className="text-[11px] text-gray-600 leading-tight">{indicator.id}</code>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  },
};

export const HeroiconsFullCatalog = {
  render: () => (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
      {HEROICON_COMPONENT_NAMES.map((iconName) => (
        <div
          key={iconName}
          className="flex flex-col items-center gap-2 rounded-lg border border-gray-100 bg-white p-4 shadow-sm"
        >
          <Icon name={iconName} size={28} className="text-gray-800" />
          <code className="text-[11px] font-medium text-gray-600">{iconName}</code>
        </div>
      ))}
    </div>
  ),
};
