import { motion } from 'motion/react';
import { ExternalLink } from 'lucide-react';

/**
 * 병원 외부 채널/플랫폼 링크 버튼 묶음.
 * URL 이 있는 항목만 렌더링.
 */
export interface ExternalLinkItem {
  label: string;
  url: string;
  /** Tailwind classes for bg + border + text color */
  colorClass: string;
}

interface ExternalLinkButtonsProps {
  items: ExternalLinkItem[];
  className?: string;
}

export function ExternalLinkButtons({ items, className }: ExternalLinkButtonsProps) {
  const visible = items.filter((it) => it.url);
  if (visible.length === 0) return null;

  return (
    <motion.div
      className={`flex flex-wrap gap-2 ${className ?? ''}`}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.4, delay: 0.1 }}
    >
      {visible.map((item) => (
        <a
          key={item.label}
          href={item.url}
          target="_blank"
          rel="noopener noreferrer"
          className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${item.colorClass}`}
        >
          {item.label} <ExternalLink size={11} />
        </a>
      ))}
    </motion.div>
  );
}

/** ClinicSnapshot 데이터에서 사용 가능한 URL 들을 색상 매핑된 항목 배열로 변환 */
export function buildClinicLinks(opts: {
  homepage?: string | null;
  gangnamUnniUrl?: string | null;
  naverPlaceUrl?: string | null;
  naverBlogUrl?: string | null;
  googleMapsUrl?: string | null;
  youtubeUrl?: string | null;
  instagramUrl?: string | null;
  facebookUrl?: string | null;
  tiktokUrl?: string | null;
}): ExternalLinkItem[] {
  const normalize = (raw: string | null | undefined) => {
    if (!raw) return '';
    return /^https?:\/\//.test(raw) ? raw : `https://${raw.replace(/^\/+/, '')}`;
  };
  return [
    { label: '홈페이지', url: normalize(opts.homepage), colorClass: 'bg-purple-50 border-purple-200 text-purple-700 hover:bg-purple-100' },
    { label: '강남언니', url: normalize(opts.gangnamUnniUrl), colorClass: 'bg-pink-50 border-pink-200 text-pink-700 hover:bg-pink-100' },
    { label: '네이버 플레이스', url: normalize(opts.naverPlaceUrl), colorClass: 'bg-green-50 border-green-200 text-green-700 hover:bg-green-100' },
    { label: '네이버 블로그', url: normalize(opts.naverBlogUrl), colorClass: 'bg-emerald-50 border-emerald-200 text-emerald-700 hover:bg-emerald-100' },
    { label: 'Google Maps', url: normalize(opts.googleMapsUrl), colorClass: 'bg-blue-50 border-blue-200 text-blue-700 hover:bg-blue-100' },
    { label: 'YouTube', url: normalize(opts.youtubeUrl), colorClass: 'bg-red-50 border-red-200 text-red-700 hover:bg-red-100' },
    { label: 'Instagram', url: normalize(opts.instagramUrl), colorClass: 'bg-fuchsia-50 border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-100' },
    { label: 'Facebook', url: normalize(opts.facebookUrl), colorClass: 'bg-sky-50 border-sky-200 text-sky-700 hover:bg-sky-100' },
    { label: 'TikTok', url: normalize(opts.tiktokUrl), colorClass: 'bg-slate-50 border-slate-200 text-slate-700 hover:bg-slate-100' },
  ];
}
