import React from 'react';
import styled from 'styled-components';

const Wrap = styled.div<{ $height: number }>`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: ${({ $height }) => $height}px;
  padding: ${({ theme }) => theme.spacing[6]} ${({ theme }) => theme.spacing[4]};
  border-radius: ${({ theme }) => theme.borderRadius.md};
  background: ${({ theme }) => theme.colors.surfaceInset};
  border: 1px dashed ${({ theme }) => theme.colors.borderSoft};
`;

const Illustration = styled.div`
  width: 100%;
  max-width: 200px;
  height: 72px;
  margin-bottom: ${({ theme }) => theme.spacing[5]};
  position: relative;
  opacity: 0.55;

  &::before,
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    border-radius: 4px 4px 0 0;
    background: ${({ theme }) => theme.colors.primary}28;
  }

  &::before {
    left: 12%;
    width: 18%;
    height: 35%;
  }

  &::after {
    left: 38%;
    width: 22%;
    height: 55%;
  }
`;

const Line = styled.div`
  position: absolute;
  bottom: 0;
  right: 18%;
  width: 28%;
  height: 42%;
  border-radius: 4px 4px 0 0;
  background: ${({ theme }) => theme.colors.secondary}30;
`;

const Baseline = styled.div`
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: ${({ theme }) => theme.colors.borderSoft};
`;

const Title = styled.p`
  margin: 0 0 ${({ theme }) => theme.spacing[2]};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  color: ${({ theme }) => theme.colors.text.primary};
`;

const Hint = styled.p`
  margin: 0;
  max-width: 20rem;
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  color: ${({ theme }) => theme.colors.text.tertiary};
  line-height: ${({ theme }) => theme.typography.lineHeight.relaxed};
`;

interface ChartEmptyStateProps {
  title: string;
  hint?: string;
  height?: number;
}

export const ChartEmptyState: React.FC<ChartEmptyStateProps> = ({
  title,
  hint,
  height = 220,
}) => (
  <Wrap $height={height} role="status">
    <Illustration aria-hidden>
      <Line />
      <Baseline />
    </Illustration>
    <Title>{title}</Title>
    {hint ? <Hint>{hint}</Hint> : null}
  </Wrap>
);