import {Check, ExternalLink, Loader2} from 'lucide-react';
import type {LinkData} from '@/api';
import {Badge} from '@/components/ui/badge';
import {Button} from '@/components/ui/button';
import {cn} from '@/lib/utils';
import {CHANNEL_LABEL} from './useCollectFlow';

/**
 * 수집 잡이 찾아온 채널 URL 을 사장님이 확정하는 패널.
 *
 * ★ 이 화면이 파이프라인에서 사람이 반드시 개입해야 하는 지점이다.
 *   확정 없이 긁으면 이름이 비슷한 남의 가게 페이지가 이 가게의 공식 홈페이지에 실린다.
 *   그래서 기본값은 '확정 안 함'이고, 누른 것만 크롤링 대상이 된다.
 */
export function ChannelConfirmPanel({
  links,
  confirmedCount,
  confirmingId,
  onConfirm,
}: {
  links: LinkData[];
  confirmedCount: number;
  confirmingId: string | null;
  onConfirm: (linkId: string) => void;
}) {
  return (
    <div>
      <div className="mb-2 flex items-center justify-between">
        <span className="text-xs font-semibold">찾은 채널 URL</span>
        <Badge variant={confirmedCount > 0 ? 'success' : 'warning'} className="text-[10px]">
          확정 {confirmedCount} / {links.length}
        </Badge>
      </div>

      <ul className="max-h-56 space-y-1.5 overflow-y-auto pr-1">
        {links.map((link) => {
          const isConfirmed = Boolean(link.confirmed_at);
          const isBusy = confirmingId === link.link_id;

          return (
            <li
              key={link.link_id}
              className={cn(
                'rounded-lg border p-2.5 text-[11px]',
                isConfirmed ? 'border-success/40 bg-success/5' : 'border-border bg-muted/40',
              )}
            >
              <div className="flex items-center justify-between gap-2">
                <span className="font-semibold">
                  {CHANNEL_LABEL[link.channel] ?? '기타 채널'}
                </span>
                {isConfirmed ? (
                  <Badge variant="success" className="shrink-0 text-[10px]">
                    확정됨
                  </Badge>
                ) : (
                  <Button
                    size="sm"
                    variant="primary"
                    onClick={() => onConfirm(link.link_id)}
                    disabled={isBusy}
                  >
                    {isBusy ? <Loader2 className="animate-spin" /> : <Check />}
                    <span>내 채널 맞아요</span>
                  </Button>
                )}
              </div>

              <a
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-1 flex items-center gap-1 break-all text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
              >
                <ExternalLink className="size-3 shrink-0" />
                <span className="min-w-0 break-all">{link.url}</span>
              </a>
            </li>
          );
        })}
      </ul>

      <p className="mt-2 text-[11px] leading-relaxed text-muted-foreground">
        링크를 열어 <strong>내 가게가 맞는지 직접 확인</strong>한 뒤 확정해 주세요. 확정한 URL 만
        크롤링합니다 — 확정하지 않은 URL 은 건드리지 않습니다.
      </p>
    </div>
  );
}