"use client";

import { useState } from "react";
import { commentsLabel } from "@/lib/feed-model";
import { SparkleButton } from "./Buttons";
import type { CurrentSlide } from "./MobileFeed";
import type { CardPost } from "@/lib/feed-model";

const icon = {
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.7,
  strokeLinecap: "round" as const,
  strokeLinejoin: "round" as const,
  "aria-hidden": true,
};

export interface MobileDockProps {
  /** The slide on screen; like and comments act on its post. */
  slide: CurrentSlide;
  onToggleLike?: (post: CardPost) => void;
  likeBusy?: boolean;
  onOpenComments?: (postId: string) => void;
  onOpenComposer?: () => void;
  onOpenMore?: () => void;
}

/** What the like and comment buttons show and whether they work, for the slide on screen. */
export function dockState(slide: CurrentSlide, opts: { canLike?: boolean; likeBusy?: boolean } = {}) {
  const post = slide.kind === "post" ? slide.post : null;
  if (!post) {
    return { post: null, liked: false, likes: null, comments: null, likeLabel: "Like", commentsLabel: "Comments", likeDisabled: true, commentsDisabled: true };
  }
  return {
    post,
    liked: post.isLiked,
    likes: post.likesCount,
    comments: post.commentsCount,
    likeLabel: post.isLiked ? `Unlike, ${post.likesCount} likes` : `Like, ${post.likesCount} likes`,
    commentsLabel: `Open comments, ${commentsLabel(post.commentsCount).toLowerCase()}`,
    likeDisabled: !post.id || !opts.canLike || !!opts.likeBusy,
    commentsDisabled: !post.id,
  };
}

/**
 * Phone dock (spec "Mobile layout" > "Bottom dock"): a frosted bar 16px above the
 * bottom. Like and comments act on the post on screen and are disabled on the
 * featured and loading slides. Liked state and counts come from the post itself,
 * the same source as the desktop like button and double-tap.
 */
export function MobileDock({ slide, onToggleLike, likeBusy, onOpenComments, onOpenComposer, onOpenMore }: MobileDockProps) {
  const s = dockState(slide, { canLike: !!onToggleLike, likeBusy });
  const [beat, setBeat] = useState(false);
  return (
    <nav className="dock" aria-label="Post actions" data-testid="feed-dock">
      <button
        type="button"
        className={`dk dk-like${s.liked ? " dk-like-on" : ""}${beat && s.liked ? " dk-beat" : ""}`}
        aria-pressed={s.liked}
        aria-label={s.likeLabel}
        disabled={s.likeDisabled}
        onClick={() => {
          if (!s.post) return;
          setBeat(!s.post.isLiked);
          onToggleLike?.(s.post);
        }}
        onAnimationEnd={() => setBeat(false)}
      >
        <svg {...icon} fill={s.liked ? "currentColor" : "none"}>
          <path d="M12 20.5s-7.5-4.4-9.4-9.1C1.3 8 3.1 4.5 6.6 4.5c2 0 3.5 1.1 4.3 2.4.5.7 1.7.7 2.2 0 .8-1.3 2.3-2.4 4.3-2.4 3.5 0 5.3 3.5 4 6.9-1.9 4.7-9.4 9.1-9.4 9.1z" />
        </svg>
        {s.likes !== null ? <span className="dk-n" data-testid="dock-likes">{s.likes}</span> : null}
      </button>
      <button
        type="button"
        className="dk dk-comments"
        aria-label={s.commentsLabel}
        disabled={s.commentsDisabled}
        onClick={() => {
          if (s.post?.id) onOpenComments?.(s.post.id);
        }}
      >
        <svg {...icon}>
          <path d="M21 12a8.5 8.5 0 0 1-12.4 7.6L3.5 21l1.4-4.6A8.5 8.5 0 1 1 21 12z" />
        </svg>
        {s.comments !== null ? <span className="dk-n" data-testid="dock-comments">{s.comments}</span> : null}
      </button>
      <SparkleButton variant="fab" label="New post" className="dk-plus" onClick={() => onOpenComposer?.()} />
      <button type="button" className="dk dk-more" aria-label="View more" onClick={() => onOpenMore?.()}>
        <svg {...icon}>
          <rect x="3.5" y="3.5" width="7" height="7" rx="2" />
          <rect x="13.5" y="3.5" width="7" height="7" rx="2" />
          <rect x="3.5" y="13.5" width="7" height="7" rx="2" />
          <rect x="13.5" y="13.5" width="7" height="7" rx="2" />
        </svg>
        More
      </button>
    </nav>
  );
}