import { Button } from "@/components/ui/button";
import {
  escapeMultipleStrings,
  formatPostTime,
  getFullname,
} from "@/lib/utils";
import { Post } from "@/types/custom/user";
import clsx from "clsx";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import PostActionBar from "./PostActionsBar";
import { headers, type UnsafeUnwrappedHeaders } from "next/headers";

const UserPostCard: React.FC<Post> = (post) => {
  const images = post.images ? escapeMultipleStrings(post.images) : [];
  const token = (headers() as unknown as UnsafeUnwrappedHeaders).get("waalook-auth-header");

  if (!token) {
    return null;
  }

  return (
    <div className="p-4 border-b">
      <div className="flex items-start space-x-2 w-full">
        <Image
          height={500}
          width={500}
          src={post.author_image || "/assets/images/default-avatar.webp"}
          alt="Profile"
          className="w-10 h-10 rounded-full"
        />
        <div className="flex-col space-y-2 w-full">
          <div className="flex items-start justify-between w-full space-x-4">
            <div>
              <h5 className="">
                {getFullname({
                  firstName: post.first_name,
                  lastName: post.last_name,
                })}
              </h5>
              <span className="text-neutral-700 text-sm">
                @{post.post_author} · {formatPostTime(new Date(post.post_date))}
              </span>
            </div>
            <Button
              className="rounded-full font-semibold bg-black hover:bg-black"
              size={"sm"}
            >
              Follow
            </Button>
          </div>
          <Link href={`/${"sarax736"}/status/${post.post_id}`}>
            <div>{post.post_content || "No content available."}</div>
          </Link>

          {images.length > 0 && (
            <div
              className={clsx(
                "grid gap-1",
                images.length === 1
                  ? "grid-cols-1 rounded-lg"
                  : images.length === 2
                  ? "grid-cols-2"
                  : images.length === 3
                  ? "grid-cols-2 "
                  : "grid-cols-2"
              )}
            >
              {images.map((imgSrc: string, index: number) => (
                <Image
                  key={index}
                  src={imgSrc}
                  alt={`Post image ${index + 1}`}
                  width={500}
                  height={500}
                  className={clsx(
                    "object-cover",
                    images.length === 1 && "rounded-lg",
                    images.length === 2 &&
                      (index === 0 ? "rounded-l-lg" : "rounded-r-lg"),
                    images.length === 3 &&
                      (index === 0
                        ? "rounded-l-lg h-full row-span-2"
                        : index === 1
                        ? "rounded-tr-lg"
                        : "rounded-br-lg"),
                    images.length === 4 &&
                      (index === 0
                        ? "rounded-tl-lg"
                        : index === 1
                        ? "rounded-tr-lg"
                        : index === 2
                        ? "rounded-bl-lg"
                        : "rounded-br-lg")
                  )}
                />
              ))}
            </div>
          )}

          <div className="flex space-x-3 justify-between items-center pt-1 w-full">
            <PostActionBar post={post} token={token} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default UserPostCard;