"use client";

import { useState, useEffect, useRef } from "react";
import { useConfirm } from "@/components/shared/use-confirm";
import { photoUrl } from "@/lib/media";
import ManagePageSkeleton from "@/components/shared/manage-page-skeleton";

interface Photo {
  id: number;
  url: string;
  sort_order: number;
}

interface UploadProgress {
  name: string;
  status: "pending" | "uploading" | "done" | "error";
}

export default function ManageProfilePhotosPage() {
  const fileRef = useRef<HTMLInputElement>(null);
  const [photos, setPhotos] = useState<Photo[]>([]);
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState<UploadProgress[]>([]);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const { confirm: askConfirm, dialog: confirmDialog } = useConfirm();

  useEffect(() => {
    fetch("/api/profile/photos")
      .then((r) => r.json())
      .then((data) => setPhotos(data.photos || []))
      .finally(() => setLoading(false));
  }, []);

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const files = e.target.files;
    if (!files?.length) return;
    setUploading(true);
    setMessage(null);

    const fileList = Array.from(files);
    setUploadProgress(fileList.map((f) => ({ name: f.name, status: "pending" })));

    let successCount = 0;
    let errorCount = 0;

    // Upload files in parallel with individual progress tracking
    const uploadPromises = fileList.map(async (file, idx) => {
      setUploadProgress((prev) =>
        prev.map((p, i) => (i === idx ? { ...p, status: "uploading" } : p))
      );

      try {
        const formData = new FormData();
        formData.append("photos", file);
        const res = await fetch("/api/profile/photos", { method: "POST", body: formData });
        if (!res.ok) throw new Error("Upload failed");
        const data = await res.json();
        setPhotos((prev) => [...prev, ...(data.photos || [])]);
        setUploadProgress((prev) =>
          prev.map((p, i) => (i === idx ? { ...p, status: "done" } : p))
        );
        successCount++;
      } catch {
        setUploadProgress((prev) =>
          prev.map((p, i) => (i === idx ? { ...p, status: "error" } : p))
        );
        errorCount++;
      }
    });

    await Promise.all(uploadPromises);

    if (errorCount === 0) {
      setMessage({ type: "success", text: `${successCount} photo${successCount > 1 ? "s" : ""} uploaded successfully.` });
    } else {
      setMessage({
        type: "error",
        text: `${successCount} uploaded, ${errorCount} failed. Try re-uploading failed photos.`,
      });
    }

    setUploading(false);
    setTimeout(() => setUploadProgress([]), 3000);
    if (fileRef.current) fileRef.current.value = "";
  }

  async function handleDelete(id: number) {
    if (!(await askConfirm({ title: "Delete photo", message: "Delete this photo?" }))) return;
    setMessage(null);
    try {
      const res = await fetch(`/api/profile/photos?id=${id}`, { method: "DELETE" });
      if (!res.ok) throw new Error("Delete failed");
      setPhotos((prev) => prev.filter((p) => p.id !== id));
      setMessage({ type: "success", text: "Photo deleted." });
    } catch {
      setMessage({ type: "error", text: "Failed to delete photo." });
    }
  }

  if (loading) return <ManagePageSkeleton />;

  return (
    <div className="max-w-4xl mx-auto">
      {confirmDialog}
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold text-text">Profile Photos</h1>
        <button
          onClick={() => fileRef.current?.click()}
          disabled={uploading}
          className="bg-primary hover:bg-primary-dark text-white px-5 py-2.5 rounded-lg font-semibold transition-colors disabled:opacity-50"
        >
          {uploading ? "Uploading..." : "Upload Photos"}
        </button>
        <input ref={fileRef} type="file" accept="image/*" multiple className="hidden" onChange={handleUpload} />
      </div>

      {/* Upload Progress */}
      {uploadProgress.length > 0 && (
        <div className="bg-surface rounded-lg p-4 mb-4 space-y-2">
          <p className="text-sm font-medium text-text mb-2">Upload Progress</p>
          {uploadProgress.map((item, idx) => (
            <div key={idx} className="flex items-center gap-3 text-sm">
              {item.status === "pending" && (
                <span className="w-4 h-4 rounded-full bg-surface-light shrink-0" />
              )}
              {item.status === "uploading" && (
                <span className="w-4 h-4 rounded-full border-2 border-gold border-t-transparent animate-spin shrink-0" />
              )}
              {item.status === "done" && (
                <svg className="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              )}
              {item.status === "error" && (
                <svg className="w-4 h-4 text-red-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              )}
              <span className={`truncate ${item.status === "error" ? "text-red-400" : item.status === "done" ? "text-green-400" : "text-text-muted"}`}>
                {item.name}
              </span>
            </div>
          ))}
        </div>
      )}

      {message && (
        <div className={`p-3 rounded-lg text-sm mb-4 ${message.type === "success" ? "bg-green-900/30 text-green-400" : "bg-red-900/30 text-red-400"}`}>
          {message.text}
        </div>
      )}

      {photos.length === 0 ? (
        <div className="bg-surface rounded-lg p-12 text-center">
          <p className="text-text-muted">No profile photos yet. Upload some to get started.</p>
        </div>
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {photos.map((photo) => (
            <div key={photo.id} className="relative group">
              <img src={photoUrl(photo.url)} alt="Profile" className="w-full h-40 object-cover rounded-lg" />
              <button
                onClick={() => handleDelete(photo.id)}
                className="absolute top-2 right-2 bg-red-600 text-white rounded-full w-7 h-7 text-xs opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
              >
                X
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}