export function Skeleton({ width, height, radius, style }: {
  width?: string | number;
  height?: string | number;
  radius?: string | number;
  style?: React.CSSProperties;
}) {
  return (
    <div
      className="cra-skeleton"
      style={{
        width: width ?? '100%',
        height: height ?? 16,
        borderRadius: radius ?? 4,
        ...style,
      }}
    />
  );
}

export function ScannerSkeleton() {
  return (
    <div className="cra-scanner-page">
      <div className="cra-page-header">
        <div>
          <Skeleton width={200} height={24} radius={4} />
          <Skeleton width={260} height={13} style={{ marginTop: 6 }} />
        </div>
        <Skeleton width={90} height={30} radius={4} />
      </div>

      {/* Stats row */}
      <div className="cra-scanner-stats" style={{ marginBottom: 16 }}>
        {[1, 2, 3].map((i) => (
          <div key={i} className="cra-scanner-stat">
            <Skeleton width={36} height={28} style={{ marginBottom: 4 }} />
            <Skeleton width={60} height={12} />
          </div>
        ))}
      </div>

      {/* Monitored plugins card */}
      <div className="cra-card" style={{ marginBottom: 16 }}>
        <div className="cra-card-header">
          <Skeleton width={160} height={16} />
          <Skeleton width={70} height={28} radius={4} />
        </div>
        <div className="cra-card-body">
          {[1, 2, 3].map((i) => (
            <div key={i} className="cra-plugin-item" style={{ padding: '10px 0' }}>
              <Skeleton width={16} height={16} radius={2} />
              <div className="cra-plugin-info" style={{ flex: 1 }}>
                <Skeleton width="45%" height={14} style={{ marginBottom: 5 }} />
                <Skeleton width="30%" height={12} />
              </div>
              <Skeleton width={60} height={20} radius={10} style={{ marginRight: 8 }} />
              <Skeleton width={80} height={28} radius={4} />
            </div>
          ))}
        </div>
      </div>

      {/* Vulnerabilities card */}
      <div className="cra-card">
        <div className="cra-card-header">
          <Skeleton width={140} height={16} />
          <Skeleton width={160} height={28} radius={4} />
        </div>
        <div className="cra-card-body">
          {[1, 2].map((group) => (
            <div key={group} style={{ marginBottom: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px solid var(--cra-border)' }}>
                <Skeleton width="35%" height={14} />
                <Skeleton width={80} height={14} />
              </div>
              {[1, 2].map((item) => (
                <div key={item} className="cra-vuln-item" style={{ padding: '10px 0' }}>
                  <div className="cra-vuln-header">
                    <Skeleton width={64} height={20} radius={10} style={{ marginRight: 8 }} />
                    <Skeleton width="50%" height={14} />
                  </div>
                  <div className="cra-vuln-meta" style={{ marginTop: 6 }}>
                    <Skeleton width={100} height={12} />
                    <Skeleton width={80} height={12} style={{ marginLeft: 8 }} />
                  </div>
                  <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
                    <Skeleton width={130} height={28} radius={4} />
                    <Skeleton width={110} height={28} radius={4} />
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function IncidentCenterSkeleton() {
  return (
    <div className="cra-incidents-page">
      <div className="cra-page-header">
        <div>
          <Skeleton width={160} height={24} radius={4} />
          <Skeleton width={300} height={13} style={{ marginTop: 6 }} />
        </div>
        <Skeleton width={110} height={30} radius={4} />
      </div>

      <div className="cra-incidents-grid">
        {/* Left: incident list */}
        <div className="cra-card">
          <div className="cra-card-header">
            <Skeleton width={100} height={16} />
            <Skeleton width={60} height={28} radius={4} />
          </div>
          <div className="cra-card-body">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 12 }}>
              <Skeleton height={30} radius={4} />
              <Skeleton height={30} radius={4} />
            </div>
            {[1, 2, 3].map((i) => (
              <div key={i} style={{ padding: '10px 0', borderBottom: '1px solid var(--cra-border)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                  <Skeleton width="50%" height={14} />
                  <Skeleton width={70} height={20} radius={10} />
                </div>
                <Skeleton width="35%" height={12} style={{ marginBottom: 8 }} />
                <Skeleton height={4} radius={2} />
              </div>
            ))}
          </div>
        </div>

        {/* Right: detail */}
        <div className="cra-incident-detail-col">
          <div className="cra-card">
            <Skeleton height={56} radius={6} style={{ marginBottom: 14 }} />
            <div className="cra-card-header" style={{ marginBottom: 14 }}>
              <Skeleton width={160} height={18} />
              <Skeleton width={120} height={30} radius={4} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <Skeleton height={54} radius={4} />
                <Skeleton height={54} radius={4} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <Skeleton height={54} radius={4} />
                <Skeleton height={54} radius={4} />
              </div>
              <Skeleton height={72} radius={4} />
              <Skeleton height={72} radius={4} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}