import { useState, useEffect, useRef } from "react";
import { wpApi } from "../api/wp-api";

interface UrlPreviewData {
  title?: string;
  description?: string;
  domain?: string;
  url: string;
  favicon?: string;
  image?: { url: string; width?: number; height?: number };
  isSuccess: boolean;
}

interface Props {
  text: string;
  hasMedia: boolean;
}

const URL_REGEX = /https?:\/\/[^\s<>"{}|\\^`[\]]+/;

export default function UrlPreview({ text, hasMedia }: Props) {
  const [preview, setPreview] = useState<UrlPreviewData | null>(null);
  const [loading, setLoading] = useState(false);
  const [dismissed, setDismissed] = useState(false);
  const lastUrl = useRef("");
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    // Don't show URL preview if media is attached (platforms show media instead of link card)
    if (hasMedia) {
      setPreview(null);
      return;
    }

    const match = text.match(URL_REGEX);
    const url = match?.[0] || "";

    if (!url || url === lastUrl.current) return;
    if (dismissed) setDismissed(false);

    // Debounce — wait 800ms after typing stops
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(async () => {
      lastUrl.current = url;
      setLoading(true);
      try {
        const baseUrl = (window as any).viralyWP.restUrl.replace(/\/+$/, "");
        const nonce = (window as any).viralyWP.restNonce;
        const res = await fetch(`${baseUrl}/url-preview`, {
          method: "POST",
          credentials: "same-origin",
          headers: { "X-WP-Nonce": nonce, "Content-Type": "application/json" },
          body: JSON.stringify({ url }),
        });
        const data = await res.json();
        if (data.isSuccess && (data.title || data.description || data.image)) {
          setPreview(data);
        } else {
          setPreview(null);
        }
      } catch {
        setPreview(null);
      }
      setLoading(false);
    }, 800);

    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
  }, [text, hasMedia]);

  if (dismissed || hasMedia || (!preview && !loading)) return null;

  if (loading) {
    return (
      <div className="vr-flex vr-items-center vr-gap-2 vr-py-2 vr-text-xs vr-text-gray-400">
        <div className="vr-w-3 vr-h-3 vr-border-2 vr-border-gray-200 vr-border-t-primary-600 vr-rounded-full vr-animate-spin" />
        Fetching link preview...
      </div>
    );
  }

  if (!preview) return null;

  return (
    <div className="vr-mt-2 vr-rounded-lg vr-border vr-border-gray-200 vr-overflow-hidden vr-bg-white">
      <div className="vr-flex">
        {/* Image */}
        {preview.image?.url && (
          <img
            src={preview.image.url}
            alt=""
            className="vr-w-24 vr-h-24 vr-object-cover vr-flex-shrink-0"
            onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
          />
        )}

        {/* Text */}
        <div className="vr-flex-1 vr-p-2.5 vr-min-w-0">
          <div className="vr-flex vr-items-start vr-justify-between vr-gap-1">
            <div className="vr-min-w-0">
              {preview.domain && (
                <p className="vr-text-xs vr-text-gray-400 vr-flex vr-items-center vr-gap-1 vr-mb-0.5">
                  {preview.favicon && (
                    <img src={preview.favicon} alt="" className="vr-w-3 vr-h-3" onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
                  )}
                  {preview.domain}
                </p>
              )}
              {preview.title && (
                <p className="vr-text-xs vr-font-semibold vr-text-gray-900 vr-line-clamp-1 vr-leading-tight">{preview.title}</p>
              )}
              {preview.description && (
                <p className="vr-text-xs vr-text-gray-500 vr-line-clamp-2 vr-mt-0.5 vr-leading-tight">{preview.description}</p>
              )}
            </div>
            <button
              onClick={() => setDismissed(true)}
              className="vr-text-gray-300 hover:vr-text-gray-500 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0 vr-flex-shrink-0"
              title="Dismiss preview"
            >
              <i className="fa-solid fa-xmark" style={{ fontSize: "10px" }} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}