import Image from "next/image";
import Link from "next/link";
import {
  MapPin,
  CalendarDays,
  UserRound,
  BadgeCheck,
  Sparkles,
} from "lucide-react";
import { formatRupiah } from "@/lib/utils";
import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
import { categoryMeta } from "@/lib/activity-category";
import { vibeMeta } from "@/lib/vibe";
import type { ActivityCategory, Vibe } from "@/app/generated/prisma/enums";

interface TripCardParticipant {
  id: string;
  name: string;
  image: string | null;
  interests: string[];
}

interface TripCardProps {
  id: string;
  title: string;
  category: ActivityCategory;
  vibe?: Vibe | null;
  destination: string;
  location: string;
  date: Date | string;
  endDate?: Date | string | null;
  price: number;
  maxParticipants: number;
  participantCount: number;
  organizerName: string;
  status: string;
  coverImage?: string | null;
  priority?: boolean;
  isVerifiedOrganizer?: boolean;
  /** Daftar peserta CONFIRMED (subset, untuk preview avatar). Optional. */
  participants?: TripCardParticipant[];
  /** Interests user yang sedang melihat — untuk hitung overlap. Optional. */
  viewerInterests?: string[];
}

export function TripCard({
  id,
  title,
  category,
  vibe,
  destination,
  location,
  date,
  endDate,
  price,
  maxParticipants,
  participantCount,
  organizerName,
  status,
  coverImage,
  priority,
  isVerifiedOrganizer,
  participants,
  viewerInterests,
}: TripCardProps) {
  const spotsLeft = maxParticipants - participantCount;
  const isSmallGroup = maxParticipants <= 10;
  const meta = categoryMeta(category);
  const vMeta = vibe ? vibeMeta(vibe) : null;

  const previewParticipants = participants?.slice(0, 3) ?? [];
  const moreCount =
    participants && participants.length > 3 ? participants.length - 3 : 0;

  let overlapCount = 0;
  if (viewerInterests && viewerInterests.length > 0 && participants) {
    const viewerSet = new Set(viewerInterests.map((i) => i.toLowerCase()));
    overlapCount = participants.filter((p) =>
      p.interests.some((tag) => viewerSet.has(tag.toLowerCase()))
    ).length;
  }

  return (
    <Link href={`/trips/${id}`} className="group block">
      <div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white transition-all group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:shadow-neutral-200/60">
        {/* Cover Image */}
        <div className="relative h-40 bg-neutral-800">
          {coverImage ? (
            <Image
              src={coverImage}
              alt={title}
              fill
              className="object-cover transition-transform group-hover:scale-105"
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
              priority={priority}
            />
          ) : (
            <div className="flex h-full items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900">
              <span className="text-4xl">{meta.icon}</span>
            </div>
          )}
          <div className="absolute left-3 top-3 flex flex-wrap gap-1">
            <span
              className="inline-flex items-center gap-1 rounded-full bg-white/90 px-2 py-0.5 text-[11px] font-semibold text-neutral-700 shadow-sm backdrop-blur-sm"
              title={`Kategori: ${meta.label}`}
            >
              <span>{meta.icon}</span>
              <span>{meta.label}</span>
            </span>
            {vMeta && (
              <span
                className="inline-flex items-center gap-1 rounded-full bg-secondary-600/90 px-2 py-0.5 text-[11px] font-semibold text-white shadow-sm backdrop-blur-sm"
                title={`Vibe: ${vMeta.label} — ${vMeta.description}`}
              >
                <span aria-hidden>{vMeta.icon}</span>
                <span>{vMeta.label}</span>
              </span>
            )}
          </div>
          <span
            className={`absolute right-3 top-3 rounded-full px-2.5 py-0.5 text-xs font-bold backdrop-blur-sm ${
              status === "OPEN"
                ? "bg-primary-600/80 text-white"
                : status === "FULL"
                ? "bg-amber-500/80 text-white"
                : "bg-neutral-600/80 text-neutral-200"
            }`}
          >
            {status}
          </span>
        </div>

        {/* Content */}
        <div className="p-4">
          <h3 className="font-bold text-neutral-800 group-hover:text-primary-700">
            {title}
          </h3>
          <p className="mt-0.5 text-sm text-neutral-500">{destination}</p>

          <div className="mt-3 space-y-1 text-sm text-neutral-600">
            <div className="flex items-center gap-1.5">
              <MapPin
                size={14}
                strokeWidth={1.75}
                aria-hidden
                className="shrink-0 text-neutral-400"
              />
              <span className="truncate">{location}</span>
            </div>
            <div className="flex items-center gap-1.5">
              <CalendarDays
                size={14}
                strokeWidth={1.75}
                aria-hidden
                className="shrink-0 text-neutral-400"
              />
              <span>{formatTripCalendarDateRangeLong(date, endDate)}</span>
            </div>
            <div className="flex flex-wrap items-center gap-1.5">
              <UserRound
                size={14}
                strokeWidth={1.75}
                aria-hidden
                className="shrink-0 text-neutral-400"
              />
              <span className="truncate">{organizerName}</span>
              {isVerifiedOrganizer && (
                <span
                  className="inline-flex items-center gap-1 rounded-full bg-primary-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-primary-800"
                  title="Identitas organizer telah diverifikasi (KTP & rekening)"
                >
                  <BadgeCheck size={11} strokeWidth={2} aria-hidden />
                  Verified
                </span>
              )}
              {isSmallGroup && (
                <span
                  className="inline-flex items-center rounded-full bg-secondary-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-secondary-800"
                  title="Grup kecil — pengalaman lebih akrab"
                >
                  Small group
                </span>
              )}
            </div>
          </div>

          {(previewParticipants.length > 0 || overlapCount > 0) && (
            <div className="mt-3 flex items-center gap-2 border-t border-neutral-100 pt-3">
              {previewParticipants.length > 0 && (
                <div className="flex -space-x-2">
                  {previewParticipants.map((p) =>
                    p.image ? (
                      <Image
                        key={p.id}
                        src={p.image}
                        alt=""
                        width={24}
                        height={24}
                        className="h-6 w-6 rounded-full border-2 border-white object-cover"
                      />
                    ) : (
                      <div
                        key={p.id}
                        className="flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-primary-600 text-[10px] font-bold text-white"
                        title={p.name}
                      >
                        {p.name.charAt(0).toUpperCase()}
                      </div>
                    )
                  )}
                  {moreCount > 0 && (
                    <div className="flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-neutral-200 text-[10px] font-bold text-neutral-600">
                      +{moreCount}
                    </div>
                  )}
                </div>
              )}
              {overlapCount > 0 && (
                <span
                  className="inline-flex items-center gap-1 rounded-full bg-secondary-50 px-2 py-0.5 text-[11px] font-semibold text-secondary-700"
                  title="Peserta dengan minimal 1 minat sama dengan kamu"
                >
                  <Sparkles size={11} strokeWidth={2} aria-hidden />
                  {overlapCount} peserta sama minat
                </span>
              )}
            </div>
          )}

          <div className="mt-3 flex items-center justify-between border-t border-neutral-100 pt-3">
            <span className="text-lg font-bold text-primary-600">
              {formatRupiah(price)}
            </span>
            <span
              className={`text-xs font-semibold ${
                spotsLeft > 0 ? "text-secondary-600" : "text-amber-600"
              }`}
            >
              {spotsLeft > 0 ? `${spotsLeft} slot tersisa` : "Penuh"}
            </span>
          </div>
        </div>
      </div>
    </Link>
  );
}