import { mobileVisualisationPalette } from '@hero-design/colors';

import type { GradientPoint, Gradients, SystemPalette } from './types';

const DIAGONAL_ANGLE = 282;
const HORIZONTAL_ANGLE = 90;

const DIAGONAL_LOCATIONS = [0, 0.2931, 0.993] as const;
const HORIZONTAL_LOCATIONS = [0, 0.25, 0.75] as const;

// Convert CSS gradient angle (degrees) to expo-linear-gradient start/end points.
// Follows CSS convention: 0° = bottom→top, 90° = left→right,
// 180° = top→bottom, 270° = right→left.
const angleToPoints = (
  angleDeg: number
): { start: GradientPoint; end: GradientPoint } => {
  const rad = ((angleDeg - 90) * Math.PI) / 180;
  const x = Math.cos(rad);
  const y = Math.sin(rad);
  // Normalize so both components are in [0, 1]
  const start = {
    x: Math.round(((1 - x) / 2) * 100) / 100,
    y: Math.round(((1 - y) / 2) * 100) / 100,
  };
  const end = {
    x: Math.round(((1 + x) / 2) * 100) / 100,
    y: Math.round(((1 + y) / 2) * 100) / 100,
  };
  return { start, end };
};

const getGradients = (systemPalette: SystemPalette): Gradients => {
  const { blueMedium } = mobileVisualisationPalette;
  const { pinkMedium } = mobileVisualisationPalette;
  const brandPrimary = systemPalette.primary;
  const backgroundFallback = systemPalette.defaultGlobalSurface;

  return {
    aiDiagonal: {
      angle: DIAGONAL_ANGLE,
      ...angleToPoints(DIAGONAL_ANGLE),
      colors: [blueMedium, brandPrimary, pinkMedium],
      locations: DIAGONAL_LOCATIONS,
    },
    aiDiagonal8: {
      angle: DIAGONAL_ANGLE,
      ...angleToPoints(DIAGONAL_ANGLE),
      colors: [blueMedium, brandPrimary, pinkMedium],
      locations: DIAGONAL_LOCATIONS,
      opacity: 0.08,
      backgroundFallback,
    },
    aiDiagonal16: {
      angle: DIAGONAL_ANGLE,
      ...angleToPoints(DIAGONAL_ANGLE),
      colors: [blueMedium, brandPrimary, pinkMedium],
      locations: DIAGONAL_LOCATIONS,
      opacity: 0.16,
      backgroundFallback,
    },
    aiDiagonal24: {
      angle: DIAGONAL_ANGLE,
      ...angleToPoints(DIAGONAL_ANGLE),
      colors: [blueMedium, brandPrimary, pinkMedium],
      locations: DIAGONAL_LOCATIONS,
      opacity: 0.24,
      backgroundFallback,
    },
    aiHorizontal: {
      angle: HORIZONTAL_ANGLE,
      ...angleToPoints(HORIZONTAL_ANGLE),
      colors: [brandPrimary, pinkMedium, brandPrimary],
      locations: HORIZONTAL_LOCATIONS,
    },
  };
};

export default getGradients;