'use client';

import { useRef, useState, useCallback } from 'react';
import { UploadCloud, X, CheckCircle2, AlertCircle } from 'lucide-react';
import { apiFetch } from '@/lib/auth';

export type UploadedImage = {
  id: string;
  url: string;
  caption?: string | null;
};

type UploadState = {
  file: File;
  preview: string;
  status: 'pending' | 'uploading' | 'done' | 'error';
  error?: string;
};

type Props = {
  galleryId: string;
  apiBase: string; // '/v1/admin' | '/v1/teacher'
  onUploaded: (images: UploadedImage[]) => void;
  maxFiles?: number;
  currentCount?: number;
};

export function ImageUploadZone({
  galleryId,
  apiBase,
  onUploaded,
  maxFiles = 50,
  currentCount = 0,
}: Props) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [dragging, setDragging] = useState(false);
  const [queue, setQueue] = useState<UploadState[]>([]);
  const [uploading, setUploading] = useState(false);

  const addFiles = useCallback(
    (files: FileList | null) => {
      if (!files) return;
      const remaining = maxFiles - currentCount;
      const accepted: UploadState[] = [];

      Array.from(files)
        .slice(0, remaining)
        .forEach((file) => {
          if (!file.type.startsWith('image/')) return;
          if (file.size > 10 * 1024 * 1024) return;
          accepted.push({
            file,
            preview: URL.createObjectURL(file),
            status: 'pending',
          });
        });

      setQueue((prev) => [...prev, ...accepted]);
    },
    [maxFiles, currentCount],
  );

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setDragging(false);
    addFiles(e.dataTransfer.files);
  };

  const removeFromQueue = (index: number) => {
    setQueue((prev) => {
      URL.revokeObjectURL(prev[index].preview);
      return prev.filter((_, i) => i !== index);
    });
  };

  const uploadAll = async () => {
    const pending = queue.filter((q) => q.status === 'pending');
    if (pending.length === 0) return;

    setUploading(true);
    const uploaded: UploadedImage[] = [];

    for (let i = 0; i < queue.length; i++) {
      if (queue[i].status !== 'pending') continue;

      setQueue((prev) =>
        prev.map((item, idx) => (idx === i ? { ...item, status: 'uploading' } : item)),
      );

      try {
        const formData = new FormData();
        formData.append('file', queue[i].file);

        const res = await apiFetch(
          `${apiBase}/galleries/${galleryId}/images`,
          { method: 'POST', body: formData },
        );

        if (!res.ok) {
          const err = await res.json().catch(() => ({ message: 'Yükleme başarısız' }));
          throw new Error(err?.message ?? 'Yükleme başarısız');
        }

        const json = await res.json();
        const img = json.data ?? json;

        uploaded.push({ id: img.id, url: img.url, caption: img.caption });
        setQueue((prev) =>
          prev.map((item, idx) => (idx === i ? { ...item, status: 'done' } : item)),
        );
      } catch (err: any) {
        setQueue((prev) =>
          prev.map((item, idx) =>
            idx === i ? { ...item, status: 'error', error: err.message } : item,
          ),
        );
      }
    }

    setUploading(false);
    if (uploaded.length > 0) {
      onUploaded(uploaded);
      // Başarılı olanları kuyruğundan kaldır
      setTimeout(() => {
        setQueue((prev) => prev.filter((q) => q.status !== 'done'));
      }, 1200);
    }
  };

  const pendingCount = queue.filter((q) => q.status === 'pending').length;

  return (
    <div className="space-y-3">
      {/* Drop zone */}
      <div
        onDragEnter={(e) => { e.preventDefault(); setDragging(true); }}
        onDragLeave={(e) => { e.preventDefault(); setDragging(false); }}
        onDragOver={(e) => e.preventDefault()}
        onDrop={handleDrop}
        onClick={() => inputRef.current?.click()}
        className={`relative flex cursor-pointer flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed p-10 transition-all duration-200 select-none ${
          dragging
            ? 'border-brand-500 bg-brand-50 dark:border-brand-400 dark:bg-brand-950/30'
            : 'border-zinc-200 bg-zinc-50/60 hover:border-brand-400 hover:bg-brand-50/50 dark:border-zinc-700 dark:bg-zinc-800/30 dark:hover:border-brand-500 dark:hover:bg-brand-950/20'
        }`}
      >
        <div className={`flex h-14 w-14 items-center justify-center rounded-2xl transition-colors ${
          dragging ? 'bg-brand-100 dark:bg-brand-900/50' : 'bg-white shadow-sm dark:bg-zinc-800'
        }`}>
          <UploadCloud
            size={26}
            strokeWidth={1.75}
            className={dragging ? 'text-brand-600 dark:text-brand-400' : 'text-zinc-400 dark:text-zinc-500'}
          />
        </div>
        <div className="text-center">
          <p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
            {dragging ? 'Bırakın!' : 'Fotoğrafları buraya sürükleyin'}
          </p>
          <p className="mt-0.5 text-xs text-zinc-400 dark:text-zinc-500">
            veya tıklayın — JPEG, PNG, WebP, GIF · max 10MB
          </p>
        </div>
        <input
          ref={inputRef}
          type="file"
          multiple
          accept="image/*"
          className="hidden"
          onChange={(e) => addFiles(e.target.files)}
          onClick={(e) => e.stopPropagation()}
        />
      </div>

      {/* Kuyruk önizlemesi */}
      {queue.length > 0 && (
        <div className="admin-panel overflow-hidden">
          <div className="flex items-center justify-between border-b border-zinc-100 px-4 py-3 dark:border-zinc-800">
            <p className="text-[13px] font-semibold text-zinc-700 dark:text-zinc-300">
              {pendingCount > 0 ? `${pendingCount} fotoğraf bekliyor` : 'Yüklendi'}
            </p>
            {pendingCount > 0 && (
              <button
                type="button"
                onClick={uploadAll}
                disabled={uploading}
                className="flex h-8 items-center gap-1.5 rounded-lg bg-brand-600 px-3.5 text-xs font-semibold text-white transition-colors hover:bg-brand-700 disabled:opacity-60"
              >
                {uploading ? 'Yükleniyor…' : `${pendingCount} Fotoğraf Yükle`}
              </button>
            )}
          </div>

          <div className="grid grid-cols-2 gap-2 p-3 sm:grid-cols-4 lg:grid-cols-6">
            {queue.map((item, i) => (
              <div key={i} className="group relative aspect-square overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800">
                <img
                  src={item.preview}
                  alt=""
                  className="h-full w-full object-cover"
                />

                {/* Status overlay */}
                {item.status === 'uploading' && (
                  <div className="absolute inset-0 flex items-center justify-center bg-black/40">
                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" />
                  </div>
                )}
                {item.status === 'done' && (
                  <div className="absolute inset-0 flex items-center justify-center bg-green-500/30">
                    <CheckCircle2 size={22} className="text-white drop-shadow" />
                  </div>
                )}
                {item.status === 'error' && (
                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 bg-red-500/40 p-1">
                    <AlertCircle size={18} className="text-white" />
                    <p className="text-center text-[9px] leading-tight text-white">
                      {item.error ?? 'Hata'}
                    </p>
                  </div>
                )}

                {/* Kaldır (sadece pending) */}
                {item.status === 'pending' && (
                  <button
                    type="button"
                    onClick={() => removeFromQueue(i)}
                    className="absolute right-1 top-1 hidden h-5 w-5 items-center justify-center rounded-full bg-black/50 text-white group-hover:flex"
                    aria-label="Kaldır"
                  >
                    <X size={10} strokeWidth={2.5} />
                  </button>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}