import Link from "next/link";
import Image from "next/image";
import { Calendar, MapPin, ArrowRight } from "lucide-react";
import { formatCurrency } from "@/lib/formatters/currency";
import { formatDateRange } from "@/lib/formatters/date";
import StatusBadge from "@/components/common/StatusBadge";
import type { OpenTrip } from "@/types/trip";
import styles from "./TripCard.module.css";

interface TripCardProps {
  trip: OpenTrip;
}

export default function TripCard({ trip }: TripCardProps) {
  const isAvailable = trip.booking.is_available;

  return (
    <article className={styles.card}>
      {/* Image */}
      <div className={styles.imageWrap}>
        {trip.mountain.image ? (
          <Image
            src={trip.mountain.image}
            alt={`${trip.mountain.name} — ${trip.route.name}`}
            fill
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
            className={styles.image}
          />
        ) : (
          <div className={styles.imageFallback} aria-label="Foto gunung tidak tersedia">
            <span className={styles.fallbackText}>{trip.mountain.name[0]}</span>
          </div>
        )}
        {/* Type badge */}
        <span className={`${styles.typeBadge} ${trip.schedule_type === "WEEKEND" ? styles.weekend : styles.weekday}`}>
          {trip.schedule_type_label}
        </span>
      </div>

      {/* Body */}
      <div className={styles.body}>
        <div className={styles.header}>
          <div>
            <h3 className={styles.mountain}>{trip.mountain.name}</h3>
            <p className={styles.route}>
              <MapPin size={12} aria-hidden />
              {trip.route.name}
            </p>
          </div>
          <StatusBadge statusType={{ type: "trip", status: trip.status }} />
        </div>

        <div className={styles.meta}>
          <div className={styles.metaItem}>
            <Calendar size={13} aria-hidden className={styles.metaIcon} />
            <span>{formatDateRange(trip.start_date, trip.end_date)}</span>
          </div>
        </div>

        <div className={styles.footer}>
          <div className={styles.price}>
            <span className={styles.priceFrom}>Mulai</span>
            <span className={styles.priceValue}>{formatCurrency(trip.price)}</span>
          </div>
          <Link
            href={`/open-trip/${trip.id}`}
            className={`btn btn-sm ${isAvailable ? "btn-primary" : "btn-ghost"}`}
            aria-label={`Lihat detail trip ${trip.mountain.name}`}
            id={`trip-card-${trip.id}-cta`}
          >
            Lihat
            <ArrowRight size={14} aria-hidden />
          </Link>
        </div>
      </div>
    </article>
  );
}