import React from "react";
import Image from "next/image";
import {
  BookOpen,
  Calendar,
  MapPin,
  Clock,
  Headphones,
  Leaf,
  ArrowRight,
  Mountain,
} from "lucide-react";
import { formatCurrency } from "@/lib/formatters/currency";
import { formatDateRange, formatDate } from "@/lib/formatters/date";
import { makeWhatsAppUrl } from "@/lib/formatters/phone";
import type { OpenTripDetail } from "@/types/trip";
import styles from "./BookingForm.module.css";

interface TripSummarySidebarProps {
  trip: OpenTripDetail;
  whatsappNumber?: string;
}

export default function TripSummarySidebar({
  trip,
  whatsappNumber = "628123456789",
}: TripSummarySidebarProps) {
  const waUrl = makeWhatsAppUrl(
    whatsappNumber,
    `Halo PPT Adventure, saya ingin bertanya seputar booking open trip ${trip.mountain.name} (via ${trip.route.name}).`
  );

  return (
    <aside className={styles.summarySidebar} aria-label="Ringkasan Trip & Bantuan">
      {/* ── 1. Main Trip Summary Card ────────────────────────────── */}
      <div className={styles.summaryCard}>
        <div className={styles.summaryHeader}>
          <div className={styles.summaryIconCircle} aria-hidden="true">
            <BookOpen size={18} className={styles.summaryIcon} />
          </div>
          <h2 className={styles.summaryTitle}>Ringkasan Trip</h2>
        </div>

        {/* Mountain Thumbnail Image (The ONLY raster image on the booking page) */}
        <div className={styles.summaryThumbnailWrap}>
          {trip.mountain.image ? (
            <Image
              src={trip.mountain.image}
              alt={trip.mountain.name}
              fill
              sizes="(max-width: 768px) 100vw, 360px"
              className={styles.summaryThumbnailImg}
              priority
            />
          ) : (
            <div className={styles.summaryThumbnailFallback}>
              <Mountain size={44} opacity={0.4} />
            </div>
          )}
        </div>

        {/* Mountain & Route Titles */}
        <div className={styles.summaryTripInfo}>
          <h3 className={styles.summaryMountainName}>{trip.mountain.name}</h3>
          <span className={styles.summaryRouteName}>via {trip.route.name}</span>
        </div>

        {/* Trip Meta: Dates & Province */}
        <div className={styles.summaryMetaList}>
          <div className={styles.summaryMetaItem}>
            <Calendar size={15} className={styles.summaryMetaIcon} aria-hidden="true" />
            <span>{formatDateRange(trip.start_date, trip.end_date)}</span>
          </div>
          <div className={styles.summaryMetaItem}>
            <MapPin size={15} className={styles.summaryMetaIcon} aria-hidden="true" />
            <span>{trip.mountain.province}</span>
          </div>
        </div>

        {/* Price Tag */}
        <div className={styles.summaryPriceBox}>
          <div className={styles.summaryPriceRow}>
            <Clock size={15} className={styles.summaryPriceIcon} aria-hidden="true" />
            <span className={styles.summaryPriceLabel}>Mulai dari</span>
          </div>
          <div className={styles.summaryPriceMain}>
            <span className={styles.summaryPriceValue}>{formatCurrency(trip.price)}</span>
            <span className={styles.summaryPriceSub}>/ peserta</span>
          </div>
        </div>

        {/* Registration Deadline Banner */}
        <div className={styles.summaryDeadlineContainer}>
          <Clock size={16} className={styles.summaryDeadlineIcon} aria-hidden="true" />
          <div className={styles.summaryDeadlineText}>
            <span className={styles.summaryDeadlineLabel}>Pendaftaran hingga</span>
            <strong className={styles.summaryDeadlineDate}>
              {formatDate(trip.registration_deadline)}
            </strong>
          </div>
        </div>
      </div>

      {/* ── 2. WhatsApp Support Card ─────────────────────────────── */}
      <div className={styles.supportCard}>
        <div className={styles.supportHeader}>
          <div className={styles.supportIconCircle} aria-hidden="true">
            <Headphones size={20} className={styles.supportIcon} />
          </div>
          <div className={styles.supportTextCol}>
            <h4 className={styles.supportTitle}>Pertanyaan? Hubungi kami</h4>
            <p className={styles.supportSubtitle}>
              Tim kami siap membantu perjalananmu.
            </p>
          </div>
        </div>

        <a
          href={waUrl}
          target="_blank"
          rel="noopener noreferrer"
          className={styles.supportWaBtn}
          aria-label="Tanya informasi trip via WhatsApp"
        >
          {/* WhatsApp inline SVG icon */}
          <svg
            viewBox="0 0 24 24"
            width="18"
            height="18"
            fill="currentColor"
            aria-hidden="true"
          >
            <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-5.46-4.45-9.92-9.91-9.92zM12.04 20.16c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31c-.82-1.31-1.26-2.83-1.26-4.39 0-4.54 3.7-8.24 8.25-8.24 4.54 0 8.24 3.7 8.24 8.24 0 4.54-3.7 8.25-8.24 8.25z" />
          </svg>
          <span>Chat via WhatsApp</span>
          <ArrowRight size={15} />
        </a>
      </div>

      {/* ── 3. Responsible Travel Note ───────────────────────────── */}
      <div className={styles.ecoCard} aria-label="Komitmen Kelestarian Alam">
        <div className={styles.ecoIconCircle} aria-hidden="true">
          <Leaf size={18} className={styles.ecoIcon} />
        </div>
        <p className={styles.ecoText}>
          Setiap perjalanan adalah kesempatan untuk menjaga alam tetap lestari. 🌱{" "}
          <strong>Terima kasih</strong> telah menjadi bagian dari petualangan yang bertanggung jawab.
        </p>
      </div>
    </aside>
  );
}