import React from 'react';
import { Breakpoint } from './Breakpoint';
import { Typography } from '../../Atoms/Typography/Typography';

const BREAKPOINTS = [
  {
    name: 'Mobile',
    key: 'breakpoint-sm',
    range: '0 - 480px',
    example: '412px',
    selected: true,
  },
  {
    name: 'Tablet',
    key: 'breakpoint-md',
    range: '481 - 768px',
    example: '768px',
    selected: false,
  },
  {
    name: 'Small/Medium Desktop',
    key: 'breakpoint-base',
    range: '769 - 1440px',
    example: '1440px',
    selected: true,
  },
  {
    name: 'Large Desktop',
    key: 'breakpoint-lg',
    range: '1441px +',
    example: '1920px',
    selected: false,
  },
];

export default {
  title: 'Layout/Breakpoint',
  component: Breakpoint,
  tags: ['autodocs'],
  parameters: {
    viewport: {
      viewports: {
        mobile: {
          name: 'Mobile',
          styles: {
            width: '412px',
            height: '915px',
          },
        },
        tablet: {
          name: 'Tablet',
          styles: {
            width: '768px',
            height: '1024px',
          },
        },
        desktop: {
          name: 'Small/Medium Desktop',
          styles: {
            width: '1440px',
            height: '900px',
          },
        },
        desktopLarge: {
          name: 'Large Desktop',
          styles: {
            width: '1920px',
            height: '1080px',
          },
        },
      },
    },
  },
};

export const BreakpointsOverview = {
  render: () => (
    <div className="space-y-8 p-6">
      <div>
        <Typography variant="h3" className="color-gray-900 mb-4">
          Breakpoints del Sistema
        </Typography>
        <Typography variant="body-md" className="color-gray-600 mb-6">
          Variables CSS disponibles para usar en media queries y componentes responsivos.
        </Typography>
      </div>

      <div className="flex flex-wrap gap-6">
        {BREAKPOINTS.map((bp) => (
          <div
            key={bp.key}
            className={`flex flex-col border-2 rounded-lg p-6 bg-white shadow ${
              bp.selected ? 'border-green-600' : 'border-gray-200'
            }`}
            style={{ minWidth: '280px' }}
          >
            <div className="mb-4">
              <Typography variant="h5" className="color-gray-900 mb-2">
                {bp.name}
              </Typography>
              <Typography variant="body-sm" className="color-gray-600 mb-1">
                Rango: {bp.range}
              </Typography>
              <Typography variant="body-sm" className="color-gray-600 mb-3">
                Ejemplo: {bp.example}
              </Typography>
              <code className="text-body-sm bg-gray-100 px-2 py-1 rounded color-gray-900">
                {bp.key}
              </code>
            </div>
            {bp.selected && (
              <div className="mt-2">
                <span className="text-body-sm color-green-600 font-medium">
                  ✓ Pantalla seleccionada para trabajar
                </span>
              </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">
          Usa estas variables en tus media queries o componentes:
        </Typography>
      </div>

      <div className="bg-gray-50 rounded-lg p-6 space-y-4">
        <div>
          <Typography variant="h6" className="color-gray-900 mb-2">
            Mobile (breakpoint-sm)
          </Typography>
          <code className="block bg-white p-3 rounded border border-gray-200 text-body-sm">
            --breakpoint-sm: 0px<br />
            --breakpoint-sm-max: 480px
          </code>
        </div>

        <div>
          <Typography variant="h6" className="color-gray-900 mb-2">
            Tablet (breakpoint-md)
          </Typography>
          <code className="block bg-white p-3 rounded border border-gray-200 text-body-sm">
            --breakpoint-md: 481px<br />
            --breakpoint-md-max: 768px
          </code>
        </div>

        <div>
          <Typography variant="h6" className="color-gray-900 mb-2">
            Small/Medium Desktop (breakpoint-base)
          </Typography>
          <code className="block bg-white p-3 rounded border border-gray-200 text-body-sm">
            --breakpoint-base: 769px<br />
            --breakpoint-base-max: 1440px
          </code>
        </div>

        <div>
          <Typography variant="h6" className="color-gray-900 mb-2">
            Large Desktop (breakpoint-lg)
          </Typography>
          <code className="block bg-white p-3 rounded border border-gray-200 text-body-sm">
            --breakpoint-lg: 1441px
          </code>
        </div>
      </div>

      <div className="bg-blue-50 rounded-lg p-6">
        <Typography variant="h6" className="color-blue-900 mb-2">
          Ejemplo de uso en CSS:
        </Typography>
        <code className="block bg-white p-4 rounded border border-blue-200 text-body-sm color-gray-900 whitespace-pre">
{`@media (min-width: var(--breakpoint-md)) {
  .my-component {
    padding: var(--space-24);
  }
}`}
        </code>
      </div>
    </div>
  ),
};

export const VisualBreakpoints = {
  render: () => (
    <div className="space-y-6 p-6">
      <div>
        <Typography variant="h4" className="color-gray-900 mb-4">
          Visualización de Breakpoints
        </Typography>
        <Typography variant="body-md" className="color-gray-600 mb-6">
          Ajusta el tamaño de la ventana para ver cómo cambian los breakpoints.
        </Typography>
      </div>

      <div className="flex flex-wrap gap-4">
        {BREAKPOINTS.map((bp) => {
          const widthMap = {
            'breakpoint-sm': 'w-20',
            'breakpoint-md': 'w-32',
            'breakpoint-base': 'w-48',
            'breakpoint-lg': 'w-64',
          };

          return (
            <div
              key={bp.key}
              className={`${widthMap[bp.key] || 'w-32'} h-32 border-2 rounded-lg p-4 bg-white shadow ${
                bp.selected ? 'border-green-600' : 'border-gray-200'
              }`}
            >
              <Typography variant="body-sm" className="color-gray-900 font-medium mb-1">
                {bp.name}
              </Typography>
              <Typography variant="caption" className="color-gray-600">
                {bp.range}
              </Typography>
              <div className="mt-2">
                <code className="text-[10px] bg-gray-100 px-1.5 py-0.5 rounded color-gray-700">
                  {bp.key}
                </code>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  ),
};

export const InteractiveBreakpoint = {
  render: () => {
    const getActiveBreakpoint = () => {
      if (typeof window === 'undefined') return 'breakpoint-base';
      const width = window.innerWidth;
      if (width <= 480) return 'breakpoint-sm';
      if (width <= 768) return 'breakpoint-md';
      if (width <= 1440) return 'breakpoint-base';
      return 'breakpoint-lg';
    };

    const [activeBreakpoint, setActiveBreakpoint] = React.useState(getActiveBreakpoint());

    React.useEffect(() => {
      const handleResize = () => {
        setActiveBreakpoint(getActiveBreakpoint());
      };
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }, []);

    const activeBP = BREAKPOINTS.find((bp) => bp.key === activeBreakpoint);

    return (
      <div className="space-y-6 p-6">
        <div>
          <Typography variant="h4" className="color-gray-900 mb-2">
            Breakpoint Activo
          </Typography>
          <Typography variant="body-md" className="color-gray-600 mb-4">
            Cambia el tamaño del viewport desde el panel de controles de Storybook (icono de dispositivo móvil en la barra superior) o redimensiona la ventana del navegador.
          </Typography>
        </div>

        <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg p-6 border-2 border-green-200">
          <div className="flex items-center gap-4 mb-4">
            <div className="w-16 h-16 bg-green-600 rounded-lg flex items-center justify-center">
              <Typography variant="h5" className="color-white font-bold">
                {activeBP?.name.charAt(0)}
              </Typography>
            </div>
            <div>
              <Typography variant="h5" className="color-gray-900 mb-1">
                {activeBP?.name}
              </Typography>
              <Typography variant="body-sm" className="color-gray-600">
                Ancho actual: <strong>{typeof window !== 'undefined' ? window.innerWidth : 0}px</strong>
              </Typography>
            </div>
          </div>
          <div className="bg-white rounded p-4 border border-gray-200">
            <Typography variant="body-sm" className="color-gray-700 mb-2">
              <strong>Variable CSS:</strong>
            </Typography>
            <code className="text-body-sm bg-gray-100 px-3 py-2 rounded block color-gray-900">
              {activeBP?.key}
            </code>
            <Typography variant="body-sm" className="color-gray-700 mt-3 mb-2">
              <strong>Rango:</strong> {activeBP?.range}
            </Typography>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {BREAKPOINTS.map((bp) => (
            <div
              key={bp.key}
              className={`p-4 rounded-lg border-2 ${
                bp.key === activeBreakpoint
                  ? 'border-green-600 bg-green-50'
                  : 'border-gray-200 bg-white'
              }`}
            >
              <Typography
                variant="body-sm"
                className={`font-medium mb-1 ${
                  bp.key === activeBreakpoint ? 'color-green-900' : 'color-gray-900'
                }`}
              >
                {bp.name}
              </Typography>
              <Typography variant="caption" className="color-gray-600">
                {bp.range}
              </Typography>
              {bp.key === activeBreakpoint && (
                <div className="mt-2">
                  <span className="text-body-sm color-green-600 font-semibold">✓ Activo</span>
                </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">
            💡 Cómo probar:
          </Typography>
          <ul className="space-y-2 text-body-sm color-gray-700">
            <li>1. Usa el selector de viewport en la barra superior de Storybook</li>
            <li>2. O redimensiona manualmente la ventana del navegador</li>
            <li>3. Observa cómo cambia el breakpoint activo arriba</li>
          </ul>
        </div>
      </div>
    );
  },
};

