"use client";

import Link from "next/link";
import { Lock, ArrowLeft } from "lucide-react";
import Image from "next/image";
import { useActionState } from "react";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";
import { resetPasswordAction } from "@/lib/actions/auth";

function ResetPasswordForm() {
  const searchParams = useSearchParams();
  const token = searchParams.get("token") ?? "";
  const [state, formAction, pending] = useActionState(resetPasswordAction, {});

  if (!token) {
    return (
      <div className="text-center">
        <p className="text-red-600 font-medium mb-4">Invalid or missing reset token.</p>
        <Link href="/forgot-password" className="text-navy-700 hover:underline text-sm">
          Request a new reset link
        </Link>
      </div>
    );
  }

  return (
    <form action={formAction} className="space-y-5">
      {/* Hidden token */}
      <input type="hidden" name="token" value={token} />

      {state?.error && (
        <div className="p-3 bg-red-50 border border-red-100 text-red-600 text-sm rounded-lg">
          {state.error}
        </div>
      )}

      <div>
        <label htmlFor="password" className="block text-sm font-medium text-neutral-700 mb-1.5">
          New password
        </label>
        <div className="relative">
          <Lock size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400" />
          <input
            id="password"
            name="password"
            type="password"
            required
            minLength={8}
            className="w-full pl-10 pr-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
            placeholder="At least 8 characters"
          />
        </div>
      </div>

      <div>
        <label htmlFor="confirm" className="block text-sm font-medium text-neutral-700 mb-1.5">
          Confirm new password
        </label>
        <div className="relative">
          <Lock size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400" />
          <input
            id="confirm"
            name="confirm"
            type="password"
            required
            minLength={8}
            className="w-full pl-10 pr-4 py-2.5 border border-neutral-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-transparent"
            placeholder="Repeat your new password"
          />
        </div>
      </div>

      <button
        type="submit"
        disabled={pending}
        className="w-full py-2.5 bg-navy-700 hover:bg-navy-800 text-white font-semibold rounded-xl transition-colors disabled:opacity-60"
      >
        {pending ? "Resetting…" : "Reset Password"}
      </button>

      <div className="text-center">
        <Link
          href="/login"
          className="inline-flex items-center gap-1.5 text-sm text-neutral-500 hover:text-navy-700"
        >
          <ArrowLeft size={14} /> Back to Login
        </Link>
      </div>
    </form>
  );
}

export default function ResetPasswordPage() {
  return (
    <div className="min-h-screen bg-neutral-50 flex items-center justify-center py-12 px-4">
      <div className="w-full max-w-md">
        <div className="bg-white rounded-2xl shadow-sm border border-neutral-200 p-8">
          <div className="text-center mb-8">
            <Image
              src="/images/logo-dark.png"
              alt="KC Systems"
              width={140}
              height={35}
              className="h-8 w-auto mx-auto mb-6"
            />
            <h1 className="text-2xl font-bold text-navy-800">Reset your password</h1>
            <p className="text-neutral-500 text-sm mt-1">Choose a strong new password.</p>
          </div>

          <Suspense fallback={<div className="text-center text-sm text-neutral-400">Loading…</div>}>
            <ResetPasswordForm />
          </Suspense>
        </div>
      </div>
    </div>
  );
}