"use client";

import { useState } from "react";

type Result = { domain: string; available: boolean; suggestion?: string } | null;

// Simulated on purpose — a real check needs a registrar API and billing
// setup we don't have wired up yet. Deterministic-ish "randomness" (based on
// string length) so it doesn't feel purely random to a user testing it twice.
function simulateCheck(domain: string): Result {
  const clean = domain.trim().toLowerCase().replace(/^https?:\/\//, "");
  if (!clean) return null;
  const available = clean.length % 2 === 0;
  return {
    domain: clean.includes(".") ? clean : `${clean}.com`,
    available,
    suggestion: available ? undefined : `${clean.split(".")[0]}-ng.com`,
  };
}

export function DomainChecker() {
  const [value, setValue] = useState("");
  const [result, setResult] = useState<Result>(null);
  const [checking, setChecking] = useState(false);

  function handleCheck() {
    if (!value.trim()) return;
    setChecking(true);
    setResult(null);
    setTimeout(() => {
      setResult(simulateCheck(value));
      setChecking(false);
    }, 900);
  }

  return (
    <div className="rounded-card border border-navy/10 p-8">
      <div className="flex flex-col gap-3 sm:flex-row">
        <input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && handleCheck()}
          placeholder="yourbusiness.com"
          className="flex-1 rounded-xl border border-navy/15 p-4 text-[15px] outline-none focus:border-blue"
        />
        <button
          onClick={handleCheck}
          disabled={checking}
          className="rounded-xl bg-division-cloud px-6 py-4 text-sm font-semibold text-white disabled:opacity-60"
        >
          {checking ? "Checking…" : "Check availability"}
        </button>
      </div>

      {result && (
        <div className="mt-5 rounded-xl bg-gray-light p-5">
          {result.available ? (
            <p className="text-navy">
              <span className="font-semibold text-green">{result.domain}</span> looks available.
              We&apos;d register it under your own details — never ours.
            </p>
          ) : (
            <p className="text-navy">
              <span className="font-semibold">{result.domain}</span> looks taken. A close
              alternative:{" "}
              <span className="font-semibold text-green">{result.suggestion}</span>
            </p>
          )}
        </div>
      )}

      <p className="mt-4 text-xs text-navy/45">
        Demo only — a real check happens on the call, against live registrar data.
      </p>
    </div>
  );
}