"use client";

import { FormEvent, useMemo, useState } from "react";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
import { getRecaptchaToken } from "@/lib/recaptcha-client";
import {
  trackCheckerSubmit,
  trackCheckerSuccess,
  trackCheckerLimitHit,
  trackCheckerUpgradeClick,
} from "@/lib/tracking";
import "./whatsapp-validator.css";

type CheckResult = {
  phone: string | null;
  on_whatsapp: boolean | null;
  valid_format: boolean;
  status: "on_whatsapp" | "not_on_whatsapp" | "invalid_format" | "inconclusive";
};

type ApiSuccess = {
  success: true;
  data: {
    results: CheckResult[];
    summary: {
      total: number;
      on_whatsapp: number;
      not_on_whatsapp: number;
      invalid_format: number;
      inconclusive: number;
    };
    remaining_today: number;
    daily_limit: number;
  };
};

type ApiError = {
  success: false;
  error: string;
  remaining_today?: number;
  upgrade_url?: string;
};

const copy = {
  en: {
    badge: "Free browser tool · No signup",
    h1: "Free WhatsApp Number Checker",
    lead:
      "Check whether a phone number appears to be registered on WhatsApp before your team starts a conversation. Built for sales, support, and outreach list hygiene.",
    freeLine: "Free for light use, up to 20 numbers per day.",
    placeholder: "Paste numbers here…\n9665xxxxxxx\n+213 559 362 307\n971501234567",
    check: "Check numbers",
    checking: "Checking…",
    limitHint: "Up to 20 numbers per request · 20 numbers / day / visitor",
    results: "Results",
    onWa: "On WhatsApp",
    notOnWa: "Not on WhatsApp",
    invalid: "Invalid format",
    inconclusive: "Couldn’t verify",
    remaining: "Remaining today",
    howTitle: "How this free WhatsApp verifier works",
    how1Title: "Paste international numbers",
    how1Text: "Use country code format (E.164). We clean spaces, plus signs, and duplicates automatically.",
    how2Title: "Live WhatsApp lookup",
    how2Text: "We request the current registration status from the configured verification service.",
    how3Title: "Status with an inconclusive fallback",
    how3Text: "Results distinguish registered, not registered, invalid format, and cases the service could not verify.",
    whyTitle: "Why teams use SkyLight’s free WhatsApp number checker",
    why1: "Review registration status before importing an authorized contact list",
    why2: "Clean CSV lists before campaigns",
    why3: "Validate leads from forms and ads",
    why4: "No install, no account, no credit card",
    consentNote: "Only check numbers you are authorized to process. A valid number is not consent to message it.",
    seoTitle: "Free WhatsApp number checker for sales and support teams",
    seoText:
      "SkyLight Chat’s browser tool requests the current registration status for each valid international number. A result may be inconclusive, and teams still need a lawful basis and the recipient’s permission before outreach.",
    pricingTitle: "Need higher-volume WhatsApp verification and messaging?",
    pricingText:
      "This browser tool is capped at 20 numbers per day. For production workflows, approved messaging, AI replies, and a unified inbox, review the current SkyLight Chat plans.",
    pricingCta: "See pricing plans",
    signupCta: "Start free account",
    errEmpty: "Paste at least one phone number.",
    errGeneric: "Something went wrong. Please try again.",
    errCaptcha: "Security check failed. Please refresh the page and try again.",
    captchaNote: "Protected by reCAPTCHA",
    faqTitle: "FAQ",
    faq: [
      {
        q: "Is this WhatsApp number checker really free?",
        a: "Yes. It’s a free browser tool on skylightchat.com with a fair-use limit of 20 numbers per visitor per day.",
      },
      {
        q: "Can I use this as an API in my system?",
        a: "No. This page is a free public tool only. Automated scraping and third-party system integrations are blocked. For production verification and WhatsApp messaging, use SkyLight Chat plans.",
      },
      {
        q: "What format should numbers be in?",
        a: "International format with country code, e.g. 9665xxxxxxx or +213559362307. Local numbers without a country code may fail.",
      },
    ],
  },
  ar: {
    badge: "أداة مجانية عبر المتصفح · بدون تسجيل",
    h1: "مدقق أرقام واتساب المجاني",
    lead:
      "تحقق مما إذا كان الرقم يبدو مسجلاً على واتساب قبل بدء المحادثة. أداة لتنظيف قوائم المبيعات والدعم والتواصل.",
    freeLine: "مجاني للاستخدام الخفيف، حتى 20 رقماً يومياً.",
    placeholder: "الصق الأرقام هنا…\n9665xxxxxxx\n+213 559 362 307\n971501234567",
    check: "تحقق من الأرقام",
    checking: "جاري التحقق…",
    limitHint: "حتى 20 رقماً في الطلب · 20 رقماً / يوم / زائر",
    results: "النتائج",
    onWa: "على واتساب",
    notOnWa: "غير موجود على واتساب",
    invalid: "صيغة غير صحيحة",
    inconclusive: "تعذر التحقق",
    remaining: "المتبقي اليوم",
    howTitle: "كيف تعمل أداة التحقق المجانية",
    how1Title: "الصق الأرقام الدولية",
    how1Text: "استخدم رمز الدولة. ننظف المسافات وعلامة + والتكرارات تلقائياً.",
    how2Title: "فحص واتساب مباشر",
    how2Text: "نطلب حالة التسجيل الحالية من خدمة التحقق المضبوطة.",
    how3Title: "حالة مع خيار نتيجة غير حاسمة",
    how3Text: "تميز النتائج بين مسجل وغير مسجل وصيغة خاطئة وحالات تعذر على الخدمة التحقق منها.",
    whyTitle: "لماذا تستخدم الفرق مدقق واتساب من سكاي لايت؟",
    why1: "راجع حالة التسجيل قبل استيراد قائمة جهات اتصال مصرح بها",
    why2: "نظّف قوائم CSV قبل الإطلاق",
    why3: "تحقق من العملاء المحتملين من الإعلانات والنماذج",
    why4: "بدون تثبيت أو حساب أو بطاقة دفع",
    consentNote: "تحقق فقط من أرقام يحق لك معالجتها. صلاحية الرقم لا تعني موافقة صاحبه على مراسلته.",
    seoTitle: "مدقق أرقام واتساب مجاني لفرق العمل",
    seoText:
      "تطلب أداة سكاي لايت عبر المتصفح حالة التسجيل الحالية لكل رقم دولي صالح. قد تكون بعض النتائج غير حاسمة، وتحتاج الفرق إلى مسوغ نظامي وموافقة المستلم قبل التواصل.",
    pricingTitle: "تحتاج تحققاً بحجم أكبر ومراسلة واتساب؟",
    pricingText:
      "هذه الأداة محدودة بـ 20 رقماً يومياً. لتدفقات العمل الإنتاجية والمراسلة المعتمدة والردود الذكية والصندوق الموحد، راجع خطط سكاي لايت شات الحالية.",
    pricingCta: "عرض الأسعار",
    signupCta: "ابدأ حساباً مجانياً",
    errEmpty: "الصق رقماً واحداً على الأقل.",
    errGeneric: "حدث خطأ. حاول مرة أخرى.",
    errCaptcha: "فشل التحقق الأمني. حدّث الصفحة وحاول مرة أخرى.",
    captchaNote: "محمي بواسطة reCAPTCHA",
    faqTitle: "الأسئلة الشائعة",
    faq: [
      {
        q: "هل مدقق أرقام واتساب مجاني فعلاً؟",
        a: "نعم. أداة مجانية على skylightchat.com بحد استخدام عادل: 20 رقماً لكل زائر يومياً.",
      },
      {
        q: "هل يمكن استخدامها كـ API في أنظمتي؟",
        a: "لا. الصفحة أداة عامة للمتصفح فقط. الأتمتة والتكامل مع أنظمة خارجية محظوران. للاستخدام الإنتاجي استخدم خطط سكاي لايت شات.",
      },
      {
        q: "ما الصيغة الصحيحة للأرقام؟",
        a: "الصيغة الدولية مع رمز الدولة مثل 9665xxxxxxx أو +213559362307.",
      },
    ],
  },
} as const;

function statusLabel(
  status: CheckResult["status"],
  labels: { onWa: string; notOnWa: string; invalid: string; inconclusive: string }
) {
  switch (status) {
    case "on_whatsapp":
      return labels.onWa;
    case "not_on_whatsapp":
      return labels.notOnWa;
    case "invalid_format":
      return labels.invalid;
    default:
      return labels.inconclusive;
  }
}

function statusColor(status: CheckResult["status"]) {
  switch (status) {
    case "on_whatsapp":
      return "#4ade80";
    case "not_on_whatsapp":
      return "#f87171";
    case "invalid_format":
      return "#fbbf24";
    default:
      return "#94a3b8";
  }
}

export default function WhatsAppValidatorArea() {
  const { language } = useLanguage();
  const isAr = language === "ar";
  const t = copy[isAr ? "ar" : "en"];

  const [raw, setRaw] = useState("");
  const [honeypot, setHoneypot] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [upgradeHint, setUpgradeHint] = useState(false);
  const [results, setResults] = useState<CheckResult[]>([]);
  const [summary, setSummary] = useState<ApiSuccess["data"]["summary"] | null>(null);
  const [remaining, setRemaining] = useState<number | null>(null);
  const [dailyLimit, setDailyLimit] = useState(20);

  const parsedCount = useMemo(() => {
    const parts = raw.split(/[\s,;]+/).map((p) => p.replace(/\D/g, "")).filter((p) => p.length >= 7 && p.length <= 15);
    return new Set(parts).size;
  }, [raw]);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    setUpgradeHint(false);

    if (!raw.trim()) {
      setError(t.errEmpty);
      return;
    }

    setLoading(true);
    trackCheckerSubmit(parsedCount);
    try {
      let recaptchaToken = "";
      try {
        recaptchaToken = await getRecaptchaToken("whatsapp_validator");
      } catch {
        setError(t.errCaptcha);
        return;
      }

      const res = await fetch("/api/tools/whatsapp-validator", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          phones: raw,
          company_website: honeypot,
          recaptcha_token: recaptchaToken,
        }),
      });
      const json = (await res.json()) as ApiSuccess | ApiError;

      if (!res.ok || !("success" in json) || !json.success) {
        const err = json as ApiError;
        setError(err.error || t.errGeneric);
        const isLimit = Boolean(err.upgrade_url) || res.status === 429;
        setUpgradeHint(isLimit);
        if (isLimit) {
          trackCheckerLimitHit();
        }
        if (typeof err.remaining_today === "number") setRemaining(err.remaining_today);
        return;
      }

      setResults(json.data.results);
      setSummary(json.data.summary);
      setRemaining(json.data.remaining_today);
      setDailyLimit(json.data.daily_limit);
      
      trackCheckerSuccess(
        json.data.results.length,
        json.data.summary.on_whatsapp,
        json.data.remaining_today
      );
    } catch {
      setError(t.errGeneric);
    } finally {
      setLoading(false);
    }
  }

  return (
    <main
      className="wa-validator-page"
      dir={isAr ? "rtl" : "ltr"}
      lang={isAr ? "ar" : "en"}
      style={{ background: "#000", color: "#fff", minHeight: "100vh", padding: "130px 0 90px" }}
    >
      <div className="wa-shell">
        <div className="hero-grid">
          <div className="hero-copy hero-copy-col">
            <div className="badge">
              <span aria-hidden>✓</span>
              {t.badge}
            </div>
            <h1 className="wa-title">{t.h1}</h1>
            <p className="lead">{t.lead}</p>
            <p className="free-line">{t.freeLine}</p>
            <ul className="why-list">
              <li>{t.why1}</li>
              <li>{t.why2}</li>
              <li>{t.why3}</li>
              <li>{t.why4}</li>
            </ul>
          </div>

          <div className="tool-card hero-tool-col" id="checker">
            <form onSubmit={onSubmit}>
              <label htmlFor="phones" className="sr-only" style={{ position: "absolute", left: -9999 }}>
                Phone numbers
              </label>
              <textarea
                id="phones"
                value={raw}
                onChange={(e) => setRaw(e.target.value)}
                placeholder={t.placeholder}
                maxLength={4000}
                autoComplete="off"
                spellCheck={false}
              />
              <input
                className="hp"
                tabIndex={-1}
                autoComplete="off"
                value={honeypot}
                onChange={(e) => setHoneypot(e.target.value)}
                name="company_website"
                aria-hidden
              />
              <div className="meta-row">
                <span>
                  {parsedCount}/20
                </span>
                <span>{t.limitHint}</span>
              </div>
              {error && <div className="error">{error}</div>}
              {upgradeHint && (
                <div className="cta-row" style={{ justifyContent: "flex-start", marginBottom: 12 }}>
                  <Link
                    className="azzle-default-btn btn2"
                    href={`/${language}/pricing`}
                    onClick={() => trackCheckerUpgradeClick("limit_hint")}
                    data-text={t.pricingCta}
                  >
                    <span className="button-wraper">{t.pricingCta}</span>
                  </Link>
                </div>
              )}
              <button
                type="submit"
                className="azzle-default-btn btn2"
                disabled={loading}
                data-text={loading ? t.checking : t.check}
                style={{ width: "100%" }}
              >
                <span className="button-wraper">{loading ? t.checking : t.check}</span>
              </button>
              <p style={{ marginTop: 10, fontSize: 12, color: "#64748b", textAlign: "center" }}>
                {t.consentNote}
              </p>
              <p style={{ marginTop: 8, fontSize: 12, color: "#64748b", textAlign: "center" }}>
                {t.captchaNote}{" "}
                <a
                  href="https://policies.google.com/privacy"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ color: "#94a3b8" }}
                >
                  Privacy
                </a>
                {" · "}
                <a
                  href="https://policies.google.com/terms"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ color: "#94a3b8" }}
                >
                  Terms
                </a>
              </p>
            </form>

            {(results.length > 0 || summary) && (
              <div style={{ marginTop: 22 }}>
                <div className="results-head">
                  <strong style={{ color: "#fff" }}>{t.results}</strong>
                  {remaining !== null && (
                    <span>
                      {t.remaining}: {remaining}/{dailyLimit}
                    </span>
                  )}
                </div>
                {summary && (
                  <div className="summary-pills">
                    <span className="pill">{t.onWa}: {summary.on_whatsapp}</span>
                    <span className="pill">{t.notOnWa}: {summary.not_on_whatsapp}</span>
                    {summary.invalid_format > 0 && <span className="pill">{t.invalid}: {summary.invalid_format}</span>}
                  </div>
                )}
                <div>
                  {results.map((row) => (
                    <div className="result-row" key={`${row.phone}-${row.status}`}>
                      <span>{row.phone || "-"}</span>
                      <span style={{ color: statusColor(row.status), fontWeight: 600 }}>
                        {statusLabel(row.status, t)}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        <section className="section">
          <h2 className="wa-section-title">{t.howTitle}</h2>
          <div className="cards">
            <article className="card">
              <h3>{t.how1Title}</h3>
              <p>{t.how1Text}</p>
            </article>
            <article className="card">
              <h3>{t.how2Title}</h3>
              <p>{t.how2Text}</p>
            </article>
            <article className="card">
              <h3>{t.how3Title}</h3>
              <p>{t.how3Text}</p>
            </article>
          </div>
        </section>

        <section className="section">
          <h2 className="wa-section-title">{t.seoTitle}</h2>
          <p className="muted" style={{ maxWidth: 860 }}>
            {t.seoText}
          </p>
        </section>

        <section className="section faq">
          <h2 className="wa-section-title">{t.faqTitle}</h2>
          {t.faq.map((item) => (
            <details key={item.q}>
              <summary>{item.q}</summary>
              <p>{item.a}</p>
            </details>
          ))}
        </section>

        <section className="pricing-box" id="pricing-cta">
          <h2 className="wa-pricing-title">{t.pricingTitle}</h2>
          <p className="muted" style={{ maxWidth: 720, margin: "0 auto" }}>
            {t.pricingText}
          </p>
          <div className="cta-row">
            <Link
              className="azzle-default-btn btn2"
              href={`/${language}/pricing`}
              onClick={() => trackCheckerUpgradeClick("bottom_pricing")}
              data-text={t.pricingCta}
            >
              <span className="button-wraper">{t.pricingCta}</span>
            </Link>
            <Link
              className="azzle-default-btn btn2"
              href="https://dashboard.skylightchat.com/register"
              onClick={() => trackCheckerUpgradeClick("bottom_signup")}
              data-text={t.signupCta}
            >
              <span className="button-wraper">{t.signupCta}</span>
            </Link>
          </div>
        </section>
      </div>
    </main>
  );
}