Email

"use client";

import * as React from "react";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

const DOMAINS = [
  "gmail.com",
  "googlemail.com",
  "yahoo.com",
  "yahoo.co.uk",
  "outlook.com",
  "hotmail.com",
  "hotmail.co.uk",
  "live.com",
  "msn.com",
  "icloud.com",
  "me.com",
  "mac.com",
  "aol.com",
  "protonmail.com",
  "proton.me",
  "mail.com",
  "zoho.com",
  "fastmail.com",
  "tutanota.com",
  "tuta.io",
];

// Damerau–Levenshtein: counts insertions, deletions, substitutions and
// transpositions of adjacent characters — matching the common email typos
// `gmial`, `gmai`, `gnail`, `gmail.con`, `gmail.co`.
function damerauLevenshtein(a: string, b: string): number {
  const m = a.length;
  const n = b.length;
  if (m === 0) return n;
  if (n === 0) return m;

  const d: number[][] = Array.from({ length: m + 1 }, () =>
    new Array(n + 1).fill(0),
  );
  for (let i = 0; i <= m; i++) d[i][0] = i;
  for (let j = 0; j <= n; j++) d[0][j] = j;

  for (let i = 1; i <= m; i++) {
    for (let j = 1; j <= n; j++) {
      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
      d[i][j] = Math.min(
        d[i - 1][j] + 1,
        d[i][j - 1] + 1,
        d[i - 1][j - 1] + cost,
      );
      if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) {
        d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + 1);
      }
    }
  }
  return d[m][n];
}

function suggestDomain(email: string): string | null {
  const at = email.lastIndexOf("@");
  if (at < 1 || at === email.length - 1) return null;

  const local = email.slice(0, at);
  const domain = email.slice(at + 1).toLowerCase();

  if (!domain.includes(".") || domain.endsWith(".")) return null;
  if (DOMAINS.includes(domain)) return null;

  let best: { domain: string; distance: number } | null = null;
  for (const candidate of DOMAINS) {
    const distance = damerauLevenshtein(domain, candidate);
    if (distance === 0 || distance > 2) continue;
    if (!best || distance < best.distance) {
      best = { domain: candidate, distance };
    }
  }

  return best ? `${local}@${best.domain}` : null;
}

export function EmailTypoDemo() {
  const id = React.useId();
  const suggestionId = `${id}-suggestion`;
  const [value, setValue] = React.useState("jane@gmial.com");

  const suggestion = React.useMemo(() => suggestDomain(value), [value]);

  return (
    <div className="grid w-full gap-2">
      <Label htmlFor={id}>Email</Label>
      <Input
        id={id}
        type="email"
        autoComplete="email"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="name@example.com"
        aria-describedby={suggestion ? suggestionId : undefined}
      />
      <p
        id={suggestionId}
        aria-live="polite"
        className="text-muted-foreground min-h-4 text-xs"
      >
        {suggestion ? (
          <>
            Did you mean{" "}
            <button
              type="button"
              onClick={() => setValue(suggestion)}
              className="text-foreground focus-visible:ring-ring/50 focus-visible:border-ring rounded underline decoration-dotted underline-offset-2 outline-none hover:decoration-solid focus-visible:ring-[3px]"
            >
              {suggestion}
            </button>
            ?
          </>
        ) : null}
      </p>
    </div>
  );
}