/**
 * PlatformChips — 분석 대상 플랫폼/URL을 칩 묶음으로 표시.
 * 리포트 카드, 플랜 카드, 설정 탭 등에서 공통으로 사용합니다.
 *
 * 디자인 원칙:
 *  - 모든 칩은 동일한 형태 (rounded-full, slate-100 보더, 흰 배경)
 *  - 플랫폼 식별은 좌측 컬러 도트 + 아이콘으로 (배경색 폭주 방지)
 *  - URL 클릭 가능 시 ExternalLink 아이콘 노출
 */
import { ExternalLink, Heart, MapPin } from 'lucide-react';
import type { CSSProperties } from 'react';
import {
  InstagramFilled,
  YoutubeFilled,
  FacebookFilled,
  GlobeFilled,
  TiktokFilled,
  FileTextFilled,
} from '@/shared/icons/FilledIcons';
import type { PlatformKey, PlatformTarget } from '../types/workspace';

interface PlatformMeta {
  label: string;
  color: string;
  Icon: (props: { size?: number; className?: string; style?: CSSProperties }) => React.ReactElement;
}

const PLATFORM_META: Record<PlatformKey, PlatformMeta> = {
  website: { label: '홈페이지', color: '#6C5CE7', Icon: GlobeFilled },
  instagram: { label: 'Instagram', color: '#833AB4', Icon: InstagramFilled },
  youtube: { label: 'YouTube', color: '#FF3D3D', Icon: YoutubeFilled },
  facebook: { label: 'Facebook', color: '#1877F2', Icon: FacebookFilled },
  tiktok: { label: 'TikTok', color: '#0A1128', Icon: TiktokFilled },
  gangnamUnni: { label: '강남언니', color: '#FF6B8A', Icon: Heart },
  naverPlace: { label: '네이버 플레이스', color: '#03C75A', Icon: MapPin },
  naverBlog: { label: '네이버 블로그', color: '#03C75A', Icon: FileTextFilled },
};

interface PlatformChipProps {
  target: PlatformTarget;
  size?: 'sm' | 'md';
  clickable?: boolean;
}

export function PlatformChip({ target, size = 'sm', clickable = false }: PlatformChipProps) {
  const meta = PLATFORM_META[target.platform];
  const Icon = meta.Icon;
  const isClickable = clickable && !!target.url;

  const inner = (
    <>
      <span
        aria-hidden
        className="flex items-center justify-center rounded-full"
        style={{
          backgroundColor: `${meta.color}14`,
          width: size === 'sm' ? 18 : 22,
          height: size === 'sm' ? 18 : 22,
        }}
      >
        <Icon size={size === 'sm' ? 11 : 13} style={{ color: meta.color }} />
      </span>
      <span className="text-slate-600 truncate max-w-[160px]" title={target.handle}>
        {target.handle}
      </span>
      {isClickable && <ExternalLink size={11} className="text-slate-300 flex-shrink-0" />}
    </>
  );

  const baseClass =
    'inline-flex items-center gap-1.5 rounded-full bg-white border border-slate-200 font-medium transition-colors';
  const sizeClass = size === 'sm' ? 'px-2.5 py-1 text-[11px]' : 'px-3 py-1.5 text-xs';

  if (isClickable) {
    return (
      <a
        href={target.url}
        target="_blank"
        rel="noopener noreferrer"
        className={`${baseClass} ${sizeClass} hover:border-slate-300 hover:bg-slate-50`}
      >
        {inner}
      </a>
    );
  }

  return <span className={`${baseClass} ${sizeClass}`}>{inner}</span>;
}

interface PlatformChipsProps {
  targets: PlatformTarget[];
  size?: 'sm' | 'md';
  clickable?: boolean;
  emptyLabel?: string;
}

export function PlatformChips({
  targets,
  size = 'sm',
  clickable = false,
  emptyLabel = '연결된 채널 없음',
}: PlatformChipsProps) {
  if (targets.length === 0) {
    return <span className="text-xs text-slate-400">{emptyLabel}</span>;
  }
  return (
    <div className="flex flex-wrap items-center gap-1.5">
      {targets.map((t) => (
        <PlatformChip key={`${t.platform}-${t.handle}`} target={t} size={size} clickable={clickable} />
      ))}
    </div>
  );
}

export { PLATFORM_META };
