"use client";

import { getStorageUrl } from "@/lib/utils";
import { FIXED_PACKAGES_LIST } from "@/lib/strings";
import {
  CalendarClock,
  CalendarDays,
  Car,
  Hotel,
  MapPin,
  Sparkles,
  Star,
  Tag,
  UtensilsCrossed,
} from "lucide-react";
import Link from "next/link";
import type { ApiFixPackage } from "@/core/api/services/fix-packages/fix-packages.types";

export interface FixedPackageCardProps {
  pkg: ApiFixPackage;
  /** Pre-computed discount percentage (0 if no discount) */
  discount: number;
  /** Location segments (parsed from location_detail) */
  locationSegments: string[];
  /** Duration label e.g. "5D/4N" */
  durationLabel: string;
}

/**
 * Single package card for the fixed packages grid. Reusable with pre-computed display data.
 */
export function FixedPackageCard({
  pkg,
  discount,
  locationSegments,
  durationLabel,
}: FixedPackageCardProps) {
  const priceToDisplay = pkg.discount_price ?? pkg.price;
  const services = pkg.other_services ?? [];
  const mid = Math.ceil(services.length / 2);
  const servicesLeft = services.slice(0, mid);
  const servicesRight = services.slice(mid);

  return (
    <Link href={`/fixed-packages/${pkg.id}`} className="group min-w-0">
      <div className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col h-full border border-gray-200 min-w-0">
        {/* Banner */}
        <div className="relative h-44 bg-gradient-to-br from-[#eaf1f9] to-blue-100 overflow-hidden flex-shrink-0">
          {pkg.banner_image ? (
            <img
              src={getStorageUrl(pkg.banner_image)}
              alt={pkg.name}
              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center">
              <Sparkles className="h-16 w-16 text-secondary-foreground/50" />
            </div>
          )}
          {pkg.status === "inactive" && (
            <span className="absolute top-2 right-2 text-[11px] font-semibold bg-red-500 text-white px-2 py-0.5 rounded">
              {FIXED_PACKAGES_LIST.INACTIVE}
            </span>
          )}
          {(discount > 0 || pkg.package_type === "premium") && (
            <div className="absolute bottom-2 left-2 right-2 flex flex-wrap items-center gap-2">
              {pkg.package_type === "premium" && (
                <span className="text-[11px] font-semibold bg-gradient-to-r frontend-btn text-white px-2 py-0.5 rounded shadow">
                  {FIXED_PACKAGES_LIST.PREMIUM}
                </span>
              )}
              {discount > 0 && (
                <span className="text-[11px] font-bold bg-[#68b90a] text-white px-2 py-0.5 rounded">
                  {discount}
                  {FIXED_PACKAGES_LIST.PERCENT_OFF}
                </span>
              )}
            </div>
          )}
        </div>

        {/* Body */}
        <div className="flex flex-col flex-1 p-4 min-w-0 overflow-hidden">
          <div className="flex items-start justify-between gap-2 mb-2 min-w-0">
            <h3 className="font-bold text-[20px] leading-snug text-dark transition-colors line-clamp-2 flex-1 min-w-0">
              {pkg.name}
            </h3>
            <span className="flex-shrink-0 text-[11px] font-semibold rounded px-1.5 py-0.5 frontend-btn text-white whitespace-nowrap mt-0.5">
              {durationLabel}
            </span>
          </div>

          {locationSegments.length > 0 && (
            <div className="flex items-start gap-1.5 mb-2 min-w-0">
              <MapPin className="h-3.5 w-3.5 flex-shrink-0 mt-[3px] text-secondary-foreground" />
              <p className="text-xs text-gray-600 leading-relaxed line-clamp-2 min-w-0">
                {locationSegments.map((seg, i) => (
                  <span key={i}>
                    {i > 0 && <span className="mx-1 text-gray-400">•</span>}
                    {seg}
                  </span>
                ))}
              </p>
            </div>
          )}

          <div className="flex items-center gap-1.5 mb-2">
            <CalendarDays className="h-3.5 w-3.5 flex-shrink-0 text-secondary-foreground" />
            <span className="text-xs text-gray-600">
              {pkg.total_days}{" "}
              {pkg.total_days > 1
                ? FIXED_PACKAGES_LIST.DAYS
                : FIXED_PACKAGES_LIST.DAY}
              {Math.max(0, pkg.total_days - 1) > 0
                ? ` / ${Math.max(0, pkg.total_days - 1)} ${Math.max(0, pkg.total_days - 1) > 1 ? FIXED_PACKAGES_LIST.NIGHTS : FIXED_PACKAGES_LIST.NIGHT}`
                : ""}
            </span>
          </div>

          {pkg.end_date && (
            <div className="flex items-center gap-1.5 mb-2">
              <CalendarClock className="h-3.5 w-3.5 flex-shrink-0 text-secondary-foreground" />
              <span className="text-xs text-gray-600">
                {FIXED_PACKAGES_LIST.ENDS}{" "}
                {new Date(pkg.end_date).toLocaleDateString("en-IN", {
                  day: "numeric",
                  month: "short",
                  year: "numeric",
                })}
              </span>
            </div>
          )}

          {services.length > 0 && (
            <>
              <div className="border-t border-gray-100 my-2" />
              <div className="grid grid-cols-2 gap-x-3 gap-y-0.5 mb-2">
                {servicesLeft.map((svc, i) => (
                  <div key={`l${i}`} className="flex items-start gap-1 min-w-0">
                    <Star className="h-3 w-3 flex-shrink-0 mt-[3px] text-secondary-foreground fill-current" />
                    <span className="text-xs text-gray-700 truncate">
                      {svc}
                    </span>
                  </div>
                ))}
                {servicesRight.map((svc, i) => (
                  <div key={`r${i}`} className="flex items-start gap-1 min-w-0">
                    <Star className="h-3 w-3 flex-shrink-0 mt-[3px] text-secondary-foreground fill-current" />
                    <span className="text-xs text-gray-700 truncate">
                      {svc}
                    </span>
                  </div>
                ))}
              </div>
            </>
          )}

          <div className="border-gray-100 space-y-2">
            {(pkg.vehicles?.length ?? 0) > 0 && (
              <div className="flex items-start gap-2 min-w-0">
                <Car className="h-4 w-4 flex-shrink-0 mt-0.5 text-secondary-foreground" />
                <div className="min-w-0 flex-1">
                  <p className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-0.5">
                    {FIXED_PACKAGES_LIST.VEHICLES}
                  </p>
                  <p className="text-xs text-gray-700 leading-snug">
                    {pkg
                      .vehicles!.map((v) =>
                        v.vehicle_type
                          ? `${v.name} (${v.vehicle_type})`
                          : v.name
                      )
                      .join(", ")}
                  </p>
                </div>
              </div>
            )}

            {(pkg.hotels?.length ?? 0) > 0 && (
              <div className="flex items-start gap-2 min-w-0">
                <Hotel className="h-4 w-4 flex-shrink-0 mt-0.5 text-secondary-foreground" />
                <div className="min-w-0 flex-1">
                  <p className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-0.5">
                    {FIXED_PACKAGES_LIST.HOTELS}
                  </p>
                  <p className="text-xs text-gray-700 leading-snug">
                    {pkg
                      .hotels!.map((h) =>
                        h.hotel_type ? `${h.name} (${h.hotel_type})` : h.name
                      )
                      .join(", ")}
                  </p>
                </div>
              </div>
            )}

            <div className="flex items-start gap-2 min-w-0">
              <UtensilsCrossed className="h-4 w-4 flex-shrink-0 mt-0.5 text-secondary-foreground" />
              <div className="min-w-0 flex-1">
                <p className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-0.5">
                  {FIXED_PACKAGES_LIST.MEALS}
                </p>
                <p className="text-xs text-gray-700 leading-snug">
                  {FIXED_PACKAGES_LIST.MEALS_AS_PER_ITINERARY}
                </p>
              </div>
            </div>

            {(pkg.tag_names?.length ?? 0) > 0 && (
              <div className="flex items-start gap-2 min-w-0">
                <Tag className="h-4 w-4 flex-shrink-0 mt-0.5 text-secondary-foreground" />
                <div className="min-w-0 flex-1">
                  <p className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-1">
                    {FIXED_PACKAGES_LIST.TAGS}
                  </p>
                  <div className="flex flex-wrap gap-1">
                    {pkg.tag_names!.map((tag, i) => (
                      <span
                        key={i}
                        className="text-[11px] font-medium px-2 py-0.5 rounded-full border border-[#aaa]/30 bg-[#aaa]/5 text-gray-600"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Price Footer */}
        <div className="mx-4 mb-4 bg-[#eaf1f9] border border-gray-200 rounded-lg px-3 py-2.5 flex items-center justify-between gap-2 flex-shrink-0">
          <div className="text-xs text-gray-500 leading-snug min-w-0">
            {discount > 0 ? (
              <>
                <span className="text-gray-400 line-through block">
                  ₹{pkg.price.toLocaleString("en-IN")}
                </span>
                <span className="font-semibold text-[#68b90a] truncate block">
                  {FIXED_PACKAGES_LIST.SAVE}
                  {(pkg.price - priceToDisplay).toLocaleString("en-IN")}
                </span>
              </>
            ) : (
              <span>{FIXED_PACKAGES_LIST.BEST_PRICE_GUARANTEED}</span>
            )}
          </div>
          <div className="text-right flex-shrink-0">
            <div
              className="font-bold text-lg leading-none"
              style={{ color: "#023047" }}
            >
              ₹{priceToDisplay.toLocaleString("en-IN")}
            </div>
            <div className="text-[11px] text-gray-500 mt-0.5">
              {FIXED_PACKAGES_LIST.PER_PERSON}
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}