"use client";

import { useEffect, useState } from "react";
import { useAuth } from "@/lib/auth-context";
import { useRouter } from "next/navigation";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
} from "@/components/ui/pagination";

interface UploadedFile {
  id: string;
  original_name: string;
  file_path: string;
  upload_status: string;
  created_at: string;
}

export default function RendersPage() {
  const { isAuthenticated, user } = useAuth();
  const router = useRouter();
  const [files, setFiles] = useState<UploadedFile[]>([]);
  const [loading, setLoading] = useState(true);
  const [authInitialized, setAuthInitialized] = useState(false);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const pageSize = 5;
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    const timer = setTimeout(() => setAuthInitialized(true), 100);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    if (!authInitialized) return;
    if (!isAuthenticated || !user) {
      router.push("/login?redirect=/renders");
      return;
    }
    fetchFiles(page);
    // eslint-disable-next-line
  }, [authInitialized, isAuthenticated, user, page]);

  async function fetchFiles(pageNum: number) {
    setLoading(true);
    try {
      const res = await fetch(
        `/api/renders/in?page=${pageNum}&pageSize=${pageSize}`,
        {
          headers: { "user-id": user?.id },
        }
      );
      const data = await res.json();
      setFiles(data.files || []);
      setTotalPages(data.pagination?.totalPages || 1);
    } catch {
      setFiles([]);
      setTotalPages(1);
    } finally {
      setLoading(false);
    }
  }

  async function handleDelete(id: string) {
    if (!user) return;
    const ok = confirm("Delete this file? This cannot be undone.");
    if (!ok) return;
    setDeletingId(id);
    try {
      const res = await fetch("/api/renders/in", {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
          "user-id": user.id,
        },
        body: JSON.stringify({ id }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Delete failed");
      await fetchFiles(page);
    } catch (e) {
      alert((e as any).message || "Delete failed");
    } finally {
      setDeletingId(null);
    }
  }

  if (!authInitialized || !isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        Loading...
      </div>
    );
  }

  const canPrev = page > 1;
  const canNext = page < totalPages;

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="max-w-5xl mx-auto px-4">
        <h1 className="text-4xl font-bold text-gray-900 mb-8">My Renders</h1>

        <section className="mb-12">
          <h2 className="text-2xl font-bold text-orange-600 mb-4">
            Uploaded Files
          </h2>
          {loading ? (
            <div>Loading...</div>
          ) : files.length === 0 ? (
            <div className="text-gray-500">No files uploaded yet.</div>
          ) : (
            <>
              <table className="w-full bg-white rounded-lg shadow-md">
                <thead>
                  <tr className="bg-orange-50">
                    <th className="p-3 text-left font-semibold">Filename</th>
                    <th className="p-3 text-left font-semibold">Status</th>
                    <th className="p-3 text-left font-semibold">Uploaded At</th>
                    <th className="p-3 text-left font-semibold">Download</th>
                    <th className="p-3 text-left font-semibold">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {files.map((f) => (
                    <tr key={f.id} className="border-t">
                      <td className="p-3">{f.original_name}</td>
                      <td className="p-3 capitalize">
                        <span
                          className={`px-2 py-1 rounded-full text-xs font-bold ${
                            f.upload_status === "COMPLETE"
                              ? "bg-green-100 text-green-800"
                              : "bg-gray-200 text-gray-600"
                          }`}
                        >
                          {f.upload_status}
                        </span>
                      </td>
                      <td className="p-3">
                        {new Date(f.created_at).toLocaleString()}
                      </td>
                      <td className="p-3">
                        <a
                          href={
                            f.file_path
                              ? `/uploads/${f.file_path.split("/").pop()}`
                              : "#"
                          }
                          className="underline text-blue-700"
                          target="_blank"
                          rel="noopener noreferrer"
                          download={f.original_name}
                        >
                          Download
                        </a>
                      </td>
                      <td className="p-3">
                        <button
                          className="px-3 py-1 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300"
                          disabled={deletingId === f.id}
                          onClick={() => handleDelete(f.id)}
                        >
                          {deletingId === f.id ? "Deleting..." : "Delete"}
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div className="mt-4 flex justify-center">
                <Pagination>
                  <PaginationContent>
                    <PaginationItem>
                      <PaginationPrevious
                        href="#"
                        onClick={(e) => {
                          e.preventDefault();
                          if (canPrev) setPage(page - 1);
                        }}
                        aria-disabled={!canPrev}
                        className={
                          !canPrev ? "pointer-events-none opacity-50" : ""
                        }
                      />
                    </PaginationItem>
                    {Array.from({ length: totalPages }, (_, i) => i + 1).map(
                      (p) => (
                        <PaginationItem key={p}>
                          <PaginationLink
                            href="#"
                            isActive={p === page}
                            onClick={(e) => {
                              e.preventDefault();
                              setPage(p);
                            }}
                          >
                            {p}
                          </PaginationLink>
                        </PaginationItem>
                      )
                    )}
                    <PaginationItem>
                      <PaginationNext
                        href="#"
                        onClick={(e) => {
                          e.preventDefault();
                          if (canNext) setPage(page + 1);
                        }}
                        aria-disabled={!canNext}
                        className={
                          !canNext ? "pointer-events-none opacity-50" : ""
                        }
                      />
                    </PaginationItem>
                  </PaginationContent>
                </Pagination>
              </div>
            </>
          )}
        </section>

        <section>
          <h2 className="text-2xl font-bold text-gray-600 mb-4">
            Rendered Files (outputs)
          </h2>
          <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center text-gray-400">
            Placeholder: Your rendered products will appear here in the future!
          </div>
        </section>
      </div>
    </div>
  );
}