"use client";

import { useAuth } from "@/contexts/auth-context";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { FailedImportCard } from "@/components/failed-import-card";
import { Card } from "@/components/ui/card";
import { AlertCircle } from "lucide-react";
import { useGetImportReviews } from "@/api/mangamochi";

export default function ImportReviewPage() {
  const { user, isAuthenticated } = useAuth();
  const router = useRouter();

  const { data: failedImportsData, queryKey } = useGetImportReviews();

  useEffect(() => {
    if (!user) {
      return;
    }

    if (!isAuthenticated) {
      router.push("/login");
    }
  }, [isAuthenticated, router, user]);

  if (!user) {
    return null;
  }

  return (
    <main className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground">Import Review</h1>
          <p className="mt-2 text-muted-foreground">
            Review and resolve manga imports by manually matching them with
            MyAnimeList entries.
          </p>
        </div>

        {!failedImportsData?.data || failedImportsData.data.length === 0 ? (
          <Card className="p-8 text-center">
            <AlertCircle className="mx-auto h-12 w-12 text-muted-foreground" />
            <h2 className="mt-4 text-lg font-semibold text-foreground">
              No Imports to Review
            </h2>
            <p className="mt-2 text-muted-foreground">
              All your imports have been processed successfully!
            </p>
          </Card>
        ) : (
          <div className="space-y-4">
            <div className="text-sm text-muted-foreground">
              {failedImportsData.data.length} import
              {failedImportsData.data.length !== 1 ? "s" : ""} to review
            </div>
            {failedImportsData.data.map((failedImport) => (
              <FailedImportCard
                key={failedImport.id}
                failedImport={failedImport}
                queryKey={queryKey}
              />
            ))}
          </div>
        )}
      </div>
    </main>
  );
}