import Link from "next/link";
import type { Post, PostCategory } from "@/app/data/feed";

/** Badge por categoría: colores exactos de la plantilla. */
const BADGES: Record<PostCategory, { label: string; classes: string }> = {
  logro: { label: "LOGRO", classes: "bg-[#CFEBD8] text-[#3E9B6C]" },
  actividad: { label: "ACTIVIDAD", classes: "bg-[#C7E7F1] text-[#2E89A6]" },
  anuncio: { label: "ANUNCIO", classes: "bg-[#CCD8F4] text-[#4E72C8]" },
};

/**
 * Colores dinámicos → utilities Tailwind con valores exactos.
 * El set de pares del mock es cerrado; nunca se usan atributos style.
 */
const AVATAR_COLORS: Record<string, string> = {
  "A9D9E8-1F7A93": "bg-[#A9D9E8] text-[#1F7A93]",
  "CCD8F4-4E72C8": "bg-[#CCD8F4] text-[#4E72C8]",
};

function avatarClasses(post: Post): string {
  const key = `${post.authorColors.bg.replace("#", "")}-${post.authorColors.text.replace("#", "")}`;
  return AVATAR_COLORS[key] ?? "";
}

export default function PostCard({ post }: { post: Post }) {
  const badge = BADGES[post.category];

  return (
    <article className="rounded-[20px] border border-[#ECE0D0] bg-[#FFFDF9] px-[22px] py-5 shadow-[0_4px_16px_-12px_rgba(120,90,60,.5)]">
      {/* Encabezado: avatar + autor + badge */}
      <div className="mb-[14px] flex items-center gap-3">
        <div
          className={`flex h-11 w-11 flex-none items-center justify-center rounded-full font-display text-[17px] font-semibold ${avatarClasses(post)}`}
        >
          {post.authorInitial ? (
            post.authorInitial
          ) : (
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="m3 11 18-5v12L3 14v-3zM11.6 16.8a3 3 0 1 1-5.8-1.6" />
            </svg>
          )}
        </div>
        <div className="flex-1">
          <div className="font-display text-[16.5px] font-semibold text-[#3F362E]">{post.authorName}</div>
          <div className="text-[12.5px] text-[#A89A8B]">
            {post.timeLabel} · {post.publishedBy}
          </div>
        </div>
        <div className={`flex items-center gap-[7px] rounded-full px-3 py-[6px] ${badge.classes}`}>
          <span className="h-2 w-2 rounded-full bg-current" />
          <span className="text-xs font-extrabold tracking-[.5px]">{badge.label}</span>
        </div>
      </div>

      {/* Destinatario */}
      <div className="mb-2.5 text-[12.5px] text-[#A89A8B]">Para: {post.audience}</div>

      {/* Contenido */}
      <p className="text-[15.5px] leading-[1.55] text-[#4A4038]">{post.body}</p>

      {/* Placeholder de foto (solo posts de actividad con foto) */}
      {post.photoLabel && (
        <Link
          href="/foto"
          className="mt-[14px] flex h-[200px] flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] border-dashed border-[#DBCDBA] bg-[#F4ECE1] text-[#B0A290]"
        >
          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" />
            <circle cx="9" cy="9" r="2" />
            <path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21" />
          </svg>
          <span className="text-[13.5px]">Foto · {post.photoLabel}</span>
        </Link>
      )}

      {/* Acciones */}
      <div className="mt-4 flex items-center gap-[18px] border-t border-[#F0E6D8] pt-[14px]">
        <span className="flex items-center gap-[7px] text-sm font-bold text-[#E0654A]">
          <svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z" />
          </svg>
          {post.likes}
        </span>
        <Link
          href="/detalle-publicacion"
          className="flex items-center gap-[7px] text-sm font-bold text-[#94887B]"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z" />
          </svg>
          {post.comments}
        </Link>
        <span className="flex-1" />
        <Link href="/crear-publicacion" className="text-sm font-extrabold text-[#C5503A]">
          Editar
        </Link>
      </div>
    </article>
  );
}