'use client';

import { use, useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { Building2, BookOpen, Images, Pencil, ChevronLeft, CalendarDays, X } from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import { useToast } from '@/components/school/toast-context';
import { ConfirmDialog } from '@/components/school/confirm-dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { ImageUploadZone, type UploadedImage } from '@/components/gallery/image-upload-zone';
import { GalleryImageGrid } from '@/components/gallery/gallery-image-grid';

type GalleryImage = { id: string; url: string; caption?: string | null; order: number };
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;
  images: GalleryImage[];
  imageCount: number; createdAt: string; updatedAt: string;
};

export default function AdminGalleryDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const { toast } = useToast();
  const [gallery, setGallery] = useState<Gallery | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [deleteImgId, setDeleteImgId] = useState<string | null>(null);
  const [editOpen, setEditOpen] = useState(false);
  const [editTitle, setEditTitle] = useState('');
  const [editDesc, setEditDesc] = useState('');
  const [saving, setSaving] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    const res = await apiFetchJson<Gallery>(`/v1/admin/galleries/${id}`);
    if (res.error) { setError(res.error); setLoading(false); return; }
    setGallery(res.data);
    setEditTitle(res.data?.title ?? '');
    setEditDesc(res.data?.description ?? '');
    setLoading(false);
  }, [id]);

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

  const handleUploaded = (imgs: UploadedImage[]) => {
    setGallery((prev) => {
      if (!prev) return prev;
      const newImgs = imgs.map((i, idx) => ({ ...i, order: prev.images.length + idx }));
      return {
        ...prev,
        images: [...prev.images, ...newImgs],
        imageCount: prev.imageCount + imgs.length,
        coverUrl: prev.coverUrl ?? imgs[0]?.url ?? null,
      };
    });
    toast({ title: `${imgs.length} fotoğraf yüklendi` });
  };

  const confirmDeleteImage = async () => {
    if (!deleteImgId || !gallery) return;
    const res = await apiFetchJson(`/v1/admin/galleries/${gallery.id}/images/${deleteImgId}`, { method: 'DELETE' });
    if (res.error) { toast({ title: 'Hata', description: res.error, variant: 'destructive' }); return; }
    setGallery((prev) => {
      if (!prev) return prev;
      return { ...prev, images: prev.images.filter((i) => i.id !== deleteImgId), imageCount: prev.imageCount - 1 };
    });
    setDeleteImgId(null);
    toast({ title: 'Fotoğraf silindi' });
  };

  const saveEdit = async () => {
    if (!gallery || !editTitle.trim()) return;
    setSaving(true);
    const res = await apiFetchJson<Gallery>(`/v1/admin/galleries/${gallery.id}`, {
      method: 'PATCH',
      body: JSON.stringify({ title: editTitle.trim(), description: editDesc.trim() || undefined }),
    });
    setSaving(false);
    if (res.error) { toast({ title: 'Hata', description: res.error, variant: 'destructive' }); return; }
    setGallery(res.data);
    setEditOpen(false);
    toast({ title: 'Galeri güncellendi' });
  };

  if (loading) return (
    <div className="space-y-6 pb-8">
      <PageHeader eyebrow="Galeri" title="Yükleniyor…" description="" />
      <div className="space-y-3">
        <div className="h-48 animate-pulse rounded-2xl bg-zinc-100 dark:bg-zinc-800" />
        <div className="grid grid-cols-4 gap-2">
          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
            <div key={i} className="aspect-square animate-pulse rounded-xl bg-zinc-100 dark:bg-zinc-800" />
          ))}
        </div>
      </div>
    </div>
  );

  if (error || !gallery) return (
    <div className="space-y-4 pb-8">
      <PageHeader eyebrow="Galeri" title="Hata" description="" />
      <p className="admin-callout-error">{error || 'Galeri bulunamadı'}</p>
      <Link href="/school/gallery" className="inline-flex items-center gap-1 text-sm text-zinc-500 hover:text-zinc-700">
        <ChevronLeft size={14} /> Geri dön
      </Link>
    </div>
  );

  const location = gallery.classroom
    ? { label: gallery.classroom.name, parent: gallery.classroom.branch?.name, icon: BookOpen }
    : gallery.branch
      ? { label: gallery.branch.name, parent: undefined, icon: Building2 }
      : null;

  const createdDate = new Date(gallery.createdAt).toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', year: 'numeric' });

  return (
    <div className="space-y-6 pb-8">
      <PageHeader
        eyebrow="Galeri"
        title={gallery.title}
        description={gallery.description ?? 'Fotoğrafları yönetin'}
        backHref="/school/gallery"
        actions={
          <Button type="button" variant="secondary" onClick={() => setEditOpen(true)} className="gap-1.5">
            <Pencil size={14} strokeWidth={2} />
            Düzenle
          </Button>
        }
      />

      <div className="flex flex-col gap-5 lg:flex-row">
        {/* Ana içerik */}
        <div className="min-w-0 flex-1 space-y-5">
          {/* Upload zone */}
          <div className="admin-panel p-5">
            <p className="mb-3 text-[13px] font-semibold text-zinc-700 dark:text-zinc-300">Fotoğraf Ekle</p>
            <ImageUploadZone
              galleryId={gallery.id}
              apiBase="/v1/admin"
              onUploaded={handleUploaded}
              currentCount={gallery.imageCount}
            />
          </div>

          {/* Fotoğraf ızgarası */}
          <div className="admin-panel p-5">
            <div className="mb-4 flex items-center justify-between">
              <p className="text-[13px] font-semibold text-zinc-700 dark:text-zinc-300">
                Fotoğraflar
                <span className="ml-2 rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
                  {gallery.imageCount}
                </span>
              </p>
            </div>
            <GalleryImageGrid
              images={gallery.images}
              editable
              onDelete={setDeleteImgId}
              columns={4}
            />
          </div>
        </div>

        {/* Sağ sidebar */}
        <aside className="w-full lg:w-64 lg:shrink-0">
          <div className="admin-panel divide-y divide-zinc-100 dark:divide-zinc-800">
            {location && (
              <div className="px-4 py-4">
                <p className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">Konum</p>
                {location.parent && (
                  <p className="mb-0.5 text-xs text-zinc-400 dark:text-zinc-500">{location.parent}</p>
                )}
                <p className="flex items-center gap-1.5 text-sm font-semibold text-zinc-800 dark:text-zinc-200">
                  <location.icon size={14} strokeWidth={2} className="text-brand-500" />
                  {location.label}
                </p>
              </div>
            )}
            <div className="px-4 py-4">
              <p className="mb-1 text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">Fotoğraf Sayısı</p>
              <p className="flex items-center gap-1.5 text-2xl font-bold text-zinc-900 dark:text-white">
                <Images size={18} strokeWidth={2} className="text-brand-500" />
                {gallery.imageCount}
              </p>
            </div>
            <div className="px-4 py-4">
              <p className="mb-1 text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">Oluşturulma</p>
              <p className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400">
                <CalendarDays size={13} strokeWidth={2} className="text-zinc-400" />
                {createdDate}
              </p>
            </div>
            {gallery.description && (
              <div className="px-4 py-4">
                <p className="mb-1 text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">Açıklama</p>
                <p className="text-sm text-zinc-600 dark:text-zinc-400">{gallery.description}</p>
              </div>
            )}
          </div>
        </aside>
      </div>

      {/* Düzenle dialog */}
      <Dialog open={editOpen} onOpenChange={(o) => !o && setEditOpen(false)}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Galeriyi Düzenle</DialogTitle>
          </DialogHeader>
          <div className="space-y-3">
            <div className="space-y-1">
              <Label>Galeri Adı <span className="text-red-500">*</span></Label>
              <Input value={editTitle} onChange={(e) => setEditTitle(e.target.value)} maxLength={120} />
            </div>
            <div className="space-y-1">
              <Label>Açıklama</Label>
              <Input value={editDesc} onChange={(e) => setEditDesc(e.target.value)} maxLength={500} />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setEditOpen(false)}>İptal</Button>
            <Button type="button" disabled={saving || !editTitle.trim()} onClick={saveEdit}>
              {saving ? 'Kaydediliyor…' : 'Kaydet'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ConfirmDialog
        open={!!deleteImgId}
        onOpenChange={(o) => !o && setDeleteImgId(null)}
        title="Fotoğrafı sil"
        description="Bu fotoğraf kalıcı olarak silinecektir."
        confirmLabel="Sil"
        variant="destructive"
        onConfirm={confirmDeleteImage}
      />
    </div>
  );
}