"use client";

import Link from "next/link";
import { Mail, ArrowLeft } from "lucide-react";
import Image from "next/image";
import { useActionState } from "react";
import { forgotPasswordAction } from "@/lib/actions/auth";

export default function ForgotPasswordPage() {
  const [state, formAction, pending] = useActionState(forgotPasswordAction, {});

  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">Forgot password?</h1>
            <p className="text-neutral-500 text-sm mt-1">
              Enter your email and we&apos;ll send you a reset link.
            </p>
          </div>

          {state?.success ? (
            <div className="text-center">
              <div className="w-14 h-14 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Mail size={24} className="text-emerald-600" />
              </div>
              <p className="text-emerald-700 font-medium mb-2">Check your email</p>
              <p className="text-neutral-500 text-sm">{state.success}</p>
              <Link
                href="/login"
                className="inline-flex items-center gap-1.5 mt-6 text-sm text-navy-700 hover:text-navy-900 font-medium"
              >
                <ArrowLeft size={14} /> Back to Login
              </Link>
            </div>
          ) : (
            <form action={formAction} className="space-y-5">
              {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="email" className="block text-sm font-medium text-neutral-700 mb-1.5">
                  Email address
                </label>
                <div className="relative">
                  <Mail
                    size={16}
                    className="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400"
                  />
                  <input
                    id="email"
                    name="email"
                    type="email"
                    required
                    autoComplete="email"
                    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="you@example.com"
                  />
                </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 ? "Sending…" : "Send Reset Link"}
              </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>
          )}
        </div>
      </div>
    </div>
  );
}