'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import {
  Plus, Building2, BookOpen, Images, ChevronRight, ChevronDown,
  Trash2, Search, CalendarDays, FolderOpen,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { ConfirmDialog } from '@/components/school/confirm-dialog';
import { useToast } from '@/components/school/toast-context';

type Branch = { id: string; name: string };
type Classroom = { id: string; name: string; branchId: string };
type Gallery = {
  id: string; title: string; description?: string | null; coverUrl?: string | null;
  branchId?: string | null; classroomId?: string | null;
  branch?: { id: string; name: string } | null;
  classroom?: { id: string; name: string; branch?: { id: string; name: string } | null } | null;
  imageCount: number; createdAt: string;
};
type Selection = { type: 'branch' | 'classroom'; id: string; name: string; parentName?: string };

export default function SchoolGalleryPage() {
  const { toast } = useToast();
  const [branches, setBranches] = useState<Branch[]>([]);
  const [classrooms, setClassrooms] = useState<Classroom[]>([]);
  const [galleries, setGalleries] = useState<Gallery[]>([]);
  const [loading, setLoading] = useState(true);
  const [galleriesLoading, setGalleriesLoading] = useState(false);
  const [selected, setSelected] = useState<Selection | null>(null);
  const [expandedBranches, setExpandedBranches] = useState<Set<string>>(new Set());
  const [treeSearch, setTreeSearch] = useState('');
  const [deleteId, setDeleteId] = useState<string | null>(null);

  useEffect(() => {
    (async () => {
      setLoading(true);
      const [bRes, cRes] = await Promise.all([
        apiFetchJson<Branch[]>('/v1/admin/branches?limit=100'),
        apiFetchJson<Classroom[]>('/v1/admin/classrooms?limit=500'),
      ]);
      setBranches(Array.isArray(bRes.data) ? bRes.data : []);
      setClassrooms(Array.isArray(cRes.data) ? cRes.data : []);
      setLoading(false);
    })();
  }, []);

  const loadGalleries = useCallback(async (sel: Selection) => {
    setGalleriesLoading(true);
    const q = sel.type === 'branch' ? `branchId=${sel.id}` : `classroomId=${sel.id}`;
    const res = await apiFetchJson<Gallery[]>(`/v1/admin/galleries?${q}`);
    setGalleries(Array.isArray(res.data) ? res.data : []);
    setGalleriesLoading(false);
  }, []);

  useEffect(() => {
    if (selected) loadGalleries(selected);
  }, [selected, loadGalleries]);

  const toggleBranch = (id: string) => {
    setExpandedBranches((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const deleteGallery = async () => {
    if (!deleteId || !selected) return;
    const res = await apiFetchJson(`/v1/admin/galleries/${deleteId}`, { method: 'DELETE' });
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else { toast({ title: 'Galeri silindi' }); setDeleteId(null); loadGalleries(selected); }
  };

  const filteredBranches = treeSearch
    ? branches.filter((b) => b.name.toLowerCase().includes(treeSearch.toLowerCase()))
    : branches;
  const getClassrooms = (branchId: string) =>
    classrooms.filter(
      (c) => c.branchId === branchId && (!treeSearch || c.name.toLowerCase().includes(treeSearch.toLowerCase())),
    );

  // Yeni galeri URL'i seçime göre parametreli
  const newGalleryHref = selected
    ? `/school/gallery/new?${selected.type === 'branch' ? `branchId=${selected.id}` : `classroomId=${selected.id}`}`
    : '/school/gallery/new';

  return (
    <div className="font-urbanist space-y-5 pb-8">

      {/* Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-widest text-primary dark:text-teal-400">Kurum</p>
          <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Galeri</h1>
        </div>
        <Link
          href={newGalleryHref}
          className="inline-flex h-9 items-center gap-2 rounded-full bg-primary px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-[#1c5f66] dark:bg-teal-600 dark:hover:bg-teal-500"
        >
          <Plus className="h-4 w-4" strokeWidth={2.5} />
          Yeni Galeri
        </Link>
      </div>

      <div className="flex gap-5">

        {/* Sol panel — Şube/Sınıf ağacı */}
        <aside className="w-64 shrink-0">
          <div className="overflow-hidden rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40">
            <div className="border-b border-zinc-100 px-4 py-3 dark:border-zinc-800">
              <p className="text-[11px] font-semibold uppercase tracking-widest text-zinc-400 dark:text-zinc-500">
                Şube / Sınıf
              </p>
              <div className="relative mt-2.5">
                <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-zinc-400" />
                <input
                  value={treeSearch}
                  onChange={(e) => setTreeSearch(e.target.value)}
                  placeholder="Ara…"
                  className="h-8 w-full rounded-lg border border-zinc-200 bg-zinc-50 pl-8 pr-3 text-xs text-zinc-700 placeholder-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-1 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
                />
              </div>
            </div>

            <div className="max-h-[calc(100vh-260px)] overflow-y-auto py-1">
              {loading ? (
                <div className="space-y-1.5 p-3">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="h-9 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" />
                  ))}
                </div>
              ) : filteredBranches.length === 0 ? (
                <p className="px-4 py-8 text-center text-xs text-zinc-400">Şube bulunamadı</p>
              ) : (
                filteredBranches.map((branch) => {
                  const bClassrooms = getClassrooms(branch.id);
                  const isExpanded = expandedBranches.has(branch.id);
                  const isBranchSelected = selected?.type === 'branch' && selected.id === branch.id;

                  return (
                    <div key={branch.id}>
                      <div className="flex items-center">
                        <button
                          type="button"
                          onClick={() => setSelected({ type: 'branch', id: branch.id, name: branch.name })}
                          className={`flex flex-1 items-center gap-2 px-3 py-2.5 text-left transition-colors ${
                            isBranchSelected
                              ? 'border-l-2 border-primary bg-teal-50/60 text-primary dark:border-teal-400 dark:bg-teal-950/30 dark:text-teal-300'
                              : 'border-l-2 border-transparent text-zinc-700 hover:bg-zinc-50/80 dark:text-zinc-300 dark:hover:bg-zinc-800/60'
                          }`}
                        >
                          <Building2 className={`h-3.5 w-3.5 shrink-0 ${isBranchSelected ? 'text-primary dark:text-teal-400' : 'text-zinc-400'}`} />
                          <span className="flex-1 truncate text-[12.5px] font-medium">{branch.name}</span>
                          <span className="shrink-0 rounded-full bg-zinc-100 px-1.5 py-0.5 text-[9px] font-semibold text-zinc-400 dark:bg-zinc-800 dark:text-zinc-500">
                            {bClassrooms.length}
                          </span>
                        </button>
                        <button
                          type="button"
                          onClick={() => toggleBranch(branch.id)}
                          className="px-2 py-2.5 text-zinc-400 transition hover:text-zinc-600 dark:hover:text-zinc-300"
                        >
                          {isExpanded
                            ? <ChevronDown className="h-3.5 w-3.5" />
                            : <ChevronRight className="h-3.5 w-3.5" />}
                        </button>
                      </div>

                      {isExpanded && bClassrooms.map((cls) => {
                        const isClsSelected = selected?.type === 'classroom' && selected.id === cls.id;
                        return (
                          <button
                            key={cls.id}
                            type="button"
                            onClick={() => setSelected({ type: 'classroom', id: cls.id, name: cls.name, parentName: branch.name })}
                            className={`flex w-full items-center gap-2 py-2 pl-8 pr-3 text-left transition-colors ${
                              isClsSelected
                                ? 'border-l-2 border-primary bg-teal-50/60 text-primary dark:border-teal-400 dark:bg-teal-950/30 dark:text-teal-300'
                                : 'border-l-2 border-transparent text-zinc-500 hover:bg-zinc-50/80 dark:text-zinc-400 dark:hover:bg-zinc-800/60'
                            }`}
                          >
                            <BookOpen className={`h-3 w-3 shrink-0 ${isClsSelected ? 'text-primary dark:text-teal-400' : 'text-zinc-400'}`} />
                            <span className="truncate text-[12px]">{cls.name}</span>
                          </button>
                        );
                      })}
                    </div>
                  );
                })
              )}
            </div>
          </div>
        </aside>

        {/* Sağ panel — Galeriler */}
        <main className="min-w-0 flex-1">
          {!selected ? (
            <div className="flex h-80 flex-col items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 text-center dark:border-zinc-700">
              <FolderOpen className="mb-3 h-10 w-10 text-zinc-200 dark:text-zinc-700" strokeWidth={1.5} />
              <p className="font-semibold text-zinc-500 dark:text-zinc-400">Soldaki listeden şube veya sınıf seçin</p>
              <p className="mt-1 text-sm text-zinc-400 dark:text-zinc-500">Seçilen konumdaki galeriler görünecek</p>
            </div>
          ) : (
            <div className="space-y-4">
              {/* Alan başlığı */}
              <div className="flex items-center justify-between">
                <div>
                  {selected.parentName && (
                    <p className="text-[11px] font-medium text-zinc-400 dark:text-zinc-500">{selected.parentName}</p>
                  )}
                  <h2 className="flex items-center gap-2 text-base font-bold text-zinc-800 dark:text-white">
                    {selected.type === 'branch'
                      ? <Building2 className="h-4 w-4 text-primary dark:text-teal-400" />
                      : <BookOpen className="h-4 w-4 text-primary dark:text-teal-400" />}
                    {selected.name}
                  </h2>
                </div>
                <Link
                  href={newGalleryHref}
                  className="inline-flex h-8 items-center gap-1.5 rounded-full bg-primary px-4 text-xs font-semibold text-white shadow-sm transition hover:bg-[#1c5f66] dark:bg-teal-600 dark:hover:bg-teal-500"
                >
                  <Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
                  Galeri Oluştur
                </Link>
              </div>

              {/* Galeri grid */}
              {galleriesLoading ? (
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="h-56 animate-pulse rounded-xl bg-zinc-100 dark:bg-zinc-800" />
                  ))}
                </div>
              ) : galleries.length === 0 ? (
                <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 py-16 text-center dark:border-zinc-700">
                  <Images className="mb-3 h-9 w-9 text-zinc-200 dark:text-zinc-700" strokeWidth={1.5} />
                  <p className="font-semibold text-zinc-500 dark:text-zinc-400">Henüz galeri yok</p>
                  <p className="mt-1 text-sm text-zinc-400 dark:text-zinc-500">İlk galeriyi oluşturun</p>
                  <Link
                    href={newGalleryHref}
                    className="mt-4 inline-flex h-8 items-center gap-1.5 rounded-full bg-primary px-4 text-xs font-semibold text-white transition hover:bg-[#1c5f66] dark:bg-teal-600 dark:hover:bg-teal-500"
                  >
                    <Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
                    Galeri Oluştur
                  </Link>
                </div>
              ) : (
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                  {galleries.map((g) => (
                    <GalleryCard key={g.id} gallery={g} onDelete={() => setDeleteId(g.id)} baseHref="/school/gallery" />
                  ))}
                </div>
              )}
            </div>
          )}
        </main>
      </div>

      <ConfirmDialog
        open={!!deleteId}
        onOpenChange={(o) => !o && setDeleteId(null)}
        title="Galeriyi sil"
        description="Bu galeri ve içindeki tüm fotoğraflar kalıcı olarak silinecektir."
        confirmLabel="Sil"
        variant="destructive"
        onConfirm={deleteGallery}
      />
    </div>
  );
}

function GalleryCard({ gallery, onDelete, baseHref }: { gallery: Gallery; onDelete: () => void; baseHref: string }) {
  const date = new Date(gallery.createdAt).toLocaleDateString('tr-TR', {
    day: 'numeric', month: 'long', year: 'numeric',
  });

  return (
    <Link
      href={`${baseHref}/${gallery.id}`}
      className="group relative flex flex-col overflow-hidden rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm transition-all duration-200 hover:shadow-md dark:border-zinc-800/90 dark:bg-zinc-900/40"
    >
      {/* Kapak */}
      <div className="relative aspect-[4/3] overflow-hidden bg-zinc-100 dark:bg-zinc-800">
        {gallery.coverUrl ? (
          <img
            src={gallery.coverUrl}
            alt={gallery.title}
            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-teal-50 to-teal-100 dark:from-teal-950/30 dark:to-teal-900/20">
            <Images className="h-10 w-10 text-teal-300 dark:text-teal-700" strokeWidth={1.5} />
          </div>
        )}

        {/* Fotoğraf sayısı */}
        <span className="absolute right-2.5 top-2.5 flex items-center gap-1 rounded-full bg-black/50 px-2 py-0.5 text-[10px] font-semibold text-white backdrop-blur-sm">
          <Images className="h-2.5 w-2.5" />
          {gallery.imageCount}
        </span>

        {/* Sil butonu */}
        <div className="absolute inset-0 flex items-end justify-end bg-gradient-to-t from-black/40 to-transparent p-2.5 opacity-0 transition-opacity group-hover:opacity-100">
          <button
            type="button"
            onClick={(e) => { e.preventDefault(); onDelete(); }}
            className="flex h-7 w-7 items-center justify-center rounded-lg bg-red-500/90 text-white backdrop-blur-sm transition hover:bg-red-500"
          >
            <Trash2 className="h-3.5 w-3.5" />
          </button>
        </div>
      </div>

      {/* Kart içeriği */}
      <div className="flex flex-1 flex-col gap-1 p-4">
        <h3 className="truncate text-sm font-bold text-zinc-900 dark:text-white">{gallery.title}</h3>
        {gallery.description && (
          <p className="line-clamp-2 text-xs text-zinc-500 dark:text-zinc-400">{gallery.description}</p>
        )}
        <p className="mt-auto flex items-center gap-1 pt-2 text-[11px] text-zinc-400 dark:text-zinc-500">
          <CalendarDays className="h-3 w-3" />
          {date}
        </p>
      </div>
    </Link>
  );
}