<script lang="ts">
  import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
  import { getUserInitials } from "$lib/utils";

  interface User {
    name?: string;
    email: string;
    avatar?: string;
  }

  interface Props {
    user: User;
    onLogout: () => void;
    class?: string;
  }

  let { user, onLogout, class: className = "" }: Props = $props();

  let container: HTMLDivElement;
  let isDragging = $state(false);
  let slidePosition = $state(0);
  let startX = 0;
  let currentX = 0;
  let maxSlide = $derived(container ? container.offsetWidth - 40 : 117);
  let threshold = 0.75; // 70% threshold to trigger logout

  // Calculate slide progress (0 to 1)
  const slideProgress = $derived(Math.min(slidePosition / maxSlide, 1));
  const isNearThreshold = $derived(slideProgress > threshold);

  const handleStart = (clientX: number) => {
    isDragging = true;
    startX = clientX;
    currentX = clientX;
  };

  const handleMove = (clientX: number) => {
    if (!isDragging) return;

    currentX = clientX;
    const deltaX = currentX - startX;
    slidePosition = Math.max(0, Math.min(deltaX, maxSlide));
  };

  const handleEnd = () => {
    if (!isDragging) return;

    isDragging = false;

    if (slideProgress >= threshold) {
      // Trigger logout
      slidePosition = maxSlide;
      onLogout();
    } else {
      // Snap back
      slidePosition = 0;
    }
  };

  // Mouse events
  const handleMouseDown = (e: MouseEvent) => {
    e.preventDefault();
    handleStart(e.clientX);
  };

  const handleMouseMove = (e: MouseEvent) => {
    handleMove(e.clientX);
  };

  const handleMouseUp = () => {
    handleEnd();
  };

  // Touch events
  const handleTouchStart = (e: TouchEvent) => {
    handleStart(e.touches[0].clientX);
  };

  const handleTouchMove = (e: TouchEvent) => {
    e.preventDefault();
    handleMove(e.touches[0].clientX);
  };

  const handleTouchEnd = () => {
    handleEnd();
  };

  // Add global event listeners when dragging
  $effect(() => {
    if (isDragging) {
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
      document.addEventListener("touchmove", handleTouchMove, { passive: false });
      document.addEventListener("touchend", handleTouchEnd);

      return () => {
        document.removeEventListener("mousemove", handleMouseMove);
        document.removeEventListener("mouseup", handleMouseUp);
        document.removeEventListener("touchmove", handleTouchMove);
        document.removeEventListener("touchend", handleTouchEnd);
      };
    }
  });
</script>

<div
  bind:this={container}
  class="relative h-10 w-40 rounded-full bg-muted/30 overflow-hidden select-none transition-all duration-300 bg-muted/40 shadow-lg shadow-accent/10 {isDragging
    ? 'cursor-grabbing'
    : ''} {className}"
  style="background: linear-gradient(90deg, 
		oklch(var(--primary) / 0.3) 0%, 
		oklch(var(--primary) / 0.3) {(1 - slideProgress) * 100}%, 
		oklch(var(--accent) / {0.1 + slideProgress * 0.2}) {(1 - slideProgress) * 100}%, 
		oklch(var(--accent) / {0.2 + slideProgress * 0.3}) 100%
	)"
>
  <!-- Background slide indicator -->
  <div
    class="absolute inset-0 rounded-full transition-all duration-200"
    style="background: linear-gradient(90deg, 
			transparent 0%, 
			transparent {Math.max(0, slideProgress * 100 - 20)}%, 
			oklch(var(--accent) / {slideProgress * 0.1}) {slideProgress * 100}%, 
			oklch(var(--accent) / {slideProgress * 0.2}) 100%
		)"
  ></div>

  <!-- Sliding user info -->
  <button
    class="cursor-grab absolute left-0 top-0 h-full flex items-center gap-3 px-2 transition-all duration-200 ease-out rounded-full bg-background/80 backdrop-blur-sm border border-border/50 bg-background/90 border-primary/20 {isDragging
      ? ''
      : 'transition-all duration-300 ease-out'}"
    style="transform: translateX({slidePosition}px); width: calc(100% - {slidePosition}px);"
    onmousedown={handleMouseDown}
    ontouchstart={handleTouchStart}
  >
    <Avatar
      class="h-7 w-7 ring-2 ring-accent/20 transition-all duration-200 {isNearThreshold
        ? 'ring-destructive/40'
        : ''}"
      style="opacity: {Math.max(0.1, 1 - slideProgress * 1.8)}"
    >
      <AvatarImage src={user.avatar} alt={user.name || user.email} />
      <AvatarFallback
        class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold transition-all duration-200 {isNearThreshold
          ? 'from-destructive to-destructive/80'
          : ''}"
      >
        {getUserInitials(user.name || user.email)}
      </AvatarFallback>
    </Avatar>
    <div class="text-left flex flex-col min-w-0 flex-1">
      <span
        class="text-sm font-medium text-foreground leading-none truncate transition-all duration-200 {isNearThreshold
          ? 'text-destructive'
          : ''}"
        style="opacity: {Math.max(0.15, 1 - slideProgress * 1.5)}"
        >{user?.name ? user.name.split(" ")[0] : "User"}</span
      >
      <span
        class="text-xs text-muted-foreground leading-none transition-all duration-200 {isNearThreshold
          ? 'text-destructive/70'
          : ''}"
        style="opacity: {Math.max(0.1, 1 - slideProgress * 1.8)}"
      >
        {slideProgress > 0.3 ? "Logout" : "Online"}
      </span>
    </div>
  </button>

  <!-- Logout icon area -->
  <div
    class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 {isNearThreshold
      ? 'bg-destructive text-destructive-foreground scale-110'
      : 'bg-transparent text-foreground'}"
  >
    <span
      class="icon-[ri--logout-circle-r-line] h-4 w-4 transition-transform duration-200 {isNearThreshold
        ? 'scale-110'
        : ''}"
    ></span>
  </div>

  <!-- Progress indicator -->
  <!-- <div class="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-200 rounded-full" style="width: {slideProgress * 100}%"></div> -->
</div>
