"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Search, AlertCircle } from "lucide-react";

export function TransRefForm() {
    const router = useRouter();
    const [value, setValue] = useState("");
    const [error, setError] = useState("");

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        const trimmed = value.trim();
        if (!trimmed) {
            setError("Please enter your transaction reference.");
            return;
        }
        setError("");
        router.push(`?transRef=${encodeURIComponent(trimmed)}`);
    };

    return (
        <form onSubmit={handleSubmit} className="p-6 md:p-8 space-y-4">
            <div className="space-y-1.5">
                <p className="text-sm font-semibold text-slate-700">
                    Transaction Reference
                </p>
                <p className="text-xs text-slate-500">
                    Enter the reference number from your payment receipt or confirmation
                    email.
                </p>
            </div>

            <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 pointer-events-none" />
                <Input
                    value={value}
                    onChange={(e) => {
                        setValue(e.target.value);
                        if (error) setError("");
                    }}
                    placeholder="e.g. refe555abc123"
                    className="h-11 pl-9 border-slate-200 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 font-mono text-sm"
                    autoFocus
                    autoComplete="off"
                    spellCheck={false}
                />
            </div>

            {error && (
                <div className="flex items-center gap-2 text-xs text-red-600">
                    <AlertCircle className="h-3.5 w-3.5 shrink-0" />
                    <span>{error}</span>
                </div>
            )}

            <Button
                type="submit"
                className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-sm shadow-blue-200 transition-all duration-150"
            >
                Verify Payment
            </Button>
        </form>
    );
}