"use client";

import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { apiFetch } from "@/lib/api";

export default function GoogleCallbackPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
  const [message, setMessage] = useState("");

  useEffect(() => {
    const code = searchParams.get("code");
    const error = searchParams.get("error");

    if (error) {
      setStatus("error");
      setMessage(error === "access_denied" ? "You declined Google access." : `Google returned an error: ${error}`);
      return;
    }

    if (!code) {
      setStatus("error");
      setMessage("No authorization code received from Google.");
      return;
    }

    apiFetch<{ connected: boolean; googleEmail: string }>("/api/google/exchange", {
      method: "POST",
      body: JSON.stringify({ code }),
    }).then((res) => {
      if (res.error) {
        setStatus("error");
        setMessage(res.error.message ?? "Failed to connect Google account.");
      } else {
        setStatus("success");
        setMessage(`Connected as ${res.data?.googleEmail ?? "your Google account"}.`);
        setTimeout(() => router.replace("/exports"), 2000);
      }
    });
  }, [searchParams, router]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="glass-panel rounded-2xl p-10 text-center max-w-sm w-full shadow-lg">
        {status === "loading" && (
          <>
            <div className="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin mx-auto mb-4" />
            <p className="text-sm text-muted-foreground">Connecting your Google account...</p>
          </>
        )}
        {status === "success" && (
          <>
            <div className="h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-4">
              <svg className="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <p className="text-sm font-semibold text-foreground">Google Connected!</p>
            <p className="text-xs text-muted-foreground mt-1">{message}</p>
            <p className="text-xs text-muted-foreground mt-2">Redirecting to Exports...</p>
          </>
        )}
        {status === "error" && (
          <>
            <div className="h-12 w-12 rounded-full bg-red-500/10 flex items-center justify-center mx-auto mb-4">
              <svg className="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </div>
            <p className="text-sm font-semibold text-foreground">Connection Failed</p>
            <p className="text-xs text-muted-foreground mt-1">{message}</p>
            <button
              onClick={() => router.replace("/exports")}
              className="mt-4 text-xs text-primary hover:underline"
            >
              Back to Exports
            </button>
          </>
        )}
      </div>
    </div>
  );
}