import React, { useEffect, useRef, useState } from "react";
import { Loader2, Lock as LockIcon, MessageCircle, RefreshCw, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { api, formatApiError } from "@/lib/api";
import { toast } from "sonner";

/**
 * WhatsAppOtpScreen
 * Step-2 OTP entry after password login when the user has WhatsApp 2FA on.
 *
 * Props:
 *  - challengeToken (string): JWT from /auth/login `requires_wa_otp` envelope
 *  - email (string): user email (display only)
 *  - maskedPhone (string): pre-masked phone (e.g. "+91-XXXXXX-3210")
 *  - onSuccess (function): called with `userPayload` after successful verify
 *  - onBack (function): user pressed "Back to login" — clear challenge state
 *
 * The screen handles:
 *   • Triggering /wa-otp/send on mount (one-time)
 *   • 90-second countdown (configurable from /send response)
 *   • Resend with 30-sec cooldown
 *   • 6-digit numeric input
 *   • Verify → cookies set by backend → onSuccess()
 *   • Graceful degradation when Meta not configured (stub-mode code_preview)
 */
export default function WhatsAppOtpScreen({ challengeToken, email, maskedPhone, onSuccess, onBack }) {
    const [otpToken, setOtpToken] = useState("");
    const [code, setCode] = useState("");
    const [sending, setSending] = useState(false);
    const [verifying, setVerifying] = useState(false);
    const [expiresIn, setExpiresIn] = useState(0);
    const [resendAfter, setResendAfter] = useState(0);
    const [deliveredVia, setDeliveredVia] = useState("");
    const [stubPreview, setStubPreview] = useState("");
    const [err, setErr] = useState("");
    const sentOnceRef = useRef(false);

    // Trigger initial send exactly once
    useEffect(() => {
        if (sentOnceRef.current) return;
        sentOnceRef.current = true;
        void sendOtp();
    }, []);

    // Countdown ticker — drives both expiry + resend pills
    useEffect(() => {
        const id = setInterval(() => {
            setExpiresIn((v) => (v > 0 ? v - 1 : 0));
            setResendAfter((v) => (v > 0 ? v - 1 : 0));
        }, 1000);
        return () => clearInterval(id);
    }, []);

    const sendOtp = async () => {
        setSending(true);
        setErr("");
        setStubPreview("");
        try {
            const { data } = await api.post("/auth/wa-otp/send", { challenge_token: challengeToken });
            setOtpToken(data.otp_token || "");
            setExpiresIn(Number(data.expires_in) || 90);
            setResendAfter(Number(data.resend_after) || 30);
            setDeliveredVia(data.delivered_via || "");
            if (data.code_preview) {
                // STUB MODE only (Meta creds missing). Real production never returns this.
                setStubPreview(data.code_preview);
            }
            if (data.delivered_via === "whatsapp") {
                toast.success("OTP sent to WhatsApp");
            } else if (data.delivered_via === "stub") {
                toast.info("Stub mode — OTP shown on screen");
            } else if (data.delivered_via === "failed") {
                toast.error("WhatsApp delivery failed — try resend");
            }
        } catch (e) {
            const msg = formatApiError(e?.response?.data?.detail) || "Failed to send OTP";
            setErr(msg);
            toast.error(msg);
        } finally {
            setSending(false);
        }
    };

    const verifyOtp = async (e) => {
        e?.preventDefault?.();
        setErr("");
        const clean = (code || "").replace(/\D/g, "");
        if (clean.length !== 6) {
            setErr("Enter all 6 digits");
            return;
        }
        setVerifying(true);
        try {
            const { data } = await api.post("/auth/wa-otp/verify", { otp_token: otpToken, code: clean });
            toast.success("Verified — signing you in");
            onSuccess?.(data);
        } catch (ex) {
            const msg = formatApiError(ex?.response?.data?.detail) || "Wrong code or expired";
            setErr(msg);
            // Auto-clear input on wrong code so the user can retype
            setCode("");
        } finally {
            setVerifying(false);
        }
    };

    const fmt = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;

    return (
        <div className="space-y-5" data-testid="wa-otp-screen">
            <div className="flex items-center gap-3">
                <div className="h-10 w-10 rounded-xl bg-green-500/10 border border-green-300 flex items-center justify-center">
                    <MessageCircle className="h-5 w-5 text-green-600" />
                </div>
                <div className="leading-tight">
                    <div className="text-xs font-semibold tracking-[0.18em] uppercase text-slate-400">WhatsApp 2FA</div>
                    <div className="text-lg font-bold text-slate-900 dark:text-white">Authorization Required</div>
                </div>
            </div>

            <div className="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
                Aapke WhatsApp number{" "}
                <span className="font-mono font-semibold text-slate-800 dark:text-slate-100" data-testid="wa-otp-masked-phone">
                    {maskedPhone || "•••••"}
                </span>{" "}
                par 6-digit authorization code bheja gaya hai.
            </div>

            {stubPreview && (
                <div
                    className="text-xs text-amber-700 dark:text-amber-200 bg-amber-50 dark:bg-amber-950/40 border border-amber-300 dark:border-amber-700 rounded-md p-2.5"
                    data-testid="wa-otp-stub-preview"
                >
                    <span className="font-semibold">Stub mode — </span>
                    Meta credentials aren&apos;t configured. Use this dev OTP:{" "}
                    <span className="font-mono text-base text-amber-900 dark:text-amber-100 ml-1">{stubPreview}</span>
                </div>
            )}

            <form onSubmit={verifyOtp} className="space-y-4" noValidate>
                <div className="space-y-1.5">
                    <Label htmlFor="wa-otp-code" className="text-[11px] font-semibold uppercase tracking-wider text-slate-700 dark:text-slate-300">
                        6-Digit Code
                    </Label>
                    <Input
                        id="wa-otp-code"
                        inputMode="numeric"
                        autoComplete="one-time-code"
                        maxLength={6}
                        pattern="[0-9]*"
                        value={code}
                        onChange={(e) => {
                            const v = e.target.value.replace(/\D/g, "").slice(0, 6);
                            setCode(v);
                            if (err) setErr("");
                        }}
                        placeholder="••••••"
                        autoFocus
                        className="h-14 text-2xl tracking-[0.5em] text-center font-mono rounded-lg border bg-slate-50 dark:bg-slate-900 focus:bg-white dark:focus:bg-slate-800"
                        data-testid="wa-otp-input"
                        aria-invalid={!!err}
                    />
                </div>

                <div className="flex items-center justify-between text-[11px] text-slate-500 dark:text-slate-400">
                    <span data-testid="wa-otp-expiry">
                        {sending && expiresIn === 0 ? (
                            <span className="inline-flex items-center gap-1">
                                <Loader2 className="h-3 w-3 animate-spin" />
                                Sending OTP…
                            </span>
                        ) : expiresIn > 0 ? (
                            <>Valid for <span className="font-mono font-semibold text-slate-700 dark:text-slate-200">{fmt(expiresIn)}</span></>
                        ) : (
                            <span className="text-rose-600">OTP expired — request a new code</span>
                        )}
                    </span>
                    <button
                        type="button"
                        disabled={sending || resendAfter > 0}
                        onClick={sendOtp}
                        className="inline-flex items-center gap-1 text-blue-700 dark:text-blue-400 hover:underline disabled:opacity-50 disabled:no-underline disabled:cursor-not-allowed"
                        data-testid="wa-otp-resend"
                    >
                        {sending ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
                        {resendAfter > 0 ? `Resend in ${resendAfter}s` : "Resend OTP"}
                    </button>
                </div>

                {err && (
                    <div
                        role="alert"
                        className="text-xs font-medium text-destructive bg-destructive/10 border border-destructive/30 rounded-md px-3 py-2"
                        data-testid="wa-otp-error"
                    >
                        {err}
                    </div>
                )}

                <Button
                    type="submit"
                    disabled={verifying || code.length !== 6 || expiresIn <= 0}
                    className="w-full h-12 bg-green-700 hover:bg-green-800 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all"
                    data-testid="wa-otp-verify-button"
                >
                    {verifying ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <ShieldCheck className="h-4 w-4 mr-2" />}
                    {verifying ? "Verifying…" : "Verify & Sign In"}
                </Button>

                <button
                    type="button"
                    onClick={onBack}
                    className="block w-full text-center text-xs text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:underline pt-1"
                    data-testid="wa-otp-back"
                >
                    ← Use different account
                </button>
            </form>

            <div className="flex items-center gap-1.5 text-[10px] text-slate-400 pt-2 border-t border-slate-100 dark:border-slate-800">
                <LockIcon className="h-3 w-3" />
                <span>Single-use · {deliveredVia === "stub" ? "Dev Mode" : "Meta WhatsApp Cloud API"} · Audited</span>
            </div>
        </div>
    );
}