import React, { useRef } from "react";
import {
  View,
  Text,
  StyleSheet,
  PanResponder,
  GestureResponderEvent,
} from "react-native";

interface CylinderSliderProps {
  value: number;
  max: number;
  onChange: (value: number) => void;
  color: string;
  label: string;
}

const CYLINDER_HEIGHT = 180;

export default function CylinderSlider({
  value,
  max,
  onChange,
  color,
  label,
}: CylinderSliderProps) {
  const pct        = value / max;
  const fillHeight = pct * CYLINDER_HEIGHT;

  // Simpan pageY saat touch mulai dan nilai saat itu
  const startPageY    = useRef(0);
  const startValue    = useRef(value);

  const clamp = (v: number) => Math.max(0, Math.min(max, Math.round(v)));

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponder:  () => true,

    onPanResponderGrant: (e: GestureResponderEvent) => {
      // Catat posisi pageY dan nilai awal saat jari menyentuh
      startPageY.current  = e.nativeEvent.pageY;
      startValue.current  = value;
    },

    onPanResponderMove: (e: GestureResponderEvent) => {
      // Hitung delta dari posisi awal (geser ke atas = naik, ke bawah = turun)
      const deltaY   = e.nativeEvent.pageY - startPageY.current;
      // deltaY negatif = geser ke atas = nilai naik
      const deltaPct = -deltaY / CYLINDER_HEIGHT;
      const newVal   = clamp(startValue.current + deltaPct * max);
      onChange(newVal);
    },
  });

  return (
    <View style={styles.container}>
      <Text style={styles.label}>{label}</Text>

      <View
        {...panResponder.panHandlers}
        style={[
          styles.cylinder,
          { borderColor: color + "66", shadowColor: color },
        ]}
      >
        {/* Fill dari bawah */}
        <View style={[styles.fill, { height: fillHeight, backgroundColor: color }]} />

        {/* Shine */}
        <View style={styles.shine} />

        {/* Tick marks */}
        {[0.25, 0.5, 0.75].map((t) => (
          <View
            key={t}
            style={[styles.tick, { top: (1 - t) * CYLINDER_HEIGHT }]}
          />
        ))}

        {/* Label persentase di tengah cylinder */}
        <View style={styles.pctOverlay}>
          <Text style={[styles.pctText, { color: pct > 0.45 ? "#fff" : color }]}>
            {Math.round(pct * 100)}%
          </Text>
        </View>
      </View>

      <Text style={[styles.value, { color }]}>{value}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { alignItems: "center", gap: 10 },

  label: {
    fontSize: 10,
    fontFamily: "monospace",
    letterSpacing: 0.5,
    color: "#94a3b8",
    textAlign: "center",
  },

  cylinder: {
    width: 56,
    height: CYLINDER_HEIGHT,
    borderRadius: 28,
    backgroundColor: "#f1f5f9",
    borderWidth: 2,
    overflow: "hidden",
    justifyContent: "flex-end",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 4,
  },

  fill: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    borderRadius: 26,
    opacity: 0.85,
  },

  shine: {
    position: "absolute",
    top: 0,
    right: 0,
    bottom: 0,
    width: 14,
    backgroundColor: "rgba(255,255,255,0.5)",
  },

  tick: {
    position: "absolute",
    left: 10,
    right: 10,
    height: 1,
    backgroundColor: "rgba(0,0,0,0.08)",
  },

  pctOverlay: {
    position: "absolute",
    top: 0, bottom: 0, left: 0, right: 0,
    justifyContent: "center",
    alignItems: "center",
  },
  pctText: {
    fontSize: 12,
    fontWeight: "800",
    fontFamily: "monospace",
  },

  value: {
    fontSize: 18,
    fontWeight: "800",
    fontFamily: "monospace",
  },
});