"use client";

import Link from "next/link";
import Image from "next/image";

interface HostLinkProps {
  host: { id: string; name: string; avatar: string; bio: string; link?: string };
  /** 志愿者招募：无审核通过时显示「立即申请」+ 免费标识 */
  ctaText?: string;
  showFreeBadge?: boolean;
}

/** 移动端优先尝试唤醒小红书 app，PC 新窗口打开 */
export default function HostLink({ host, ctaText, showFreeBadge }: HostLinkProps) {
  const href = "link" in host ? host.link : `/host/${host.id}`;
  const isXiaohongshu = typeof href === "string" && (href.includes("xhslink.com") || href.includes("xiaohongshu.com"));

  const handleClick = (e: React.MouseEvent) => {
    if (!isXiaohongshu || typeof href !== "string") return;
    const isMobile = /Android|iPhone|iPad|iPod|webOS|Mobile/i.test(navigator.userAgent);
    if (isMobile) {
      e.preventDefault();
      // 移动端：同窗口打开，xhslink.com 会尝试唤起小红书 app，未安装则打开网页
      window.location.assign(href);
    }
  };

  if (typeof href !== "string") return null;

  return (
    <Link
      href={href}
      target={href.startsWith("http") ? "_blank" : undefined}
      rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
      onClick={handleClick}
      className="flex gap-3 sm:gap-4 p-4 sm:p-5 rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 hover:border-amber-200 dark:hover:border-amber-900/50 hover:shadow-lg transition-all"
    >
      <div className="relative w-14 h-14 sm:w-16 sm:h-16 shrink-0 rounded-full overflow-hidden border-2 border-amber-100 dark:border-amber-900/30">
        <Image src={host.avatar} alt={host.name} fill sizes="64px" className="object-cover" unoptimized />
      </div>
      <div className="min-w-0 flex-1 text-left">
        <div className="flex items-center gap-2 flex-wrap">
          <h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">{host.name}</h3>
          {showFreeBadge && (
            <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-medium bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300">
              FREE
            </span>
          )}
        </div>
        <p className="mt-0.5 text-xs sm:text-sm text-stone-500 dark:text-stone-400 line-clamp-2">{host.bio}</p>
        <span className="inline-flex items-center gap-1 mt-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
          {ctaText ?? "查看主页"} →
        </span>
      </div>
    </Link>
  );
}