import { Skeleton, Card, Space, Row, Col } from 'antd';
import { spacing } from '@/styles/designTokens';

interface SkeletonLoaderProps {
  /** Type of skeleton to show */
  type?: 'page' | 'table' | 'card' | 'form' | 'list';
  /** Number of rows for table/list types */
  rows?: number;
  /** Number of cards for card type */
  cards?: number;
  /** Whether to show avatar placeholder */
  avatar?: boolean;
}

/**
 * Skeleton loading placeholders for different content types.
 * Provides visual feedback while content is loading.
 *
 * @example
 * {isLoading ? <SkeletonLoader type="table" rows={5} /> : <MyTable />}
 */
export function SkeletonLoader({
  type = 'page',
  rows = 5,
  cards = 3,
  avatar = false,
}: SkeletonLoaderProps) {
  switch (type) {
    case 'table':
      return (
        <div>
          {/* Table header */}
          <Skeleton.Input active style={{ width: '100%', marginBottom: spacing.md }} />
          {/* Table rows */}
          {Array.from({ length: rows }).map((_, i) => (
            <Skeleton.Input
              key={i}
              active
              style={{ width: '100%', marginBottom: spacing.xs, height: 40 }}
            />
          ))}
        </div>
      );

    case 'card':
      return (
        <Row gutter={[spacing.md, spacing.md]}>
          {Array.from({ length: cards }).map((_, i) => (
            <Col key={i} xs={24} sm={12} lg={8}>
              <Card>
                <Skeleton active avatar={avatar} paragraph={{ rows: 2 }} />
              </Card>
            </Col>
          ))}
        </Row>
      );

    case 'form':
      return (
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          {Array.from({ length: rows }).map((_, i) => (
            <div key={i}>
              <Skeleton.Input active size="small" style={{ width: 100, marginBottom: spacing.xs }} />
              <Skeleton.Input active style={{ width: '100%' }} />
            </div>
          ))}
          <Skeleton.Button active style={{ width: 120 }} />
        </Space>
      );

    case 'list':
      return (
        <Space direction="vertical" style={{ width: '100%' }} size="small">
          {Array.from({ length: rows }).map((_, i) => (
            <Skeleton
              key={i}
              active
              avatar={avatar}
              paragraph={{ rows: 1, width: '80%' }}
              title={{ width: '40%' }}
            />
          ))}
        </Space>
      );

    case 'page':
    default:
      return (
        <div>
          {/* Page header */}
          <div style={{ marginBottom: spacing.lg }}>
            <Skeleton.Input active style={{ width: 200, marginBottom: spacing.sm }} />
            <Skeleton.Input active style={{ width: 300 }} />
          </div>
          {/* Content cards */}
          <Row gutter={[spacing.md, spacing.md]} style={{ marginBottom: spacing.lg }}>
            <Col xs={24} sm={12} lg={6}>
              <Card>
                <Skeleton active paragraph={{ rows: 1 }} />
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={6}>
              <Card>
                <Skeleton active paragraph={{ rows: 1 }} />
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={6}>
              <Card>
                <Skeleton active paragraph={{ rows: 1 }} />
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={6}>
              <Card>
                <Skeleton active paragraph={{ rows: 1 }} />
              </Card>
            </Col>
          </Row>
          {/* Main content area */}
          <Card>
            <Skeleton active paragraph={{ rows: 6 }} />
          </Card>
        </div>
      );
  }
}

/**
 * Inline skeleton for text content
 */
export function TextSkeleton({ width = 100 }: { width?: number | string }) {
  return <Skeleton.Input active size="small" style={{ width, verticalAlign: 'middle' }} />;
}

/**
 * Skeleton for amount/number display
 */
export function AmountSkeleton() {
  return <Skeleton.Input active size="small" style={{ width: 80, verticalAlign: 'middle' }} />;
}

export default SkeletonLoader;
