feat: implement admin interface for managing custom movie sources and servers with new API endpoint and database schema updates

app/pages/admin/phim/[id].vue

@@ -7,15 +7,55 @@ const route = useRoute()
 const movieId = Number(route.params.id)
 
 const { data: movie, refresh } = await useFetch(`/api/admin/movies/${movieId}`)
+const { data: sourceData } = await useFetch(`/api/admin/movies/${movieId}/sources`, { lazy: true, default: () => ({ movie: null, sources: [] }) })
 
 useHead({
   title: computed(() => movie.value ? `Chỉnh sửa: ${movie.value.name} - CineK Admin` : 'Chỉnh sửa phim - CineK Admin'),
 })
 
+interface SourceEpisode {
+  name: string
+  slug?: string
+  linkEmbed?: string
+  linkM3u8?: string
+}
+
+interface SourceServer {
+  name: string
+  source: string
+  sourceSlug: string
+  episodes: SourceEpisode[]
+}
+
+interface SourceInfo {
+  source: string
+  slug: string
+  name: string
+  content: string
+  actors: { name: string, originalName?: string, role?: string, avatar?: string }[]
+  servers: SourceServer[]
+}
+
+interface CustomEpisode {
+  name: string
+  linkEmbed: string
+  linkM3u8: string
+}
+
+interface CustomServer {
+  name: string
+  episodes: CustomEpisode[]
+}
+
 const customPoster = ref('')
 const customThumb = ref('')
 const customContent = ref('')
-const customEpisodes = ref<{ name: string, linkEmbed: string, linkM3u8: string }[]>([])
+const customServers = ref<CustomServer[]>([])
+const customActors = ref<{ name: string, originalName: string, role: string, avatar: string }[]>([])
+const expandedSources = ref<Record<string, boolean>>({})
+const selectedTargetServer = ref(0)
+const collapsedServers = ref<Record<number, boolean>>({})
+const expandedLinks = ref<Record<string, boolean>>({})
 const saving = ref(false)
 const saved = ref(false)
 
@@ -24,18 +64,154 @@ watch(movie, (m) => {
     customPoster.value = m.customPoster || ''
     customThumb.value = m.customThumb || ''
     customContent.value = m.customContent || ''
-    customEpisodes.value = m.customEpisodes?.length
-      ? m.customEpisodes.map((ep: any) => ({ name: ep.name || '', linkEmbed: ep.linkEmbed || '', linkM3u8: ep.linkM3u8 || '' }))
+    customActors.value = m.actors?.length
+      ? m.actors.map((a: any) => ({ name: a.name || '', originalName: a.originalName || '', role: a.role || '', avatar: a.avatar || '' }))
+      : []
+    customServers.value = m.customServers?.length
+      ? m.customServers.map((server: any) => ({
+          name: server.name || '',
+          episodes: (server.episodes || []).map((ep: any) => ({ name: ep.name || '', linkEmbed: ep.linkEmbed || '', linkM3u8: ep.linkM3u8 || '' })),
+        }))
       : []
   }
 }, { immediate: true })
 
-function addEpisode() {
-  customEpisodes.value.push({ name: '', linkEmbed: '', linkM3u8: '' })
+const availableEpisodes = computed(() => {
+  const list: { key: string, label: string, linkEmbed?: string, linkM3u8?: string }[] = []
+  const sources = (sourceData.value?.sources || []) as SourceInfo[]
+  sources.forEach((source) => {
+    source.servers.forEach((server) => {
+      server.episodes.forEach((ep, index) => {
+        list.push({
+          key: `${source.source}::${server.name}::${index}::${ep.name}`,
+          label: `[${source.source.toUpperCase()}] ${server.name} - ${ep.name || `Tập ${index + 1}`}`,
+          linkEmbed: ep.linkEmbed,
+          linkM3u8: ep.linkM3u8,
+        })
+      })
+    })
+  })
+  return list
+})
+
+const apiContent = computed(() => {
+  const sources = (sourceData.value?.sources || []) as SourceInfo[]
+  const order = ['nguonc', 'ophim', 'kkphim']
+  for (const name of order) {
+    const found = sources.find((s) => s.source === name)
+    if (found?.content?.trim()) return found.content.trim()
+  }
+  return sources.find((s) => s.content?.trim())?.content?.trim() || ''
+})
+
+const apiActors = computed(() => {
+  const sources = (sourceData.value?.sources || []) as SourceInfo[]
+  const order = ['nguonc', 'ophim', 'kkphim']
+  for (const name of order) {
+    const found = sources.find((s) => s.source === name)
+    if (found?.actors?.length) return found.actors
+  }
+  return sources.find((s) => s.actors?.length)?.actors || []
+})
+
+function addServer() {
+  customServers.value.push({ name: '', episodes: [] })
 }
 
-function removeEpisode(index: number) {
-  customEpisodes.value.splice(index, 1)
+function removeServer(serverIndex: number) {
+  customServers.value.splice(serverIndex, 1)
+}
+
+function addServerEpisode(serverIndex: number) {
+  customServers.value[serverIndex].episodes.push({ name: '', linkEmbed: '', linkM3u8: '' })
+}
+
+function removeServerEpisode(serverIndex: number, episodeIndex: number) {
+  customServers.value[serverIndex].episodes.splice(episodeIndex, 1)
+}
+
+function applySourceLink(serverIndex: number, episodeIndex: number, key: string) {
+  const item = availableEpisodes.value.find((ep) => ep.key === key)
+  if (!item) return
+  const ep = customServers.value[serverIndex].episodes[episodeIndex]
+  if (ep) {
+    ep.linkEmbed = item.linkEmbed || ''
+    ep.linkM3u8 = item.linkM3u8 || ''
+  }
+}
+
+function handleSourceLinkChange(serverIndex: number, episodeIndex: number, event: Event) {
+  const value = (event.target as HTMLSelectElement).value
+  applySourceLink(serverIndex, episodeIndex, value)
+}
+
+function toggleSource(source: string) {
+  expandedSources.value[source] = !expandedSources.value[source]
+}
+
+function toggleServer(index: number) {
+  collapsedServers.value[index] = !collapsedServers.value[index]
+}
+
+function toggleLinks(key: string) {
+  expandedLinks.value[key] = !expandedLinks.value[key]
+}
+
+function useApiContent() {
+  if (apiContent.value) customContent.value = apiContent.value
+}
+
+const contentRows = computed(() => {
+  if (!customContent.value) return 6
+  const lines = customContent.value.split('\n').length
+  const estimatedWrappedLines = Math.ceil(customContent.value.length / 38)
+  return Math.max(6, Math.max(lines, estimatedWrappedLines))
+})
+
+watch(() => customServers.value.length, (length) => {
+  if (selectedTargetServer.value >= length) {
+    selectedTargetServer.value = Math.max(0, length - 1)
+  }
+})
+
+function ensureTargetServer() {
+  if (!customServers.value.length) {
+    customServers.value.push({ name: 'Server 1', episodes: [] })
+  }
+  if (selectedTargetServer.value >= customServers.value.length) {
+    selectedTargetServer.value = 0
+  }
+}
+
+function quickAddEpisode(sourceIndex: number, serverIndex: number, episodeIndex: number) {
+  const sources = (sourceData.value?.sources || []) as SourceInfo[]
+  const source = sources[sourceIndex]
+  const server = source?.servers?.[serverIndex]
+  const ep = server?.episodes?.[episodeIndex]
+  if (!ep) return
+  ensureTargetServer()
+  const target = customServers.value[selectedTargetServer.value]
+  target.episodes.push({
+    name: ep.name || '',
+    linkEmbed: ep.linkEmbed || '',
+    linkM3u8: ep.linkM3u8 || '',
+  })
+}
+
+function quickAddAllEpisodes(sourceIndex: number, serverIndex: number) {
+  const sources = (sourceData.value?.sources || []) as SourceInfo[]
+  const source = sources[sourceIndex]
+  const server = source?.servers?.[serverIndex]
+  if (!server?.episodes?.length) return
+  ensureTargetServer()
+  const target = customServers.value[selectedTargetServer.value]
+  server.episodes.forEach((ep) => {
+    target.episodes.push({
+      name: ep.name || '',
+      linkEmbed: ep.linkEmbed || '',
+      linkM3u8: ep.linkM3u8 || '',
+    })
+  })
 }
 
 async function handleSave() {
@@ -48,7 +224,8 @@ async function handleSave() {
         customPoster: customPoster.value,
         customThumb: customThumb.value,
         customContent: customContent.value,
-        customEpisodes: customEpisodes.value,
+        actors: customActors.value,
+        customServers: customServers.value,
       },
     })
     saved.value = true
@@ -66,6 +243,25 @@ function clearField(field: 'customPoster' | 'customThumb' | 'customContent') {
   if (field === 'customThumb') customThumb.value = ''
   if (field === 'customContent') customContent.value = ''
 }
+
+function addActor() {
+  customActors.value.push({ name: '', originalName: '', role: '', avatar: '' })
+}
+
+function removeActor(index: number) {
+  customActors.value.splice(index, 1)
+}
+
+function useApiActors() {
+  if (!apiActors.value.length) return
+  const existingNames = new Set(customActors.value.map((a) => a.name.trim().toLowerCase()))
+  for (const a of apiActors.value) {
+    if (!existingNames.has(a.name.trim().toLowerCase())) {
+      customActors.value.push({ name: a.name, originalName: a.originalName || '', role: a.role || '', avatar: a.avatar || '' })
+      existingNames.add(a.name.trim().toLowerCase())
+    }
+  }
+}
 </script>
 
 <template>
@@ -104,164 +300,389 @@ function clearField(field: 'customPoster' | 'customThumb' | 'customContent') {
         </div>
       </Transition>
 
-      <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
-        <div class="space-y-6">
+      <div class="grid gap-6 lg:grid-cols-12 items-start">
+        <!-- LEFT COLUMN: Main Content & Episode Management (7 cols) -->
+        <div class="space-y-6 lg:col-span-7">
+          <!-- Mô tả phim -->
           <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
-            <div class="mb-4 flex items-center gap-3">
-              <div class="grid size-9 place-items-center rounded-lg bg-blue-400/10">
-                <AppIcon name="type" class="size-4 text-blue-400" />
+            <div class="mb-4 flex items-center justify-between gap-3">
+              <div class="flex items-center gap-3">
+                <div class="grid size-9 place-items-center rounded-lg bg-blue-400/10">
+                  <AppIcon name="type" class="size-4 text-blue-400" />
+                </div>
+                <div>
+                  <h2 class="text-base font-black text-white">Mô tả phim</h2>
+                  <p class="text-xs text-slate-400">
+                    {{ customContent ? 'Mô tả tuỳ chỉnh (Đã áp dụng)' : 'Mô tả mặc định từ API' }}
+                  </p>
+                </div>
               </div>
-              <div>
-                <h2 class="text-base font-black text-white">Mô tả phim</h2>
-                <p class="text-xs text-slate-400">Để trống để dùng mô tả từ API nguồn</p>
-              </div>
-            </div>
-            <textarea v-model="customContent" rows="8" placeholder="Nhập mô tả phim..."
-              class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-sm leading-6 text-white outline-none placeholder:text-slate-500 focus:border-yellow-400/50" />
-            <button v-if="customContent" type="button"
-              class="mt-2 text-xs font-semibold text-red-400 transition hover:text-red-300"
-              @click="clearField('customContent')">
-              Xoá mô tả tuỳ chỉnh
-            </button>
-          </div>
-
-          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
-            <div class="mb-4 flex items-center gap-3">
-              <div class="grid size-9 place-items-center rounded-lg bg-amber-400/10">
-                <AppIcon name="film" class="size-4 text-amber-400" />
-              </div>
-              <div class="flex-1">
-                <h2 class="text-base font-black text-white">Tập phim tuỳ chỉnh</h2>
-                <p class="text-xs text-slate-400">Thêm tập phim thủ công khi API thiếu tập hoặc link bị die. Để trống tất cả để dùng từ API.</p>
-              </div>
-              <button type="button"
-                class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-white/10 px-3 text-xs font-semibold text-white transition hover:bg-white/20"
-                @click="addEpisode">
-                <AppIcon name="plus" class="size-3.5" />
-                Thêm tập
+              <button v-if="apiContent && !customContent" type="button"
+                class="inline-flex h-7 items-center gap-1 rounded-lg bg-yellow-400/10 px-2.5 text-xs font-bold text-yellow-400 transition hover:bg-yellow-400/20"
+                @click="useApiContent">
+                <AppIcon name="pen" class="size-3" />
+                Dùng mô tả này
+              </button>
+              <button v-else-if="customContent" type="button"
+                class="text-xs font-semibold text-red-400 transition hover:text-red-300"
+                @click="clearField('customContent')">
+                Quay lại mặc định
               </button>
             </div>
 
-            <div v-if="customEpisodes.length" class="space-y-3">
-              <div v-for="(ep, index) in customEpisodes" :key="index"
-                class="rounded-lg border border-white/10 bg-white/5 p-4">
-                <div class="mb-3 flex items-center justify-between">
-                  <span class="text-xs font-black uppercase text-slate-400">Tập {{ index + 1 }}</span>
+            <!-- State 1: Chưa bấm dùng mô tả tuỳ chỉnh -> Hiển thị mô tả mặc định API -->
+            <div v-if="!customContent" class="rounded-lg border border-white/10 bg-white/5 p-3.5">
+              <div class="mb-2 flex items-center justify-between">
+                <span class="inline-flex items-center gap-1.5 rounded-full bg-blue-400/10 px-2.5 py-0.5 text-[10px] font-black uppercase text-blue-400">
+                  <span class="size-1.5 rounded-full bg-blue-400"></span>
+                  Nội dung từ API nguồn
+                </span>
+              </div>
+              <p class="text-xs leading-6 text-slate-300 whitespace-pre-line">
+                {{ apiContent || 'Chưa có mô tả từ nguồn API.' }}
+              </p>
+            </div>
+
+            <!-- State 2: Đã bấm dùng mô tả / chỉnh sửa -> Khung nhập full ra toàn bộ chiều cao -->
+            <div v-else>
+              <textarea v-model="customContent" :rows="contentRows" placeholder="Nhập mô tả phim..."
+                style="field-sizing: content; min-height: 140px;"
+                class="w-full rounded-lg border border-yellow-400/40 bg-white/5 p-3 text-xs leading-6 text-white outline-none placeholder:text-slate-500 focus:border-yellow-400" />
+            </div>
+          </div>
+
+          <!-- Diễn viên -->
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
+              <div class="flex items-center gap-3">
+                <div class="grid size-9 place-items-center rounded-lg bg-pink-400/10">
+                  <AppIcon name="users" class="size-4 text-pink-400" />
+                </div>
+                <div>
+                  <h2 class="text-base font-black text-white">Diễn viên</h2>
+                  <p class="text-xs text-slate-400">Danh sách diễn viên của phim ({{ customActors.length }})</p>
+                </div>
+              </div>
+              <div class="flex gap-2">
+                <button v-if="apiActors.length" type="button"
+                  class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-yellow-400/10 px-3 text-xs font-bold text-yellow-400 transition hover:bg-yellow-400/20"
+                  @click="useApiActors">
+                  <AppIcon name="pen" class="size-3.5" />
+                  Import từ API ({{ apiActors.length }})
+                </button>
+                <button type="button"
+                  class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-pink-500/20 px-3 text-xs font-bold text-pink-400 transition hover:bg-pink-500/30"
+                  @click="addActor">
+                  <AppIcon name="plus" class="size-3.5" />
+                  Thêm diễn viên
+                </button>
+              </div>
+            </div>
+
+            <div v-if="customActors.length" class="max-h-64 overflow-y-auto space-y-1.5 pr-1">
+              <div v-for="(actor, index) in customActors" :key="index"
+                class="flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 p-1.5">
+                <img v-if="actor.avatar" :src="actor.avatar" :alt="actor.name"
+                  class="size-6 shrink-0 rounded-full object-cover ring-1 ring-white/10">
+                <div v-else class="grid size-6 shrink-0 place-items-center rounded-full bg-pink-400/10 text-[10px] font-black text-pink-400">
+                  {{ (actor.name || '?')[0].toUpperCase() }}
+                </div>
+                <input v-model="actor.name" type="text" placeholder="Tên diễn viên"
+                  class="h-7 w-28 shrink-0 rounded border border-white/10 bg-white/5 px-2 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50 sm:w-32">
+                <input v-model="actor.originalName" type="text" placeholder="Tên gốc"
+                  class="h-7 w-24 shrink-0 rounded border border-white/10 bg-white/5 px-2 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50 sm:w-28">
+                <input v-model="actor.role" type="text" placeholder="Vai diễn"
+                  class="h-7 w-20 shrink-0 rounded border border-white/10 bg-white/5 px-2 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50 sm:w-24">
+                <input v-model="actor.avatar" type="url" placeholder="Avatar URL"
+                  class="h-7 min-w-0 flex-1 rounded border border-white/10 bg-white/5 px-2 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                <button type="button"
+                  class="grid size-7 shrink-0 place-items-center rounded text-red-400 transition hover:bg-red-400/10"
+                  @click="removeActor(index)">
+                  <AppIcon name="trash" class="size-3.5" />
+                </button>
+              </div>
+            </div>
+            <div v-else class="rounded-lg border border-dashed border-white/10 p-6 text-center">
+              <p class="text-sm text-slate-500">Chưa có diễn viên nào. Bấm "Thêm diễn viên" hoặc "Import từ API" để bắt đầu.</p>
+            </div>
+          </div>
+
+          <!-- Server & tập phim -->
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <div class="mb-4 flex items-center justify-between gap-3">
+              <div class="flex items-center gap-3">
+                <div class="grid size-9 place-items-center rounded-lg bg-emerald-400/10">
+                  <AppIcon name="server" class="size-4 text-emerald-400" />
+                </div>
+                <div>
+                  <h3 class="text-base font-black text-white">Server & tập phim</h3>
+                  <p class="text-xs text-slate-400">Danh sách server phát hiển thị trên website</p>
+                </div>
+              </div>
+              <button type="button"
+                class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-emerald-500/20 px-3 text-xs font-bold text-emerald-400 transition hover:bg-emerald-500/30"
+                @click="addServer">
+                <AppIcon name="plus" class="size-3.5" />
+                Thêm server
+              </button>
+            </div>
+
+            <div v-if="customServers.length" class="space-y-3">
+              <div v-for="(server, serverIndex) in customServers" :key="serverIndex"
+                class="rounded-lg border border-white/10 bg-white/5">
+                <div class="flex items-center justify-between gap-3 p-3">
+                  <button type="button" class="flex min-w-0 flex-1 items-center gap-2 text-left"
+                    @click="toggleServer(serverIndex)">
+                    <AppIcon name="chevron-down" class="size-4 shrink-0 text-slate-400 transition"
+                      :class="collapsedServers[serverIndex] ? '-rotate-90' : ''" />
+                    <span class="truncate text-sm font-bold text-white">{{ server.name || `Server ${serverIndex + 1}` }}</span>
+                    <span class="shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-semibold text-slate-300">
+                      {{ server.episodes.length }} tập
+                    </span>
+                  </button>
                   <button type="button"
-                    class="grid size-7 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10"
-                    @click="removeEpisode(index)">
+                    class="grid size-7 shrink-0 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10"
+                    @click="removeServer(serverIndex)">
                     <AppIcon name="trash" class="size-3.5" />
                   </button>
                 </div>
-                <div class="space-y-2">
-                  <input v-model="ep.name" type="text" placeholder="Tên tập (vd: Tập 1, Full, Preview...)"
-                    class="h-9 w-full rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
-                  <input v-model="ep.linkEmbed" type="url" placeholder="Link embed (iframe)"
-                    class="h-9 w-full rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
-                  <input v-model="ep.linkM3u8" type="url" placeholder="Link HLS (.m3u8)"
-                    class="h-9 w-full rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+
+                <div v-if="!collapsedServers[serverIndex]" class="border-t border-white/10 p-3">
+                  <input v-model="server.name" type="text" placeholder="Tên server (vd: Vietsub, Thuyết minh...)"
+                    class="mb-3 h-9 w-full rounded-md border border-white/10 bg-white/5 px-3 text-sm font-bold text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+
+                  <div v-if="server.episodes.length" class="space-y-1.5">
+                    <div v-for="(ep, episodeIndex) in server.episodes" :key="episodeIndex"
+                      class="rounded-md border border-white/10 bg-white/5">
+                      <div class="flex items-center gap-2 p-2">
+                        <span class="w-7 shrink-0 text-center text-xs font-black text-slate-400">{{ episodeIndex + 1 }}</span>
+                        <input v-model="ep.name" type="text" placeholder="Tên tập"
+                          class="h-8 w-24 shrink-0 rounded-md border border-white/10 bg-white/5 px-2 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                        <select
+                          class="h-8 min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2 text-xs text-white outline-none focus:border-yellow-400/50"
+                          @change="handleSourceLinkChange(serverIndex, episodeIndex, $event)">
+                          <option value="" class="bg-slate-900 text-white">Chọn link từ API</option>
+                          <option v-for="item in availableEpisodes" :key="item.key" :value="item.key"
+                            class="bg-slate-900 text-white">
+                            {{ item.label }}
+                          </option>
+                        </select>
+                        <button type="button"
+                          class="grid h-7 w-7 shrink-0 place-items-center rounded text-slate-400 transition hover:bg-white/10 hover:text-white"
+                          :class="expandedLinks[`${serverIndex}-${episodeIndex}`] ? 'bg-yellow-400/10 text-yellow-400' : ''"
+                          :title="expandedLinks[`${serverIndex}-${episodeIndex}`] ? 'Ẩn link' : 'Sửa link'"
+                          @click="toggleLinks(`${serverIndex}-${episodeIndex}`)">
+                          <AppIcon name="circle" class="size-3" />
+                        </button>
+                        <button type="button"
+                          class="grid h-7 w-7 shrink-0 place-items-center rounded text-red-400 transition hover:bg-red-400/10"
+                          @click="removeServerEpisode(serverIndex, episodeIndex)">
+                          <AppIcon name="trash" class="size-3" />
+                        </button>
+                      </div>
+                      <div v-if="expandedLinks[`${serverIndex}-${episodeIndex}`]" class="border-t border-white/10 p-2">
+                        <div class="grid gap-2 sm:grid-cols-2">
+                          <input v-model="ep.linkEmbed" type="url" placeholder="Link embed (iframe)"
+                            class="h-8 w-full rounded-md border border-white/10 bg-white/5 px-2 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                          <input v-model="ep.linkM3u8" type="url" placeholder="Link HLS (.m3u8)"
+                            class="h-8 w-full rounded-md border border-white/10 bg-white/5 px-2 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <button type="button"
+                    class="mt-2 inline-flex h-8 items-center gap-1.5 rounded-lg border border-dashed border-white/20 px-3 text-xs font-semibold text-white transition hover:bg-white/10"
+                    @click="addServerEpisode(serverIndex)">
+                    <AppIcon name="plus" class="size-3.5" />
+                    Thêm tập
+                  </button>
                 </div>
               </div>
             </div>
             <div v-else class="rounded-lg border border-dashed border-white/10 p-6 text-center">
-              <p class="text-sm text-slate-500">Chưa có tập tuỳ chỉnh. Bấm "Thêm tập" để bắt đầu.</p>
+              <p class="text-sm text-slate-500">Chưa có server nào. Bấm "Thêm server" để bắt đầu.</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- RIGHT COLUMN: Metadata & API Sources Sidebar (5 cols) -->
+        <div class="space-y-6 lg:col-span-5">
+          <!-- Thông tin phim -->
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <div class="mb-4 flex items-center gap-3">
+              <div class="grid size-9 place-items-center rounded-lg bg-amber-400/10">
+                <AppIcon name="info" class="size-4 text-amber-400" />
+              </div>
+              <div>
+                <h2 class="text-base font-black text-white">Thông tin phim</h2>
+                <p class="text-xs text-slate-400">Thông tin chi tiết từ hệ thống</p>
+              </div>
+            </div>
+            <dl class="grid grid-cols-2 gap-x-3 gap-y-2.5 text-xs">
+              <div>
+                <dt class="text-slate-500">Nguồn</dt>
+                <dd class="truncate font-semibold text-white">{{ movie.source?.toUpperCase() }}</dd>
+              </div>
+              <div>
+                <dt class="text-slate-500">Slug</dt>
+                <dd class="truncate text-white" :title="movie.slug">{{ movie.slug }}</dd>
+              </div>
+              <div>
+                <dt class="text-slate-500">Năm phát hành</dt>
+                <dd class="text-white">{{ movie.year || '—' }}</dd>
+              </div>
+              <div>
+                <dt class="text-slate-500">Số tập</dt>
+                <dd class="text-white">{{ movie.episode || '—' }}</dd>
+              </div>
+              <div>
+                <dt class="text-slate-500">Chất lượng</dt>
+                <dd class="text-white">{{ movie.quality || '—' }}</dd>
+              </div>
+              <div>
+                <dt class="text-slate-500">Trạng thái</dt>
+                <dd :class="movie.active ? 'font-semibold text-green-400' : 'text-slate-400'">
+                  {{ movie.active ? 'Đang hiển thị' : 'Ẩn' }}
+                </dd>
+              </div>
+              <div class="col-span-2">
+                <dt class="text-slate-500">Đồng bộ gần nhất</dt>
+                <dd class="text-white">{{ new Date(movie.syncedAt).toLocaleDateString('vi-VN') }}</dd>
+              </div>
+            </dl>
+            <div v-if="movie.categories?.length" class="mt-4 border-t border-white/10 pt-3">
+              <h4 class="mb-1.5 text-[11px] font-black uppercase text-slate-400">Thể loại</h4>
+              <div class="flex flex-wrap gap-1">
+                <span v-for="cat in movie.categories" :key="cat"
+                  class="rounded-full bg-white/8 px-2.5 py-0.5 text-[11px] font-semibold text-slate-300">
+                  {{ cat }}
+                </span>
+              </div>
             </div>
           </div>
 
+          <!-- Ảnh phim -->
           <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
             <div class="mb-4 flex items-center gap-3">
               <div class="grid size-9 place-items-center rounded-lg bg-purple-400/10">
                 <AppIcon name="image" class="size-4 text-purple-400" />
               </div>
               <div>
-                <h2 class="text-base font-black text-white">Ảnh poster</h2>
-                <p class="text-xs text-slate-400">URL ảnh poster (để trống dùng từ API)</p>
+                <h2 class="text-base font-black text-white">Hình ảnh</h2>
+                <p class="text-xs text-slate-400">Poster & Thumbnail tuỳ chỉnh</p>
               </div>
             </div>
-            <input v-model="customPoster" type="url" placeholder="https://..."
-              class="h-10 w-full rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
-            <div v-if="customPoster || movie.poster" class="mt-3">
-              <img :src="customPoster || movie.poster" :alt="movie.name"
-                class="h-48 w-auto rounded-lg object-cover ring-1 ring-white/10">
-            </div>
-            <button v-if="customPoster" type="button"
-              class="mt-2 text-xs font-semibold text-red-400 transition hover:text-red-300"
-              @click="clearField('customPoster')">
-              Xoá poster tuỳ chỉnh
-            </button>
-          </div>
-
-          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
-            <div class="mb-4 flex items-center gap-3">
-              <div class="grid size-9 place-items-center rounded-lg bg-pink-400/10">
-                <AppIcon name="image" class="size-4 text-pink-400" />
+            <div class="space-y-4">
+              <div>
+                <label class="mb-1 block text-xs font-semibold text-slate-400">Poster (ảnh ngang)</label>
+                <input v-model="customPoster" type="url" placeholder="https://..."
+                  class="h-9 w-full rounded-lg border border-white/10 bg-white/5 px-3 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                <div v-if="customPoster || movie.poster" class="mt-2 flex items-center justify-between gap-2">
+                  <img :src="customPoster || movie.poster" :alt="movie.name"
+                    class="h-20 w-32 rounded-lg object-cover ring-1 ring-white/10">
+                  <button v-if="customPoster" type="button"
+                    class="text-xs font-semibold text-red-400 transition hover:text-red-300"
+                    @click="clearField('customPoster')">
+                    Xoá poster
+                  </button>
+                </div>
               </div>
               <div>
-                <h2 class="text-base font-black text-white">Ảnh thumbnail</h2>
-                <p class="text-xs text-slate-400">URL ảnh thumbnail (để trống dùng từ API)</p>
+                <label class="mb-1 block text-xs font-semibold text-slate-400">Thumbnail (ảnh dọc)</label>
+                <input v-model="customThumb" type="url" placeholder="https://..."
+                  class="h-9 w-full rounded-lg border border-white/10 bg-white/5 px-3 text-xs text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                <div v-if="customThumb || movie.thumb" class="mt-2 flex items-center justify-between gap-2">
+                  <img :src="customThumb || movie.thumb" :alt="movie.name"
+                    class="h-20 w-14 rounded-lg object-cover ring-1 ring-white/10">
+                  <button v-if="customThumb" type="button"
+                    class="text-xs font-semibold text-red-400 transition hover:text-red-300"
+                    @click="clearField('customThumb')">
+                    Xoá thumbnail
+                  </button>
+                </div>
               </div>
             </div>
-            <input v-model="customThumb" type="url" placeholder="https://..."
-              class="h-10 w-full rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
-            <div v-if="customThumb || movie.thumb" class="mt-3">
-              <img :src="customThumb || movie.thumb" :alt="movie.name"
-                class="h-32 w-auto rounded-lg object-cover ring-1 ring-white/10">
+          </div>
+
+          <!-- Nguồn API có sẵn -->
+          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+            <div class="mb-4 flex items-center justify-between gap-3">
+              <div class="flex items-center gap-3">
+                <div class="grid size-9 place-items-center rounded-lg bg-cyan-400/10">
+                  <AppIcon name="layers" class="size-4 text-cyan-400" />
+                </div>
+                <div>
+                  <h3 class="text-base font-black text-white">Nguồn API có sẵn</h3>
+                  <p class="text-xs text-slate-400">Dữ liệu tập phim từ các API</p>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="sourceData?.sources?.length" class="space-y-3">
+              <div class="mb-4 flex flex-col gap-2 rounded-lg border border-white/10 bg-white/5 p-3 sm:flex-row sm:items-center sm:justify-between">
+                <label class="text-xs font-semibold text-slate-400">Thêm vào server:</label>
+                <select v-model="selectedTargetServer"
+                  class="h-8 rounded-md border border-white/10 bg-white/5 px-2.5 text-xs text-white outline-none focus:border-yellow-400/50">
+                  <option v-for="(server, index) in customServers" :key="index" :value="index"
+                    class="bg-slate-900 text-white">
+                    {{ server.name || `Server ${index + 1}` }} ({{ server.episodes.length }} tập)
+                  </option>
+                </select>
+                <button v-if="!customServers.length" type="button"
+                  class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-white/10 px-3 text-xs font-semibold text-white transition hover:bg-white/20"
+                  @click="addServer">
+                  <AppIcon name="plus" class="size-3.5" />
+                  Tạo server
+                </button>
+              </div>
+
+              <div v-for="(source, sourceIndex) in sourceData.sources" :key="source.source"
+                class="rounded-lg border border-white/10 bg-white/5">
+                <button type="button"
+                  class="flex w-full items-center justify-between px-4 py-3 text-left transition hover:bg-white/5"
+                  @click="toggleSource(source.source)">
+                  <span class="text-sm font-black text-white">
+                    {{ source.source.toUpperCase() }} · {{ source.name }}
+                  </span>
+                  <AppIcon name="chevron-down"
+                    class="size-4 text-slate-400 transition"
+                    :class="expandedSources[source.source] ? 'rotate-180' : ''" />
+                </button>
+                <div v-if="expandedSources[source.source]" class="border-t border-white/10 p-4">
+                  <div v-for="(server, serverIndex) in source.servers" :key="serverIndex" class="mb-4 last:mb-0">
+                    <div class="mb-2 flex items-center justify-between gap-2">
+                      <h4 class="text-xs font-black uppercase text-slate-400">{{ server.name }}</h4>
+                      <button type="button"
+                        class="inline-flex h-7 items-center gap-1 rounded-lg bg-yellow-400/10 px-2 text-xs font-semibold text-yellow-400 transition hover:bg-yellow-400/20"
+                        @click="quickAddAllEpisodes(sourceIndex, serverIndex)">
+                        <AppIcon name="plus" class="size-3" />
+                        Thêm tất cả
+                      </button>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+                      <div v-for="(ep, epIndex) in server.episodes" :key="epIndex"
+                        class="group relative rounded-md border border-white/10 bg-white/5 px-2.5 py-1.5">
+                        <p class="truncate text-xs font-semibold text-white">{{ ep.name || `Tập ${epIndex + 1}` }}</p>
+                        <p v-if="ep.linkM3u8" class="truncate text-[10px] text-slate-500">{{ ep.linkM3u8 }}</p>
+                        <p v-else-if="ep.linkEmbed" class="truncate text-[10px] text-slate-500">{{ ep.linkEmbed }}</p>
+                        <button type="button"
+                          class="absolute right-1 top-1 grid size-6 place-items-center rounded bg-yellow-400/10 text-yellow-400 opacity-0 transition hover:bg-yellow-400/20 group-hover:opacity-100"
+                          :title="`Thêm ${ep.name || `Tập ${epIndex + 1}`} vào server`"
+                          @click="quickAddEpisode(sourceIndex, serverIndex, epIndex)">
+                          <AppIcon name="plus" class="size-3" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="rounded-lg border border-dashed border-white/10 p-6 text-center">
+              <p class="text-sm text-slate-500">Chưa có nguồn API nào hoặc chưa đồng bộ tập phim.</p>
             </div>
-            <button v-if="customThumb" type="button"
-              class="mt-2 text-xs font-semibold text-red-400 transition hover:text-red-300"
-              @click="clearField('customThumb')">
-              Xoá thumbnail tuỳ chỉnh
-            </button>
           </div>
         </div>
-
-        <aside class="space-y-4">
-          <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
-            <h3 class="mb-3 text-sm font-black uppercase text-slate-400">Thông tin gốc</h3>
-            <dl class="space-y-2 text-sm">
-              <div class="flex justify-between">
-                <dt class="text-slate-500">Nguồn</dt>
-                <dd class="font-semibold text-white">{{ movie.source?.toUpperCase() }}</dd>
-              </div>
-              <div class="flex justify-between">
-                <dt class="text-slate-500">Slug</dt>
-                <dd class="truncate text-white">{{ movie.slug }}</dd>
-              </div>
-              <div class="flex justify-between">
-                <dt class="text-slate-500">Năm</dt>
-                <dd class="text-white">{{ movie.year || '—' }}</dd>
-              </div>
-              <div class="flex justify-between">
-                <dt class="text-slate-500">Tập</dt>
-                <dd class="text-white">{{ movie.episode || '—' }}</dd>
-              </div>
-              <div class="flex justify-between">
-                <dt class="text-slate-500">Chất lượng</dt>
-                <dd class="text-white">{{ movie.quality || '—' }}</dd>
-              </div>
-              <div class="flex justify-between">
-                <dt class="text-slate-500">Trạng thái</dt>
-                <dd :class="movie.active ? 'text-green-400' : 'text-slate-400'">
-                  {{ movie.active ? 'Đang hiển thị' : 'Ẩn' }}
-                </dd>
-              </div>
-              <div class="flex justify-between">
-                <dt class="text-slate-500">Đồng bộ</dt>
-                <dd class="text-white">{{ new Date(movie.syncedAt).toLocaleDateString('vi-VN') }}</dd>
-              </div>
-            </dl>
-          </div>
-
-          <div v-if="movie.categories?.length" class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
-            <h3 class="mb-3 text-sm font-black uppercase text-slate-400">Thể loại</h3>
-            <div class="flex flex-wrap gap-1.5">
-              <span v-for="cat in movie.categories" :key="cat"
-                class="rounded-full bg-white/8 px-2.5 py-1 text-xs font-semibold text-slate-300">
-                {{ cat }}
-              </span>
-            </div>
-          </div>
-        </aside>
       </div>
     </div>
   </div>

app/pages/admin/phim/index.vue

@@ -18,6 +18,7 @@ const syncOpen = ref(false)
 const deleting = ref(false)
 const deleteConfirmOpen = ref(false)
 const syncSources = ref({ ophim: true, nguonc: true, kkphim: true })
+const syncResult = ref<{ total: number, created: number, updated: number, sourceStats: Record<string, { fetched: number, error?: string }> } | null>(null)
 
 let searchTimeout: ReturnType<typeof setTimeout> | undefined
 
@@ -60,12 +61,13 @@ async function handleSync() {
   if (!sources.length) return
 
   syncing.value = true
+  syncResult.value = null
   try {
-    await $fetch('/api/admin/sync', {
+    const result: any = await $fetch('/api/admin/sync', {
       method: 'POST',
       body: { sources },
     })
-    syncOpen.value = false
+    syncResult.value = result
     await refresh()
   } catch (err) {
     console.error('Sync failed:', err)
@@ -148,7 +150,7 @@ const totalPages = computed(() => data.value?.totalPages || 1)
             <tr class="border-b border-white/10 text-center text-xs font-semibold uppercase text-slate-400">
               <th class="w-12 px-4 py-3 text-center">STT</th>
               <th class="px-4 py-3 text-center">Phim</th>
-              <th class="px-4 py-3 text-center">Nguồn</th>
+              <th class="px-4 py-3 text-center">Nguồn trùng</th>
               <th class="px-4 py-3 text-center">Tập</th>
               <th class="px-4 py-3 text-center">Lượt xem</th>
               <th class="px-4 py-3 text-center">Trạng thái</th>
@@ -169,7 +171,7 @@ const totalPages = computed(() => data.value?.totalPages || 1)
               </td>
               <td class="px-4 py-3 text-center">
                 <span class="rounded-full bg-white/10 px-2.5 py-1 text-xs font-semibold text-white">
-                  {{ movie.source?.toUpperCase() }}
+                  {{ (movie.sources || []).length }} nguồn
                 </span>
               </td>
               <td class="px-4 py-3 text-center text-sm text-slate-300">
@@ -195,9 +197,11 @@ const totalPages = computed(() => data.value?.totalPages || 1)
                     class="rounded bg-purple-400/10 px-2 py-0.5 text-[10px] font-semibold text-purple-400">Poster</span>
                   <span v-if="movie.customThumb"
                     class="rounded bg-pink-400/10 px-2 py-0.5 text-[10px] font-semibold text-pink-400">Thumb</span>
-                  <span v-if="movie.customEpisodes?.length"
-                    class="rounded bg-amber-400/10 px-2 py-0.5 text-[10px] font-semibold text-amber-400">{{ movie.customEpisodes.length }} tập</span>
-                  <span v-if="!movie.customContent && !movie.customPoster && !movie.customThumb && !movie.customEpisodes?.length"
+                  <span v-if="movie.customServers?.length"
+                    class="rounded bg-emerald-400/10 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
+                    {{ movie.customServers.length }} server · {{ movie.customServers.reduce((t: number, s: any) => t + (s.episodes?.length || 0), 0) }} tập
+                  </span>
+                  <span v-if="!movie.customContent && !movie.customPoster && !movie.customThumb && !movie.customServers?.length"
                     class="text-xs text-slate-500">Mặc định</span>
                 </div>
               </td>
@@ -282,6 +286,24 @@ const totalPages = computed(() => data.value?.totalPages || 1)
               </label>
             </div>
 
+            <div v-if="syncResult" class="mt-4 rounded-lg border border-white/10 bg-white/5 p-4">
+              <p class="text-sm font-semibold text-white">Kết quả đồng bộ</p>
+              <div class="mt-2 space-y-1 text-xs text-slate-400">
+                <p>Tổng phim lấy được: <span class="font-bold text-white">{{ syncResult.total }}</span></p>
+                <p>Đã tạo: <span class="font-bold text-green-400">{{ syncResult.created }}</span></p>
+                <p>Đã cập nhật: <span class="font-bold text-yellow-400">{{ syncResult.updated }}</span></p>
+                <div v-if="syncResult.sourceStats" class="mt-2">
+                  <p class="font-semibold text-white">Theo nguồn:</p>
+                  <ul class="mt-1 space-y-0.5">
+                    <li v-for="(stats, source) in syncResult.sourceStats" :key="source">
+                      <span class="uppercase text-white">{{ source }}</span>: {{ stats.fetched }} phim
+                      <span v-if="stats.error" class="text-red-400">({{ stats.error }})</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
             <div class="mt-6 flex justify-end gap-3">
               <button type="button"
                 class="h-10 rounded-lg border border-white/10 px-4 text-sm font-semibold text-white transition hover:bg-white/10"

app/pages/index.vue

@@ -436,6 +436,22 @@ useHead({
       </div>
     </section>
 
+    <section v-else class="flex min-h-screen items-center justify-center px-4 pt-16 sm:px-6 lg:px-8">
+      <div class="text-center">
+        <div class="mx-auto mb-6 flex size-20 items-center justify-center rounded-full bg-yellow-400/10">
+          <AppIcon name="film" class="size-10 text-yellow-400" />
+        </div>
+        <h1 class="text-2xl font-black text-white sm:text-3xl">Web đang chưa cập nhật phim</h1>
+        <p class="mx-auto mt-3 max-w-md text-sm text-slate-400 sm:text-base">
+          Hiện tại chưa có bộ phim nào. Vui lòng quay lại sau để khám phá kho phim mới nhất nhé!
+        </p>
+        <NuxtLink to="/phim"
+          class="mt-6 inline-flex items-center gap-2 rounded-full bg-yellow-400 px-6 py-2.5 text-sm font-black text-slate-950 transition hover:bg-yellow-300">
+          Khám phá kho phim
+        </NuxtLink>
+      </div>
+    </section>
+
     <div class="relative z-10 mx-auto max-w-390 px-4 pb-16 pt-8 sm:px-6 lg:px-8 xl:px-10">
       <div v-if="sourceStatus.length" class="hidden">
         <span v-for="source in sourceStatus" :key="source.name"

app/pages/lich-chieu.vue

@@ -203,7 +203,7 @@ useHead({
             <NuxtLink v-for="movie in selectedDay.items" :key="`${movie.source}-${movie.slug}`"
               :to="{ path: `/phim/${movie.slug}`, query: { source: movie.source } }"
               class="schedule-card">
-              <img :src="movie.poster || movie.thumb" :alt="movie.name"
+              <img :src="movie.thumb || movie.poster" :alt="movie.name"
                 class="schedule-card-image">
               <div class="schedule-card-body">
                 <h2 class="schedule-card-title">

app/pages/phim/[slug].vue

@@ -215,7 +215,7 @@ useHead(() => ({
           <div class="shrink-0 w-40 md:w-56 lg:w-64 max-w-70 mx-auto md:mx-0 flex flex-col gap-8">
             <div
               class="relative rounded-xl overflow-hidden shadow-2xl shadow-[#0f111a]/50 ring-1 ring-white/10 bg-[#16161e] w-full aspect-2/3">
-              <img :src="movie.poster || movie.thumb" :alt="movie.name"
+              <img :src="movie.thumb || movie.poster" :alt="movie.name"
                 class="w-full h-full object-cover relative z-10">
             </div>
 

app/pages/phim/index.vue

@@ -177,7 +177,7 @@ useHead({
           :to="movieLink(movie)" class="group">
           <div
             class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-yellow-300/60">
-            <img :src="movie.poster || movie.thumb" :alt="movie.name"
+            <img :src="movie.thumb || movie.poster" :alt="movie.name"
               class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
             <div class="absolute inset-x-0 bottom-0 bg-linear-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
               <p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>

app/pages/xem/[slug].vue

@@ -565,7 +565,7 @@ useHead(() => ({
             </div>
 
             <button v-else type="button" class="absolute inset-0 text-white" @click="startPlayer">
-              <img :src="movie.thumb || movie.poster" :alt="movie.name" class="h-full w-full object-cover opacity-45">
+              <img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-45">
               <div class="absolute inset-0 bg-black/45" />
               <div class="absolute inset-0 grid place-items-center">
                 <span
@@ -612,7 +612,7 @@ useHead(() => ({
             <div class="mb-6 flex items-start gap-6 lg:gap-8">
               <div
                 class="hidden shrink-0 aspect-2/3 w-32 rounded-xl overflow-hidden shadow-2xl sm:block md:w-40 lg:w-37.5">
-                <img :src="movie.poster || movie.thumb" :alt="movie.name" class="w-full h-full object-cover">
+                <img :src="movie.thumb || movie.poster" :alt="movie.name" class="w-full h-full object-cover">
               </div>
               <div class="flex-1 flex flex-col gap-4 pt-1 w-full text-center sm:text-left">
                 <div>