import React from 'react';
import styled, { keyframes } from 'styled-components';

const pulse = keyframes`
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
`;

const Bone = styled.div<{ $h?: number; $w?: string }>`
  height: ${({ $h = 16 }) => $h}px;
  width: ${({ $w = '100%' }) => $w};
  border-radius: ${({ theme }) => theme.borderRadius.md};
  background-color: ${({ theme }) => theme.colors.surfaceMuted};
  animation: ${pulse} 1.5s ease-in-out infinite;
`;

const Hero = styled.div`
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  background-color: ${({ theme }) => theme.colors.surface};
  border: 1px solid ${({ theme }) => theme.colors.borderSoft};
  margin-bottom: ${({ theme }) => theme.layout.cardGap};
  margin-top: ${({ theme }) => theme.layout.pageTop};
  overflow: hidden;
`;

const HeroInner = styled.div`
  padding: ${({ theme }) => theme.layout.cardPaddingMd};
`;

const HeroMeta = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: ${({ theme }) => theme.spacing[4]};
  padding: ${({ theme }) => theme.spacing[4]};
  border-top: 1px solid ${({ theme }) => theme.colors.borderSoft};
  background: ${({ theme }) => theme.colors.surfaceInset};

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: ${({ theme }) => theme.layout.cardGap};

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
`;

const Stack = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing[4]};
`;

export const TicketDetailSkeleton: React.FC = () => (
  <div role="status" aria-live="polite" aria-busy="true">
    <Hero>
      <HeroInner>
        <Bone $h={12} $w="140px" />
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <Bone $h={22} $w="88px" />
          <Bone $h={22} $w="100px" />
        </div>
        <Bone $h={28} $w="65%" style={{ marginTop: 12 }} />
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <Bone $h={22} $w="72px" />
          <Bone $h={22} $w="72px" />
        </div>
      </HeroInner>
      <HeroMeta>
        <Bone $h={48} />
        <Bone $h={48} />
        <Bone $h={48} />
      </HeroMeta>
    </Hero>
    <Grid>
      <Stack>
        <Bone $h={200} />
        <Bone $h={280} />
      </Stack>
      <Stack>
        <Bone $h={180} />
        <Bone $h={220} />
        <Bone $h={320} />
      </Stack>
    </Grid>
  </div>
);