'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { Images, BookOpen, CalendarDays } from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';

type Gallery = {
  id: string; title: string; description?: string | null; coverUrl?: string | null;
  classroomId?: string | null;
  classroom?: { id: string; name: string; branch?: { id: string; name: string } | null } | null;
  imageCount: number; createdAt: string;
};

export default function ParentGalleryPage() {
  const [galleries, setGalleries] = useState<Gallery[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    const res = await apiFetchJson<Gallery[]>('/v1/parent/galleries');
    if (res.error) { setError(res.error); setLoading(false); return; }
    setGalleries(res.data ?? []);
    setLoading(false);
  }, []);

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

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

  return (
    <div className="space-y-6 pb-8">
      <PageHeader
        eyebrow="Galeri"
        title="Sınıf Galerileri"
        description="Çocuğunuzun sınıfına ait fotoğraf galerileri"
      />

      {error && (
        <p className="admin-callout-error">{error}</p>
      )}

      {!error && galleries.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-zinc-200 py-20 text-center dark:border-zinc-700">
          <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800">
            <Images size={24} className="text-zinc-400 dark:text-zinc-500" />
          </div>
          <p className="text-sm font-medium text-zinc-600 dark:text-zinc-400">Henüz galeri eklenmemiş</p>
          <p className="mt-1 text-xs text-zinc-400 dark:text-zinc-500">Öğretmeniniz fotoğraf eklediğinde burada görünecek</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {galleries.map((gallery) => (
            <Link key={gallery.id} href={`/parent/gallery/${gallery.id}`} className="group admin-panel overflow-hidden">
              {/* Kapak */}
              <div className="relative aspect-[4/3] bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-950/30 dark:to-brand-900/20">
                {gallery.coverUrl ? (
                  <img
                    src={gallery.coverUrl}
                    alt={gallery.title}
                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
                  />
                ) : (
                  <div className="flex h-full w-full items-center justify-center">
                    <Images size={32} className="text-brand-300 dark:text-brand-700" />
                  </div>
                )}
                {/* Resim sayısı badge */}
                <div className="absolute right-2 top-2 flex items-center gap-1 rounded-full bg-black/50 px-2.5 py-1 text-[11px] font-semibold text-white backdrop-blur-sm">
                  <Images size={10} strokeWidth={2} />
                  {gallery.imageCount}
                </div>
                {/* Hover tint */}
                <div className="absolute inset-0 bg-black/0 transition-all duration-200 group-hover:bg-black/10" />
              </div>

              {/* Bilgi */}
              <div className="p-4">
                <h3 className="truncate text-[15px] font-semibold text-zinc-900 transition-colors group-hover:text-brand-600 dark:text-white dark:group-hover:text-brand-400">
                  {gallery.title}
                </h3>
                {gallery.classroom && (
                  <p className="mt-0.5 flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400">
                    <BookOpen size={11} strokeWidth={2} />
                    {gallery.classroom.branch?.name && `${gallery.classroom.branch.name} / `}
                    {gallery.classroom.name}
                  </p>
                )}
                {gallery.description && (
                  <p className="mt-1.5 line-clamp-2 text-xs text-zinc-500 dark:text-zinc-400">{gallery.description}</p>
                )}
                <p className="mt-2 flex items-center gap-1 text-[11px] text-zinc-400 dark:text-zinc-500">
                  <CalendarDays size={11} strokeWidth={2} />
                  {new Date(gallery.createdAt).toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', year: 'numeric' })}
                </p>
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}