<template>
  <div
    v-if="picker.state.visible"
    class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
    @click.self="picker.close()"
  >
    <div
      class="bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col"
    >
      <!-- Header -->
      <div class="flex items-center gap-2 px-5 py-3 border-b border-gray-200">
        <h3 class="font-bold text-[#3C393D]">Görsel Galerisi</h3>
        <nav class="flex items-center gap-1 text-sm text-gray-500 min-w-0">
          <template v-for="(crumb, i) in crumbs" :key="crumb.path">
            <span v-if="i > 0" class="text-gray-300">/</span>
            <button
              class="hover:text-[#3FA0C7] cursor-pointer truncate"
              :class="{ 'font-semibold text-[#3C393D]': i === crumbs.length - 1 }"
              @click="load(crumb.path)"
            >
              {{ crumb.name }}
            </button>
          </template>
        </nav>
        <span class="flex-1"></span>
        <label
          class="bg-[#3FA0C7] hover:bg-[#3590b5] text-white text-sm font-semibold rounded-lg px-4 py-1.5 cursor-pointer"
          :class="{ 'opacity-50 pointer-events-none': uploading }"
        >
          {{ uploading ? "Yükleniyor..." : "⬆ Görsel Yükle" }}
          <input
            type="file"
            accept="image/*"
            multiple
            class="hidden"
            @change="onUpload"
          />
        </label>
        <button
          class="text-gray-400 hover:text-gray-600 text-xl px-2 cursor-pointer"
          @click="picker.close()"
        >
          ✕
        </button>
      </div>

      <p v-if="error" class="px-5 py-2 text-sm text-red-600 bg-red-50">
        {{ error }}
      </p>

      <!-- Content -->
      <div class="flex-1 overflow-y-auto p-5">
        <div v-if="loading" class="text-center text-gray-400 py-10 text-sm">
          Yükleniyor...
        </div>
        <template v-else>
          <div
            class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3"
          >
            <!-- Folders -->
            <button
              v-for="f in folders"
              :key="f.path"
              class="aspect-square rounded-xl border border-gray-200 hover:border-[#3FA0C7] flex flex-col items-center justify-center gap-1 cursor-pointer bg-[#fafbfc]"
              @click="load(f.path)"
            >
              <span class="text-3xl">📁</span>
              <span class="text-xs text-gray-600 px-1 truncate w-full text-center">{{
                f.name
              }}</span>
            </button>
            <!-- Images -->
            <div
              v-for="file in files"
              :key="file.path"
              class="group relative aspect-square rounded-xl border border-gray-200 hover:border-[#3FA0C7] overflow-hidden cursor-pointer"
              :title="file.name"
              @click="picker.select(file.url)"
            >
              <img
                :src="file.thumb"
                loading="lazy"
                class="w-full h-full object-cover"
              />
              <span
                class="absolute inset-x-0 bottom-0 bg-black/60 text-white text-[10px] px-1.5 py-1 truncate"
                >{{ file.name }}</span
              >
              <button
                class="absolute top-1 right-1 hidden group-hover:flex bg-black/60 hover:bg-red-600 text-white text-xs rounded-md w-6 h-6 items-center justify-center cursor-pointer"
                title="Sil"
                @click.stop="removeFile(file)"
              >
                ✕
              </button>
            </div>
          </div>
          <p
            v-if="!folders.length && !files.length"
            class="text-center text-gray-400 py-10 text-sm"
          >
            Bu klasör boş — sağ üstten görsel yükleyebilirsiniz.
          </p>
        </template>
      </div>

      <p class="px-5 py-2 text-[11px] text-gray-400 border-t border-gray-100">
        Bir görsele tıklayınca alana eklenir. Görseller media.ayris.tech /
        {{ ROOT }} klasöründe saklanır.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useMediaPicker } from "@/composables/useMediaPicker";

type MediaFolder = { name: string; path: string };
type MediaFile = {
  name: string;
  path: string;
  url: string;
  thumb: string;
  size: number;
};

const ROOT = "mucomutfak";
const picker = useMediaPicker();

const loading = ref(false);
const uploading = ref(false);
const error = ref("");
const currentPath = ref(ROOT);
const folders = ref<MediaFolder[]>([]);
const files = ref<MediaFile[]>([]);

const crumbs = computed(() => {
  const parts = currentPath.value.split("/");
  return parts.map((name, i) => ({
    name,
    path: parts.slice(0, i + 1).join("/"),
  }));
});

function authHeaders(): Record<string, string> {
  return {
    Authorization: `Bearer ${localStorage.getItem("muco-admin-token") ?? ""}`,
  };
}

async function load(path: string) {
  loading.value = true;
  error.value = "";
  try {
    const res = await fetch(
      `/api/admin/media?path=${encodeURIComponent(path)}`,
      { headers: authHeaders() },
    );
    const body = await res.json();
    if (!res.ok) throw new Error(body.error || `HTTP ${res.status}`);
    currentPath.value = body.path;
    folders.value = body.folders;
    files.value = body.files;
  } catch (e: any) {
    error.value = e.message;
  } finally {
    loading.value = false;
  }
}

async function onUpload(e: Event) {
  const input = e.target as HTMLInputElement;
  if (!input.files?.length) return;
  uploading.value = true;
  error.value = "";
  try {
    const fd = new FormData();
    for (const f of input.files) fd.append("files", f);
    fd.append("folder", currentPath.value);
    const res = await fetch("/api/admin/media/upload", {
      method: "POST",
      headers: authHeaders(),
      body: fd,
    });
    const body = await res.json();
    if (!res.ok || body.success === false) {
      throw new Error(body.error || body.errors?.[0]?.error || "Yükleme hatası");
    }
    await load(currentPath.value);
  } catch (e: any) {
    error.value = e.message;
  } finally {
    uploading.value = false;
    input.value = "";
  }
}

async function removeFile(file: MediaFile) {
  if (!confirm(`"${file.name}" kalıcı olarak silinsin mi?`)) return;
  error.value = "";
  try {
    const res = await fetch(
      `/api/admin/media?path=${encodeURIComponent(file.path)}`,
      { method: "DELETE", headers: authHeaders() },
    );
    const body = await res.json();
    if (!res.ok) throw new Error(body.error || `HTTP ${res.status}`);
    await load(currentPath.value);
  } catch (e: any) {
    error.value = e.message;
  }
}

// Modal her açıldığında güncel listeyi çek
watch(
  () => picker.state.visible,
  (v) => {
    if (v) load(currentPath.value);
  },
);
</script>
