starr-philproperties/src/modules/client/components/UnitUpsellModal.jsx

// UnitUpsellModal — shown when a learner clicks a locked standalone Unit.
// Unlocks two ways: the unit's own subscription tier (with an optional direct
// "Buy" listing, same PayPal flow as Courses) and/or any course it's attached
// to (a unit may sit under several courses at different tiers — no single
// "Buy" in that case, just links to view/buy the course itself).
// Shared by UnitsList, UnitDetails, and Dashboard.

import { useNavigate } from "react-router-dom";
import { LockIcon, BookOpen, ShoppingCart } from "lucide-react";
import ResponsiveModal from "@/components/generic/ResponsiveModal";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useDateFormat } from "@/hooks/useDateFormat";
import { resolveTierBadge } from "@/utils/tierBadge.util";

export default function UnitUpsellModal({ open, onOpenChange, unit, tierMap = {} }) {
  const navigate = useNavigate();
  const { fmtCurrency } = useDateFormat();
  const courses = unit?.courses ?? [];
  const ownTier = unit?.subscription ? resolveTierBadge(unit.subscription, tierMap) : null;
  const canBuy = unit?.product?.is_active && !unit?.has_purchased;

  return (
    <ResponsiveModal
      open={open}
      onOpenChange={onOpenChange}
      title={unit?.title ?? "Unit Details"}
      description={
        ownTier
          ? "This unit requires a plan upgrade or individual purchase."
          : "This unit is part of one or more courses that require a plan upgrade."
      }
      footer={
        <>
          <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
          {canBuy && (
            <Button onClick={() => { onOpenChange(false); navigate(`/units/${unit.uuid}/checkout`); }}>
              <ShoppingCart /> Buy {fmtCurrency(unit.product.price ?? 0, unit.product.currency ?? "USD")}
            </Button>
          )}
          <Button variant={canBuy ? "outline" : "default"} onClick={() => { onOpenChange(false); navigate("/plans"); }}>
            <LockIcon /> View Plans
          </Button>
        </>
      }
    >
      <div className="space-y-3 py-2">
        {ownTier && (
          <div className="flex items-center justify-between gap-3 p-4 rounded-xl border bg-muted/40">
            <div className="flex items-center gap-2.5 min-w-0">
              <LockIcon className="size-4 text-muted-foreground shrink-0" />
              <div className="min-w-0">
                <p className="text-sm font-medium">Requires</p>
                <Badge className={`${ownTier.cls} mt-1`}>{ownTier.label}</Badge>
              </div>
            </div>
          </div>
        )}

        {courses.length === 0 && !ownTier ? (
          <p className="text-sm text-muted-foreground">
            Upgrade your plan to access this content.
          </p>
        ) : (
          courses.map((course) => {
            const { label, cls } = resolveTierBadge(course.subscription, tierMap);
            return (
              <div
                key={course.course_id}
                className="flex items-center justify-between gap-3 p-4 rounded-xl border bg-muted/40"
              >
                <div className="flex items-center gap-2.5 min-w-0">
                  <BookOpen className="size-4 text-muted-foreground shrink-0" />
                  <div className="min-w-0">
                    <p className="text-sm font-medium truncate">{course.title}</p>
                    <Badge className={`${cls} mt-1`}>
                      <LockIcon className="size-3" /> {label}
                    </Badge>
                  </div>
                </div>
                <Button
                  size="sm"
                  variant="outline"
                  className="shrink-0"
                  onClick={() => { onOpenChange(false); navigate(`/course/${course.course_id}`); }}
                >
                  View Course
                </Button>
              </div>
            );
          })
        )}
      </div>
    </ResponsiveModal>
  );
}