import Link from "next/link";
import { Countdown } from "@/components/countdown";
import { profileTypeLabel } from "@/lib/roles";

export function Portrait({
  name,
  src,
  size = "md",
}: {
  name: string;
  src?: string | null;
  size?: "sm" | "md" | "lg" | "card" | "hero";
}) {
  const letters = name
    .split(" ")
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase())
    .join("");

  if (src) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img className={`portrait portrait--${size}`} src={src} alt="" />
    );
  }

  return (
    <span className={`eg-avatar portrait--${size}`} aria-hidden="true">
      {letters || "EG"}
    </span>
  );
}

export function DirectoryRow({
  href,
  name,
  photoUrl,
  type,
  company,
  country,
  location,
  origin,
  specialties,
  verified,
  featured,
  wholesale,
}: {
  href: string;
  name: string;
  photoUrl?: string | null;
  type: string;
  company?: string | null;
  country?: string | null;
  location?: string | null;
  origin?: string | null;
  specialties?: string | null;
  verified: boolean;
  featured?: boolean;
  wholesale?: boolean;
}) {
  const specs = (specialties || "")
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean)
    .slice(0, 3);

  return (
    <Link href={href} className={`dir-card${featured ? " dir-card--featured" : ""}`}>
      <div className="dir-card__media">
        <Portrait name={name} src={photoUrl} size="card" />
      </div>
      <div className="dir-card__body">
        <div className="dir-card__top">
          <h3>{name}</h3>
          <span className="dir-card__go">Profile</span>
        </div>
        {featured ? <span className="kind-pill kind-pill--announcement">Featured</span> : null}
        {verified ? <span className="kind-pill kind-pill--discussion">Verified</span> : null}
        {wholesale ? <span className="kind-pill">Wholesale</span> : null}
        <p className="dir-card__craft">
          {profileTypeLabel(type)}
          {company ? ` · ${company}` : ""}
        </p>
        <p className="dir-card__place">{[location, country].filter(Boolean).join(" · ")}</p>
        {origin ? <p className="dir-card__origin">Origin focus · {origin}</p> : null}
        {specs.length ? (
          <div className="dir-card__specs">
            {specs.map((spec) => (
              <span key={spec}>{spec}</span>
            ))}
          </div>
        ) : null}
      </div>
    </Link>
  );
}

export function ListingCard({
  href,
  title,
  imageUrl,
  gemType,
  origin,
  color,
  treatment,
  certification,
  weightCt,
  askingPrice,
  seller,
  wholesale,
  availability,
  hint,
}: {
  href: string;
  title: string;
  imageUrl?: string | null;
  gemType: string;
  origin: string;
  color?: string | null;
  treatment?: string | null;
  certification?: string | null;
  weightCt: number;
  askingPrice: number;
  seller: string;
  wholesale?: boolean;
  availability: string;
  hint?: string;
}) {
  const specs = [color, treatment, certification].filter(Boolean) as string[];

  return (
    <Link href={href} className="dir-card dir-card--lot">
      <div className="dir-card__media">
        {imageUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={imageUrl} alt="" />
        ) : (
          <div className="lot-card__placeholder" />
        )}
        {wholesale ? <span className="lot-card__flag">Wholesale</span> : null}
      </div>
      <div className="dir-card__body">
        <div className="dir-card__top">
          <h3>{title}</h3>
          <span className="dir-card__go">${askingPrice.toLocaleString()}</span>
        </div>
        {availability !== "available" ? (
          <span className={`kind-pill${availability === "hold" ? " kind-pill--announcement" : ""}`}>
            {availability}
          </span>
        ) : null}
        {hint ? <span className="kind-pill kind-pill--discussion">{hint}</span> : null}
        <p className="dir-card__craft">
          {gemType} · {origin} · {weightCt.toFixed(2)} ct
        </p>
        <p className="dir-card__place">{seller}</p>
        {specs.length ? (
          <div className="dir-card__specs">
            {specs.map((spec) => (
              <span key={spec}>{spec}</span>
            ))}
          </div>
        ) : null}
      </div>
    </Link>
  );
}

export function LotCard({
  href,
  title,
  imageUrl,
  origin,
  category,
  status,
  currentBid,
  endsAt,
  bidCount,
  wholesale,
}: {
  href: string;
  title: string;
  imageUrl?: string | null;
  origin?: string | null;
  category: string;
  status: string;
  currentBid: number;
  endsAt: string;
  bidCount?: number;
  wholesale?: boolean;
}) {
  return (
    <Link href={href} className="lot-card">
      <div className="lot-card__media">
        {imageUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={imageUrl} alt="" />
        ) : (
          <div className="lot-card__placeholder" />
        )}
        <span className="lot-card__status">{status}</span>
        {wholesale ? <span className="lot-card__flag">Wholesale</span> : null}
      </div>
      <div className="lot-card__body">
        <p className="eg-eyebrow">
          {category}
          {origin ? ` · ${origin}` : ""}
        </p>
        <h3>{title}</h3>
        <div className="lot-card__meta">
          <div>
            <p className="eg-label">Current</p>
            <p className="lot-card__bid">${currentBid.toLocaleString()}</p>
          </div>
          {status !== "closed" ? <Countdown endsAt={endsAt} /> : <span className="countdown">Closed</span>}
        </div>
        {typeof bidCount === "number" ? (
          <p className="lot-card__bids">
            {bidCount} {bidCount === 1 ? "bid" : "bids"}
          </p>
        ) : null}
      </div>
    </Link>
  );
}

export function FloorCard({
  href,
  title,
  body,
  kindLabel,
  kind,
  authorName,
  photoUrl,
  craft,
  when,
  replyCount,
}: {
  href: string;
  title: string;
  body: string;
  kindLabel: string;
  kind: string;
  authorName: string;
  photoUrl?: string | null;
  craft?: string | null;
  when: string;
  replyCount: number;
}) {
  return (
    <Link href={href} className="floor-card">
      <Portrait name={authorName} src={photoUrl} size="card" />
      <div className="floor-card__body">
        <div className="floor-card__meta">
          <span className={`kind-pill kind-pill--${kind}`}>{kindLabel}</span>
          <span className="floor-card__author">{authorName}</span>
          {craft ? <span>{craft}</span> : null}
          <time>{when}</time>
        </div>
        <h2>{title}</h2>
        <p>{body}</p>
        <span className="floor-card__replies">
          {replyCount === 0 ? "Open thread" : `${replyCount} ${replyCount === 1 ? "reply" : "replies"}`}
        </span>
      </div>
    </Link>
  );
}

export function RoomCard({
  href,
  name,
  photoUrl,
  gemTitle,
  preview,
  status,
}: {
  href: string;
  name: string;
  photoUrl?: string | null;
  gemTitle?: string | null;
  preview: string;
  status: string;
}) {
  return (
    <Link href={href} className="room-card">
      <Portrait name={name} src={photoUrl} />
      <div>
        <div className="room-card__top">
          <h3>{name}</h3>
          <span className="stamp stamp--plain">{status}</span>
        </div>
        {gemTitle ? <p className="room-card__gem">{gemTitle}</p> : null}
        <p className="room-card__preview">{preview}</p>
      </div>
    </Link>
  );
}