"use client";

/**
 * Live slug generator: as user types title, auto-fills slug field.
 * User can override manually; once they edit it, we stop auto-syncing.
 */
import { useEffect, useRef, useState } from "react";
import slugify from "slugify";

function makeSlugClient(s: string): string {
  return slugify(s, { lower: true, strict: true, locale: "vi", trim: true }).slice(0, 100);
}

export function TitleSlugInputs({
  defaultTitle = "",
  defaultSlug = "",
  slugLocked = false,
}: {
  defaultTitle?: string;
  defaultSlug?: string;
  slugLocked?: boolean;
}) {
  const [title, setTitle] = useState(defaultTitle);
  const [slug, setSlug] = useState(defaultSlug);
  const userEditedSlug = useRef<boolean>(slugLocked || defaultSlug.length > 0);

  useEffect(() => {
    if (!userEditedSlug.current) {
      setSlug(makeSlugClient(title));
    }
  }, [title]);

  return (
    <>
      <label className="block">
        <span className="text-ink-muted mb-1 block text-[11px] tracking-[0.15em] uppercase">
          Tiêu đề <span className="text-brand-red">*</span>
        </span>
        <input
          type="text"
          name="title"
          required
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          maxLength={200}
          className="border-stroke-subtle bg-bg-base text-ink-primary focus:border-brand-gold/50 w-full rounded-md border px-3 py-2 text-sm transition outline-none"
          placeholder="Ví dụ: Tử Vi Đẩu Số là gì?"
        />
      </label>

      <label className="mt-4 block">
        <span className="text-ink-muted mb-1 block text-[11px] tracking-[0.15em] uppercase">
          Slug (URL) <span className="text-brand-red">*</span>
        </span>
        <div className="flex items-center gap-2">
          <span className="text-ink-muted text-xs">/blog/</span>
          <input
            type="text"
            name="slug"
            required
            value={slug}
            onChange={(e) => {
              userEditedSlug.current = true;
              setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""));
            }}
            pattern="[a-z0-9-]+"
            className="border-stroke-subtle bg-bg-base text-ink-primary focus:border-brand-gold/50 flex-1 rounded-md border px-3 py-2 font-mono text-sm transition outline-none"
            placeholder="tu-vi-dau-so-la-gi"
          />
        </div>
        <span className="text-ink-muted mt-1 block text-xs">
          Tự sinh từ tiêu đề. Có thể chỉnh tay (chỉ a-z, 0-9, gạch ngang).
        </span>
      </label>
    </>
  );
}