"use client";

import { useEffect, useState } from "react";

const SITE = "v2.finzone.io.vn";

function truncate(s: string, max: number): string {
  if (s.length <= max) return s;
  return s.slice(0, max - 1).trimEnd() + "…";
}

function pickFromForm(name: string, fallback = ""): string {
  if (typeof document === "undefined") return fallback;
  const el = document.querySelector<HTMLInputElement | HTMLTextAreaElement>(
    `[name="${name}"]`,
  );
  return el?.value ?? fallback;
}

type Snapshot = {
  title: string;
  metaTitle: string;
  metaDesc: string;
  excerpt: string;
  slug: string;
  publishedAt?: string | null;
};

function readSnapshot(): Snapshot {
  return {
    title: pickFromForm("title"),
    metaTitle: pickFromForm("metaTitle"),
    metaDesc: pickFromForm("metaDesc"),
    excerpt: pickFromForm("excerpt"),
    slug: pickFromForm("slug"),
  };
}

/**
 * SERP preview — reads sibling form inputs by `name` attribute and re-renders
 * a Google-style search result. Uncontrolled-form friendly. Listens to `input`
 * events on the document (capture phase) so any field change updates the
 * preview without lifting state up to the parent form.
 */
export function SerpPreview() {
  const [snap, setSnap] = useState<Snapshot>({
    title: "",
    metaTitle: "",
    metaDesc: "",
    excerpt: "",
    slug: "",
  });
  const [device, setDevice] = useState<"desktop" | "mobile">("desktop");

  useEffect(() => {
    setSnap(readSnapshot());
    const handler = () => setSnap(readSnapshot());
    document.addEventListener("input", handler, true);
    return () => document.removeEventListener("input", handler, true);
  }, []);

  const titleRaw = snap.metaTitle.trim() || snap.title || "Tiêu đề bài viết";
  const descRaw = snap.metaDesc.trim() || snap.excerpt || "Mô tả meta của bài viết sẽ hiển thị ở đây.";
  const slugRaw = snap.slug.trim() || "ten-bai-viet";

  // Google SERP limits: title ~580px (≈60 chars desktop, 50 mobile), desc ~990px (≈155 chars).
  const titleLimit = device === "desktop" ? 60 : 50;
  const descLimit = device === "desktop" ? 158 : 130;

  const title = truncate(titleRaw, titleLimit);
  const desc = truncate(descRaw, descLimit);

  const today = new Date().toLocaleDateString("vi-VN", {
    day: "numeric",
    month: "short",
    year: "numeric",
  });

  return (
    <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-4">
      <div className="flex items-center justify-between gap-2 mb-3">
        <h3 className="font-medium text-sm">SERP preview</h3>
        <div className="flex rounded-lg bg-bg-base border border-stroke-subtle p-0.5 text-[11px]">
          <button
            type="button"
            onClick={() => setDevice("desktop")}
            className={`px-2.5 py-0.5 rounded ${
              device === "desktop"
                ? "bg-accent-primary/20 text-accent-primary"
                : "text-ink-muted hover:text-ink-primary"
            }`}
          >
            Desktop
          </button>
          <button
            type="button"
            onClick={() => setDevice("mobile")}
            className={`px-2.5 py-0.5 rounded ${
              device === "mobile"
                ? "bg-accent-primary/20 text-accent-primary"
                : "text-ink-muted hover:text-ink-primary"
            }`}
          >
            Mobile
          </button>
        </div>
      </div>

      <div
        className={`bg-white text-zinc-900 rounded-lg p-3 font-sans border border-zinc-200 ${
          device === "mobile" ? "max-w-[360px]" : ""
        }`}
      >
        <div className="flex items-center gap-1.5 mb-1 text-[11px] text-zinc-500">
          <span className="inline-block w-3 h-3 rounded-full bg-zinc-300" />
          <span>{SITE}</span>
          <span>›</span>
          <span className="truncate max-w-[200px]">{slugRaw}</span>
        </div>
        <a
          href="#"
          onClick={(e) => e.preventDefault()}
          className="block leading-snug"
        >
          <span
            className={`text-[#1a0dab] hover:underline ${
              device === "mobile" ? "text-base" : "text-lg"
            }`}
          >
            {title}
          </span>
        </a>
        <p
          className={`text-zinc-600 leading-snug mt-1 ${
            device === "mobile" ? "text-[13px]" : "text-[14px]"
          }`}
        >
          <span className="text-zinc-500">{today} — </span>
          {desc}
        </p>
      </div>

      <div className="mt-3 grid grid-cols-2 gap-2 text-[11px]">
        <div
          className={`px-2 py-1 rounded border ${
            titleRaw.length === 0
              ? "border-rose-500/40 bg-rose-500/10 text-rose-300"
              : titleRaw.length > titleLimit
                ? "border-amber-500/40 bg-amber-500/10 text-amber-300"
                : titleRaw.length < 30
                  ? "border-amber-500/40 bg-amber-500/10 text-amber-300"
                  : "border-emerald-500/40 bg-emerald-500/10 text-emerald-300"
          }`}
        >
          Title: {titleRaw.length} ký tự
          <span className="ml-1 text-ink-muted">
            (≤{titleLimit})
          </span>
        </div>
        <div
          className={`px-2 py-1 rounded border ${
            descRaw.length === 0
              ? "border-rose-500/40 bg-rose-500/10 text-rose-300"
              : descRaw.length > descLimit
                ? "border-amber-500/40 bg-amber-500/10 text-amber-300"
                : descRaw.length < 80
                  ? "border-amber-500/40 bg-amber-500/10 text-amber-300"
                  : "border-emerald-500/40 bg-emerald-500/10 text-emerald-300"
          }`}
        >
          Desc: {descRaw.length} ký tự
          <span className="ml-1 text-ink-muted">
            (≤{descLimit})
          </span>
        </div>
      </div>
    </div>
  );
}