import React from 'react';
import { Animated, Easing, View, StyleSheet } from 'react-native';
import Svg, { Path, Ellipse, Circle } from 'react-native-svg';
import { theme } from '../theme';

interface ZenCenterProps {
  isPlaying: boolean;
}

const ZenFigure = () => (
  <View style={styles.zenFigure}>
    <Svg viewBox="0 0 200 210" style={styles.zenSvg}>
      {/* Ground shadow */}
      <Ellipse cx="100" cy="178" rx="44" ry="5.5" fill="rgba(232,184,109,0.08)" />

      {/* Lower body - Full lotus base */}
      <Ellipse cx="100" cy="158" rx="46" ry="14" fill="#c8973e" opacity={0.7} />

      {/* Left knee */}
      <Path
        d="M 54 150 C 44 152, 36 158, 36 165 C 36 171, 42 175, 52 174 C 60 173, 68 167, 72 160 C 74 155, 70 149, 64 148 Z"
        fill="#d4a045"
        opacity={0.78}
      />

      {/* Right knee */}
      <Path
        d="M 146 150 C 156 152, 164 158, 164 165 C 164 171, 158 175, 148 174 C 140 173, 132 167, 128 160 C 126 155, 130 149, 136 148 Z"
        fill="#d4a045"
        opacity={0.78}
      />

      {/* Left foot */}
      <Path
        d="M 124 148 C 132 144, 142 145, 146 150 C 148 153, 145 157, 138 157 C 131 157, 124 153, 122 150 Z"
        fill="#c8973e"
        opacity={0.72}
      />

      {/* Right foot */}
      <Path
        d="M 76 148 C 68 144, 58 145, 54 150 C 52 153, 55 157, 62 157 C 69 157, 76 153, 78 150 Z"
        fill="#c8973e"
        opacity={0.72}
      />

      {/* Torso */}
      <Path
        d="M 72 152 C 70 140, 69 126, 70 114 C 71 102, 75 92, 82 85 C 88 79, 94 77, 100 76 C 106 77, 112 79, 118 85 C 125 92, 129 102, 130 114 C 131 126, 130 140, 128 152 C 120 157, 110 160, 100 160 C 90 160, 80 157, 72 152 Z"
        fill="#e0a84e"
        opacity={0.88}
      />

      {/* Chest line */}
      <Path
        d="M 100 88 C 99 108, 99 130, 100 152"
        stroke="#c8882a"
        strokeWidth={0.8}
        opacity={0.18}
        strokeLinecap="round"
      />

      {/* Left upper arm */}
      <Path
        d="M 70 114 C 64 116, 58 122, 56 130 C 54 136, 56 142, 62 146 C 68 148, 75 146, 78 140 C 74 136, 70 128, 70 118 Z"
        fill="#d4a045"
        opacity={0.82}
      />

      {/* Right upper arm */}
      <Path
        d="M 130 114 C 136 116, 142 122, 144 130 C 146 136, 144 142, 138 146 C 132 148, 125 146, 122 140 C 126 136, 130 128, 130 118 Z"
        fill="#d4a045"
        opacity={0.82}
      />

      {/* Left hand */}
      <Path
        d="M 84 154 C 80 152, 76 152, 75 155 C 74 158, 76 162, 82 163 C 88 164, 96 162, 98 158 C 98 155, 92 154, 84 154 Z"
        fill="#d4a045"
        opacity={0.8}
      />

      {/* Right hand */}
      <Path
        d="M 102 152 C 98 150, 94 150, 92 153 C 90 156, 91 160, 96 162 C 102 163, 110 161, 114 157 C 116 154, 112 151, 106 151 Z"
        fill="#c8973e"
        opacity={0.78}
      />

      {/* Thumb tips touching */}
      <Ellipse cx="99" cy="153" rx="4" ry="2.5" fill="#e8b86d" opacity={0.55} />

      {/* Neck */}
      <Path
        d="M 93 78 C 93 74, 96 70, 100 69 C 104 70, 107 74, 107 78 L 107 86 L 93 86 Z"
        fill="#e0a84e"
        opacity={0.88}
      />

      {/* Head */}
      <Path
        d="M 82 54 C 82 36, 90 26, 100 25 C 110 26, 118 36, 118 54 C 118 66, 112 74, 106 77 L 100 79 L 94 77 C 88 74, 82 66, 82 54 Z"
        fill="#e0a84e"
        opacity={0.88}
      />

      {/* Hair */}
      <Path
        d="M 82 50 C 82 36, 90 26, 100 25 C 110 26, 118 36, 118 50 C 112 43, 106 39, 100 38 C 94 39, 88 43, 82 50 Z"
        fill="#b8812a"
        opacity={0.8}
      />

      {/* Face features */}
      {/* Left brow */}
      <Path
        d="M 89 53 Q 93 51, 97 53"
        stroke="#8a6020"
        strokeWidth={0.8}
        strokeLinecap="round"
        opacity={0.35}
      />
      {/* Right brow */}
      <Path
        d="M 103 53 Q 107 51, 111 53"
        stroke="#8a6020"
        strokeWidth={0.8}
        strokeLinecap="round"
        opacity={0.35}
      />
      {/* Left eye closed */}
      <Path
        d="M 89 57 Q 93 61, 97 57"
        stroke="#7a5010"
        strokeWidth={1.4}
        strokeLinecap="round"
        opacity={0.65}
      />
      {/* Right eye closed */}
      <Path
        d="M 103 57 Q 107 61, 111 57"
        stroke="#7a5010"
        strokeWidth={1.4}
        strokeLinecap="round"
        opacity={0.65}
      />
      {/* Nose */}
      <Path
        d="M 100 62 C 99 65, 97 67, 97 68"
        stroke="#8a6020"
        strokeWidth={1}
        strokeLinecap="round"
        opacity={0.25}
      />
      {/* Mouth - serene half smile */}
      <Path
        d="M 95 72 Q 100 75, 105 72"
        stroke="#8a6020"
        strokeWidth={1.2}
        strokeLinecap="round"
        opacity={0.3}
      />

      {/* Crown chakra */}
      <Circle cx="100" cy="24" r="3.5" fill="rgba(232,184,109,0.2)" />
      <Circle cx="100" cy="24" r="1.8" fill="#e8b86d" opacity={0.75} />
      <Circle cx="100" cy="24" r="0.8" fill="#fff" opacity={0.6} />

      {/* Subtle inner light */}
      <Circle cx="100" cy="110" r="12" fill="rgba(232,184,109,0.04)" />
    </Svg>
  </View>
);

export const ZenCenter: React.FC<ZenCenterProps> = ({ isPlaying }) => {
  const orbitAnimPrimary = React.useRef(new Animated.Value(0)).current;
  const orbitAnimSecondary = React.useRef(new Animated.Value(0)).current;
  const starBreathPrimary = React.useRef(new Animated.Value(0)).current;
  const starBreathSecondary = React.useRef(new Animated.Value(0)).current;
  const solarHaloAnim = React.useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    orbitAnimPrimary.setValue(0);
    orbitAnimSecondary.setValue(0);
    starBreathPrimary.setValue(0);
    starBreathSecondary.setValue(0);
    solarHaloAnim.setValue(0);

    const primaryLoop = Animated.loop(
      Animated.timing(orbitAnimPrimary, {
        toValue: 1,
        duration: 18000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    );

    const secondaryLoop = Animated.loop(
      Animated.timing(orbitAnimSecondary, {
        toValue: 1,
        duration: 26000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    );

    const primaryBreathLoop = Animated.loop(
      Animated.sequence([
        Animated.timing(starBreathPrimary, {
          toValue: 1,
          duration: 4200,
          easing: Easing.inOut(Easing.quad),
          useNativeDriver: true,
        }),
        Animated.timing(starBreathPrimary, {
          toValue: 0,
          duration: 4200,
          easing: Easing.inOut(Easing.quad),
          useNativeDriver: true,
        }),
      ])
    );

    const secondaryBreathLoop = Animated.loop(
      Animated.sequence([
        Animated.timing(starBreathSecondary, {
          toValue: 1,
          duration: 6100,
          easing: Easing.inOut(Easing.quad),
          useNativeDriver: true,
        }),
        Animated.timing(starBreathSecondary, {
          toValue: 0,
          duration: 6100,
          easing: Easing.inOut(Easing.quad),
          useNativeDriver: true,
        }),
      ])
    );

    const solarHaloLoop = Animated.loop(
      Animated.timing(solarHaloAnim, {
        toValue: 1,
        duration: 210000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    );

    primaryLoop.start();
    secondaryLoop.start();
    primaryBreathLoop.start();
    secondaryBreathLoop.start();
    solarHaloLoop.start();

    return () => {
      primaryLoop.stop();
      secondaryLoop.stop();
      primaryBreathLoop.stop();
      secondaryBreathLoop.stop();
      solarHaloLoop.stop();
    };
  }, [orbitAnimPrimary, orbitAnimSecondary, solarHaloAnim, starBreathPrimary, starBreathSecondary]);

  const primaryRotate = orbitAnimPrimary.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  const secondaryRotate = orbitAnimSecondary.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '-360deg'],
  });

  const primaryStarOpacity = starBreathPrimary.interpolate({
    inputRange: [0, 1],
    outputRange: [0.45, 0.9],
  });

  const primaryStarScale = starBreathPrimary.interpolate({
    inputRange: [0, 1],
    outputRange: [0.92, 1.14],
  });

  const secondaryStarOpacity = starBreathSecondary.interpolate({
    inputRange: [0, 1],
    outputRange: [0.16, 0.55],
  });

  const secondaryStarScale = starBreathSecondary.interpolate({
    inputRange: [0, 1],
    outputRange: [0.9, 1.2],
  });

  const haloRotate = solarHaloAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  const haloOpacity = solarHaloAnim.interpolate({
    inputRange: [0, 0.12, 0.18, 0.26, 0.62, 0.72, 0.8, 1],
    outputRange: [0.02, 0.03, 0.12, 0.04, 0.03, 0.11, 0.04, 0.02],
  });

  const haloScale = solarHaloAnim.interpolate({
    inputRange: [0, 0.18, 0.62, 0.72, 1],
    outputRange: [0.88, 1.06, 0.9, 1.08, 0.88],
  });

  return (
    <View style={styles.container}>
      <View style={styles.orbitWrap}>
        <Animated.View
          pointerEvents="none"
          style={[
            styles.solarHaloTrack,
            {
              opacity: haloOpacity,
              transform: [{ rotate: haloRotate }],
            },
          ]}
        >
          <Animated.View
            style={[
              styles.solarHalo,
              {
                transform: [{ scale: haloScale }],
              },
            ]}
          >
            <View style={styles.solarCore} />
          </Animated.View>
        </Animated.View>

        <Animated.View
          pointerEvents="none"
          style={[styles.orbitLayerPrimary, { transform: [{ rotate: primaryRotate }] }]}
        >
          <View style={styles.orbitRing} />
          <Animated.View
            style={[
              styles.orbitDot1,
              {
                opacity: primaryStarOpacity,
                transform: [{ scale: primaryStarScale }],
              },
            ]}
          />
          <Animated.View
            style={[
              styles.orbitDot1Trail,
              {
                opacity: secondaryStarOpacity,
                transform: [{ scale: secondaryStarScale }],
              },
            ]}
          />
        </Animated.View>

        <Animated.View
          pointerEvents="none"
          style={[styles.orbitLayerSecondary, { transform: [{ rotate: secondaryRotate }] }]}
        >
          <View style={styles.orbitRing2} />
          <Animated.View
            style={[
              styles.orbitDot2,
              {
                opacity: secondaryStarOpacity,
                transform: [{ scale: secondaryStarScale }],
              },
            ]}
          />
          <Animated.View
            style={[
              styles.orbitDot3,
              {
                opacity: primaryStarOpacity,
                transform: [{ scale: primaryStarScale }],
              },
            ]}
          />
        </Animated.View>

        {/* Zen glow */}
        <View style={[styles.zenGlow, { opacity: isPlaying ? 1 : 0.55 }]} />

        {/* Zen waves */}
        <View style={styles.zenWaves}>
          <View style={styles.zenWave} />
        </View>

        {/* Zen figure */}
        <ZenFigure />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  orbitWrap: {
    width: 220,
    height: 220,
    justifyContent: 'center',
    alignItems: 'center',
  },
  orbitLayerPrimary: {
    position: 'absolute',
    width: 220,
    height: 220,
    justifyContent: 'center',
    alignItems: 'center',
  },
  orbitLayerSecondary: {
    position: 'absolute',
    width: 256,
    height: 256,
    justifyContent: 'center',
    alignItems: 'center',
  },
  solarHaloTrack: {
    position: 'absolute',
    width: 320,
    height: 320,
    justifyContent: 'center',
    alignItems: 'center',
  },
  solarHalo: {
    position: 'absolute',
    top: -18,
    right: 24,
    width: 92,
    height: 92,
    borderRadius: 46,
    backgroundColor: 'rgba(232,184,109,0.14)',
    shadowColor: theme.colors.primary,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.18,
    shadowRadius: 24,
    elevation: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  solarCore: {
    width: 26,
    height: 26,
    borderRadius: 13,
    backgroundColor: 'rgba(255,244,214,0.28)',
  },
  orbitRing: {
    position: 'absolute',
    width: 220,
    height: 220,
    borderRadius: 110,
    borderWidth: 1,
    borderColor: 'rgba(232,184,109,0.12)',
  },
  orbitRing2: {
    position: 'absolute',
    width: 256,
    height: 256,
    borderRadius: 128,
    borderWidth: 1,
    borderColor: 'rgba(232,184,109,0.06)',
  },
  orbitDot1: {
    position: 'absolute',
    top: -3,
    left: 107,
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: theme.colors.primary,
    opacity: 0.55,
  },
  orbitDot1Trail: {
    position: 'absolute',
    top: 26,
    right: 30,
    width: 3,
    height: 3,
    borderRadius: 1.5,
    backgroundColor: theme.colors.primary,
    opacity: 0.22,
  },
  orbitDot2: {
    position: 'absolute',
    bottom: -2,
    left: 127,
    width: 4,
    height: 4,
    borderRadius: 2,
    backgroundColor: theme.colors.primary,
    opacity: 0.3,
  },
  orbitDot3: {
    position: 'absolute',
    top: 36,
    left: 18,
    width: 5,
    height: 5,
    borderRadius: 2.5,
    backgroundColor: theme.colors.primary,
    opacity: 0.18,
  },
  zenGlow: {
    position: 'absolute',
    width: 160,
    height: 160,
    borderRadius: 80,
    backgroundColor: theme.colors.primarySoft,
    opacity: 0,
  },
  zenWaves: {
    position: 'absolute',
    width: 220,
    height: 220,
    justifyContent: 'center',
    alignItems: 'center',
  },
  zenWave: {
    position: 'absolute',
    width: 160,
    height: 160,
    borderRadius: 80,
    borderWidth: 1,
    borderColor: 'rgba(232,184,109,0.08)',
  },
  zenFigure: {
    width: 140,
    height: 140,
  },
  zenSvg: {
    width: '100%',
    height: '100%',
  },
});