'use client';

import React, { useState, useEffect } from 'react';
import { Row, Col } from 'antd/lib/grid';
import Button from 'antd/lib/button';
import { Paragraph } from '@/components/Typography/Paragraph';
import { Text } from '@/components/Typography/Text';

// ⛔ Mock useWindowSize (since actual hook isn't available)
function useWindowSize() {
  const [width, setWidth] = useState<number | undefined>(undefined);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    handleResize(); // Set initial
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return { width };
}

// ✅ Simulated store (mocked useProfileStore)
const useProfileStore = () => {
  const [modules, setModules] = useState<any[]>([]);
  const addModule = () => {
    const newModule = {
      id: Date.now(),
      title: 'New Module',
      description: 'Describe your module here',
    };
    setModules([...modules, newModule]);
  };

  return { modules, addModule };
};

export default function EmptyModulePage() {
  const { modules, addModule } = useProfileStore();
  const { width } = useWindowSize();
  const isMobileStyleChangesEnabled = width !== undefined && width <= 768;

  return (
    <div className={isMobileStyleChangesEnabled ? 'p__t--12' : 'p__t--24'}>
      {modules.length === 0 ? (
        <Row
          data-testid="module--empty"
          gutter={[10, 10]}
          className="text__align--center"
        >
          <Col span={24}>
          </Col>
          <Col span={24}>
            <Text
              data-testid="empty-module--caption"
              preset="semibold18"
              className="d--block m__b--4"
            >
              Nothing Here Yet
            </Text>
            <Paragraph
              data-testid="empty-module--caption-cta"
              className="opacity--60 leading-22"
            >
              Click the button below to get started
            </Paragraph>
          </Col>
          <Col span={24}>
            <Button type="link" onClick={addModule}>
              <div className="d--flex justify__content--center align__items--center">
                <Text preset="semibold18" className="text--blue m__l--4">
                  Add Module
                </Text>
              </div>
            </Button>
          </Col>
        </Row>
      ) : (
        <div className="p-8 max-w-xl mx-auto space-y-2">
          <h2 className="text-xl font-bold">Modules:</h2>
          <ul className="list-disc list-inside">
            {modules.map((mod) => (
              <li key={mod.id}>
                <span className="font-medium">{mod.title}</span> - {mod.description}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}