import { Grid } from './Grid';
import { Typography } from '../../Atoms/Typography/Typography';

const MOBILE_GRID_CONFIGS = [
  {
    columns: 2,
    margin: '20px / 1.25rem',
    gutter: '20px / 1.25rem',
  },
  {
    columns: 3,
    margin: '20px / 1.25rem',
    gutter: '20px / 1.25rem',
  },
  {
    columns: 4,
    margin: '20px / 1.25rem',
    gutter: '16px / 1rem',
  },
  {
    columns: 8,
    margin: '20px / 1.25rem',
    gutter: '12px / 0.75rem',
  },
];

const DESKTOP_GRID_CONFIGS = [
  {
    columns: 2,
    margin: '64px / 4rem',
    gutter: '32px / 2rem',
  },
  {
    columns: 3,
    margin: '64px / 4rem',
    gutter: '32px / 2rem',
  },
  {
    columns: 4,
    margin: '64px / 4rem', // Estandarizado: margin uniforme para layouts amplios
    gutter: '32px / 2rem',
  },
  {
    columns: 8,
    margin: '32px / 2rem',
    gutter: '24px / 1.5rem',
  },
];

const DESKTOP_LG_GRID_CONFIGS = [
  {
    columns: 12,
    margin: '32px / 2rem',
    gutter: '20px / 1.25rem',
  },
  {
    columns: 16,
    margin: '32px / 2rem',
    gutter: '20px / 1.25rem',
  },
];

const GridItem = ({ children, index }) => (
  <div className="bg-gray-100 rounded-lg p-4 border border-gray-200 flex items-center justify-center min-h-[80px]">
    <Typography variant="body-sm" className="color-gray-700 text-center">
      {children || `Item ${index + 1}`}
    </Typography>
  </div>
);

export default {
  title: 'Layout/Grid',
  component: Grid,
  tags: ['autodocs'],
  argTypes: {
    columns: {
      control: 'select',
      options: [2, 3, 4, 8, 12, 16],
      description: 'Número de columnas de la grilla',
    },
    variant: {
      control: 'select',
      options: ['mobile', 'desktop', 'desktop-lg'],
      description: 'Variante de breakpoint para la grilla',
    },
  },
};

export const Playground = {
  args: {
    columns: 2,
    children: (
      <>
        <GridItem>Item 1</GridItem>
        <GridItem>Item 2</GridItem>
        <GridItem>Item 3</GridItem>
        <GridItem>Item 4</GridItem>
      </>
    ),
  },
};

export const MobileGrids = {
  render: () => (
    <div className="space-y-12 p-6">
      <div>
        <Typography variant="h3" className="color-gray-900 mb-4">
          Sistema de Grillas - Mobile
        </Typography>
        <Typography variant="body-md" className="color-gray-600 mb-6">
          Configuraciones de grilla disponibles para dispositivos móviles (0-480px).
        </Typography>
      </div>

      {MOBILE_GRID_CONFIGS.map((config) => (
        <div key={config.columns} className="space-y-4">
          <div className="bg-white rounded-lg border-2 border-gray-200 p-6 shadow-sm">
            <div className="mb-4">
              <Typography variant="h5" className="color-gray-900 mb-2">
                {config.columns} Columnas
              </Typography>
              <div className="space-y-1 text-body-sm color-gray-600">
                <div>
                  <strong>Margins:</strong> {config.margin}
                </div>
                <div>
                  <strong>Gutter:</strong> {config.gutter}
                </div>
                <div className="mt-3">
                  <code className="bg-gray-100 px-2 py-1 rounded color-gray-900">
                    .grid-mobile-{config.columns}
                  </code>
                </div>
              </div>
            </div>

            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
              <div className="mb-2 text-body-sm color-gray-600">
                <strong>Nota:</strong> Esta grilla solo se aplica en viewports de 0px - 480px. 
                Ajusta el tamaño de la ventana o usa el selector de viewport de Storybook.
              </div>
              <Grid columns={config.columns} variant="mobile">
                {Array.from({ length: config.columns }).map((_, i) => (
                  <GridItem key={i} index={i}>
                    Columna {i + 1}
                  </GridItem>
                ))}
              </Grid>
            </div>
          </div>
        </div>
      ))}
    </div>
  ),
};

export const DesktopGrids = {
  render: () => (
    <div className="space-y-12 p-6">
      <div>
        <Typography variant="h3" className="color-gray-900 mb-4">
          Sistema de Grillas - Desktop (Small/Medium)
        </Typography>
        <Typography variant="body-md" className="color-gray-600 mb-6">
          Configuraciones de grilla disponibles para desktop pequeño/mediano (769px - 1440px).
        </Typography>
      </div>

      {DESKTOP_GRID_CONFIGS.map((config) => (
        <div key={config.columns} className="space-y-4">
          <div className="bg-white rounded-lg border-2 border-gray-200 p-6 shadow-sm">
            <div className="mb-4">
              <Typography variant="h5" className="color-gray-900 mb-2">
                {config.columns} Columnas
              </Typography>
              <div className="space-y-1 text-body-sm color-gray-600">
                <div>
                  <strong>Margins:</strong> {config.margin}
                </div>
                <div>
                  <strong>Gutter:</strong> {config.gutter}
                </div>
                <div className="mt-3">
                  <code className="bg-gray-100 px-2 py-1 rounded color-gray-900">
                    .grid-desktop-{config.columns}
                  </code>
                </div>
              </div>
            </div>

            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
              <div className="mb-2 text-body-sm color-gray-600">
                <strong>Nota:</strong> Esta grilla solo se aplica en viewports de 769px - 1440px. 
                Ajusta el tamaño de la ventana o usa el selector de viewport de Storybook.
              </div>
              <Grid columns={config.columns} variant="desktop">
                {Array.from({ length: config.columns }).map((_, i) => (
                  <GridItem key={i} index={i}>
                    Columna {i + 1}
                  </GridItem>
                ))}
              </Grid>
            </div>
          </div>
        </div>
      ))}
    </div>
  ),
};

export const DesktopLargeGrids = {
  render: () => (
    <div className="space-y-12 p-6">
      <div>
        <Typography variant="h3" className="color-gray-900 mb-4">
          Sistema de Grillas - Desktop (Large)
        </Typography>
        <Typography variant="body-md" className="color-gray-600 mb-6">
          Configuraciones de grilla disponibles para desktop grande (1441px+).
        </Typography>
      </div>

      {DESKTOP_LG_GRID_CONFIGS.map((config) => (
        <div key={config.columns} className="space-y-4">
          <div className="bg-white rounded-lg border-2 border-gray-200 p-6 shadow-sm">
            <div className="mb-4">
              <Typography variant="h5" className="color-gray-900 mb-2">
                {config.columns} Columnas
              </Typography>
              <div className="space-y-1 text-body-sm color-gray-600">
                <div>
                  <strong>Margins:</strong> {config.margin}
                </div>
                <div>
                  <strong>Gutter:</strong> {config.gutter}
                </div>
                <div className="mt-3">
                  <code className="bg-gray-100 px-2 py-1 rounded color-gray-900">
                    .grid-desktop-lg-{config.columns}
                  </code>
                </div>
              </div>
            </div>

            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
              <div className="mb-2 text-body-sm color-gray-600">
                <strong>Nota:</strong> Esta grilla solo se aplica en viewports de 1441px+. 
                Ajusta el tamaño de la ventana o usa el selector de viewport de Storybook.
              </div>
              <Grid columns={config.columns} variant="desktop-lg">
                {Array.from({ length: config.columns }).map((_, i) => (
                  <GridItem key={i} index={i}>
                    Columna {i + 1}
                  </GridItem>
                ))}
              </Grid>
            </div>
          </div>
        </div>
      ))}
    </div>
  ),
};

export const GridSpecifications = {
  render: () => (
    <div className="space-y-6 p-6">
      <div>
        <Typography variant="h4" className="color-gray-900 mb-4">
          Especificaciones de Grillas
        </Typography>
        <Typography variant="body-md" className="color-gray-600 mb-6">
          Detalles técnicos de cada configuración de grilla por breakpoint.
        </Typography>
      </div>

      <div className="space-y-8">
        <div>
          <Typography variant="h5" className="color-gray-900 mb-4">
            Mobile (0-480px)
          </Typography>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {MOBILE_GRID_CONFIGS.map((config) => (
              <div
                key={config.columns}
                className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm"
              >
                <Typography variant="h6" className="color-gray-900 mb-4">
                  {config.columns} Columnas
                </Typography>
                <div className="space-y-3">
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Columnas:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.columns}
                    </Typography>
                  </div>
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Margins:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.margin}
                    </Typography>
                  </div>
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Gutter:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.gutter}
                    </Typography>
                  </div>
                  <div className="mt-4 pt-3 border-t border-gray-200">
                    <Typography variant="body-sm" className="color-gray-600 mb-2">
                      Clase CSS:
                    </Typography>
                    <code className="block bg-gray-100 p-3 rounded text-body-sm color-gray-900">
                      .grid-mobile-{config.columns}
                    </code>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <Typography variant="h5" className="color-gray-900 mb-4">
            Desktop Small/Medium (769px - 1440px)
          </Typography>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {DESKTOP_GRID_CONFIGS.map((config) => (
              <div
                key={config.columns}
                className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm"
              >
                <Typography variant="h6" className="color-gray-900 mb-4">
                  {config.columns} Columnas
                </Typography>
                <div className="space-y-3">
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Columnas:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.columns}
                    </Typography>
                  </div>
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Margins:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.margin}
                    </Typography>
                  </div>
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Gutter:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.gutter}
                    </Typography>
                  </div>
                  <div className="mt-4 pt-3 border-t border-gray-200">
                    <Typography variant="body-sm" className="color-gray-600 mb-2">
                      Clase CSS:
                    </Typography>
                    <code className="block bg-gray-100 p-3 rounded text-body-sm color-gray-900">
                      .grid-desktop-{config.columns}
                    </code>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <Typography variant="h5" className="color-gray-900 mb-4">
            Desktop Large (1441px+)
          </Typography>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {DESKTOP_LG_GRID_CONFIGS.map((config) => (
              <div
                key={config.columns}
                className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm"
              >
                <Typography variant="h6" className="color-gray-900 mb-4">
                  {config.columns} Columnas
                </Typography>
                <div className="space-y-3">
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Columnas:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.columns}
                    </Typography>
                  </div>
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Margins:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.margin}
                    </Typography>
                  </div>
                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
                    <Typography variant="body-sm" className="color-gray-600">
                      Gutter:
                    </Typography>
                    <Typography variant="body-sm" className="color-gray-900 font-medium">
                      {config.gutter}
                    </Typography>
                  </div>
                  <div className="mt-4 pt-3 border-t border-gray-200">
                    <Typography variant="body-sm" className="color-gray-600 mb-2">
                      Clase CSS:
                    </Typography>
                    <code className="block bg-gray-100 p-3 rounded text-body-sm color-gray-900">
                      .grid-desktop-lg-{config.columns}
                    </code>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  ),
};

export const CSSVariables = {
  render: () => (
    <div className="space-y-6 p-6">
      <div>
        <Typography variant="h4" className="color-gray-900 mb-4">
          Variables CSS Disponibles
        </Typography>
        <Typography variant="body-md" className="color-gray-600 mb-6">
          Variables CSS que puedes usar para personalizar las grillas.
        </Typography>
      </div>

      <div className="space-y-6">
        <div>
          <Typography variant="h5" className="color-gray-900 mb-4">
            Mobile
          </Typography>
          <div className="bg-gray-50 rounded-lg p-6 space-y-4">
            {MOBILE_GRID_CONFIGS.map((config) => (
              <div key={config.columns} className="bg-white rounded p-4 border border-gray-200">
                <Typography variant="h6" className="color-gray-900 mb-3">
                  Grid Mobile {config.columns} Columnas
                </Typography>
                <code className="block text-body-sm color-gray-900 whitespace-pre">
{`--grid-mobile-${config.columns}-columns: ${config.columns};
--grid-mobile-${config.columns}-margin: ${config.margin.split(' / ')[1]};
--grid-mobile-${config.columns}-gutter: ${config.gutter.split(' / ')[1]};`}
                </code>
              </div>
            ))}
          </div>
        </div>

        <div>
          <Typography variant="h5" className="color-gray-900 mb-4">
            Desktop (Small/Medium)
          </Typography>
          <div className="bg-gray-50 rounded-lg p-6 space-y-4">
            {DESKTOP_GRID_CONFIGS.map((config) => (
              <div key={config.columns} className="bg-white rounded p-4 border border-gray-200">
                <Typography variant="h6" className="color-gray-900 mb-3">
                  Grid Desktop {config.columns} Columnas
                </Typography>
                <code className="block text-body-sm color-gray-900 whitespace-pre">
{`--grid-desktop-${config.columns}-columns: ${config.columns};
--grid-desktop-${config.columns}-margin: ${config.margin.split(' / ')[1]};
--grid-desktop-${config.columns}-gutter: ${config.gutter.split(' / ')[1]};`}
                </code>
              </div>
            ))}
          </div>
        </div>

        <div>
          <Typography variant="h5" className="color-gray-900 mb-4">
            Desktop Large
          </Typography>
          <div className="bg-gray-50 rounded-lg p-6 space-y-4">
            {DESKTOP_LG_GRID_CONFIGS.map((config) => (
              <div key={config.columns} className="bg-white rounded p-4 border border-gray-200">
                <Typography variant="h6" className="color-gray-900 mb-3">
                  Grid Desktop Large {config.columns} Columnas
                </Typography>
                <code className="block text-body-sm color-gray-900 whitespace-pre">
{`--grid-desktop-lg-${config.columns}-columns: ${config.columns};
--grid-desktop-lg-${config.columns}-margin: ${config.margin.split(' / ')[1]};
--grid-desktop-lg-${config.columns}-gutter: ${config.gutter.split(' / ')[1]};`}
                </code>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="bg-blue-50 rounded-lg p-6 border border-blue-200">
        <Typography variant="h6" className="color-blue-900 mb-3">
          Ejemplo de uso:
        </Typography>
        <code className="block bg-white p-4 rounded border border-blue-200 text-body-sm color-gray-900 whitespace-pre">
{`<Grid columns={2} variant="mobile">
  <div>Item 1</div>
  <div>Item 2</div>
</Grid>

<Grid columns={4} variant="desktop">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Grid>

/* O usando las clases directamente */
<div className="grid-mobile-2">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div className="grid-desktop-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>`}
        </code>
      </div>
    </div>
  ),
};

