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

// LessonUpsellModal — shown when a learner clicks a locked standalone Lesson.
// Mirrors UnitUpsellModal.jsx: unlocks via any course reachable through its
// attached Units (aggregated across all of them, since a Lesson can sit in
// more than one), plus a generic "View Plans" fallback.
// Shared by LessonsList and Dashboard.

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

export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap = {} }) {
  const navigate = useNavigate();
  const courses = lesson?.courses ?? [];

  const slug = cheapestTierSlug([lesson?.subscription, ...courses.map((c) => c.subscription)], tierMap);
  const { rank, label, cls, panel } = resolveTierBadge(slug, tierMap);

  return (
    <ResponsiveModal
      open={open}
      onOpenChange={onOpenChange}
      title={lesson?.title ?? "Lesson Details"}
      description="Upgrade your plan to access this lesson."
      footer={
        <>
          <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
          <Button onClick={() => { onOpenChange(false); navigate("/plans"); }}>
            <LockIcon /> View Plans
          </Button>
        </>
      }
    >
      <div className="space-y-6 py-2">
        {rank > 0 && (
          <div className={`p-5 rounded-2xl border ${panel.bg} ${panel.border}`}>
            <div className="flex items-center gap-3 mb-3">
              <Badge className={cls}>
                <LockIcon className="size-3" /> {label}
              </Badge>
            </div>
            <ul className="space-y-2 text-sm [&_svg]:size-4 mb-4">
              <li className="flex items-center gap-2"><Check /> Access to {label} content</li>
              <li className="flex items-center gap-2"><Check /> Certificates & achievements</li>
            </ul>
            <p className="text-sm text-muted-foreground">
              Upgrade to a <span className="font-medium">{label}</span> plan to unlock this lesson.
            </p>
          </div>
        )}
      </div>
    </ResponsiveModal>
  );
}