"use client";

import { useQuery } from "@tanstack/react-query";
import { AlertTriangle, ArrowLeft, Loader2, ShieldAlert } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/api";
import { Link, useParams } from "@/lib/router";
import { resolveErrorMessage } from "@/lib/utils";

export default function ResetPasswordConfirm() {
  const { token } = useParams<{ token: string }>();
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["legacy-reset-guidance", token],
    queryFn: () => api.getLegacyResetTokenMessage(token || ""),
    retry: false,
  });

  const message = isError
    ? resolveErrorMessage(error, "این مسیر دیگر برای بازیابی رمز عبور فعال نیست.")
    : data?.message ||
      "لینک بازیابی ایمیلی غیرفعال شده است. برای ادامه از بازیابی با موبایل یا ورود با گوگل استفاده کنید.";

  return (
    <div className="min-h-screen bg-background px-4 py-10" dir="rtl">
      <div className="mx-auto max-w-2xl">
        <Card className="border-border/70 bg-background/90 shadow-xl">
          <CardHeader className="text-right">
            <div className="mb-4 inline-flex rounded-2xl border border-amber-400/30 bg-amber-500/10 p-3 text-amber-700 dark:text-amber-100">
              <ShieldAlert className="h-5 w-5" />
            </div>
            <CardTitle>لینک بازیابی قدیمی غیرفعال شده است</CardTitle>
            <CardDescription className="leading-7">
              مسیرهای مبتنی بر ایمیل دیگر برای بازیابی حساب استفاده نمی‌شوند.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-5 text-right">
            <div className="rounded-[1.5rem] border border-border/70 bg-muted/25 p-4 text-sm leading-7 text-muted-foreground">
              {isLoading ? (
                <span className="flex items-center justify-end gap-2">
                  <Loader2 className="h-4 w-4 animate-spin" />
                  در حال دریافت راهنمای بازیابی...
                </span>
              ) : (
                message
              )}
            </div>

            <div className="rounded-[1.5rem] border border-amber-400/30 bg-amber-500/10 p-4 text-sm leading-7 text-amber-900 dark:text-amber-100">
              <div className="flex items-start justify-between gap-3">
                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0" />
                <div>
                  <p className="font-semibold">راه جایگزین</p>
                  <p className="mt-2">
                    از صفحه بازیابی با موبایل استفاده کنید. اگر موبایل ثبت‌شده را هم در دسترس ندارید، ورود با گوگل و همان ایمیل قبلی بهترین مسیر بازیابی است.
                  </p>
                </div>
              </div>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <Button asChild className="h-12 rounded-2xl">
                <Link to="/reset-password">بازیابی با موبایل</Link>
              </Button>
              <Button asChild variant="outline" className="h-12 rounded-2xl">
                <Link to="/auth">
                  <ArrowLeft className="ml-2 h-4 w-4" />
                  بازگشت به ورود
                </Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}