"use client";

import { Button } from "@/components/ui/button";
import { useRouter } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { ArrowLeft, Calendar, Eye } from "lucide-react";
import { useTranslations } from "next-intl";
import { ReactNode } from "react";

interface PublicationItemProps {
  id: string;
  title: string;
  publishDate: string;
  platformName: string;
  platformIcon: ReactNode;
  views: number;
  shares: number;
  comments: number;
  likes: number;
  className?: string;
  showViewButton?: boolean;
  href?: string;
}

/**
 * Displays a publication/post item with title, date, platform, and stats.
 * Includes a "View Details" button that navigates to the post detail page.
 */
export function PublicationItem({
  id,
  title,
  publishDate,
  platformName,
  platformIcon,
  views,
  shares,
  comments,
  likes,
  className,
  showViewButton = true,
  href,
}: PublicationItemProps) {
  const t = useTranslations();
  const router = useRouter();

  const handleViewDetails = () => {
    router.push(href ?? `/social-media/post/${id}`);
  };

  return (
    <div className={cn("px-4 py-3", className)}>
      <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start w-full">
        {/* Publication Content */}
        <div className="flex flex-col gap-2 items-start justify-center flex-1 min-w-0 w-full sm:w-auto">
          {/* Title */}
          <h3 className="text-sm font-bold text-foreground text-start w-full line-clamp-2">
            {title}
          </h3>

          {/* Date and Platform */}
          <div className="flex gap-1 items-center flex-wrap">
            <div className="flex gap-1 items-center text-xs">
              <span className="text-muted-foreground text-start">
                {publishDate}
              </span>
              <Calendar className="w-3.5 h-3.5 text-muted-foreground" />
            </div>
            <div className="flex items-center pr-2">
              <Separator />
            </div>
            <div className="flex gap-1 items-center">
              {platformIcon}
              <span className="text-xs text-muted-foreground text-start">
                {platformName}
              </span>
            </div>
          </div>

          {/* Stats Row */}
          <div className="flex gap-1 items-center flex-wrap">
            <StatWithSeparator label={t("socialMedia.views")} value={views} />
            <StatWithSeparator label={t("socialMedia.shares")} value={shares} />
            <StatWithSeparator
              label={t("socialMedia.comments")}
              value={comments}
            />
            <StatWithSeparator
              label={t("socialMedia.likes")}
              value={likes}
              showSeparator={false}
            />
          </div>
        </div>

        {/* View Details Button */}
        {showViewButton && (
          <Button
            variant="outline"
            size="sm"
            className="h-8 sm:h-6 gap-1.5 px-3 sm:px-2 text-xs shrink-0 w-full sm:w-auto"
            onClick={handleViewDetails}
          >
            <Eye className="size-3.5" />
            <span>{t("socialMedia.viewDetails")}</span>
          </Button>
        )}
      </div>
    </div>
  );
}

function StatWithSeparator({
  label,
  value,
  showSeparator = true,
}: {
  label: string;
  value: number;
  showSeparator?: boolean;
}) {
  return (
    <>
      <div className="flex gap-1 items-center text-xs">
        <span className="text-muted-foreground ">{label}</span>
        <span className="font-semibold text-foreground leading-[18px] ">
          {value.toLocaleString()}
        </span>
      </div>
      {showSeparator && <Separator />}
    </>
  );
}

function Separator() {
  return (
    <div className="flex items-center justify-center size-3.5 shrink-0 mb-2.5">
      <span className="w-3.5 h-3.5 text-muted-foreground">|</span>
    </div>
  );
}