"use client";

import { FormEvent, useState } from "react";
import Link from "next/link";
import { StaticUiLocalizer } from "@/components/static-ui-localizer";
import { useI18n } from "@/components/i18n-provider";
import type { DomainMailDiagnosticResult } from "@/lib/domain-mail-diagnostics";
import { getLocaleOption, type SupportedLocale } from "@/lib/i18n-config";
import { translateStaticUiText } from "@/lib/i18n-dictionaries";
import { getLocalizedPublicPath } from "@/lib/i18n-urls";

type DomainMailCheckApiResponse = {
  message?: string;
  ok?: boolean;
  result?: DomainMailDiagnosticResult;
};

function statusLabel(status: DomainMailDiagnosticResult["records"][number]["status"]) {
  if (status === "pass") return "정상";
  if (status === "warning") return "확인 필요";
  return "확인 불가";
}

function statusClass(status: DomainMailDiagnosticResult["records"][number]["status"]) {
  if (status === "pass") return "bg-[#edf9f1] text-[#278a50]";
  if (status === "warning") return "bg-[#fff7e8] text-[#a96d13]";
  return "bg-[#fff1f1] text-[#c84d4d]";
}

function formatCheckedAt(value: string, locale: SupportedLocale) {
  return new Intl.DateTimeFormat(getLocaleOption(locale).htmlLang, {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  }).format(new Date(value));
}

export function DomainMailChecker({
  initialDomain,
  initialResult,
}: {
  initialDomain: string;
  initialResult: DomainMailDiagnosticResult | null;
}) {
  const { locale } = useI18n();
  const ui = (source: string) => translateStaticUiText(locale, source);
  const [domain, setDomain] = useState(initialResult?.domain ?? initialDomain);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<DomainMailDiagnosticResult | null>(initialResult);
  const [copied, setCopied] = useState(false);

  async function runCheck(value: string) {
    setLoading(true);
    setError("");
    setCopied(false);

    try {
      const response = await fetch(`/api/tools/domain-mail-check?domain=${encodeURIComponent(value)}`, {
        cache: "no-store",
      });
      const payload = await response.json().catch(() => null) as DomainMailCheckApiResponse | null;

      if (!response.ok || !payload?.ok || !payload.result) {
        throw new Error(locale === "ko" && payload?.message ? payload.message : ui("도메인 메일 진단에 실패했습니다."));
      }

      setResult(payload.result);
      setDomain(payload.result.domain);
      window.history.replaceState(null, "", `${getLocalizedPublicPath("/domain-mail-check", locale)}?domain=${encodeURIComponent(payload.result.domain)}`);
    } catch (checkError) {
      setResult(null);
      setError(checkError instanceof Error ? checkError.message : ui("도메인 메일 진단에 실패했습니다."));
    } finally {
      setLoading(false);
    }
  }

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    void runCheck(domain);
  }

  async function copyShareUrl() {
    if (!result) return;

    await navigator.clipboard.writeText(`${window.location.origin}${getLocalizedPublicPath("/domain-mail-check", locale)}?domain=${encodeURIComponent(result.domain)}`);
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1800);
  }

  return (
    <StaticUiLocalizer>
    <div className="mx-auto w-full max-w-[1420px] px-4 pb-20 sm:px-8 sm:pb-24 xl:px-10">
      <form onSubmit={submit} className="border-y border-[#dfe8f6] py-4 sm:py-5">
        <div className="flex flex-col gap-3 sm:flex-row">
          <label className="min-w-0 flex-1">
            <span className="sr-only">진단할 도메인</span>
            <input
              value={domain}
              onChange={(event) => setDomain(event.target.value)}
              placeholder="도메인을 입력하세요. 예: officialsite.kr"
              className="h-12 w-full rounded-[12px] border border-[#d6e2f4] bg-white px-4 text-[15px] text-[#16233c] outline-none transition-colors placeholder:text-[#96a4b8] focus:border-[#8eb5ff]"
            />
          </label>
          <button
            type="submit"
            disabled={loading}
            className="om-btn-primary h-12 shrink-0 rounded-[12px] px-6 text-[14px] shadow-none disabled:cursor-not-allowed disabled:opacity-60"
          >
            {loading ? "DNS 확인 중..." : "무료로 진단하기"}
          </button>
        </div>
        {error ? <p className="mt-3 text-[13px] text-[#c84d4d]">{error}</p> : null}
      </form>

      {result ? (
        <section aria-live="polite">
          <div className="flex flex-col justify-between gap-5 border-b border-[#edf1f6] py-7 sm:flex-row sm:items-end">
            <div>
              <p className="text-[12px] font-semibold text-[#2f6df6]">DOMAIN MAIL REPORT</p>
              <h2 className="mt-2 break-all text-[26px] font-semibold tracking-[-0.055em] text-[#16233c] sm:text-[34px]">{result.domain}</h2>
              <p className="mt-2 text-[13px] leading-6 text-[#687a96]">{result.summary}</p>
              <p className="mt-1 text-[11px] text-[#92a0b3]">최근 확인 {formatCheckedAt(result.checkedAt, locale)}</p>
            </div>
            <div className="flex items-end gap-4">
              <div className="text-right">
                <p className="text-[11px] font-semibold text-[#8190a6]">오피셜메일 연결 준비도</p>
                <p className={`mt-1 text-[36px] font-semibold tracking-[-0.06em] ${result.score === 100 ? "text-[#278a50]" : "text-[#2f6df6]"}`}>
                  {result.score}<span className="ml-0.5 text-[16px] text-[#8190a6]">/100</span>
                </p>
              </div>
              <button type="button" onClick={copyShareUrl} className="om-btn-secondary h-10 rounded-[10px] px-4 text-[12px] shadow-none">
                {copied ? "주소 복사됨" : "결과 공유"}
              </button>
            </div>
          </div>

          <div className="divide-y divide-[#edf1f6]">
            {result.records.map((record) => (
              <article key={record.key} className="grid gap-4 py-5 sm:grid-cols-[110px_minmax(0,1fr)_auto] sm:items-start">
                <div className="flex items-center gap-2">
                  <span className="text-[15px] font-semibold text-[#253754]">{record.label}</span>
                  <span className={`rounded-full px-2 py-1 text-[10px] font-semibold ${statusClass(record.status)}`}>
                    {statusLabel(record.status)}
                  </span>
                </div>
                <div className="min-w-0">
                  <p className="text-[13px] leading-6 text-[#526784]">{record.message}</p>
                  <p className="mt-2 break-all font-mono text-[11px] leading-5 text-[#7b8ca5]">{record.expectedValue}</p>
                  {record.currentValues.length > 0 ? (
                    <div className="mt-2 space-y-1">
                      {record.currentValues.map((value) => (
                        <p key={value} className="break-all font-mono text-[11px] leading-5 text-[#30425f]">{value}</p>
                      ))}
                    </div>
                  ) : null}
                </div>
                <p className="text-[11px] text-[#8a98ab]">호스트 {record.host}</p>
              </article>
            ))}
          </div>

          <div className="flex flex-col justify-between gap-5 border-t border-[#dfe8f6] py-7 sm:flex-row sm:items-center">
            <div>
              <p className="text-[16px] font-semibold tracking-[-0.035em] text-[#16233c]">설정값은 오피셜메일에서 도메인별로 확인할 수 있습니다.</p>
              <p className="mt-1.5 text-[13px] leading-6 text-[#70819d]">대표 메일 1개는 무료로 시작하고, 연결 후 실제 수신·발신 테스트까지 진행하세요.</p>
            </div>
            <div className="flex shrink-0 gap-2">
              <Link href={getLocalizedPublicPath("/guide", locale)} className="om-btn-secondary h-10 rounded-[10px] px-4 text-[13px] shadow-none">설정 가이드</Link>
              <Link href="/login" className="om-btn-primary h-10 rounded-[10px] px-4 text-[13px] shadow-none">오피셜메일 시작하기</Link>
            </div>
          </div>
        </section>
      ) : (
        <div className="grid gap-8 border-b border-[#edf1f6] py-10 sm:grid-cols-2 lg:grid-cols-4">
          {[
            ["MX", "메일을 받을 서버가 오피셜메일로 연결되어 있는지 확인합니다."],
            ["SPF", "Gmail 등 외부 수신처가 발송 서버를 인증할 수 있는지 확인합니다."],
            ["DKIM", "오피셜메일의 dkim 셀렉터를 확인합니다. 기존 서비스는 셀렉터가 달라 자동 판별되지 않을 수 있습니다."],
            ["DMARC", "인증 실패 메일을 처리할 도메인 정책이 있는지 확인합니다."],
          ].map(([label, description]) => (
            <div key={label} className="min-w-0">
              <p className="text-[18px] font-semibold text-[#2f6df6]">{label}</p>
              <p className="mt-2 text-[13px] leading-6 text-[#687a96]">{description}</p>
            </div>
          ))}
        </div>
      )}
    </div>
    </StaticUiLocalizer>
  );
}