"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

import { Button } from "@/components/ui/button";
import { useAuth } from "@/auth/clerk";
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { ForgejoRepositoriesTable } from "@/components/git/ForgejoRepositoriesTable";
import {
  getForgejoRepositories,
  deleteForgejoRepository,
  type ForgejoRepository,
} from "@/lib/api-forgejo";

export default function ForgejoRepositoriesPage() {
  const router = useRouter();
  const auth = useAuth();

  const [repositories, setRepositories] = useState<ForgejoRepository[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchRepositories = async () => {
      try {
        setIsLoading(true);
        const data = await getForgejoRepositories();
        setRepositories(data);
        setError(null);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to load repositories");
      } finally {
        setIsLoading(false);
      }
    };

    if (auth.isSignedIn) {
      fetchRepositories();
    }
  }, [auth.isSignedIn, auth.getToken]);

  const handleDelete = async (repository: ForgejoRepository) => {
    if (
      confirm(`Are you sure you want to delete "${repository.display_name || repository.repo}"? This action cannot be undone.`)
    ) {
      try {
        await deleteForgejoRepository(repository.id);
        setRepositories((prev) => prev.filter((r) => r.id !== repository.id));
        alert("Repository deleted successfully");
      } catch (err) {
        alert(err instanceof Error ? err.message : "Failed to delete repository");
      }
    }
  };

  return (
    <DashboardPageLayout
      signedOut={{
        message: "Sign in to manage tracked repositories.",
        forceRedirectUrl: "/git-projects/repositories",
        signUpForceRedirectUrl: "/git-projects/repositories",
      }}
      title="Tracked Repositories"
      description={`${repositories.length} repository${repositories.length === 1 ? "" : "s"} being tracked.`}
      stickyHeader
    >
      <div className="flex flex-col gap-4">
        <div className="flex items-center justify-between">
          <h2 className="text-sm font-medium text-slate-500">Repositories</h2>
          <Button
            onClick={() => router.push("/git-projects/repositories/new")}
          >
            Add Repository
          </Button>
        </div>
        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
          {error ? (
            <div className="p-8 text-center">
              <p className="text-red-600">{error}</p>
            </div>
          ) : (
            <ForgejoRepositoriesTable
              repositories={repositories}
              isLoading={isLoading}
              onDelete={handleDelete}
            />
          )}
        </div>
      </div>
    </DashboardPageLayout>
  );
}