import { createFileRoute, redirect } from "@tanstack/react-router";
import { useState } from "react";
import { supabase } from "@/integrations/supabase/client";

type AuthorizationDetails = {
  client?: { name?: string; client_uri?: string } | null;
  redirect_url?: string;
  redirect_to?: string;
} | null;

// Local typed wrapper — supabase.auth.oauth is beta.
type OAuthAuthApi = {
  getAuthorizationDetails: (id: string) => Promise<{ data: AuthorizationDetails; error: any }>;
  approveAuthorization: (id: string) => Promise<{ data: AuthorizationDetails; error: any }>;
  denyAuthorization: (id: string) => Promise<{ data: AuthorizationDetails; error: any }>;
};
function oauthApi(): OAuthAuthApi {
  return (supabase.auth as any).oauth as OAuthAuthApi;
}

export const Route = createFileRoute("/.lovable/oauth/consent")({
  ssr: false,
  validateSearch: (s: Record<string, unknown>) => ({
    authorization_id: typeof s.authorization_id === "string" ? s.authorization_id : "",
  }),
  beforeLoad: async ({ search, location }) => {
    if (!search.authorization_id) throw new Error("Missing authorization_id");
    const { data } = await supabase.auth.getSession();
    const next = location.pathname + location.searchStr;
    if (!data.session) throw redirect({ to: "/auth", search: { next } as any });
  },
  loader: async ({ location }) => {
    const authorizationId = new URLSearchParams(location.search).get("authorization_id")!;
    const { data, error } = await oauthApi().getAuthorizationDetails(authorizationId);
    if (error) throw error;
    const immediate = data?.redirect_url ?? data?.redirect_to;
    if (immediate && !data?.client) throw redirect({ href: immediate } as any);
    return data;
  },
  component: Consent,
  errorComponent: ({ error }) => (
    <main className="min-h-screen flex items-center justify-center p-6 text-center">
      <div>
        <h1 className="text-lg font-bold mb-2">অনুমোদন লোড করা যায়নি</h1>
        <p className="text-sm text-muted-foreground">{String((error as Error)?.message ?? error)}</p>
      </div>
    </main>
  ),
});

function Consent() {
  const details = Route.useLoaderData() as AuthorizationDetails;
  const { authorization_id } = Route.useSearch();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function decide(approve: boolean) {
    setBusy(true);
    setError(null);
    const api = oauthApi();
    const { data, error } = approve
      ? await api.approveAuthorization(authorization_id)
      : await api.denyAuthorization(authorization_id);
    if (error) {
      setBusy(false);
      setError(error.message ?? "কিছু ভুল হয়েছে");
      return;
    }
    const target = data?.redirect_url ?? data?.redirect_to;
    if (!target) {
      setBusy(false);
      setError("অনুমোদন সার্ভার থেকে রিডাইরেক্ট পাওয়া যায়নি।");
      return;
    }
    window.location.href = target;
  }

  const clientName = details?.client?.name ?? "একটি অ্যাপ";

  return (
    <main
      className="min-h-screen flex flex-col text-primary-foreground"
      style={{ background: "var(--gradient-balance)" }}
    >
      <div className="px-6 pt-12 pb-6 text-center">
        <div className="inline-flex items-center justify-center h-16 w-16 rounded-2xl bg-white/15 backdrop-blur mb-4">
          <span className="text-3xl font-extrabold">bK</span>
        </div>
        <h1 className="text-2xl font-extrabold tracking-tight">অনুমতি দিন</h1>
      </div>
      <div className="flex-1 bg-background text-foreground rounded-t-3xl px-6 pt-7 pb-10">
        <h2 className="text-lg font-bold">
          {clientName} কে আপনার BondhuPay অ্যাকাউন্টে সংযুক্ত করবেন?
        </h2>
        <p className="text-sm text-muted-foreground mt-2">
          এই অ্যাপটি আপনার হয়ে BondhuPay-এর টুলস (ব্যালেন্স, লেনদেন, সেন্ড মানি ইত্যাদি) ব্যবহার করতে পারবে।
          অনুমতি যেকোনো সময় বাতিল করা যাবে।
        </p>
        {error && (
          <p role="alert" className="mt-4 text-sm text-destructive">{error}</p>
        )}
        <div className="mt-6 space-y-3">
          <button
            disabled={busy}
            onClick={() => decide(true)}
            className="w-full h-12 rounded-full font-bold text-primary-foreground disabled:opacity-50 active:scale-[0.98] transition"
            style={{ background: "var(--gradient-primary)" }}
          >
            অনুমতি দিন
          </button>
          <button
            disabled={busy}
            onClick={() => decide(false)}
            className="w-full h-12 rounded-full font-semibold border border-input bg-card text-foreground disabled:opacity-50"
          >
            বাতিল
          </button>
        </div>
      </div>
    </main>
  );
}