"use client";

import type { Restaurant } from "@/lib/api";
import { getCuisineIcon } from "@/lib/cuisine-icons";
import Icon from "@/components/Icon";
import { RestaurantListSkeleton } from "@/components/Skeleton";

interface RestaurantListProps {
  restaurants: Restaurant[];
  selectedId?: string;
  onSelect: (r: Restaurant) => void;
  loading?: boolean;
  keyPrefix?: string;
}

export default function RestaurantList({
  restaurants,
  selectedId,
  onSelect,
  loading,
  keyPrefix = "",
}: RestaurantListProps) {
  if (loading) {
    return <RestaurantListSkeleton />;
  }

  if (!restaurants.length) {
    return (
      <div className="p-4 text-center text-gray-500 dark:text-gray-400 text-sm">
        표시할 식당이 없습니다
      </div>
    );
  }

  return (
    <div className="p-3 space-y-2">
      {restaurants.map((r) => (
        <button
          key={`${keyPrefix}${r.id}`}
          onClick={() => onSelect(r)}
          className={`w-full text-left p-3 rounded-xl shadow-sm border transition-all hover:shadow-md hover:-translate-y-0.5 ${
            selectedId === r.id
              ? "bg-brand-50 dark:bg-brand-900/20 border-brand-300 dark:border-brand-700 shadow-brand-100 dark:shadow-brand-900/10"
              : "bg-surface border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800"
          }`}
        >
          {/* 1줄: 식당명 + 지역 + 별점 (전체 폭) */}
          <div className="flex items-baseline gap-1.5 flex-wrap">
            <h4 className="font-bold text-[15px] text-gray-900 dark:text-gray-100 shrink-0">
              <Icon name={getCuisineIcon(r.cuisine_type)} size={16} className="mr-0.5 text-brand-600" />
              {r.name}
            </h4>
            {r.region && (
              <span className="text-[11px] text-gray-400 dark:text-gray-500 truncate">{r.region}</span>
            )}
            {r.rating && (
              <span className="text-xs text-yellow-600 dark:text-yellow-400 font-medium whitespace-nowrap shrink-0">★ {r.rating}</span>
            )}
          </div>
          {/* 2줄: 종류/가격(왼) + 유튜브채널(우) */}
          <div className="flex items-center gap-2 mt-1.5">
            <div className="flex gap-x-2 text-xs flex-1 min-w-0">
              {r.cuisine_type && (
                <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400 shrink-0">{r.cuisine_type}</span>
              )}
              {r.price_range && (
                <span className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-gray-700 dark:text-gray-400 truncate min-w-0">{r.price_range}</span>
              )}
            </div>
            {r.channels && r.channels.length > 0 && (
              <div className="shrink-0 flex flex-wrap gap-1 justify-end">
                {r.channels.map((ch) => (
                  <span
                    key={ch}
                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 rounded-full text-[10px] font-medium truncate max-w-[120px]"
                  >
                    <Icon name="play_circle" size={11} filled className="shrink-0 text-red-400" />
                    <span className="truncate">{ch}</span>
                  </span>
                ))}
              </div>
            )}
          </div>
          {/* 3줄: 태그 (전체 폭) */}
          {r.foods_mentioned && r.foods_mentioned.length > 0 && (
            <div className="flex flex-wrap gap-1 mt-1.5">
              {r.foods_mentioned.slice(0, 5).map((f, i) => (
                <span
                  key={i}
                  className="px-1.5 py-0.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-400 rounded text-[10px]"
                >
                  {f}
                </span>
              ))}
              {r.foods_mentioned.length > 5 && (
                <span className="text-[10px] text-gray-500">+{r.foods_mentioned.length - 5}</span>
              )}
            </div>
          )}
        </button>
      ))}
    </div>
  );
}
