DocsGPT/frontend/src/components/SkeletonLoader.tsx

import { useState, useEffect } from 'react';

interface SkeletonLoaderProps {
  count?: number;
  component?:
    | 'default'
    | 'analysis'
    | 'logs'
    | 'fileTable'
    | 'chatbot'
    | 'dropdown'
    | 'chunkCards'
    | 'sourceCards';
}

const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
  count = 1,
  component = 'default',
}) => {
  const [skeletonCount, setSkeletonCount] = useState(count);

  useEffect(() => {
    const handleResize = () => {
      const windowWidth = window.innerWidth;

      if (windowWidth > 1024) {
        setSkeletonCount(1);
      } else if (windowWidth > 768) {
        setSkeletonCount(count);
      } else {
        setSkeletonCount(Math.min(count, 2));
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [count]);

  const renderTable = () => (
    <>
      {[...Array(4)].map((_, idx) => (
        <tr key={idx} className="animate-pulse">
          <td className="w-[40%] px-4 py-4">
            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </td>
          <td className="w-[30%] px-4 py-4">
            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </td>
          <td className="w-[20%] px-4 py-4">
            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </td>
          <td className="w-[10%] px-4 py-4">
            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </td>
        </tr>
      ))}
    </>
  );

  const renderChatbot = () => (
    <>
      {[...Array(4)].map((_, idx) => (
        <tr key={idx} className="animate-pulse">
          <td className="p-2">
            <div className="mx-auto h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </td>
          <td className="p-2">
            <div className="mx-auto h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </td>
          <td className="p-2">
            <div className="mx-auto h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </td>
          <td className="p-2">
            <div className="mx-auto h-4 w-8 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </td>
        </tr>
      ))}
    </>
  );

  const renderDropdown = () => (
    <div className="animate-pulse">
      <div className="mb-2 h-4 w-24 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
      <div className="flex h-14 w-[360px] items-center justify-between rounded-3xl bg-gray-300 px-4 dark:bg-gray-600">
        <div className="h-3 w-24 rounded-sm bg-gray-400 dark:bg-gray-700"></div>
        <div className="h-3 w-3 rounded-sm bg-gray-400 dark:bg-gray-700"></div>
      </div>
    </div>
  );

  const renderLogs = () => (
    <div className="w-full animate-pulse space-y-px">
      {[...Array(8)].map((_, idx) => (
        <div
          key={idx}
          className="dark:hover:bg-accent hover:bg-muted flex w-full items-start p-2"
        >
          <div className="flex w-full items-center gap-2">
            <div className="h-3 w-3 rounded-lg bg-gray-300 dark:bg-gray-600"></div>
            <div className="flex w-full flex-row items-center gap-2">
              <div className="h-3 w-[30%] rounded-lg bg-gray-300 lg:w-52 dark:bg-gray-600"></div>
              <div className="h-3 w-[16%] rounded-lg bg-gray-300 lg:w-28 dark:bg-gray-600"></div>
              <div className="h-3 w-[40%] rounded-lg bg-gray-300 lg:w-64 dark:bg-gray-600"></div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );

  const renderDefault = () => (
    <>
      {[...Array(skeletonCount)].map((_, idx) => (
        <div
          key={idx}
          className={`p-6 ${
            skeletonCount === 1 ? 'w-full' : 'w-60'
          } animate-pulse rounded-3xl`}
        >
          <div className="space-y-4">
            <div>
              <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-1/2 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
            <div>
              <div className="mb-2 h-4 w-2/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-1/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
            <div>
              <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-1/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-2/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
            <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
            <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
          </div>
        </div>
      ))}
    </>
  );

  const renderAnalysis = () => (
    <>
      {[...Array(skeletonCount)].map((_, idx) => (
        <div key={idx} className="bg-card w-full animate-pulse rounded-3xl p-6">
          <div className="space-y-6">
            <div className="space-y-2">
              <div className="mb-4 h-4 w-1/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="grid grid-cols-6 items-end gap-2">
                <div className="h-32 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
                <div className="h-24 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
                <div className="h-40 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
                <div className="h-28 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
                <div className="h-36 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
                <div className="h-20 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              </div>
            </div>
            <div className="space-y-2">
              <div className="mb-4 h-4 w-1/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="h-32 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
              <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
            </div>
          </div>
        </div>
      ))}
    </>
  );

  const renderChunkCards = () => (
    <>
      {Array.from({ length: count }).map((_, index) => (
        <div
          key={`chunk-skel-${index}`}
          className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] animate-pulse flex-col overflow-hidden rounded-[5.86px] border"
        >
          <div className="w-full">
            <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
              <div className="h-4 w-20 rounded bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <div className="space-y-3 px-4 pt-4 pb-6">
              <div className="h-3 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
              <div className="h-3 w-11/12 rounded bg-gray-200 dark:bg-gray-700"></div>
              <div className="h-3 w-5/6 rounded bg-gray-200 dark:bg-gray-700"></div>
              <div className="h-3 w-4/5 rounded bg-gray-200 dark:bg-gray-700"></div>
              <div className="h-3 w-3/4 rounded bg-gray-200 dark:bg-gray-700"></div>
              <div className="h-3 w-2/3 rounded bg-gray-200 dark:bg-gray-700"></div>
            </div>
          </div>
        </div>
      ))}
    </>
  );

  const renderSourceCards = () => (
    <>
      {Array.from({ length: count }).map((_, idx) => (
        <div
          key={`source-skel-${idx}`}
          className="bg-muted dark:bg-accent flex h-[130px] w-full animate-pulse flex-col rounded-2xl p-3"
        >
          <div className="w-full flex-1">
            <div className="flex w-full items-center justify-between gap-2">
              <div className="flex-1">
                <div className="h-[13px] w-full rounded bg-gray-200 dark:bg-gray-700"></div>
              </div>
              <div className="h-6 w-6 rounded bg-gray-200 dark:bg-gray-700"></div>
            </div>
          </div>

          <div className="flex flex-col items-start justify-start gap-1 pt-3">
            <div className="mb-1 flex items-center gap-2">
              <div className="h-3 w-3 rounded bg-gray-200 dark:bg-gray-700"></div>
              <div className="h-[12px] w-20 rounded bg-gray-200 dark:bg-gray-700"></div>
            </div>
            <div className="flex items-center gap-2">
              <div className="h-3 w-3 rounded bg-gray-200 dark:bg-gray-700"></div>
              <div className="h-[12px] w-16 rounded bg-gray-200 dark:bg-gray-700"></div>
            </div>
          </div>
        </div>
      ))}
    </>
  );

  const componentMap = {
    fileTable: renderTable,
    chatbot: renderChatbot,
    dropdown: renderDropdown,
    logs: renderLogs,
    default: renderDefault,
    analysis: renderAnalysis,
    chunkCards: renderChunkCards,
    sourceCards: renderSourceCards,
  };

  const render = componentMap[component] || componentMap.default;

  return <>{render()}</>;
};

export default SkeletonLoader;