import type { CSSProperties } from 'react'

import './DevicePageSkeleton.scss'

type SkeletonProps = {
  className?: string
  width?: CSSProperties['width']
  height?: CSSProperties['height']
}

function Skeleton({ className = '', width, height }: SkeletonProps) {
  return (
    <span
      className={`device-page-skeleton ${className}`}
      style={{ width, height }}
      aria-hidden="true"
    />
  )
}

function SkeletonText({
  className = '',
  width = '100%',
}: Omit<SkeletonProps, 'height'>) {
  return (
    <Skeleton
      className={`device-page-skeleton--text ${className}`}
      width={width}
    />
  )
}

function SkeletonIcon({ className = '' }: Pick<SkeletonProps, 'className'>) {
  return <Skeleton className={`device-page-skeleton--icon ${className}`} />
}

function SkeletonButton({ className = '' }: Pick<SkeletonProps, 'className'>) {
  return <Skeleton className={`device-page-skeleton--button ${className}`} />
}

export function DevicePageSkeleton() {
  return (
    <section className="device-page device-page-loading" aria-busy="true">
      <div className="device-page__grid device-page-loading__grid">
        <div className="device-card device-card--main device-page-loading__main-card">
          <div className="device-main">
            <div className="device-main__image device-page-loading__device-image">
              <Skeleton className="device-page-loading__phone" />
            </div>

            <div className="device-main__info device-page-loading__main-info">
              <SkeletonText className="device-page-loading__title" width="210px" />
              <SkeletonText width="260px" />
              <SkeletonText width="360px" />

              <div className="device-main__divider" />

              <div className="device-main__statuses">
                <div className="device-status device-page-loading__status-row">
                  <SkeletonIcon />
                  <SkeletonText width="176px" />
                </div>

                <div className="device-status device-page-loading__status-row">
                  <SkeletonIcon />
                  <SkeletonText width="136px" />
                </div>

                <div className="device-status device-page-loading__status-row">
                  <SkeletonIcon />
                  <SkeletonText width="158px" />
                </div>
              </div>
            </div>
          </div>

          <div className="device-main__bottom">
            <div className="device-registered device-page-loading__registered">
              <SkeletonIcon />

              <div className="device-registered-info">
                <SkeletonText width="142px" />
                <SkeletonText width="150px" />
              </div>
            </div>

            <div className="device-card__actions">
              <SkeletonButton className="device-page-loading__history-button" />
              <Skeleton className="device-page-skeleton--square-button" />
            </div>
          </div>
        </div>

        <div className="device-card device-map device-page-loading__map-card">
          <div className="device-card__header device-page-loading__map-header">
            <div className="device-card__title">
              <SkeletonIcon />
              <SkeletonText width="184px" />
            </div>

            <SkeletonText width="230px" />
          </div>

          <div className="device-map__container device-page-loading__map-container">
            <div className="device-page-loading__period-control">
              <SkeletonButton />
              <SkeletonButton />
              <SkeletonButton />
            </div>

            <Skeleton className="device-page-loading__map" />
          </div>
        </div>

        <div className="device-page__details-row">
          <div className="device-card device-actions device-page-loading__actions-card">
            <SkeletonText className="device-page-loading__card-title" width="118px" />

            <div className="actions-button-container">
              <SkeletonButton />
              <SkeletonButton />
            </div>
          </div>

          <div className="device-card device-permissions device-page-loading__permissions-card">
            <div className="device-permissions__header device-page-loading__permissions-header">
              <SkeletonText className="device-page-loading__card-title" width="72px" />

              <div className="device-permissions__header-actions">
                <Skeleton className="device-page-skeleton--mini-button" />
                <Skeleton className="device-page-skeleton--mini-button" />
              </div>
            </div>

            <div className="device-permissions__list">
              {Array.from({ length: 4 }).map((_, index) => (
                <div className="device-permission device-page-loading__permission" key={index}>
                  <SkeletonIcon />

                  <div className="device-permission__label">
                    <SkeletonText width={index === 3 ? '108px' : '86px'} />
                    <Skeleton className="device-page-skeleton--switch" />
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="device-card-stats device-page-loading__stats-column">
            <div className="device-card device-battery device-page-loading__battery-card">
              <SkeletonText className="device-page-loading__card-title" width="126px" />

              <div className="device-battery__content">
                <Skeleton className="device-page-skeleton--battery-circle" />

                <div className="device-stats">
                  {Array.from({ length: 3 }).map((_, index) => (
                    <div className="device-stats-card device-page-loading__stat" key={index}>
                      <SkeletonIcon />

                      <div className="device-stats-text">
                        <SkeletonText width={index === 0 ? '150px' : '132px'} />
                        <SkeletonText width={index === 2 ? '54px' : '42px'} />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="device-card device-impacts device-page-loading__impacts-card">
              <SkeletonIcon />

              <div className="device-stats-text">
                <SkeletonText width="132px" />
                <SkeletonText width="38px" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
