"use client";

import { useCallback, useEffect, useState } from "react";
import { api } from "@/lib/api";
import type { Channel, Video, VideoDetail, VideoLink, Restaurant, DaemonConfig } from "@/lib/api";
import { useAuth } from "@/lib/auth-context";

type Tab = "channels" | "videos" | "restaurants" | "users" | "daemon";

function CacheFlushButton() {
  const [flushing, setFlushing] = useState(false);

  const handleFlush = async () => {
    if (!confirm("Redis 캐시를 초기화하시겠습니까?")) return;
    setFlushing(true);
    try {
      await api.flushCache();
      alert("캐시가 초기화되었습니다.");
    } catch (e) {
      alert("캐시 초기화 실패: " + (e instanceof Error ? e.message : e));
    } finally {
      setFlushing(false);
    }
  };

  return (
    <button
      onClick={handleFlush}
      disabled={flushing}
      className="px-3 py-1.5 text-xs bg-red-50 text-red-600 border border-red-200 rounded-lg hover:bg-red-100 disabled:opacity-50 transition-colors"
    >
      {flushing ? "초기화 중..." : "🗑 캐시 초기화"}
    </button>
  );
}

export default function AdminPage() {
  const [tab, setTab] = useState<Tab>("channels");
  const { user, isLoading } = useAuth();

  const isAdmin = user?.is_admin === true;

  if (isLoading) {
    return <div className="min-h-screen bg-background flex items-center justify-center text-gray-500">로딩 중...</div>;
  }

  if (!user) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-600 mb-4">로그인이 필요합니다</p>
          <a href="/" className="text-brand-600 hover:underline">메인으로 돌아가기</a>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background text-gray-900">
      <header className="bg-surface border-b border-brand-100 px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <img src="/logo-80h.png" alt="Tasteby" className="h-7" />
            <span className="text-xl font-bold text-gray-500">Admin</span>
            {!isAdmin && (
              <span className="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">읽기 전용</span>
            )}
          </div>
          <div className="flex items-center gap-3">
            {isAdmin && <CacheFlushButton />}
            <a href="/" className="text-sm text-brand-600 hover:underline">
              &larr; 메인으로
            </a>
          </div>
        </div>
        <nav className="mt-3 flex gap-1">
          {(["channels", "videos", "restaurants", "users", "daemon"] as Tab[]).map((t) => (
            <button
              key={t}
              onClick={() => setTab(t)}
              className={`px-4 py-2 text-sm rounded-t font-medium ${
                tab === t
                  ? "bg-brand-600 text-white"
                  : "bg-brand-50 text-brand-700 hover:bg-brand-100"
              }`}
            >
              {t === "channels" ? "채널 관리" : t === "videos" ? "영상 관리" : t === "restaurants" ? "식당 관리" : t === "users" ? "유저 관리" : "데몬 설정"}
            </button>
          ))}
        </nav>
      </header>

      <main className="max-w-6xl mx-auto p-6">
        {tab === "channels" && <ChannelsPanel isAdmin={isAdmin} />}
        {tab === "videos" && <VideosPanel isAdmin={isAdmin} />}
        {tab === "restaurants" && <RestaurantsPanel isAdmin={isAdmin} />}
        {tab === "users" && <UsersPanel />}
        {tab === "daemon" && <DaemonPanel isAdmin={isAdmin} />}
      </main>
    </div>
  );
}

/* ─── 채널 관리 ─── */
function ChannelsPanel({ isAdmin }: { isAdmin: boolean }) {
  const [channels, setChannels] = useState<Channel[]>([]);
  const [newId, setNewId] = useState("");
  const [newName, setNewName] = useState("");
  const [newFilter, setNewFilter] = useState("");
  const [loading, setLoading] = useState(false);
  const [scanResult, setScanResult] = useState<Record<string, string>>({});

  const load = useCallback(() => {
    api.getChannels().then(setChannels).catch(console.error);
  }, []);

  useEffect(() => { load(); }, [load]);

  const handleAdd = async () => {
    if (!newId.trim() || !newName.trim()) return;
    setLoading(true);
    try {
      await api.addChannel(newId.trim(), newName.trim(), newFilter.trim() || undefined);
      setNewId("");
      setNewName("");
      setNewFilter("");
      load();
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : "채널 추가 실패");
    } finally {
      setLoading(false);
    }
  };

  const [editingChannel, setEditingChannel] = useState<string | null>(null);
  const [editDesc, setEditDesc] = useState("");
  const [editTags, setEditTags] = useState("");
  const [editOrder, setEditOrder] = useState<number>(99);

  const handleSaveChannel = async (id: string) => {
    try {
      await api.updateChannel(id, { description: editDesc, tags: editTags, sort_order: editOrder });
      setEditingChannel(null);
      load();
    } catch {
      alert("채널 수정 실패");
    }
  };

  const handleDelete = async (channelId: string, channelName: string) => {
    if (!confirm(`"${channelName}" 채널을 삭제하시겠습니까?`)) return;
    try {
      await api.deleteChannel(channelId);
      load();
    } catch {
      alert("채널 삭제 실패");
    }
  };

  const handleScan = async (channelId: string, full: boolean = false) => {
    setScanResult((prev) => ({ ...prev, [channelId]: full ? "전체 스캔 중..." : "스캔 중..." }));
    try {
      const res = await api.scanChannel(channelId, full);
      setScanResult((prev) => ({
        ...prev,
        [channelId]: `${res.total_fetched}개 조회, ${res.new_videos}개 신규${(res as Record<string, unknown>).filtered ? `, ${(res as Record<string, unknown>).filtered}개 필터링` : ""}`,
      }));
    } catch {
      setScanResult((prev) => ({ ...prev, [channelId]: "스캔 실패" }));
    }
  };

  return (
    <div>
      {isAdmin && <div className="bg-surface rounded-lg shadow p-4 mb-6">
        <h2 className="font-semibold mb-3">채널 추가</h2>
        <div className="flex gap-2">
          <input
            placeholder="YouTube Channel ID"
            value={newId}
            onChange={(e) => setNewId(e.target.value)}
            className="border rounded px-3 py-2 flex-1 text-sm bg-surface text-gray-900"
          />
          <input
            placeholder="채널 이름"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            className="border rounded px-3 py-2 flex-1 text-sm bg-surface text-gray-900"
          />
          <input
            placeholder="제목 필터 (선택)"
            value={newFilter}
            onChange={(e) => setNewFilter(e.target.value)}
            className="border rounded px-3 py-2 w-40 text-sm bg-surface text-gray-900"
          />
          <button
            onClick={handleAdd}
            disabled={loading}
            className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700 disabled:opacity-50"
          >
            추가
          </button>
        </div>
      </div>}

      <div className="bg-surface rounded-lg shadow">
        <table className="w-full text-sm">
          <thead className="bg-brand-50 border-b border-brand-100 text-brand-800 text-sm font-semibold">
            <tr>
              <th className="text-left px-4 py-3">채널 이름</th>
              <th className="text-left px-4 py-3">Channel ID</th>
              <th className="text-left px-4 py-3">제목 필터</th>
              <th className="text-left px-4 py-3">설명</th>
              <th className="text-left px-4 py-3">태그</th>
              <th className="text-center px-4 py-3">순서</th>
              <th className="text-right px-4 py-3">영상 수</th>
              {isAdmin && <th className="text-left px-4 py-3">액션</th>}
              <th className="text-left px-4 py-3">스캔 결과</th>
            </tr>
          </thead>
          <tbody>
            {channels.map((ch) => (
              <tr key={ch.id} className="border-b hover:bg-brand-50/50">
                <td className="px-4 py-3 font-medium">{ch.channel_name}</td>
                <td className="px-4 py-3 text-gray-500 font-mono text-xs">
                  {ch.channel_id}
                </td>
                <td className="px-4 py-3 text-sm">
                  {ch.title_filter ? (
                    <span className="px-2 py-0.5 bg-brand-50 text-brand-700 rounded text-xs">
                      {ch.title_filter}
                    </span>
                  ) : (
                    <span className="text-gray-400 text-xs">전체</span>
                  )}
                </td>
                <td className="px-4 py-3 text-xs">
                  {editingChannel === ch.id ? (
                    <input value={editDesc} onChange={(e) => setEditDesc(e.target.value)}
                      className="border rounded px-2 py-1 text-xs w-32 bg-surface text-gray-900" placeholder="설명" />
                  ) : (
                    <span className="text-gray-600 cursor-pointer" onClick={() => {
                      if (!isAdmin) return;
                      setEditingChannel(ch.id); setEditDesc(ch.description || ""); setEditTags(ch.tags || ""); setEditOrder(ch.sort_order ?? 99);
                    }}>{ch.description || <span className="text-gray-400">-</span>}</span>
                  )}
                </td>
                <td className="px-4 py-3 text-xs">
                  {editingChannel === ch.id ? (
                    <div className="flex gap-1">
                      <input value={editTags} onChange={(e) => setEditTags(e.target.value)}
                        className="border rounded px-2 py-1 text-xs w-40 bg-surface text-gray-900" placeholder="태그 (쉼표 구분)" />
                      <button onClick={() => handleSaveChannel(ch.id)} className="text-brand-600 text-xs hover:underline">저장</button>
                      <button onClick={() => setEditingChannel(null)} className="text-gray-400 text-xs hover:underline">취소</button>
                    </div>
                  ) : (
                    <span className="text-gray-500 cursor-pointer" onClick={() => {
                      if (!isAdmin) return;
                      setEditingChannel(ch.id); setEditDesc(ch.description || ""); setEditTags(ch.tags || ""); setEditOrder(ch.sort_order ?? 99);
                    }}>{ch.tags ? ch.tags.split(",").map(t => t.trim()).join(", ") : <span className="text-gray-400">-</span>}</span>
                  )}
                </td>
                <td className="px-4 py-3 text-center text-xs">
                  {editingChannel === ch.id ? (
                    <input type="number" value={editOrder} onChange={(e) => setEditOrder(Number(e.target.value))}
                      className="border rounded px-2 py-1 text-xs w-14 text-center bg-surface text-gray-900" min={1} />
                  ) : (
                    <span className="text-gray-500">{ch.sort_order ?? 99}</span>
                  )}
                </td>
                <td className="px-4 py-3 text-right font-medium">
                  {ch.video_count > 0 ? (
                    <span className="px-2 py-0.5 bg-green-50 text-green-700 rounded text-xs">{ch.video_count}개</span>
                  ) : (
                    <span className="text-gray-400 text-xs">0</span>
                  )}
                </td>
                {isAdmin && <td className="px-4 py-3 flex gap-3">
                  <button
                    onClick={() => handleScan(ch.channel_id)}
                    className="text-brand-600 hover:underline text-sm"
                  >
                    스캔
                  </button>
                  <button
                    onClick={() => handleScan(ch.channel_id, true)}
                    className="text-purple-600 hover:underline text-sm"
                  >
                    전체 스캔
                  </button>
                  <button
                    onClick={() => handleDelete(ch.id, ch.channel_name)}
                    className="text-red-500 hover:underline text-sm"
                  >
                    삭제
                  </button>
                </td>}
                <td className="px-4 py-3 text-gray-600">
                  {scanResult[ch.channel_id] || "-"}
                </td>
              </tr>
            ))}
            {channels.length === 0 && (
              <tr>
                <td colSpan={7} className="px-4 py-8 text-center text-gray-400">
                  등록된 채널이 없습니다
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ─── 영상 관리 ─── */
type VideoSortKey = "status" | "channel_name" | "title" | "published_at";

function VideosPanel({ isAdmin }: { isAdmin: boolean }) {
  const [videos, setVideos] = useState<Video[]>([]);
  const [channels, setChannels] = useState<Channel[]>([]);
  const [channelFilter, setChannelFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [titleSearch, setTitleSearch] = useState("");
  const [processing, setProcessing] = useState(false);
  const [processResult, setProcessResult] = useState("");
  const [sortKey, setSortKey] = useState<VideoSortKey>("published_at");
  const [sortAsc, setSortAsc] = useState(false);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [deleting, setDeleting] = useState(false);
  const [page, setPage] = useState(0);
  const perPage = 15;
  const [detail, setDetail] = useState<VideoDetail | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [fetchingTranscript, setFetchingTranscript] = useState(false);
  const [transcriptMode, setTranscriptMode] = useState<"auto" | "manual" | "generated">("auto");
  const [extracting, setExtracting] = useState(false);
  const [showPrompt, setShowPrompt] = useState(false);
  const [prompt, setPrompt] = useState("");
  const [editingTitle, setEditingTitle] = useState(false);
  const [editTitle, setEditTitle] = useState("");
  const [editingRestIdx, setEditingRestIdx] = useState<number | null>(null);
  const [editRest, setEditRest] = useState<{
    name: string;
    cuisine_type: string;
    foods_mentioned: string;
    evaluation: string;
    address: string;
    region: string;
    price_range: string;
    guests: string;
  } | null>(null);
  const [saving, setSaving] = useState(false);
  const [showManualAdd, setShowManualAdd] = useState(false);
  const [manualForm, setManualForm] = useState({ name: "", address: "", region: "", cuisine_type: "", price_range: "", foods_mentioned: "", evaluation: "", guests: "" });
  const [manualAdding, setManualAdding] = useState(false);
  const [bulkExtracting, setBulkExtracting] = useState(false);
  const [bulkTranscripting, setBulkTranscripting] = useState(false);
  const [rebuildingVectors, setRebuildingVectors] = useState(false);
  const [vectorProgress, setVectorProgress] = useState<{ phase: string; current: number; total: number; name?: string } | null>(null);
  const [remappingCuisine, setRemappingCuisine] = useState(false);
  const [remapProgress, setRemapProgress] = useState<{ current: number; total: number; updated: number } | null>(null);
  const [remappingFoods, setRemappingFoods] = useState(false);
  const [foodsProgress, setFoodsProgress] = useState<{ current: number; total: number; updated: number } | null>(null);
  const [bulkProgress, setBulkProgress] = useState<{
    label: string;
    total: number;
    current: number;
    currentTitle: string;
    results: { title: string; detail: string; error?: boolean }[];
    waiting?: number;
  } | null>(null);

  useEffect(() => {
    api.getChannels().then(setChannels).catch(console.error);
  }, []);

  const load = useCallback((reset = true) => {
    api
      .getVideos({ status: statusFilter || undefined })
      .then((data) => {
        setVideos(data);
        if (reset) {
          setSelected(new Set());
          setPage(0);
        }
      })
      .catch(console.error);
  }, [statusFilter]);

  useEffect(() => { load(); }, [load]);

  const handleSelectVideo = async (v: Video) => {
    if (detail?.id === v.id) {
      setDetail(null);
      return;
    }
    setDetailLoading(true);
    try {
      const d = await api.getVideoDetail(v.id);
      setDetail(d);
    } catch {
      alert("영상 상세 조회 실패");
    } finally {
      setDetailLoading(false);
    }
  };

  const handleDelete = async (id: string, title: string) => {
    if (!confirm(`"${title}" 영상을 삭제하시겠습니까?\n연결된 식당 데이터도 함께 삭제됩니다.`)) return;
    try {
      await api.deleteVideo(id);
      load();
    } catch {
      alert("영상 삭제 실패");
    }
  };

  const handleSkip = async (id: string) => {
    try {
      await api.skipVideo(id);
      load();
    } catch {
      alert("건너뛰기 실패");
    }
  };

  const handleBulkSkip = async () => {
    if (selected.size === 0) return;
    if (!confirm(`선택한 ${selected.size}개 영상을 건너뛰시겠습니까?`)) return;
    for (const id of selected) {
      try { await api.skipVideo(id); } catch { /* ignore */ }
    }
    setSelected(new Set());
    load();
  };

  const handleBulkDelete = async () => {
    if (selected.size === 0) return;
    if (!confirm(`선택한 ${selected.size}개 영상을 삭제하시겠습니까?\n연결된 식당 데이터도 함께 삭제됩니다.`)) return;
    setDeleting(true);
    let failed = 0;
    for (const id of selected) {
      try { await api.deleteVideo(id); } catch { failed++; }
    }
    setSelected(new Set());
    load();
    setDeleting(false);
    if (failed > 0) alert(`${failed}개 삭제 실패`);
  };

  const toggleSelect = (id: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const handleProcess = async () => {
    setProcessing(true);
    setProcessResult("");
    try {
      const res = await api.triggerProcessing(10);
      setProcessResult(`${res.restaurants_extracted}개 식당 추출 완료`);
      load();
    } catch {
      setProcessResult("처리 실패");
    } finally {
      setProcessing(false);
    }
  };

  const startBulkStream = async (mode: "transcript" | "extract", ids?: string[]) => {
    const isTranscript = mode === "transcript";
    const setRunning = isTranscript ? setBulkTranscripting : setBulkExtracting;
    const hasSelection = ids && ids.length > 0;

    try {
      let count: number;
      if (hasSelection) {
        count = ids.length;
      } else {
        const pending = isTranscript
          ? await api.getBulkTranscriptPending()
          : await api.getBulkExtractPending();
        if (pending.count === 0) {
          alert(isTranscript ? "자막 없는 영상이 없습니다" : "추출 대기 중인 영상이 없습니다");
          return;
        }
        count = pending.count;
      }
      const msg = isTranscript
        ? `${hasSelection ? "선택한 " : "자막 없는 "}영상 ${count}개의 트랜스크립트를 수집하시겠습니까?`
        : `${hasSelection ? "선택한 " : "LLM 추출이 안된 "}영상 ${count}개를 벌크 처리하시겠습니까?`;
      if (!confirm(msg)) return;

      setRunning(true);
      setBulkProgress({
        label: isTranscript ? "벌크 자막 수집" : "벌크 LLM 추출",
        total: count, current: 0, currentTitle: "", results: [],
      });

      const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
      const endpoint = isTranscript ? "/api/videos/bulk-transcript" : "/api/videos/bulk-extract";
      const token = typeof window !== "undefined" ? localStorage.getItem("tasteby_token") : null;
      const headers: Record<string, string> = { "Content-Type": "application/json" };
      if (token) headers["Authorization"] = `Bearer ${token}`;
      const resp = await fetch(`${apiBase}${endpoint}`, {
        method: "POST",
        headers,
        body: hasSelection ? JSON.stringify({ ids }) : undefined,
      });
      if (!resp.ok) {
        alert(`벌크 요청 실패: ${resp.status} ${resp.statusText}`);
        setRunning(false);
        setBulkProgress(null);
        return;
      }
      const reader = resp.body?.getReader();
      const decoder = new TextDecoder();
      if (!reader) { setRunning(false); return; }

      let buf = "";
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += decoder.decode(value, { stream: true });
        const lines = buf.split("\n");
        buf = lines.pop() || "";
        for (const line of lines) {
          if (!line.startsWith("data: ")) continue;
          try {
            const ev = JSON.parse(line.slice(6));
            if (ev.type === "processing") {
              setBulkProgress((p) => p ? { ...p, current: ev.index + 1, currentTitle: ev.title, waiting: undefined } : p);
            } else if (ev.type === "wait") {
              setBulkProgress((p) => p ? { ...p, waiting: ev.delay } : p);
            } else if (ev.type === "done") {
              const detail = isTranscript
                ? `${ev.source} / ${ev.length?.toLocaleString()}자`
                : `${ev.restaurants}개 식당`;
              setBulkProgress((p) => p ? { ...p, results: [...p.results, { title: ev.title, detail }] } : p);
            } else if (ev.type === "error") {
              setBulkProgress((p) => p ? { ...p, results: [...p.results, { title: ev.title, detail: ev.message, error: true }] } : p);
            } else if (ev.type === "complete") {
              setRunning(false);
              load();
            }
          } catch { /* ignore */ }
        }
      }
      setRunning(false);
      load();
    } catch {
      setRunning(false);
    }
  };

  const startRebuildVectors = async () => {
    if (!confirm("전체 식당 벡터를 재생성합니다. 진행하시겠습니까?")) return;
    setRebuildingVectors(true);
    setVectorProgress(null);
    try {
      const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
      const token = typeof window !== "undefined" ? localStorage.getItem("tasteby_token") : null;
      const headers: Record<string, string> = {};
      if (token) headers["Authorization"] = `Bearer ${token}`;
      const resp = await fetch(`${apiBase}/api/videos/rebuild-vectors`, { method: "POST", headers });
      if (!resp.ok) {
        alert(`벡터 재생성 실패: ${resp.status}`);
        setRebuildingVectors(false);
        return;
      }
      const reader = resp.body?.getReader();
      const decoder = new TextDecoder();
      if (!reader) { setRebuildingVectors(false); return; }
      let buf = "";
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += decoder.decode(value, { stream: true });
        const lines = buf.split("\n");
        buf = lines.pop() || "";
        for (const line of lines) {
          if (!line.startsWith("data: ")) continue;
          try {
            const ev = JSON.parse(line.slice(6));
            if (ev.status === "progress" || ev.type === "progress") {
              setVectorProgress({ phase: ev.phase, current: ev.current, total: ev.total, name: ev.name });
            } else if (ev.status === "done" || ev.type === "done") {
              setVectorProgress({ phase: "done", current: ev.total, total: ev.total });
            } else if (ev.type === "error") {
              alert(`벡터 재생성 오류: ${ev.message}`);
            }
          } catch { /* ignore */ }
        }
      }
      setRebuildingVectors(false);
    } catch {
      setRebuildingVectors(false);
    }
  };

  const startRemapCuisine = async () => {
    if (!confirm("전체 식당의 음식 종류를 LLM으로 재분류합니다. 진행하시겠습니까?")) return;
    setRemappingCuisine(true);
    setRemapProgress(null);
    try {
      const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
      const token = typeof window !== "undefined" ? localStorage.getItem("tasteby_token") : null;
      const headers: Record<string, string> = {};
      if (token) headers["Authorization"] = `Bearer ${token}`;
      const resp = await fetch(`${apiBase}/api/videos/remap-cuisine`, { method: "POST", headers });
      if (!resp.ok) {
        alert(`음식 종류 재분류 실패: ${resp.status}`);
        setRemappingCuisine(false);
        return;
      }
      const reader = resp.body?.getReader();
      const decoder = new TextDecoder();
      if (!reader) { setRemappingCuisine(false); return; }
      let buf = "";
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += decoder.decode(value, { stream: true });
        const lines = buf.split("\n");
        buf = lines.pop() || "";
        for (const line of lines) {
          if (!line.startsWith("data: ")) continue;
          try {
            const ev = JSON.parse(line.slice(6));
            if (ev.type === "processing" || ev.type === "batch_done") {
              setRemapProgress({ current: ev.current, total: ev.total, updated: ev.updated || 0 });
            } else if (ev.type === "complete") {
              setRemapProgress({ current: ev.total, total: ev.total, updated: ev.updated });
            } else if (ev.type === "error") {
              alert(`재분류 오류: ${ev.message}`);
            }
          } catch { /* ignore */ }
        }
      }
      setRemappingCuisine(false);
    } catch {
      setRemappingCuisine(false);
    }
  };

  const startRemapFoods = async () => {
    if (!confirm("전체 식당의 메뉴 태그를 LLM으로 재생성합니다 (한글, 최대 10개). 진행하시겠습니까?")) return;
    setRemappingFoods(true);
    setFoodsProgress(null);
    try {
      const apiBase = process.env.NEXT_PUBLIC_API_URL || "";
      const token = typeof window !== "undefined" ? localStorage.getItem("tasteby_token") : null;
      const headers: Record<string, string> = {};
      if (token) headers["Authorization"] = `Bearer ${token}`;
      const resp = await fetch(`${apiBase}/api/videos/remap-foods`, { method: "POST", headers });
      if (!resp.ok) {
        alert(`메뉴 태그 재생성 실패: ${resp.status}`);
        setRemappingFoods(false);
        return;
      }
      const reader = resp.body?.getReader();
      const decoder = new TextDecoder();
      if (!reader) { setRemappingFoods(false); return; }
      let buf = "";
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += decoder.decode(value, { stream: true });
        const lines = buf.split("\n");
        buf = lines.pop() || "";
        for (const line of lines) {
          if (!line.startsWith("data: ")) continue;
          try {
            const ev = JSON.parse(line.slice(6));
            if (ev.type === "processing" || ev.type === "batch_done") {
              setFoodsProgress({ current: ev.current, total: ev.total, updated: ev.updated || 0 });
            } else if (ev.type === "complete") {
              setFoodsProgress({ current: ev.total, total: ev.total, updated: ev.updated });
            } else if (ev.type === "error") {
              alert(`메뉴 태그 재생성 오류: ${ev.message}`);
            }
          } catch { /* ignore */ }
        }
      }
      setRemappingFoods(false);
    } catch {
      setRemappingFoods(false);
    }
  };

  const handleSort = (key: VideoSortKey) => {
    if (sortKey === key) {
      setSortAsc(!sortAsc);
    } else {
      setSortKey(key);
      setSortAsc(true);
    }
  };

  const filteredVideos = videos.filter((v) => {
    if (titleSearch && !v.title.toLowerCase().includes(titleSearch.toLowerCase())) return false;
    if (channelFilter && v.channel_name !== channelFilter) return false;
    return true;
  });

  const sortedVideos = [...filteredVideos].sort((a, b) => {
    const av = a[sortKey] ?? "";
    const bv = b[sortKey] ?? "";
    const cmp = av < bv ? -1 : av > bv ? 1 : 0;
    return sortAsc ? cmp : -cmp;
  });

  const totalPages = Math.max(1, Math.ceil(sortedVideos.length / perPage));
  const pagedVideos = sortedVideos.slice(page * perPage, (page + 1) * perPage);

  const toggleSelectAll = () => {
    const pageIds = pagedVideos.map((v) => v.id);
    const allSelected = pageIds.every((id) => selected.has(id));
    if (allSelected) {
      setSelected((prev) => {
        const next = new Set(prev);
        pageIds.forEach((id) => next.delete(id));
        return next;
      });
    } else {
      setSelected((prev) => new Set([...prev, ...pageIds]));
    }
  };

  const sortIcon = (key: VideoSortKey) => {
    if (sortKey !== key) return " ↕";
    return sortAsc ? " ↑" : " ↓";
  };

  const statusColor: Record<string, string> = {
    pending: "bg-yellow-100 text-yellow-800",
    processing: "bg-brand-100 text-brand-800",
    done: "bg-green-100 text-green-800",
    error: "bg-red-100 text-red-800",
    skip: "bg-gray-100 text-gray-600",
  };

  return (
    <div>
      <div className="flex flex-wrap items-center gap-3 mb-4">
        <select
          value={channelFilter}
          onChange={(e) => { setChannelFilter(e.target.value); setPage(0); }}
          className="border rounded px-3 py-2 text-sm bg-surface text-gray-900"
        >
          <option value="">전체 채널</option>
          {channels.map((ch) => (
            <option key={ch.id} value={ch.channel_name}>{ch.channel_name}</option>
          ))}
        </select>
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="border rounded px-3 py-2 text-sm bg-surface text-gray-900"
        >
          <option value="">전체 상태</option>
          <option value="pending">대기중</option>
          <option value="processing">처리중</option>
          <option value="done">완료</option>
          <option value="error">오류</option>
          <option value="skip">건너뛰기</option>
        </select>
        <div className="flex">
          <input
            type="text"
            placeholder="제목 검색..."
            value={titleSearch}
            onChange={(e) => { setTitleSearch(e.target.value); setPage(0); }}
            onKeyDown={(e) => e.key === "Escape" && setTitleSearch("")}
            className="border border-r-0 rounded-l px-3 py-2 text-sm w-48 bg-surface text-gray-900"
          />
          {titleSearch ? (
            <button
              onClick={() => { setTitleSearch(""); setPage(0); }}
              className="border rounded-r px-2 py-2 text-sm text-gray-400 hover:text-gray-600 hover:bg-gray-100"
            >
              ✕
            </button>
          ) : (
            <button
              type="button"
              onClick={() => { setEditingRestIdx(null); setEditRest(null); load(false); if (detail) { api.getVideoDetail(detail.id).then(setDetail).catch(() => {}); } }}
              className="border rounded-r px-3 py-2 text-sm text-gray-400 hover:text-gray-600 hover:bg-gray-100 cursor-pointer relative z-10"
              title="새로고침"
            >
              ↻
            </button>
          )}
        </div>
        {isAdmin && <>
        <button
          type="button"
          onClick={handleProcess}
          disabled={processing}
          className="bg-green-600 text-white px-4 py-2 rounded text-sm hover:bg-green-700 disabled:opacity-50"
        >
          {processing ? "처리 중..." : "대기 영상 처리"}
        </button>
        <button
          onClick={() => startBulkStream("transcript")}
          disabled={bulkTranscripting || bulkExtracting}
          className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700 disabled:opacity-50"
        >
          {bulkTranscripting ? "자막 수집 중..." : "벌크 자막 수집"}
        </button>
        <button
          onClick={() => startBulkStream("extract")}
          disabled={bulkExtracting || bulkTranscripting}
          className="bg-purple-600 text-white px-4 py-2 rounded text-sm hover:bg-purple-700 disabled:opacity-50"
        >
          {bulkExtracting ? "벌크 추출 중..." : "벌크 LLM 추출"}
        </button>
        <button
          onClick={startRebuildVectors}
          disabled={rebuildingVectors || bulkExtracting || bulkTranscripting}
          className="bg-teal-600 text-white px-4 py-2 rounded text-sm hover:bg-teal-700 disabled:opacity-50"
        >
          {rebuildingVectors ? "벡터 재생성 중..." : "벡터 재생성"}
        </button>
        <button
          onClick={startRemapCuisine}
          disabled={remappingCuisine || bulkExtracting || bulkTranscripting || rebuildingVectors}
          className="bg-amber-600 text-white px-4 py-2 rounded text-sm hover:bg-amber-700 disabled:opacity-50"
        >
          {remappingCuisine ? "음식분류 중..." : "음식종류 재분류"}
        </button>
        <button
          onClick={startRemapFoods}
          disabled={remappingFoods || bulkExtracting || bulkTranscripting || rebuildingVectors || remappingCuisine}
          className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700 disabled:opacity-50"
        >
          {remappingFoods ? "메뉴태그 재생성 중..." : "메뉴태그 재생성"}
        </button>
        </>}
        {processResult && (
          <span className="text-sm text-gray-600">{processResult}</span>
        )}
        {isAdmin && selected.size > 0 && (
          <>
            <button
              onClick={() => startBulkStream("transcript", Array.from(selected))}
              disabled={bulkTranscripting || bulkExtracting}
              className="bg-brand-500 text-white px-4 py-2 rounded text-sm hover:bg-brand-600 disabled:opacity-50"
            >
              선택 자막 수집 ({selected.size})
            </button>
            <button
              onClick={() => startBulkStream("extract", Array.from(selected))}
              disabled={bulkExtracting || bulkTranscripting}
              className="bg-purple-500 text-white px-4 py-2 rounded text-sm hover:bg-purple-600 disabled:opacity-50"
            >
              선택 LLM 추출 ({selected.size})
            </button>
            <button
              onClick={handleBulkSkip}
              className="bg-gray-500 text-white px-4 py-2 rounded text-sm hover:bg-gray-600"
            >
              선택 건너뛰기 ({selected.size})
            </button>
            <button
              onClick={handleBulkDelete}
              disabled={deleting}
              className="bg-red-500 text-white px-4 py-2 rounded text-sm hover:bg-red-600 disabled:opacity-50"
            >
              {deleting ? "삭제 중..." : `선택 삭제 (${selected.size})`}
            </button>
          </>
        )}
        <span className="text-sm text-gray-400 ml-auto">
          {(titleSearch || channelFilter) ? `${filteredVideos.length} / ` : ""}총 {videos.length}개
        </span>
      </div>

      <div className="bg-surface rounded-lg shadow overflow-auto min-w-[800px]">
        <table className="w-full text-sm">
          <thead className="bg-brand-50 border-b border-brand-100 text-brand-800 text-sm font-semibold">
            <tr>
              <th className="px-4 py-3 w-8">
                <input
                  type="checkbox"
                  checked={pagedVideos.length > 0 && pagedVideos.every((v) => selected.has(v.id))}
                  onChange={toggleSelectAll}
                  className="rounded"
                />
              </th>
              <th
                className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100"
                onClick={() => handleSort("status")}
              >
                상태{sortIcon("status")}
              </th>
              <th
                className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100"
                onClick={() => handleSort("channel_name")}
              >
                채널{sortIcon("channel_name")}
              </th>
              <th
                className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100"
                onClick={() => handleSort("title")}
              >
                제목{sortIcon("title")}
              </th>
              <th className="text-center px-4 py-3 whitespace-nowrap">처리</th>
              <th className="text-center px-4 py-3 whitespace-nowrap">식당</th>
              <th
                className="text-left px-4 py-3 whitespace-nowrap cursor-pointer select-none hover:bg-gray-100"
                onClick={() => handleSort("published_at")}
              >
                게시일{sortIcon("published_at")}
              </th>
              {isAdmin && <th className="text-left px-4 py-3 whitespace-nowrap">액션</th>}
            </tr>
          </thead>
          <tbody>
            {pagedVideos.map((v) => (
              <tr key={v.id} className={`border-b hover:bg-brand-50/50 ${selected.has(v.id) ? "bg-brand-50" : ""}`}>
                <td className="px-4 py-3">
                  <input
                    type="checkbox"
                    checked={selected.has(v.id)}
                    onChange={() => toggleSelect(v.id)}
                    className="rounded"
                  />
                </td>
                <td className="px-4 py-3">
                  <span
                    className={`px-2 py-1 rounded text-xs font-medium ${
                      statusColor[v.status] || "bg-gray-100"
                    }`}
                  >
                    {v.status}
                  </span>
                </td>
                <td className="px-4 py-3 text-gray-600">{v.channel_name}</td>
                <td className="px-4 py-3 max-w-[300px]">
                  <button
                    onClick={() => handleSelectVideo(v)}
                    className={`text-left text-sm hover:underline truncate block max-w-full ${
                      detail?.id === v.id ? "text-blue-800 font-semibold" : "text-brand-600"
                    }`}
                    title={v.title}
                  >
                    {v.title}
                  </button>
                </td>
                <td className="px-4 py-3 text-center whitespace-nowrap">
                  <span title="자막" className={`inline-block w-5 text-center text-xs ${v.has_transcript ? "text-green-600" : "text-gray-300"}`}>
                    {v.has_transcript ? "T" : "-"}
                  </span>
                  <span title="LLM 추출" className={`inline-block w-5 text-center text-xs ${v.has_llm ? "text-brand-600" : "text-gray-300"}`}>
                    {v.has_llm ? "L" : "-"}
                  </span>
                </td>
                <td className="px-4 py-3 text-center">
                  {v.restaurant_count > 0 ? (
                    <span
                      className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
                        v.matched_count === v.restaurant_count
                          ? "bg-green-100 text-green-700"
                          : v.matched_count > 0
                          ? "bg-yellow-100 text-yellow-700"
                          : "bg-red-100 text-red-600"
                      }`}
                      title={`매칭 ${v.matched_count}/${v.restaurant_count}`}
                    >
                      {v.matched_count}/{v.restaurant_count}
                    </span>
                  ) : (
                    <span className="text-gray-300 text-xs">-</span>
                  )}
                </td>
                <td className="px-4 py-3 text-gray-500 whitespace-nowrap">
                  {v.published_at?.slice(0, 10) || "-"}
                </td>
                {isAdmin && <td className="px-4 py-3 whitespace-nowrap flex gap-3">
                  {v.status === "pending" && (
                    <button
                      onClick={() => handleSkip(v.id)}
                      className="text-gray-500 hover:underline text-sm"
                    >
                      건너뛰기
                    </button>
                  )}
                  <button
                    onClick={() => handleDelete(v.id, v.title)}
                    className="text-red-500 hover:underline text-sm"
                  >
                    삭제
                  </button>
                </td>}
              </tr>
            ))}
            {videos.length === 0 && (
              <tr>
                <td colSpan={8} className="px-4 py-8 text-center text-gray-400">
                  영상이 없습니다
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 mt-4">
          <button
            onClick={() => setPage(0)}
            disabled={page === 0}
            className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100"
          >
            «
          </button>
          <button
            onClick={() => setPage(page - 1)}
            disabled={page === 0}
            className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100"
          >
            ‹
          </button>
          <span className="text-sm text-gray-600 px-2">
            {page + 1} / {totalPages}
          </span>
          <button
            onClick={() => setPage(page + 1)}
            disabled={page >= totalPages - 1}
            className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100"
          >
            ›
          </button>
          <button
            onClick={() => setPage(totalPages - 1)}
            disabled={page >= totalPages - 1}
            className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100"
          >
            »
          </button>
        </div>
      )}

      {/* 음식종류 재분류 진행 */}
      {remapProgress && (
        <div className="mt-4 bg-surface rounded-lg shadow p-4">
          <h4 className="font-semibold text-sm mb-2">
            음식종류 재분류 {remapProgress.current >= remapProgress.total ? "완료" : "진행 중"}
          </h4>
          <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
            <div
              className="bg-amber-500 h-2 rounded-full transition-all"
              style={{ width: `${remapProgress.total ? (remapProgress.current / remapProgress.total) * 100 : 0}%` }}
            />
          </div>
          <p className="text-xs text-gray-500">
            {remapProgress.current}/{remapProgress.total} — {remapProgress.updated}개 업데이트
          </p>
        </div>
      )}

      {/* 메뉴태그 재생성 진행 */}
      {foodsProgress && (
        <div className="mt-4 bg-surface rounded-lg shadow p-4">
          <h4 className="font-semibold text-sm mb-2">
            메뉴태그 재생성 {foodsProgress.current >= foodsProgress.total ? "완료" : "진행 중"}
          </h4>
          <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
            <div
              className="bg-brand-500 h-2 rounded-full transition-all"
              style={{ width: `${foodsProgress.total ? (foodsProgress.current / foodsProgress.total) * 100 : 0}%` }}
            />
          </div>
          <p className="text-xs text-gray-500">
            {foodsProgress.current}/{foodsProgress.total} — {foodsProgress.updated}개 업데이트
          </p>
        </div>
      )}

      {/* 벡터 재생성 진행 */}
      {vectorProgress && (
        <div className="mt-4 bg-surface rounded-lg shadow p-4">
          <h4 className="font-semibold text-sm mb-2">
            벡터 재생성 {vectorProgress.phase === "done" ? "완료" : `(${vectorProgress.phase === "prepare" ? "데이터 준비" : "임베딩 저장"})`}
          </h4>
          <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
            <div
              className="bg-teal-500 h-2 rounded-full transition-all"
              style={{ width: `${vectorProgress.total ? (vectorProgress.current / vectorProgress.total) * 100 : 0}%` }}
            />
          </div>
          <p className="text-xs text-gray-500">
            {vectorProgress.current}/{vectorProgress.total}
            {vectorProgress.name && ` — ${vectorProgress.name}`}
          </p>
        </div>
      )}

      {/* 벌크 진행 패널 */}
      {bulkProgress && (
        <div className="mt-4 bg-surface rounded-lg shadow p-4">
          <div className="flex items-center justify-between mb-3">
            <h4 className="font-semibold text-sm">
              {bulkProgress.label} ({bulkProgress.current}/{bulkProgress.total})
            </h4>
            {!bulkExtracting && !bulkTranscripting && (
              <button
                onClick={() => setBulkProgress(null)}
                className="text-gray-400 hover:text-gray-600 text-sm"
              >
                닫기
              </button>
            )}
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2 mb-3">
            <div
              className="bg-purple-600 h-2 rounded-full transition-all duration-300"
              style={{ width: `${bulkProgress.total > 0 ? (bulkProgress.current / bulkProgress.total) * 100 : 0}%` }}
            />
          </div>
          {(bulkExtracting || bulkTranscripting) && bulkProgress.currentTitle && (
            <p className="text-xs text-gray-500 mb-2">
              {bulkProgress.waiting
                ? `⏳ ${bulkProgress.waiting}초 대기 중...`
                : `처리 중: ${bulkProgress.currentTitle}`}
            </p>
          )}
          {bulkProgress.results.length > 0 && (
            <div className="max-h-40 overflow-y-auto text-xs space-y-1">
              {bulkProgress.results.map((r, i) => (
                <div key={i} className={`flex items-center gap-2 ${r.error ? "text-red-600" : "text-gray-600"}`}>
                  <span>{r.error ? "✗" : "✓"}</span>
                  <span className="truncate flex-1">{r.title}</span>
                  <span className={`shrink-0 ${r.error ? "text-red-500" : "text-purple-600"}`}>
                    {r.detail}
                  </span>
                </div>
              ))}
            </div>
          )}
          {!bulkExtracting && !bulkTranscripting && bulkProgress.results.length > 0 && (
            <p className="mt-2 text-sm font-medium text-gray-700">
              완료! 성공 {bulkProgress.results.filter((r) => !r.error).length}/{bulkProgress.total}
            </p>
          )}
        </div>
      )}

      {/* 영상 상세 패널 */}
      {detailLoading && (
        <div className="mt-6 text-center text-gray-500 text-sm">로딩 중...</div>
      )}
      {detail && !detailLoading && (
        <div className="mt-6 bg-surface rounded-lg shadow p-4">
          <div className="flex items-center justify-between mb-4 gap-2">
            {editingTitle ? (
              <div className="flex items-center gap-2 flex-1">
                <input
                  value={editTitle}
                  onChange={(e) => setEditTitle(e.target.value)}
                  className="flex-1 border rounded px-2 py-1 text-sm font-semibold"
                />
                <button
                  onClick={async () => {
                    setSaving(true);
                    try {
                      await api.updateVideo(detail.id, { title: editTitle });
                      setDetail({ ...detail, title: editTitle });
                      setEditingTitle(false);
                      load(false);
                    } catch { alert("저장 실패"); }
                    finally { setSaving(false); }
                  }}
                  disabled={saving}
                  className="px-2 py-1 text-xs bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
                >
                  저장
                </button>
                <button
                  onClick={() => setEditingTitle(false)}
                  className="px-2 py-1 text-xs border rounded text-gray-600 hover:bg-gray-100"
                >
                  취소
                </button>
              </div>
            ) : (
              <h3
                className={`font-semibold text-base ${isAdmin ? "cursor-pointer hover:text-brand-600" : ""}`}
                onClick={isAdmin ? () => { setEditTitle(detail.title); setEditingTitle(true); } : undefined}
                title={isAdmin ? "클릭하여 제목 수정" : undefined}
              >
                {detail.title}
              </h3>
            )}
            <button
              onClick={() => { setDetail(null); setEditingTitle(false); setEditingRestIdx(null); }}
              className="text-gray-400 hover:text-gray-600 text-xl leading-none"
            >
              x
            </button>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6" style={{ maxHeight: "70vh" }}>
            {/* 왼쪽: YouTube 임베드 */}
            <div className="overflow-y-auto">
              <div className="aspect-video rounded overflow-hidden bg-black">
                <iframe
                  src={`https://www.youtube.com/embed/${detail.video_id}`}
                  title={detail.title}
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                  className="w-full h-full"
                />
              </div>
              <div className="mt-2 text-xs text-gray-500">
                <span>{detail.channel_name}</span>
                {detail.published_at && (
                  <span className="ml-3">{detail.published_at.slice(0, 10)}</span>
                )}
                <span className={`ml-3 px-2 py-0.5 rounded ${
                  detail.status === "done" ? "bg-green-100 text-green-800" :
                  detail.status === "error" ? "bg-red-100 text-red-800" :
                  "bg-yellow-100 text-yellow-800"
                }`}>
                  {detail.status}
                </span>
              </div>
            </div>

            {/* 오른쪽: 추출 정보 + 트랜스크립트 */}
            <div className="space-y-4 overflow-y-auto">
              {/* 추출된 식당 정보 */}
              <div className="flex items-center gap-2 mb-2">
                <h4 className="font-semibold text-sm">
                  추출된 식당 ({detail.restaurants.length})
                </h4>
                {isAdmin && detail.transcript && (
                  <>
                    <button
                      onClick={async () => {
                        setExtracting(true);
                        try {
                          const res = await api.extractRestaurants(detail.id, showPrompt && prompt ? prompt : undefined);
                          alert(`${res.restaurants_extracted}개 식당 추출 완료`);
                          const d = await api.getVideoDetail(detail.id);
                          setDetail(d);
                          load(false);
                        } catch {
                          alert("식당 추출 실패");
                        } finally {
                          setExtracting(false);
                        }
                      }}
                      disabled={extracting}
                      className="px-2 py-1 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50"
                    >
                      {extracting ? "추출 중..." : "LLM 식당 추출"}
                    </button>
                    <button
                      onClick={async () => {
                        if (!showPrompt && !prompt) {
                          try {
                            const res = await api.getExtractPrompt();
                            setPrompt(res.prompt);
                          } catch { /* ignore */ }
                        }
                        setShowPrompt(!showPrompt);
                      }}
                      className="px-2 py-1 text-xs border rounded text-gray-600 hover:bg-gray-100"
                    >
                      {showPrompt ? "프롬프트 숨기기" : "프롬프트 편집"}
                    </button>
                  </>
                )}
                {isAdmin && <button
                  onClick={() => setShowManualAdd(!showManualAdd)}
                  className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700"
                >
                  {showManualAdd ? "수동 추가 닫기" : "수동 추가"}
                </button>}
              </div>
              {showManualAdd && (
                <div className="border rounded p-3 mb-3 bg-green-50 space-y-2">
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <label className="text-[10px] text-gray-500">식당명 *</label>
                      <input value={manualForm.name} onChange={(e) => setManualForm(f => ({ ...f, name: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="식당 이름" />
                    </div>
                    <div>
                      <label className="text-[10px] text-gray-500">주소</label>
                      <input value={manualForm.address} onChange={(e) => setManualForm(f => ({ ...f, address: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="주소 (없으면 지역)" />
                    </div>
                    <div>
                      <label className="text-[10px] text-gray-500">지역</label>
                      <input value={manualForm.region} onChange={(e) => setManualForm(f => ({ ...f, region: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="서울 강남" />
                    </div>
                    <div>
                      <label className="text-[10px] text-gray-500">음식 종류</label>
                      <input value={manualForm.cuisine_type} onChange={(e) => setManualForm(f => ({ ...f, cuisine_type: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="한식, 일식..." />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <label className="text-[10px] text-gray-500">메뉴</label>
                      <input value={manualForm.foods_mentioned} onChange={(e) => setManualForm(f => ({ ...f, foods_mentioned: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="메뉴1, 메뉴2" />
                    </div>
                    <div>
                      <label className="text-[10px] text-gray-500">게스트</label>
                      <input value={manualForm.guests} onChange={(e) => setManualForm(f => ({ ...f, guests: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="게스트1, 게스트2" />
                    </div>
                  </div>
                  <div>
                    <label className="text-[10px] text-gray-500">평가/요약</label>
                    <textarea value={manualForm.evaluation} onChange={(e) => setManualForm(f => ({ ...f, evaluation: e.target.value }))} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" rows={2} placeholder="맛집 평가 내용" />
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={async () => {
                        if (!manualForm.name.trim()) { alert("식당명을 입력해주세요"); return; }
                        setManualAdding(true);
                        try {
                          await api.addManualRestaurant(detail.id, {
                            name: manualForm.name.trim(),
                            address: manualForm.address.trim() || undefined,
                            region: manualForm.region.trim() || undefined,
                            cuisine_type: manualForm.cuisine_type.trim() || undefined,
                            foods_mentioned: manualForm.foods_mentioned.split(",").map(s => s.trim()).filter(Boolean),
                            evaluation: manualForm.evaluation.trim() || undefined,
                            guests: manualForm.guests.split(",").map(s => s.trim()).filter(Boolean),
                          });
                          const d = await api.getVideoDetail(detail.id);
                          setDetail(d);
                          load(false);
                          setManualForm({ name: "", address: "", region: "", cuisine_type: "", price_range: "", foods_mentioned: "", evaluation: "", guests: "" });
                          setShowManualAdd(false);
                        } catch (e) {
                          alert((e as Error).message || "추가 실패");
                        } finally {
                          setManualAdding(false);
                        }
                      }}
                      disabled={manualAdding}
                      className="px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
                    >
                      {manualAdding ? "추가 중..." : "식당 추가"}
                    </button>
                    <button onClick={() => setShowManualAdd(false)} className="px-3 py-1 text-xs border rounded text-gray-600 hover:bg-gray-100">
                      취소
                    </button>
                  </div>
                </div>
              )}
              {showPrompt && (
                <textarea
                  value={prompt}
                  onChange={(e) => setPrompt(e.target.value)}
                  className="w-full border rounded p-2 text-xs font-mono mb-2 bg-surface text-gray-900"
                  rows={12}
                  placeholder="프롬프트 템플릿 ({title}, {transcript} 변수 사용)"
                />
              )}
              {detail.restaurants.length > 0 && (
                <div>
                  <div className="space-y-2">
                    {detail.restaurants.map((r, i) => (
                      <div key={i} className="border rounded p-3 text-sm">
                        {editingRestIdx === i && editRest ? (
                          <div className="space-y-2">
                            <div>
                              <label className="text-xs text-gray-500">이름</label>
                              <input value={editRest.name} onChange={(e) => setEditRest({ ...editRest, name: e.target.value })} className="w-full border rounded px-2 py-1 text-sm bg-surface text-gray-900" />
                            </div>
                            <div className="grid grid-cols-2 gap-2">
                              <div>
                                <label className="text-xs text-gray-500">종류</label>
                                <input value={editRest.cuisine_type} onChange={(e) => setEditRest({ ...editRest, cuisine_type: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
                              </div>
                              <div>
                                <label className="text-xs text-gray-500">가격대</label>
                                <input value={editRest.price_range} onChange={(e) => setEditRest({ ...editRest, price_range: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
                              </div>
                            </div>
                            <div className="grid grid-cols-2 gap-2">
                              <div>
                                <label className="text-xs text-gray-500">지역</label>
                                <input value={editRest.region} onChange={(e) => setEditRest({ ...editRest, region: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
                              </div>
                              <div>
                                <label className="text-xs text-gray-500">주소</label>
                                <input value={editRest.address} onChange={(e) => setEditRest({ ...editRest, address: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
                              </div>
                            </div>
                            <div>
                              <label className="text-xs text-gray-500">메뉴 (쉼표 구분)</label>
                              <input value={editRest.foods_mentioned} onChange={(e) => setEditRest({ ...editRest, foods_mentioned: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" placeholder="메뉴1, 메뉴2, ..." />
                            </div>
                            <div>
                              <label className="text-xs text-gray-500">평가/요약</label>
                              <textarea value={editRest.evaluation} onChange={(e) => setEditRest({ ...editRest, evaluation: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" rows={2} />
                            </div>
                            <div>
                              <label className="text-xs text-gray-500">게스트 (쉼표 구분)</label>
                              <input value={editRest.guests} onChange={(e) => setEditRest({ ...editRest, guests: e.target.value })} className="w-full border rounded px-2 py-1 text-xs bg-surface text-gray-900" />
                            </div>
                            <div className="flex gap-2">
                              <button
                                onClick={async () => {
                                  setSaving(true);
                                  try {
                                    const foods = editRest.foods_mentioned.split(",").map(s => s.trim()).filter(Boolean);
                                    const guests = editRest.guests.split(",").map(s => s.trim()).filter(Boolean);
                                    let evalObj: Record<string, string> = {};
                                    if (editRest.evaluation.trim()) {
                                      evalObj = { text: editRest.evaluation.trim() };
                                    }
                                    await api.updateVideoRestaurant(detail.id, r.restaurant_id, {
                                      name: editRest.name,
                                      cuisine_type: editRest.cuisine_type || null,
                                      price_range: editRest.price_range || null,
                                      region: editRest.region || null,
                                      address: editRest.address || null,
                                      foods_mentioned: foods,
                                      evaluation: evalObj,
                                      guests: guests,
                                    });
                                    const d = await api.getVideoDetail(detail.id);
                                    setDetail(d);
                                    setEditingRestIdx(null);
                                    setEditRest(null);
                                  } catch (e) { alert("저장 실패: " + (e instanceof Error ? e.message : String(e))); }
                                  finally { setSaving(false); }
                                }}
                                disabled={saving}
                                className="px-3 py-1 text-xs bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
                              >
                                {saving ? "저장 중..." : "저장"}
                              </button>
                              <button
                                onClick={() => { setEditingRestIdx(null); setEditRest(null); }}
                                className="px-3 py-1 text-xs border rounded text-gray-600 hover:bg-gray-100"
                              >
                                취소
                              </button>
                            </div>
                          </div>
                        ) : (
                          <div
                            className={`${isAdmin ? "cursor-pointer hover:bg-brand-50/50" : ""} -m-3 p-3 rounded group`}
                            onClick={isAdmin ? () => {
                              let evalText = "";
                              if (typeof r.evaluation === "object" && r.evaluation) {
                                if (r.evaluation.text) {
                                  evalText = r.evaluation.text;
                                } else if (Object.keys(r.evaluation).length > 0) {
                                  evalText = JSON.stringify(r.evaluation);
                                }
                              } else if (r.evaluation) {
                                evalText = String(r.evaluation);
                              }
                              setEditingRestIdx(i);
                              setShowManualAdd(false);
                              setShowPrompt(false);
                              setEditRest({
                                name: r.name,
                                cuisine_type: r.cuisine_type || "",
                                foods_mentioned: (r.foods_mentioned || []).join(", "),
                                evaluation: evalText,
                                address: r.address || "",
                                region: r.region || "",
                                price_range: r.price_range || "",
                                guests: (r.guests || []).join(", "),
                              });
                            } : undefined}
                            title={isAdmin ? "클릭하여 수정" : undefined}
                          >
                            <div className="flex items-center justify-between">
                              <div className="flex items-center gap-2">
                                <p className="font-medium">{r.name}</p>
                                {r.google_place_id ? (
                                  <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-green-100 text-green-700" title={`Place ID: ${r.google_place_id}`}>매칭</span>
                                ) : r.has_location ? (
                                  <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-yellow-100 text-yellow-700" title="좌표는 있으나 Place ID 없음">좌표만</span>
                                ) : (
                                  <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-600">미매칭</span>
                                )}
                              </div>
                              {isAdmin && <button
                                onClick={async (e) => {
                                  e.stopPropagation();
                                  if (!confirm(`"${r.name}" 식당 매핑을 삭제하시겠습니까?`)) return;
                                  try {
                                    await api.deleteVideoRestaurant(detail.id, r.restaurant_id);
                                    const d = await api.getVideoDetail(detail.id);
                                    setDetail(d);
                                    load(false);
                                  } catch { alert("삭제 실패"); }
                                }}
                                className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 text-xs px-1.5 py-0.5 rounded hover:bg-red-50 transition-opacity"
                              >
                                삭제
                              </button>}
                            </div>
                            <div className="text-xs text-gray-500 mt-1 space-y-0.5">
                              {r.address && <p>주소: {r.address}</p>}
                              {r.region && <p>지역: {r.region}</p>}
                              {r.cuisine_type && <p>종류: {r.cuisine_type}</p>}
                              {r.price_range && <p>가격대: {r.price_range}</p>}
                            </div>
                            {r.foods_mentioned?.length > 0 && (
                              <div className="flex flex-wrap gap-1 mt-2">
                                {r.foods_mentioned.map((f, j) => (
                                  <span key={j} className="px-1.5 py-0.5 bg-brand-50 text-brand-700 rounded text-xs">{f}</span>
                                ))}
                              </div>
                            )}
                            {r.evaluation?.text && (
                              <p className="mt-1 text-xs text-gray-600">{r.evaluation.text}</p>
                            )}
                            {r.guests?.length > 0 && (
                              <p className="mt-1 text-xs text-gray-500">게스트: {r.guests.join(", ")}</p>
                            )}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {detail.restaurants.length === 0 && (
                <p className="text-sm text-gray-400">추출된 식당 정보 없음</p>
              )}

              {/* 트랜스크립트 — 식당 수정 중에는 숨김 */}
              {editingRestIdx === null && <div>
                <div className="flex items-center gap-2 mb-2">
                  <h4 className="font-semibold text-sm">트랜스크립트</h4>
                  {isAdmin && <>
                  <select
                    value={transcriptMode}
                    onChange={(e) => setTranscriptMode(e.target.value as "auto" | "manual" | "generated")}
                    className="border rounded px-2 py-1 text-xs bg-surface text-gray-900"
                  >
                    <option value="auto">자동 (수동→자동생성)</option>
                    <option value="manual">수동 자막만</option>
                    <option value="generated">자동생성 자막만</option>
                  </select>
                  <button
                    onClick={async () => {
                      setFetchingTranscript(true);
                      try {
                        const res = await api.fetchTranscript(detail.id, transcriptMode);
                        const d = await api.getVideoDetail(detail.id);
                        setDetail(d);
                        alert(`트랜스크립트 가져옴 (${res.source === "manual" ? "수동 자막" : "자동생성 자막"}, ${res.length.toLocaleString()}자)`);
                      } catch {
                        alert("트랜스크립트를 가져올 수 없습니다");
                      } finally {
                        setFetchingTranscript(false);
                      }
                    }}
                    disabled={fetchingTranscript}
                    className="px-2 py-1 text-xs bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
                  >
                    {fetchingTranscript ? "가져오는 중..." : detail.transcript ? "다시 가져오기" : "트랜스크립트 가져오기"}
                  </button>
                  </>}
                </div>
                {detail.transcript ? (
                  <pre className="text-xs text-gray-700 bg-gray-50 rounded p-3 whitespace-pre-wrap leading-relaxed max-h-[200px] overflow-y-auto">
                    {detail.transcript}
                  </pre>
                ) : (
                  <p className="text-sm text-gray-400">트랜스크립트 없음</p>
                )}
              </div>}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── 식당 관리 ─── */
function RestaurantsPanel({ isAdmin }: { isAdmin: boolean }) {
  const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(0);
  const [nameSearch, setNameSearch] = useState("");
  const [selected, setSelected] = useState<Restaurant | null>(null);
  const [editForm, setEditForm] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);
  const [videos, setVideos] = useState<VideoLink[]>([]);
  const [tablingSearching, setTablingSearching] = useState(false);
  const [bulkTabling, setBulkTabling] = useState(false);
  const [bulkTablingProgress, setBulkTablingProgress] = useState({ current: 0, total: 0, name: "", linked: 0, notFound: 0 });
  const [catchtableSearching, setCatchtableSearching] = useState(false);
  const [bulkCatchtable, setBulkCatchtable] = useState(false);
  const [bulkCatchtableProgress, setBulkCatchtableProgress] = useState({ current: 0, total: 0, name: "", linked: 0, notFound: 0 });
  type RestSortKey = "name" | "region" | "cuisine_type" | "price_range" | "rating" | "business_status";
  const [sortKey, setSortKey] = useState<RestSortKey>("name");
  const [sortAsc, setSortAsc] = useState(true);
  const perPage = 20;

  const handleSort = (key: RestSortKey) => {
    if (sortKey === key) setSortAsc(!sortAsc);
    else { setSortKey(key); setSortAsc(true); }
  };
  const sortIcon = (key: RestSortKey) => sortKey !== key ? " ↕" : sortAsc ? " ↑" : " ↓";

  const load = useCallback(() => {
    setLoading(true);
    api
      .getRestaurants({ limit: 500 })
      .then(setRestaurants)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => { load(); }, [load]);

  // #322/#323 LLM 검증 UI
  const [verifyPending, setVerifyPending] = useState<number | null>(null);
  const [verifying, setVerifying] = useState(false);
  const [verifyResult, setVerifyResult] = useState<string | null>(null);

  const loadVerifyPending = useCallback(() => {
    api.getVerifyPending().then((r) => setVerifyPending(r.pending)).catch(() => setVerifyPending(null));
  }, []);
  useEffect(() => { loadVerifyPending(); }, [loadVerifyPending]);

  const handleVerifyAll = async () => {
    if (!isAdmin) return;
    if (!confirm(`미검증 식당 ${verifyPending ?? "?"}건을 LLM으로 일괄 검증합니다.\n잘못 등록된 데이터/프랜차이즈를 자동으로 숨김 처리합니다.\n진행할까요?`)) return;
    setVerifying(true);
    setVerifyResult(null);
    try {
      const r = await api.verifyAll(10);
      setVerifyResult(`${r.processed}건 검증 완료`);
      loadVerifyPending();
      load();
    } catch (e) {
      setVerifyResult(`실패: ${e instanceof Error ? e.message : String(e)}`);
    } finally {
      setVerifying(false);
    }
  };

  const handleToggleHidden = async (r: Restaurant) => {
    if (!isAdmin) return;
    const becomingHidden = !r.hidden;
    const reason = becomingHidden ? (prompt("숨김 사유(선택)", "manual") ?? "manual") : "";
    try {
      await api.setRestaurantHidden(r.id, becomingHidden, reason || "manual");
      load();
    } catch (e) {
      alert(`실패: ${e instanceof Error ? e.message : String(e)}`);
    }
  };

  const filtered = restaurants.filter((r) => {
    if (nameSearch && !r.name.toLowerCase().includes(nameSearch.toLowerCase())) return false;
    return true;
  });

  const sorted = [...filtered].sort((a, b) => {
    let av: string | number = a[sortKey] ?? "";
    let bv: string | number = b[sortKey] ?? "";
    if (sortKey === "rating") {
      av = a.rating ?? 0;
      bv = b.rating ?? 0;
    }
    const cmp = av < bv ? -1 : av > bv ? 1 : 0;
    return sortAsc ? cmp : -cmp;
  });

  const totalPages = Math.max(1, Math.ceil(sorted.length / perPage));
  const paged = sorted.slice(page * perPage, (page + 1) * perPage);

  const handleSelect = (r: Restaurant) => {
    if (selected?.id === r.id) {
      setSelected(null);
      setVideos([]);
      return;
    }
    setSelected(r);
    api.getRestaurantVideos(r.id).then(setVideos).catch(() => setVideos([]));
    setEditForm({
      name: r.name || "",
      address: r.address || "",
      region: r.region || "",
      cuisine_type: r.cuisine_type || "",
      price_range: r.price_range || "",
      phone: r.phone || "",
      website: r.website || "",
      latitude: r.latitude != null ? String(r.latitude) : "",
      longitude: r.longitude != null ? String(r.longitude) : "",
    });
  };

  const handleSave = async () => {
    if (!selected) return;
    setSaving(true);
    try {
      const data: Record<string, unknown> = { ...editForm };
      if (editForm.latitude) data.latitude = parseFloat(editForm.latitude);
      else data.latitude = null;
      if (editForm.longitude) data.longitude = parseFloat(editForm.longitude);
      else data.longitude = null;
      await api.updateRestaurant(selected.id, data as Partial<Restaurant>);
      load();
      setSelected(null);
    } catch (e) {
      alert("저장 실패: " + (e instanceof Error ? e.message : String(e)));
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!selected) return;
    if (!confirm(`"${selected.name}" 식당을 삭제하시겠습니까?\n연결된 영상 매핑, 리뷰, 벡터도 함께 삭제됩니다.`)) return;
    try {
      await api.deleteRestaurant(selected.id);
      setSelected(null);
      load();
    } catch {
      alert("삭제 실패");
    }
  };

  return (
    <div>
      <div className="flex items-center gap-3 mb-4">
        <div className="flex">
          <input
            type="text"
            placeholder="식당 이름 검색..."
            value={nameSearch}
            onChange={(e) => { setNameSearch(e.target.value); setPage(0); }}
            onKeyDown={(e) => e.key === "Escape" && setNameSearch("")}
            className="border border-r-0 rounded-l px-3 py-2 text-sm w-48 bg-surface text-gray-900"
          />
          {nameSearch ? (
            <button
              onClick={() => { setNameSearch(""); setPage(0); }}
              className="border rounded-r px-2 py-2 text-sm text-gray-400 hover:text-gray-600 hover:bg-gray-100"
            >
              ✕
            </button>
          ) : (
            <button
              onClick={() => load()}
              className="border rounded-r px-2 py-2 text-sm text-gray-400 hover:text-gray-600 hover:bg-gray-100"
              title="새로고침"
            >
              ↻
            </button>
          )}
        </div>
        {isAdmin && (<>
          {/* #322/#323 — LLM 검증 */}
          <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
            <span>미검증 {verifyPending ?? "?"}건</span>
            <button
              onClick={handleVerifyAll}
              disabled={verifying || verifyPending === 0}
              className="px-3 py-1 text-xs rounded bg-amber-500 hover:bg-amber-600 text-white disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {verifying ? "검증 중..." : "LLM 검증"}
            </button>
            {verifyResult && <span className="text-amber-600">{verifyResult}</span>}
          </div>
          <button
            onClick={async () => {
              const pending = await fetch(`/api/restaurants/tabling-pending`, {
                headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
              }).then(r => r.json());
              if (pending.count === 0) { alert("테이블링 미연결 식당이 없습니다"); return; }
              if (!confirm(`테이블링 미연결 식당 ${pending.count}개를 벌크 검색합니다.\n식당당 5~15초 소요됩니다. 진행할까요?`)) return;
              setBulkTabling(true);
              setBulkTablingProgress({ current: 0, total: pending.count, name: "", linked: 0, notFound: 0 });
              try {
                const res = await fetch("/api/restaurants/bulk-tabling", {
                  method: "POST",
                  headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
                });
                const reader = res.body!.getReader();
                const decoder = new TextDecoder();
                let buf = "";
                while (true) {
                  const { done, value } = await reader.read();
                  if (done) break;
                  buf += decoder.decode(value, { stream: true });
                  const lines = buf.split("\n");
                  buf = lines.pop() || "";
                  for (const line of lines) {
                    const m = line.match(/^data:(.+)$/);
                    if (!m) continue;
                    const evt = JSON.parse(m[1]);
                    if (evt.type === "processing" || evt.type === "done" || evt.type === "notfound" || evt.type === "error") {
                      setBulkTablingProgress(p => ({
                        ...p, current: evt.current, total: evt.total || p.total, name: evt.name,
                        linked: evt.type === "done" ? p.linked + 1 : p.linked,
                        notFound: (evt.type === "notfound" || evt.type === "error") ? p.notFound + 1 : p.notFound,
                      }));
                    } else if (evt.type === "complete") {
                      alert(`완료! 연결: ${evt.linked}개, 미발견: ${evt.notFound}개`);
                    }
                  }
                }
              } catch (e) { alert("벌크 테이블링 실패: " + (e instanceof Error ? e.message : String(e))); }
              finally { setBulkTabling(false); load(); }
            }}
            disabled={bulkTabling}
            className="px-3 py-1.5 text-xs bg-brand-500 text-white rounded hover:bg-brand-600 disabled:opacity-50"
          >
            {bulkTabling ? `테이블링 검색 중 (${bulkTablingProgress.current}/${bulkTablingProgress.total})` : "벌크 테이블링 연결"}
          </button>
          <button
            onClick={async () => {
              if (!confirm("테이블링 매핑을 전부 초기화하시겠습니까?")) return;
              try {
                await fetch("/api/restaurants/reset-tabling", {
                  method: "DELETE",
                  headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
                });
                alert("테이블링 매핑 초기화 완료");
                load();
              } catch (e) { alert("실패: " + e); }
            }}
            className="px-3 py-1.5 text-xs bg-red-50 text-red-600 border border-red-200 rounded hover:bg-red-100"
          >
            테이블링 초기화
          </button>
          <button
            onClick={async () => {
              if (!confirm("캐치테이블 매핑을 전부 초기화하시겠습니까?")) return;
              try {
                await fetch("/api/restaurants/reset-catchtable", {
                  method: "DELETE",
                  headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
                });
                alert("캐치테이블 매핑 초기화 완료");
                load();
              } catch (e) { alert("실패: " + e); }
            }}
            className="px-3 py-1.5 text-xs bg-red-50 text-red-600 border border-red-200 rounded hover:bg-red-100"
          >
            캐치테이블 초기화
          </button>
          <button
            onClick={async () => {
              const pending = await fetch(`/api/restaurants/catchtable-pending`, {
                headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
              }).then(r => r.json());
              if (pending.count === 0) { alert("캐치테이블 미연결 식당이 없습니다"); return; }
              if (!confirm(`캐치테이블 미연결 식당 ${pending.count}개를 벌크 검색합니다.\n식당당 5~15초 소요됩니다. 진행할까요?`)) return;
              setBulkCatchtable(true);
              setBulkCatchtableProgress({ current: 0, total: pending.count, name: "", linked: 0, notFound: 0 });
              try {
                const res = await fetch("/api/restaurants/bulk-catchtable", {
                  method: "POST",
                  headers: { Authorization: `Bearer ${localStorage.getItem("tasteby_token")}` },
                });
                const reader = res.body!.getReader();
                const decoder = new TextDecoder();
                let buf = "";
                while (true) {
                  const { done, value } = await reader.read();
                  if (done) break;
                  buf += decoder.decode(value, { stream: true });
                  const lines = buf.split("\n");
                  buf = lines.pop() || "";
                  for (const line of lines) {
                    const m = line.match(/^data:(.+)$/);
                    if (!m) continue;
                    const evt = JSON.parse(m[1]);
                    if (evt.type === "processing" || evt.type === "done" || evt.type === "notfound" || evt.type === "error") {
                      setBulkCatchtableProgress(p => ({
                        ...p, current: evt.current, total: evt.total || p.total, name: evt.name,
                        linked: evt.type === "done" ? p.linked + 1 : p.linked,
                        notFound: (evt.type === "notfound" || evt.type === "error") ? p.notFound + 1 : p.notFound,
                      }));
                    } else if (evt.type === "complete") {
                      alert(`완료! 연결: ${evt.linked}개, 미발견: ${evt.notFound}개`);
                    }
                  }
                }
              } catch (e) { alert("벌크 캐치테이블 실패: " + (e instanceof Error ? e.message : String(e))); }
              finally { setBulkCatchtable(false); load(); }
            }}
            disabled={bulkCatchtable}
            className="px-3 py-1.5 text-xs bg-violet-500 text-white rounded hover:bg-violet-600 disabled:opacity-50"
          >
            {bulkCatchtable ? `캐치테이블 검색 중 (${bulkCatchtableProgress.current}/${bulkCatchtableProgress.total})` : "벌크 캐치테이블 연결"}
          </button>
        </>)}
        <span className="text-sm text-gray-400 ml-auto">
          {nameSearch ? `${sorted.length} / ` : ""}총 {restaurants.length}개 식당
        </span>
      </div>
      {bulkTabling && bulkTablingProgress.name && (
        <div className="bg-brand-50 rounded p-3 mb-4 text-sm">
          <div className="flex justify-between mb-1">
            <span>{bulkTablingProgress.current}/{bulkTablingProgress.total} - {bulkTablingProgress.name}</span>
            <span className="text-xs text-gray-500">연결: {bulkTablingProgress.linked} / 미발견: {bulkTablingProgress.notFound}</span>
          </div>
          <div className="w-full bg-brand-200 rounded-full h-1.5">
            <div className="bg-brand-500 h-1.5 rounded-full transition-all" style={{ width: `${(bulkTablingProgress.current / bulkTablingProgress.total) * 100}%` }} />
          </div>
        </div>
      )}
      {bulkCatchtable && bulkCatchtableProgress.name && (
        <div className="bg-violet-50 rounded p-3 mb-4 text-sm">
          <div className="flex justify-between mb-1">
            <span>{bulkCatchtableProgress.current}/{bulkCatchtableProgress.total} - {bulkCatchtableProgress.name}</span>
            <span className="text-xs text-gray-500">연결: {bulkCatchtableProgress.linked} / 미발견: {bulkCatchtableProgress.notFound}</span>
          </div>
          <div className="w-full bg-violet-200 rounded-full h-1.5">
            <div className="bg-violet-500 h-1.5 rounded-full transition-all" style={{ width: `${(bulkCatchtableProgress.current / bulkCatchtableProgress.total) * 100}%` }} />
          </div>
        </div>
      )}

      <div className="bg-surface rounded-lg shadow overflow-auto">
        <table className="w-full text-sm">
          <thead className="bg-brand-50 border-b border-brand-100 text-brand-800 text-sm font-semibold">
            <tr>
              <th className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("name")}>이름{sortIcon("name")}</th>
              <th className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("region")}>지역{sortIcon("region")}</th>
              <th className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("cuisine_type")}>음식 종류{sortIcon("cuisine_type")}</th>
              <th className="text-left px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("price_range")}>가격대{sortIcon("price_range")}</th>
              <th className="text-center px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("rating")}>평점{sortIcon("rating")}</th>
              <th className="text-center px-4 py-3 cursor-pointer select-none hover:bg-gray-100" onClick={() => handleSort("business_status")}>상태{sortIcon("business_status")}</th>
              <th className="text-center px-4 py-3">검증</th>
            </tr>
          </thead>
          <tbody>
            {paged.map((r) => (
              <tr
                key={r.id}
                onClick={() => handleSelect(r)}
                className={`border-b cursor-pointer hover:bg-brand-50/50 ${selected?.id === r.id ? "bg-brand-50" : ""}`}
              >
                <td className="px-4 py-3 font-medium">{r.name}</td>
                <td className="px-4 py-3 text-gray-600 text-xs">{r.region || "-"}</td>
                <td className="px-4 py-3 text-gray-600 text-xs">{r.cuisine_type || "-"}</td>
                <td className="px-4 py-3 text-gray-600 text-xs">{r.price_range || "-"}</td>
                <td className="px-4 py-3 text-center text-xs">
                  {r.rating ? (
                    <span><span className="text-yellow-500">★</span> {r.rating}</span>
                  ) : "-"}
                </td>
                <td className="px-4 py-3 text-center">
                  {r.business_status === "CLOSED_PERMANENTLY" ? (
                    <span className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-semibold">폐업</span>
                  ) : r.business_status === "CLOSED_TEMPORARILY" ? (
                    <span className="px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded text-[10px] font-semibold">임시휴업</span>
                  ) : (
                    <span className="text-xs text-gray-400">-</span>
                  )}
                </td>
                <td className="px-4 py-3 text-center" onClick={(e) => e.stopPropagation()}>
                  {r.hidden ? (
                    <button
                      onClick={() => handleToggleHidden(r)}
                      disabled={!isAdmin}
                      title={r.hidden_reason || "manual"}
                      className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-semibold hover:bg-red-200 disabled:opacity-50"
                    >
                      숨김 {r.hidden_reason ? `(${r.hidden_reason.slice(0, 12)})` : ""}
                    </button>
                  ) : r.verified_at ? (
                    <button
                      onClick={() => handleToggleHidden(r)}
                      disabled={!isAdmin}
                      title="검증 통과 — 클릭하면 숨김"
                      className="px-1.5 py-0.5 bg-green-100 text-green-700 rounded text-[10px] font-semibold hover:bg-green-200 disabled:opacity-50"
                    >
                      OK
                    </button>
                  ) : (
                    <span className="text-xs text-gray-400">미검증</span>
                  )}
                </td>
              </tr>
            ))}
            {!loading && filtered.length === 0 && (
              <tr>
                <td colSpan={7} className="px-4 py-8 text-center text-gray-400">
                  식당 데이터가 없습니다
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 mt-4">
          <button onClick={() => setPage(0)} disabled={page === 0} className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100">«</button>
          <button onClick={() => setPage(page - 1)} disabled={page === 0} className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100">‹</button>
          <span className="text-sm text-gray-600 px-2">{page + 1} / {totalPages}</span>
          <button onClick={() => setPage(page + 1)} disabled={page >= totalPages - 1} className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100">›</button>
          <button onClick={() => setPage(totalPages - 1)} disabled={page >= totalPages - 1} className="px-3 py-1 rounded border text-sm disabled:opacity-30 hover:bg-gray-100">»</button>
        </div>
      )}

      {/* 식당 상세/수정 패널 */}
      {selected && (
        <div className="mt-6 bg-surface rounded-lg shadow p-4">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-semibold text-base">{selected.name}</h3>
            <button onClick={() => setSelected(null)} className="text-gray-400 hover:text-gray-600 text-xl leading-none">x</button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {[
              { key: "name", label: "이름" },
              { key: "address", label: "주소" },
              { key: "region", label: "지역" },
              { key: "cuisine_type", label: "음식 종류" },
              { key: "price_range", label: "가격대" },
              { key: "phone", label: "전화" },
              { key: "website", label: "웹사이트" },
              { key: "latitude", label: "위도" },
              { key: "longitude", label: "경도" },
            ].map(({ key, label }) => (
              <div key={key}>
                <label className="text-xs text-gray-500">{label}</label>
                <input
                  value={editForm[key] || ""}
                  onChange={(e) => setEditForm((f) => ({ ...f, [key]: e.target.value }))}
                  className="w-full border rounded px-2 py-1.5 text-sm bg-surface text-gray-900"
                  disabled={!isAdmin}
                />
              </div>
            ))}
          </div>
          {selected.business_status && (
            <p className="mt-3 text-xs text-gray-500">
              Google 상태: <span className="font-medium">{selected.business_status}</span>
              {selected.rating && <> / ★ {selected.rating} ({selected.rating_count?.toLocaleString()})</>}
            </p>
          )}
          {selected.google_place_id && (
            <p className="mt-1">
              <a
                href={`https://www.google.com/maps/place/?q=place_id:${selected.google_place_id}`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-brand-600 hover:underline text-xs"
              >
                Google Maps에서 보기
              </a>
            </p>
          )}
          {/* 테이블링 연결 */}
          {isAdmin && (
            <div className="mt-4 border-t pt-3">
              <div className="flex items-center gap-2 mb-2">
                <h4 className="text-xs font-semibold text-gray-500">테이블링</h4>
                {selected.tabling_url === "NONE" ? (
                  <span className="text-xs text-gray-400">검색완료-없음</span>
                ) : selected.tabling_url ? (
                  <a href={selected.tabling_url} target="_blank" rel="noopener noreferrer"
                    className="text-brand-600 hover:underline text-xs">{selected.tabling_url}</a>
                ) : (
                  <span className="text-xs text-gray-400">미연결</span>
                )}
                <button
                  onClick={async () => {
                    setTablingSearching(true);
                    try {
                      const results = await api.searchTabling(selected.id);
                      if (results.length === 0) {
                        alert("테이블링에서 검색 결과가 없습니다");
                      } else {
                        const best = results[0];
                        if (confirm(`"${best.title}"\n${best.url}\n\n이 테이블링 페이지를 연결할까요?`)) {
                          await api.setTablingUrl(selected.id, best.url);
                          setSelected({ ...selected, tabling_url: best.url });
                          load();
                        }
                      }
                    } catch (e) { alert("검색 실패: " + (e instanceof Error ? e.message : String(e))); }
                    finally { setTablingSearching(false); }
                  }}
                  disabled={tablingSearching}
                  className="px-2 py-0.5 text-[11px] bg-brand-500 text-white rounded hover:bg-brand-600 disabled:opacity-50"
                >
                  {tablingSearching ? "검색 중..." : "테이블링 검색"}
                </button>
                {selected.tabling_url && (
                  <button
                    onClick={async () => {
                      await api.setTablingUrl(selected.id, "");
                      setSelected({ ...selected, tabling_url: null });
                      load();
                    }}
                    className="px-2 py-0.5 text-[11px] text-red-500 border border-red-200 rounded hover:bg-red-50"
                  >
                    연결 해제
                  </button>
                )}
              </div>
            </div>
          )}
          {/* 캐치테이블 연결 */}
          {isAdmin && (
            <div className="mt-4 border-t pt-3">
              <div className="flex items-center gap-2 mb-2">
                <h4 className="text-xs font-semibold text-gray-500">캐치테이블</h4>
                {selected.catchtable_url === "NONE" ? (
                  <span className="text-xs text-gray-400">검색완료-없음</span>
                ) : selected.catchtable_url ? (
                  <a href={selected.catchtable_url} target="_blank" rel="noopener noreferrer"
                    className="text-brand-600 hover:underline text-xs">{selected.catchtable_url}</a>
                ) : (
                  <span className="text-xs text-gray-400">미연결</span>
                )}
                <button
                  onClick={async () => {
                    setCatchtableSearching(true);
                    try {
                      const results = await api.searchCatchtable(selected.id);
                      if (results.length === 0) {
                        alert("캐치테이블에서 검색 결과가 없습니다");
                      } else {
                        const best = results[0];
                        if (confirm(`"${best.title}"\n${best.url}\n\n이 캐치테이블 페이지를 연결할까요?`)) {
                          await api.setCatchtableUrl(selected.id, best.url);
                          setSelected({ ...selected, catchtable_url: best.url });
                          load();
                        }
                      }
                    } catch (e) { alert("검색 실패: " + (e instanceof Error ? e.message : String(e))); }
                    finally { setCatchtableSearching(false); }
                  }}
                  disabled={catchtableSearching}
                  className="px-2 py-0.5 text-[11px] bg-violet-500 text-white rounded hover:bg-violet-600 disabled:opacity-50"
                >
                  {catchtableSearching ? "검색 중..." : "캐치테이블 검색"}
                </button>
                {selected.catchtable_url && (
                  <button
                    onClick={async () => {
                      await api.setCatchtableUrl(selected.id, "");
                      setSelected({ ...selected, catchtable_url: null });
                      load();
                    }}
                    className="px-2 py-0.5 text-[11px] text-red-500 border border-red-200 rounded hover:bg-red-50"
                  >
                    연결 해제
                  </button>
                )}
              </div>
            </div>
          )}

          {videos.length > 0 && (
            <div className="mt-4 border-t pt-3">
              <h4 className="text-xs font-semibold text-gray-500 mb-2">연결된 영상 ({videos.length})</h4>
              <div className="space-y-1.5 max-h-32 overflow-y-auto">
                {videos.map((v) => (
                  <div key={v.video_id} className="flex items-center gap-2 text-xs">
                    <span className="px-1.5 py-0.5 bg-red-50 text-red-600 rounded text-[10px] font-medium shrink-0">
                      {v.channel_name}
                    </span>
                    <a href={v.url} target="_blank" rel="noopener noreferrer" className="text-brand-600 hover:underline truncate">
                      {v.title}
                    </a>
                    <span className="text-gray-400 shrink-0">{v.published_at?.slice(0, 10)}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="flex gap-2 mt-4">
            {isAdmin && <button
              onClick={handleSave}
              disabled={saving}
              className="px-4 py-2 text-sm bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
            >
              {saving ? "저장 중..." : "저장"}
            </button>}
            <button
              onClick={() => setSelected(null)}
              className="px-4 py-2 text-sm border rounded text-gray-600 hover:bg-gray-100"
            >
              {isAdmin ? "취소" : "닫기"}
            </button>
            {isAdmin && <button
              onClick={handleDelete}
              className="px-4 py-2 text-sm text-red-500 border border-red-200 rounded hover:bg-red-50 ml-auto"
            >
              식당 삭제
            </button>}
          </div>
        </div>
      )}
    </div>
  );
}


/* ─── 유저 관리 ─── */
interface AdminUser {
  id: string;
  email: string | null;
  nickname: string | null;
  avatar_url: string | null;
  is_admin: boolean;
  provider: string | null;
  created_at: string | null;
  favorite_count: number;
  review_count: number;
  memo_count: number;
}

interface UserFavorite {
  id: string;
  name: string;
  address: string | null;
  region: string | null;
  cuisine_type: string | null;
  rating: number | null;
  business_status: string | null;
  created_at: string | null;
}

interface UserReview {
  id: string;
  restaurant_id: string;
  rating: number;
  review_text: string | null;
  visited_at: string | null;
  created_at: string | null;
  restaurant_name: string | null;
}

interface UserMemo {
  id: string;
  restaurant_id: string;
  rating: number | null;
  memo_text: string | null;
  visited_at: string | null;
  created_at: string;
  restaurant_name: string | null;
}

function UsersPanel() {
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(0);
  const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
  const [favorites, setFavorites] = useState<UserFavorite[]>([]);
  const [reviews, setReviews] = useState<UserReview[]>([]);
  const [memos, setMemos] = useState<UserMemo[]>([]);
  const [detailLoading, setDetailLoading] = useState(false);
  const perPage = 20;

  const loadUsers = useCallback(async (p: number) => {
    try {
      const res = await api.getAdminUsers({ limit: perPage, offset: p * perPage });
      setUsers(res.users);
      setTotal(res.total);
    } catch (e) {
      console.error("Failed to load users:", e);
    }
  }, []);

  useEffect(() => {
    loadUsers(page);
  }, [page, loadUsers]);

  const handleSelectUser = async (u: AdminUser) => {
    if (selectedUser?.id === u.id) {
      setSelectedUser(null);
      setFavorites([]);
      setReviews([]);
      setMemos([]);
      return;
    }
    setSelectedUser(u);
    setDetailLoading(true);
    try {
      const [favs, revs, mems] = await Promise.all([
        api.getAdminUserFavorites(u.id),
        api.getAdminUserReviews(u.id),
        api.getAdminUserMemos(u.id),
      ]);
      setFavorites(favs);
      setReviews(revs);
      setMemos(mems);
    } catch (e) {
      console.error(e);
    } finally {
      setDetailLoading(false);
    }
  };

  const totalPages = Math.ceil(total / perPage);

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-bold">유저 관리 ({total}명)</h2>

      {/* Users Table */}
      <div className="bg-surface rounded-lg shadow overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-brand-50 border-b border-brand-100 text-brand-800 text-sm font-semibold">
            <tr>
              <th className="text-left px-4 py-2">사용자</th>
              <th className="text-left px-4 py-2">이메일</th>
              <th className="text-center px-4 py-2">관리자</th>
              <th className="text-center px-4 py-2">찜</th>
              <th className="text-center px-4 py-2">리뷰</th>
              <th className="text-center px-4 py-2">메모</th>
              <th className="text-left px-4 py-2">가입일</th>
            </tr>
          </thead>
          <tbody>
            {users.map((u) => (
              <tr
                key={u.id}
                onClick={() => handleSelectUser(u)}
                className={`border-t cursor-pointer transition-colors ${
                  selectedUser?.id === u.id
                    ? "bg-brand-50"
                    : "hover:bg-brand-50/50"
                }`}
              >
                <td className="px-4 py-2">
                  <div className="flex items-center gap-2">
                    {u.avatar_url ? (
                      <img
                        src={u.avatar_url}
                        alt=""
                        className="w-7 h-7 rounded-full"
                      />
                    ) : (
                      <div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs font-semibold text-gray-500">
                        {(u.nickname || u.email || "?").charAt(0).toUpperCase()}
                      </div>
                    )}
                    <span className="font-medium">
                      {u.nickname || "-"}
                    </span>
                  </div>
                </td>
                <td className="px-4 py-2 text-gray-500">{u.email || "-"}</td>
                <td className="px-4 py-2 text-center">
                  <button
                    onClick={async (e) => {
                      e.stopPropagation();
                      try {
                        await api.updateAdminUserAdmin(u.id, !u.is_admin);
                        setUsers((prev) => prev.map((x) => x.id === u.id ? { ...x, is_admin: !u.is_admin } : x));
                      } catch (err) {
                        console.error("Failed to update admin:", err);
                        alert("관리자 권한 변경에 실패했습니다.");
                      }
                    }}
                    className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium transition-colors ${
                      u.is_admin
                        ? "bg-green-100 text-green-700 hover:bg-green-200"
                        : "bg-gray-100 text-gray-400 hover:bg-gray-200"
                    }`}
                  >
                    {u.is_admin ? "ON" : "OFF"}
                  </button>
                </td>
                <td className="px-4 py-2 text-center">
                  {u.favorite_count > 0 ? (
                    <span className="inline-block px-2 py-0.5 bg-red-50 text-red-600 rounded-full text-xs font-medium">
                      {u.favorite_count}
                    </span>
                  ) : (
                    <span className="text-gray-300">0</span>
                  )}
                </td>
                <td className="px-4 py-2 text-center">
                  {u.review_count > 0 ? (
                    <span className="inline-block px-2 py-0.5 bg-brand-50 text-brand-600 rounded-full text-xs font-medium">
                      {u.review_count}
                    </span>
                  ) : (
                    <span className="text-gray-300">0</span>
                  )}
                </td>
                <td className="px-4 py-2 text-center">
                  {u.memo_count > 0 ? (
                    <span className="inline-block px-2 py-0.5 bg-purple-50 text-purple-600 rounded-full text-xs font-medium">
                      {u.memo_count}
                    </span>
                  ) : (
                    <span className="text-gray-300">0</span>
                  )}
                </td>
                <td className="px-4 py-2 text-gray-400 text-xs">
                  {u.created_at?.slice(0, 10) || "-"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2">
          <button
            onClick={() => setPage((p) => Math.max(0, p - 1))}
            disabled={page === 0}
            className="px-3 py-1 text-sm border rounded disabled:opacity-30"
          >
            이전
          </button>
          <span className="text-sm text-gray-600">
            {page + 1} / {totalPages}
          </span>
          <button
            onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
            disabled={page >= totalPages - 1}
            className="px-3 py-1 text-sm border rounded disabled:opacity-30"
          >
            다음
          </button>
        </div>
      )}

      {/* Selected User Detail */}
      {selectedUser && (
        <div className="bg-surface rounded-lg shadow p-5 space-y-4">
          <div className="flex items-center gap-3 pb-3 border-b">
            {selectedUser.avatar_url ? (
              <img
                src={selectedUser.avatar_url}
                alt=""
                className="w-12 h-12 rounded-full"
              />
            ) : (
              <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-lg font-semibold text-gray-500">
                {(selectedUser.nickname || selectedUser.email || "?").charAt(0).toUpperCase()}
              </div>
            )}
            <div>
              <div className="font-bold">{selectedUser.nickname || "-"}</div>
              <div className="text-sm text-gray-500">{selectedUser.email || "-"}</div>
              <div className="text-xs text-gray-400">
                {selectedUser.provider} · 가입: {selectedUser.created_at?.slice(0, 10)}
              </div>
            </div>
          </div>

          {detailLoading ? (
            <p className="text-sm text-gray-500">로딩 중...</p>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* Favorites */}
              <div>
                <h3 className="font-semibold text-sm mb-2 text-red-600">
                  찜한 식당 ({favorites.length})
                </h3>
                {favorites.length === 0 ? (
                  <p className="text-xs text-gray-400">찜한 식당이 없습니다.</p>
                ) : (
                  <div className="space-y-1 max-h-64 overflow-y-auto">
                    {favorites.map((f) => (
                      <div
                        key={f.id}
                        className="flex items-center justify-between border rounded px-3 py-2 text-xs"
                      >
                        <div>
                          <span className="font-medium">{f.name}</span>
                          {f.region && (
                            <span className="ml-1.5 text-gray-400">{f.region}</span>
                          )}
                          {f.cuisine_type && (
                            <span className="ml-1.5 text-gray-400">· {f.cuisine_type}</span>
                          )}
                          {f.business_status === "CLOSED_PERMANENTLY" && (
                            <span className="ml-1.5 px-1 bg-red-100 text-red-600 rounded text-[10px]">
                              폐업
                            </span>
                          )}
                        </div>
                        {f.rating && (
                          <span className="text-yellow-500 shrink-0">
                            ★ {f.rating}
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Reviews */}
              <div>
                <h3 className="font-semibold text-sm mb-2 text-brand-600">
                  작성한 리뷰 ({reviews.length})
                </h3>
                {reviews.length === 0 ? (
                  <p className="text-xs text-gray-400">작성한 리뷰가 없습니다.</p>
                ) : (
                  <div className="space-y-1 max-h-64 overflow-y-auto">
                    {reviews.map((r) => (
                      <div
                        key={r.id}
                        className="border rounded px-3 py-2 text-xs space-y-0.5"
                      >
                        <div className="flex items-center justify-between">
                          <span className="font-medium">
                            {r.restaurant_name || "알 수 없음"}
                          </span>
                          <span className="text-yellow-500 shrink-0">
                            {"★".repeat(Math.round(r.rating))} {r.rating}
                          </span>
                        </div>
                        {r.review_text && (
                          <p className="text-gray-600 line-clamp-2">
                            {r.review_text}
                          </p>
                        )}
                        <div className="text-gray-400 text-[10px]">
                          {r.visited_at && `방문: ${r.visited_at} · `}
                          {r.created_at?.slice(0, 10)}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Memos */}
              <div>
                <h3 className="font-semibold text-sm mb-2 text-purple-600">
                  작성한 메모 ({memos.length})
                </h3>
                {memos.length === 0 ? (
                  <p className="text-xs text-gray-400">작성한 메모가 없습니다.</p>
                ) : (
                  <div className="space-y-1 max-h-64 overflow-y-auto">
                    {memos.map((m) => (
                      <div
                        key={m.id}
                        className="border border-purple-200 rounded px-3 py-2 text-xs space-y-0.5 bg-purple-50/30"
                      >
                        <div className="flex items-center justify-between">
                          <span className="font-medium">
                            {m.restaurant_name || "알 수 없음"}
                          </span>
                          {m.rating && (
                            <span className="text-yellow-500 shrink-0">
                              {"★".repeat(Math.round(m.rating))} {m.rating}
                            </span>
                          )}
                        </div>
                        {m.memo_text && (
                          <p className="text-gray-600 line-clamp-2">
                            {m.memo_text}
                          </p>
                        )}
                        <div className="text-gray-400 text-[10px]">
                          {m.visited_at && `방문: ${m.visited_at} · `}
                          {m.created_at?.slice(0, 10)}
                          <span className="ml-1 text-purple-400">비공개</span>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/* ─── 데몬 설정 ─── */
function DaemonPanel({ isAdmin }: { isAdmin: boolean }) {
  const [config, setConfig] = useState<DaemonConfig | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [running, setRunning] = useState<string | null>(null);
  const [result, setResult] = useState<string | null>(null);

  // Editable fields
  const [scanEnabled, setScanEnabled] = useState(false);
  const [scanInterval, setScanInterval] = useState(60);
  const [processEnabled, setProcessEnabled] = useState(false);
  const [processInterval, setProcessInterval] = useState(60);
  const [processLimit, setProcessLimit] = useState(10);

  const load = useCallback(() => {
    setLoading(true);
    api.getDaemonConfig().then((cfg) => {
      setConfig(cfg);
      setScanEnabled(cfg.scan_enabled);
      setScanInterval(cfg.scan_interval_min);
      setProcessEnabled(cfg.process_enabled);
      setProcessInterval(cfg.process_interval_min);
      setProcessLimit(cfg.process_limit);
    }).catch(console.error).finally(() => setLoading(false));
  }, []);

  useEffect(() => { load(); }, [load]);

  const handleSave = async () => {
    setSaving(true);
    setResult(null);
    try {
      await api.updateDaemonConfig({
        scan_enabled: scanEnabled,
        scan_interval_min: scanInterval,
        process_enabled: processEnabled,
        process_interval_min: processInterval,
        process_limit: processLimit,
      });
      setResult("설정 저장 완료");
      load();
    } catch (e: unknown) {
      setResult(e instanceof Error ? e.message : "저장 실패");
    } finally {
      setSaving(false);
    }
  };

  const handleRunScan = async () => {
    setRunning("scan");
    setResult(null);
    try {
      const res = await api.runDaemonScan();
      setResult(`채널 스캔 완료: 신규 ${res.new_videos}개 영상`);
      load();
    } catch (e: unknown) {
      setResult(e instanceof Error ? e.message : "스캔 실패");
    } finally {
      setRunning(null);
    }
  };

  const handleRunProcess = async () => {
    setRunning("process");
    setResult(null);
    try {
      const res = await api.runDaemonProcess(processLimit);
      setResult(`영상 처리 완료: ${res.restaurants_extracted}개 식당 추출`);
      load();
    } catch (e: unknown) {
      setResult(e instanceof Error ? e.message : "처리 실패");
    } finally {
      setRunning(null);
    }
  };

  if (loading) return <p className="text-gray-500">로딩 중...</p>;

  return (
    <div className="space-y-6">
      {/* Schedule Config */}
      <div className="bg-surface rounded-lg shadow p-6">
        <h2 className="text-lg font-semibold mb-4">스케줄 설정</h2>
        <p className="text-xs text-gray-500 mb-4">
          데몬이 실행 중일 때, 아래 설정에 따라 자동으로 채널 스캔 및 영상 처리를 수행합니다.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Scan config */}
          <div className="border rounded-lg p-4 space-y-3">
            <div className="flex items-center justify-between">
              <h3 className="font-medium">채널 스캔</h3>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={scanEnabled}
                  onChange={(e) => setScanEnabled(e.target.checked)}
                  disabled={!isAdmin}
                  className="w-4 h-4"
                />
                <span className={`text-sm ${scanEnabled ? "text-green-600 font-medium" : "text-gray-500"}`}>
                  {scanEnabled ? "활성" : "비활성"}
                </span>
              </label>
            </div>
            <div>
              <label className="block text-xs text-gray-500 mb-1">주기 (분)</label>
              <input
                type="number"
                value={scanInterval}
                onChange={(e) => setScanInterval(Number(e.target.value))}
                disabled={!isAdmin}
                min={1}
                className="border rounded px-3 py-1.5 text-sm w-32"
              />
            </div>
            {config?.last_scan_at && (
              <p className="text-xs text-gray-400">마지막 스캔: {config.last_scan_at}</p>
            )}
          </div>

          {/* Process config */}
          <div className="border rounded-lg p-4 space-y-3">
            <div className="flex items-center justify-between">
              <h3 className="font-medium">영상 처리</h3>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={processEnabled}
                  onChange={(e) => setProcessEnabled(e.target.checked)}
                  disabled={!isAdmin}
                  className="w-4 h-4"
                />
                <span className={`text-sm ${processEnabled ? "text-green-600 font-medium" : "text-gray-500"}`}>
                  {processEnabled ? "활성" : "비활성"}
                </span>
              </label>
            </div>
            <div className="flex gap-4">
              <div>
                <label className="block text-xs text-gray-500 mb-1">주기 (분)</label>
                <input
                  type="number"
                  value={processInterval}
                  onChange={(e) => setProcessInterval(Number(e.target.value))}
                  disabled={!isAdmin}
                  min={1}
                  className="border rounded px-3 py-1.5 text-sm w-32"
                />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">처리 건수</label>
                <input
                  type="number"
                  value={processLimit}
                  onChange={(e) => setProcessLimit(Number(e.target.value))}
                  disabled={!isAdmin}
                  min={1}
                  max={50}
                  className="border rounded px-3 py-1.5 text-sm w-32"
                />
              </div>
            </div>
            {config?.last_process_at && (
              <p className="text-xs text-gray-400">마지막 처리: {config.last_process_at}</p>
            )}
          </div>
        </div>

        {isAdmin && (
          <div className="mt-4">
            <button
              onClick={handleSave}
              disabled={saving}
              className="px-4 py-2 bg-brand-600 text-white text-sm rounded hover:bg-brand-700 disabled:opacity-50"
            >
              {saving ? "저장 중..." : "설정 저장"}
            </button>
          </div>
        )}
      </div>

      {/* Manual Triggers */}
      <div className="bg-surface rounded-lg shadow p-6">
        <h2 className="text-lg font-semibold mb-4">수동 실행</h2>
        <p className="text-xs text-gray-500 mb-4">
          스케줄과 관계없이 즉시 실행합니다. 처리 시간이 걸릴 수 있습니다.
        </p>

        <div className="flex gap-3">
          {isAdmin && (
            <>
              <button
                onClick={handleRunScan}
                disabled={running !== null}
                className="px-4 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700 disabled:opacity-50"
              >
                {running === "scan" ? "스캔 중..." : "채널 스캔 실행"}
              </button>
              <button
                onClick={handleRunProcess}
                disabled={running !== null}
                className="px-4 py-2 bg-purple-600 text-white text-sm rounded hover:bg-purple-700 disabled:opacity-50"
              >
                {running === "process" ? "처리 중..." : "영상 처리 실행"}
              </button>
            </>
          )}
        </div>

        {result && (
          <p className={`mt-3 text-sm ${result.includes("실패") || result.includes("API") ? "text-red-600" : "text-green-600"}`}>
            {result}
          </p>
        )}
      </div>

      {/* Config updated_at */}
      {config?.updated_at && (
        <p className="text-xs text-gray-400 text-right">설정 수정일: {config.updated_at}</p>
      )}
    </div>
  );
}
