import Link from "next/link";
import { maskName } from "@/lib/confessions/mask";
import { stripHtmlToText } from "@/lib/shared/sanitize-html";
import type { listConfessions } from "@/lib/confessions/queries";
import { ConfessionLikeButton } from "@/components/confessions/ConfessionLikeButton";

const EXCERPT_LENGTH = 220;

type Confession = Awaited<ReturnType<typeof listConfessions>>[number];

export function ConfessionCard({ confession, canLike = false }: { confession: Confession; canLike?: boolean }) {
  const fullName = confession.user.profile?.fullName ?? "Bir üye";
  const isPrivate = confession.visibility === "GIZLI";
  const displayName = isPrivate ? maskName(fullName) : fullName;
  const initials = displayName.slice(0, 2).toUpperCase();
  // Gizli itiraflarda gerçek fotoğraf gösterilmez — isim maskelenirken kimlik fotoğrafla ifşa olmasın.
  const avatarPhoto = !isPrivate ? confession.user.profile?.avatarPhoto : null;
  const plainBody = stripHtmlToText(confession.body);
  const excerpt = plainBody.length > EXCERPT_LENGTH ? `${plainBody.slice(0, EXCERPT_LENGTH)}...` : plainBody;

  return (
    <div className="card-lift rounded-2xl border border-border bg-surface p-5 shadow-[0_1px_2px_rgba(30,15,8,.04)]">
      <div className="mb-3 flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          {avatarPhoto ? (
            <div className="h-8 w-8 shrink-0 overflow-hidden rounded-full">
              {/* eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği */}
              <img src={avatarPhoto.thumbUrl} alt={avatarPhoto.altText ?? fullName} className="h-full w-full object-cover" />
            </div>
          ) : (
            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-accent to-accent-2 text-[11px] font-bold text-white">
              {initials}
            </div>
          )}
          <span className="text-[13.5px] font-semibold">{displayName}</span>
        </div>
        <span
          className={`flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-semibold ${
            confession.visibility === "GIZLI" ? "bg-text-muted/10 text-text-muted" : "bg-accent-2/10 text-accent-2"
          }`}
        >
          {confession.visibility === "GIZLI" ? "Gizli" : "Açık"}
        </span>
      </div>

      <Link href={`/itiraflar/${confession.slug}`} className="block">
        <h3 className="mb-1.5 text-[15.5px] font-bold hover:text-accent">{confession.title}</h3>
        <p className="text-[14.5px] leading-relaxed text-text-muted">{excerpt}</p>
      </Link>

      {confession.tags.length > 0 && (
        <div className="mt-3 flex flex-wrap gap-1.5 border-t border-dashed border-border pt-3">
          {confession.tags.map((tag) => {
            const taggedProfile = tag.taggedUser.profile;
            return taggedProfile ? (
              <Link
                key={tag.id}
                href={`/profil/${taggedProfile.username}`}
                className="rounded-full bg-bg-alt px-2.5 py-1 text-[12px] font-semibold text-accent"
              >
                @{taggedProfile.username}
              </Link>
            ) : null;
          })}
        </div>
      )}

      <div className="mt-3 flex items-center gap-4 border-t border-dashed border-border pt-3">
        {canLike ? (
          <ConfessionLikeButton
            confessionId={confession.id}
            initiallyLiked={confession.likes.length > 0}
            likeCount={confession._count.likes}
          />
        ) : (
          <span className="flex items-center gap-1.5 text-[12.5px] font-semibold text-text-muted">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 20s-7-4.35-9.5-8.5C.5 8 2 4 6 4c2 0 3.5 1.2 4 2.5C10.5 5.2 12 4 14 4c4 0 5.5 4 3.5 7.5C19 15.65 12 20 12 20z" />
            </svg>
            {confession._count.likes > 0 ? confession._count.likes : "Beğen"}
          </span>
        )}

        <span className="flex items-center gap-1.5 text-[12.5px] font-semibold text-text-muted">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
            <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
            <circle cx="12" cy="12" r="3" />
          </svg>
          {confession.viewCount}
        </span>

        <span className="flex items-center gap-1.5 text-[12.5px] font-semibold text-text-muted">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" />
          </svg>
          {confession._count.comments}
        </span>
      </div>
    </div>
  );
}