/**
 * SVG 생성 유틸리티 함수
 */

/**
 * SVG 시작 태그 생성
 */
export function createSvgStart(width: number = 256, height: number = 256): string {
  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`
}

/**
 * SVG 종료 태그 생성
 */
export function createSvgEnd(): string {
  return '</svg>'
}

/**
 * SVG 그라데이션 정의 생성
 */
export function createSvgDefs(gradients: Array<{ id: string; color: string; opacity?: number }>): string {
  let defs = '<defs>'

  gradients.forEach(gradient => {
    const opacity = gradient.opacity !== undefined ? gradient.opacity : 0.8
    defs += `
      <radialGradient id="${gradient.id}" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:${gradient.color}; stop-opacity:${opacity}" />
        <stop offset="100%" style="stop-color:${gradient.color}; stop-opacity:0" />
      </radialGradient>`
  })

  defs += '</defs>'
  return defs
}

/**
 * SVG 원 요소 생성
 */
export function createSvgCircle(cx: number, cy: number, radius: number, fill: string, opacity?: number): string {
  const opacityAttr = opacity !== undefined ? ` opacity="${opacity}"` : ''
  return `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="${fill}"${opacityAttr} />`
}

/**
 * SVG 라인 요소 생성
 */
export function createSvgLine(
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  stroke: string,
  strokeWidth: number = 1,
  opacity?: number
): string {
  const opacityAttr = opacity !== undefined ? ` opacity="${opacity}"` : ''
  return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${stroke}" stroke-width="${strokeWidth}"${opacityAttr} />`
}

/**
 * SVG 화살표 생성 (바람 방향 표시용)
 */
export function createSvgArrow(
  x: number,
  y: number,
  angle: number,
  length: number,
  color: string,
  strokeWidth: number = 1,
  opacity?: number
): string {
  const opacityAttr = opacity !== undefined ? ` opacity="${opacity}"` : ''

  // 라디안으로 변환
  const rad = (angle * Math.PI) / 180

  // 화살표 끝점 계산
  const endX = x + length * Math.cos(rad)
  const endY = y + length * Math.sin(rad)

  // 화살표 머리 계산 (각도에서 30도 틀어진 두 지점)
  const headSize = length * 0.25
  const head1X = endX - headSize * Math.cos(rad + Math.PI / 6)
  const head1Y = endY - headSize * Math.sin(rad + Math.PI / 6)
  const head2X = endX - headSize * Math.cos(rad - Math.PI / 6)
  const head2Y = endY - headSize * Math.sin(rad - Math.PI / 6)

  return `
    <g${opacityAttr}>
      <line x1="${x}" y1="${y}" x2="${endX}" y2="${endY}" stroke="${color}" stroke-width="${strokeWidth}" />
      <line x1="${endX}" y1="${endY}" x2="${head1X}" y2="${head1Y}" stroke="${color}" stroke-width="${strokeWidth}" />
      <line x1="${endX}" y1="${endY}" x2="${head2X}" y2="${head2Y}" stroke="${color}" stroke-width="${strokeWidth}" />
    </g>
  `
}

/**
 * 날씨 타일용 SVG 생성
 */
export function createWeatherTileSvg(width: number, height: number, elements: string[]): string {
  return `
    ${createSvgStart(width, height)}
    ${elements.join('\n')}
    ${createSvgEnd()}
  `
}
