import React from 'react'

/**
 * LinkPreviewCard
 * Renders an OG/OpenGraph link preview card.
 *
 * Props:
 *   preview     { url, title, description, image, site_name }
 *   onDismiss   function|null  — if provided, shows a dismiss ✕ button
 *   loading     boolean        — shows skeleton while fetching
 */
export default function LinkPreviewCard({ preview, onDismiss, loading = false }) {
  if (loading) {
    return (
      <div className="rounded-xl border border-white/[0.08] bg-white/[0.03] overflow-hidden flex gap-3 p-3 animate-pulse">
        <div className="w-20 h-20 rounded-lg bg-white/10 shrink-0" />
        <div className="flex-1 min-w-0 flex flex-col gap-2 justify-center">
          <div className="h-3 bg-white/10 rounded w-2/3" />
          <div className="h-2.5 bg-white/10 rounded w-full" />
          <div className="h-2.5 bg-white/10 rounded w-4/5" />
          <div className="h-2 bg-white/[0.06] rounded w-1/3 mt-1" />
        </div>
      </div>
    )
  }

  if (!preview?.url) return null

  const domain = (() => {
    try { return new URL(preview.url).hostname.replace(/^www\./, '') }
    catch { return preview.site_name ?? '' }
  })()

  return (
    <div className="relative rounded-xl border border-white/[0.08] bg-white/[0.03] overflow-hidden hover:border-white/[0.14] transition-colors group">
      <a
        href={preview.url}
        target="_blank"
        rel="noopener noreferrer nofollow"
        className="flex gap-0 items-stretch"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Image */}
        {preview.image ? (
          <div className="w-24 shrink-0 bg-white/5">
            <img
              src={preview.image}
              alt=""
              className="w-full h-full object-cover"
              loading="lazy"
              onError={(e) => { e.currentTarget.parentElement.style.display = 'none' }}
            />
          </div>
        ) : (
          <div className="w-24 shrink-0 bg-white/[0.04] flex items-center justify-center text-slate-600">
            <i className="fa-solid fa-link text-xl" />
          </div>
        )}

        {/* Text */}
        <div className="flex-1 min-w-0 px-3 py-2.5 flex flex-col justify-center gap-0.5">
          {preview.site_name && (
            <p className="text-[10px] uppercase tracking-wide text-sky-500/80 font-medium truncate">
              {preview.site_name}
            </p>
          )}
          {preview.title && (
            <p className="text-sm font-semibold text-white/90 line-clamp-2 leading-snug">
              {preview.title}
            </p>
          )}
          {preview.description && (
            <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed mt-0.5">
              {preview.description}
            </p>
          )}
          <p className="text-[10px] text-slate-600 mt-1 truncate">
            {domain}
          </p>
        </div>
      </a>

      {/* Dismiss button */}
      {onDismiss && (
        <button
          type="button"
          onClick={(e) => { e.stopPropagation(); onDismiss() }}
          className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-black/60 hover:bg-black/80 text-slate-400 hover:text-white flex items-center justify-center transition-colors text-[10px]"
          aria-label="Remove link preview"
        >
          <i className="fa-solid fa-xmark" />
        </button>
      )}
    </div>
  )
}