/* SER-OS — Package Selection screen */

function PackageScreen({
  caseDetails, workspace = "serenity",
  serviceData,
  viewBrand, setViewBrand, venueFilter, setVenueFilter,
  selectedPackage, onSelect,
  comparePkgs, toggleCompare, isComparing, setComparing,
  detailsModal, setDetailsModal,
  onBack, onStartOver, onEditCase, onContinue, onJumpTo,
  selectedCasket, selectedAddOns, addOnTotal, addOnCount,
  confirmationStatus, onSendForConfirmation, onViewPdf, onResend, onEditArrangement,
  amendmentSnapshot, onEnterEditMode, onFinalizeAmendment, onDiscardAmendment, onSendToCustomer,
  onSimulateSign, onSendSignedForm,
  notes, setNotes,
  appliedCoupon = null, onApplyCoupon, onRemoveCoupon,
}) {
  // Workspace is the source of truth for brand filtering.
  const activeBrand = workspace;

  let pkgs = PACKAGES.filter((p) => {
    if (activeBrand === "serenity") {
      if (!(p.religion === "christian" || p.religion === "all")) return false;
    } else if (activeBrand === "fountains") {
      if (!(p.religion === "buddhist" || p.religion === "taoist" || p.religion === "all")) return false;
    }
    if (venueFilter !== "all") {
      if (venueFilter === "hdb"    && !(p.venue === "hdb"    || p.venue === "all")) return false;
      if (venueFilter === "others" && !(p.venue === "others" || p.venue === "all")) return false;
    }
    return true;
  });

  return (
    <div style={{ display: "flex", alignItems: "stretch", minHeight: "calc(100vh - 84px)" }}>
      <main style={{ flex: 1, padding: "24px 40px 64px", background: "#FAFAFA", overflowY: "auto" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", flexDirection: "column", gap: 20 }}>
          {confirmationStatus !== "amendment_draft" && (
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <button onClick={onBack} style={{
                background: "transparent", border: "none", padding: 0, cursor: "pointer",
                fontFamily: "inherit", fontSize: 13, color: "#6B7A8F",
                display: "inline-flex", alignItems: "center", gap: 6,
              }}>
                <SerIcons.ArrowLeft size={18} />Back to My Cases
              </button>
              <button onClick={onStartOver} style={{
                background: "transparent", border: "none", cursor: "pointer",
                fontFamily: "inherit", fontSize: 13, color: "#A85C57", fontWeight: 500,
                padding: "8px 12px", borderRadius: 8,
                display: "inline-flex", alignItems: "center", gap: 6,
              }}>
                <SerIcons.RotateCcw size={16} />Start Over
              </button>
            </div>
          )}

          {/* Confirmation / amendment status banners */}
          {(confirmationStatus === "confirmed" || confirmationStatus === "confirmed_updated") && (
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
              padding: "12px 16px", borderRadius: 10, background: "#EAF2E3", border: "1px solid #C4D9B8",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <SerIcons.CheckCircle size={18} color="#5B7D4F" />
                <span style={{ fontSize: 14, fontWeight: 500, color: "#5B7D4F", letterSpacing: "-0.15px" }}>
                  {confirmationStatus === "confirmed_updated"
                    ? "Confirmed (Updated) — this arrangement has been re-confirmed."
                    : "Confirmed — this arrangement has been signed by the customer."}
                </span>
              </div>
              {onEnterEditMode && (
                <Button variant="outline" size="sm" icon={<SerIcons.Edit size={16} />} onClick={onEnterEditMode}
                  style={{ flexShrink: 0, borderColor: "#9CAE82", color: "#5B7D4F" }}>
                  Enter Edit Mode
                </Button>
              )}
            </div>
          )}
          {confirmationStatus === "amendment_draft" && (
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "12px 16px", borderRadius: 10, background: "#E8EDF5", border: "1px solid #B8C8E0",
            }}>
              <SerIcons.Edit size={16} color="#2D4E7D" />
              <span style={{ fontSize: 14, fontWeight: 500, color: "#2D4E7D", letterSpacing: "-0.15px" }}>
                Amendment Draft — changes to package will be included in the updated arrangement.
              </span>
            </div>
          )}
          {(confirmationStatus === "awaiting" || confirmationStatus === "amended_awaiting") && (
            <div style={{
              padding: "12px 16px", borderRadius: 10, background: "#FDF4E3", border: "1px solid #E8C98A",
              display: "flex", alignItems: "center", gap: 10,
            }}>
              <SerIcons.Clock size={18} color="#9A6B1F" />
              <span style={{ fontSize: 14, fontWeight: 500, color: "#9A6B1F", letterSpacing: "-0.15px" }}>
                Awaiting customer confirmation — the arrangement has been sent for signing.
              </span>
            </div>
          )}

          <header>
            <h1 style={{ font: "500 24px/32px Inter", letterSpacing: "0.07px", color: "#1F3A60", margin: 0 }}>Select a Package</h1>
            <p style={{ fontSize: 14, color: "#6B7A8F", letterSpacing: "-0.15px", margin: "4px 0 0" }}>
              Choose a base package that best suits your needs. All prices are subject to prevailing GST.
            </p>
          </header>

          {/* Filter row */}
          {!isComparing && (
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              background: "#FFFFFF", border: "1px solid #E5E7EB", borderRadius: 12,
              padding: "12px 16px",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontSize: 13, color: "#6B7A8F" }}>Showing:</span>
                  <span style={{ fontSize: 14, fontWeight: 500, color: "#1F3A60", letterSpacing: "-0.15px" }}>
                    Eligible Packages
                  </span>
                </div>
                <div style={{ width: 1, height: 24, background: "#E5E7EB" }} />
                <div style={{ display: "flex", gap: 8 }}>
                  <FilterChip label="HDB Only"    active={venueFilter === "hdb"}    onClick={() => setVenueFilter(venueFilter === "hdb"    ? "all" : "hdb")} />
                  <FilterChip label="Others Only" active={venueFilter === "others"} onClick={() => setVenueFilter(venueFilter === "others" ? "all" : "others")} />
                </div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <span style={{ fontSize: 13, color: "#6B7A8F" }}>
                  {pkgs.length} {pkgs.length === 1 ? "package" : "packages"}
                </span>
                {comparePkgs.length >= 2 && (
                  <Button variant="primary-navy" size="sm" icon={<SerIcons.Compare size={18} />} onClick={() => setComparing(true)}>
                    Compare ({comparePkgs.length})
                  </Button>
                )}
              </div>
            </div>
          )}

          {/* Compare mode */}
          {isComparing ? (
            <CompareView pkgs={comparePkgs} onExit={() => setComparing(false)} onSelect={(p) => { onSelect(p); setComparing(false); }} />
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 16 }}>
              {pkgs.map((p) => (
                <PackageCard
                  key={p.id} pkg={p}
                  selected={selectedPackage && selectedPackage.id === p.id}
                  compareChecked={!!comparePkgs.find((c) => c.id === p.id)}
                  compareDisabled={comparePkgs.length >= 3 && !comparePkgs.find((c) => c.id === p.id)}
                  onSelect={() => onSelect(p)}
                  onToggleCompare={() => toggleCompare(p)}
                  onOpenDetails={() => setDetailsModal(p)}
                />
              ))}
            </div>
          )}
        </div>
      </main>

      <OrderSummarySidebar
        caseDetails={caseDetails} caseBrand={activeBrand}
        serviceData={serviceData}
        selectedPackage={selectedPackage} selectedCasket={selectedCasket}
        selectedAddOns={selectedAddOns}
        addOnTotal={addOnTotal} addOnCount={addOnCount}
        onEditCase={onEditCase} onJumpTo={onJumpTo}
        onContinue={onContinue}
        continueLabel="Continue to Casket"
        continueDisabled={!selectedPackage}
        activeStep="package"
        confirmationStatus={confirmationStatus}
        onSendForConfirmation={onSendForConfirmation}
        onViewPdf={onViewPdf}
        onResend={onResend}
        onEditArrangement={onEditArrangement}
        amendmentSnapshot={amendmentSnapshot}
        onEnterEditMode={onEnterEditMode}
        onFinalizeAmendment={onFinalizeAmendment}
        onDiscardAmendment={onDiscardAmendment}
        onSendToCustomer={onSendToCustomer}
        onSimulateSign={onSimulateSign}
        onSendSignedForm={onSendSignedForm}
        appliedCoupon={appliedCoupon}
        notes={notes}
        setNotes={setNotes}
        onApplyCoupon={onApplyCoupon}
        onRemoveCoupon={onRemoveCoupon}
      />

      {/* Package details modal */}
      {detailsModal && (
        <PackageDetailsModal pkg={detailsModal} onClose={() => setDetailsModal(null)} onSelect={() => { onSelect(detailsModal); setDetailsModal(null); }} />
      )}
    </div>
  );
}

function FilterChip({ label, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      height: 32, padding: "0 14px", borderRadius: 8,
      background: active ? "#1F3A60" : "#EFE7D4",
      color: active ? "#FFFFFF" : "#1F3A60",
      border: "none", fontFamily: "inherit", fontSize: 13, fontWeight: 500,
      cursor: "pointer",
    }}>{label}</button>
  );
}

function PackageCard({ pkg, selected, compareChecked, compareDisabled, onSelect, onToggleCompare, onOpenDetails }) {
  return (
    <div
      onClick={onSelect}
      style={{
        background: "#FFFFFF", borderRadius: 12, overflow: "hidden",
        border: `1px solid ${selected ? "#574F40" : "#E5E7EB"}`,
        boxShadow: selected ? "0 4px 6px -4px rgba(0,0,0,0.10), 0 10px 15px -3px rgba(0,0,0,0.10)" : "none",
        cursor: "pointer", display: "flex", flexDirection: "column",
        transition: "border-color 150ms, box-shadow 150ms",
      }}
    >
      <div style={{
        position: "relative", aspectRatio: "4/3", overflow: "hidden",
        background: pkg.image
          ? `url(${pkg.image}) center / cover no-repeat`
          : "linear-gradient(180deg, #F0EDE6 0%, #E5E2D9 100%)",
      }}>
        {selected && (
          <div style={{
            position: "absolute", left: 12, top: 12, width: 28, height: 28,
            borderRadius: "50%", background: "#574F40", color: "#FFFFFF",
            display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 4px 6px -4px rgba(0,0,0,0.10)",
          }}>
            <SerIcons.Check size={14} />
          </div>
        )}
        <button
          onClick={(e) => { e.stopPropagation(); !compareDisabled && onToggleCompare(); }}
          disabled={compareDisabled}
          style={{
            position: "absolute", right: 12, top: 12, width: 40, height: 40,
            borderRadius: 10,
            background: compareChecked ? "#574F40" : "rgba(255,255,255,0.92)",
            color: compareChecked ? "#FFFFFF" : "#1F3A60",
            border: "none", cursor: compareDisabled ? "not-allowed" : "pointer",
            display: "flex", alignItems: "center", justifyContent: "center",
            opacity: compareDisabled ? 0.45 : 1,
          }}
        >
          {compareChecked ? <SerIcons.Check size={20} /> : <SerIcons.Compare size={20} />}
        </button>
        <div style={{ position: "absolute", left: 10, bottom: 10, display: "flex", gap: 6 }}>
          <Tag variant="light">{pkg.category}</Tag>
          {pkg.venueLabel && (
            <span style={{
              padding: "0 8px", height: 24, lineHeight: "24px",
              borderRadius: 4, background: "rgba(31,58,96,0.92)", color: "#FFFFFF",
              fontSize: 12, fontWeight: 500,
            }}>{pkg.venueLabel}</span>
          )}
        </div>
      </div>
      <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
        <button
          onClick={(e) => { e.stopPropagation(); onOpenDetails(); }}
          style={{
            all: "unset", cursor: "pointer", fontSize: 18, fontWeight: 500,
            color: "#1F3A60", letterSpacing: "-0.439px",
          }}
        >{pkg.name}</button>
        <p style={{
          margin: 0, fontSize: 12, color: "#6B7A8F", letterSpacing: "-0.15px",
          minHeight: 32,
          display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
        }}>{pkg.blurb}</p>
        <div style={{ paddingTop: 10, borderTop: "1px solid #F0F1F4" }}>
          <div style={{ fontSize: 22, fontWeight: 500, color: "#1F3A60", letterSpacing: "-0.449px", fontFeatureSettings: "'tnum'" }}>
            {formatPrice(pkg.price)}
          </div>
          <div style={{ fontSize: 12, color: "#6B7A8F" }}>Base package price</div>
        </div>
        <button
          onClick={(e) => { e.stopPropagation(); onOpenDetails(); }}
          style={{
            all: "unset", cursor: "pointer", fontSize: 12, color: "#1F3A60",
            fontWeight: 500, marginTop: 2,
          }}
        >View full inclusions →</button>
      </div>
    </div>
  );
}

function PackageDetailsModal({ pkg, onClose, onSelect }) {
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(15,23,42,0.45)",
      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 200, padding: 24,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "100%", maxWidth: 880, maxHeight: "92vh", background: "#FFFFFF",
        borderRadius: 12, overflow: "hidden", display: "flex", flexDirection: "column",
        boxShadow: "0 20px 25px -5px rgba(0,0,0,0.10)",
      }}>
        <div style={{ padding: "24px 28px", borderBottom: "1px solid #E5E7EB", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <h2 style={{ font: "500 22px/30px Inter", letterSpacing: "-0.449px", color: "#1F3A60", margin: 0 }}>{pkg.name}</h2>
            <p style={{ fontSize: 14, color: "#6B7A8F", letterSpacing: "-0.15px", margin: "4px 0 0" }}>{pkg.blurb}</p>
          </div>
          <button onClick={onClose} style={{
            background: "transparent", border: "none", padding: 6, borderRadius: 6,
            cursor: "pointer", color: "#6B7A8F",
          }}><SerIcons.Close size={24} /></button>
        </div>
        <div style={{ overflowY: "auto", padding: "20px 28px", flex: 1 }}>
          <div style={{ background: "#EFE7D4", borderRadius: 8, padding: "16px 20px", marginBottom: 20 }}>
            <div style={{ fontSize: 28, fontWeight: 500, color: "#1F3A60", letterSpacing: "-0.449px", fontFeatureSettings: "'tnum'" }}>
              {formatPrice(pkg.price)}
            </div>
            <div style={{ fontSize: 13, color: "#6B7A8F", marginTop: 6 }}>Base package price (before GST)</div>
          </div>
          {pkg.sections.map((sec, idx) => (
            <div key={idx} style={{ marginBottom: 24 }}>
              <h3 style={{ font: "500 16px/22px Inter", letterSpacing: "-0.313px", color: "#1F3A60", margin: 0, paddingBottom: 8, borderBottom: "1px solid #E5E7EB" }}>
                {sec.name}
              </h3>
              <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {sec.items.map((it, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "#1F3A60", letterSpacing: "-0.15px" }}>
                    <span style={{ color: "#1F3A60", marginTop: 2, flexShrink: 0 }}><SerIcons.Check size={14} /></span>
                    {it}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ padding: "16px 28px", borderTop: "1px solid #E5E7EB", display: "flex", gap: 12, justifyContent: "flex-end" }}>
          <Button variant="secondary" size="md" onClick={onClose}>Close</Button>
          <Button variant="primary-navy" size="md" iconRight={<SerIcons.Check size={16} />} onClick={onSelect}>
            Select This Package
          </Button>
        </div>
      </div>
    </div>
  );
}

function CompareView({ pkgs, onExit, onSelect }) {
  const allSections = new Set();
  pkgs.forEach((p) => p.sections.forEach((s) => allSections.add(s.name)));
  const sectionList = Array.from(allSections);
  const cols = pkgs.length;
  const gridTemplate = `1fr ${"1.4fr ".repeat(cols).trim()}`;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <h2 style={{ font: "500 20px/28px Inter", letterSpacing: "-0.449px", color: "#1F3A60", margin: 0 }}>Compare Packages</h2>
          <p style={{ fontSize: 14, color: "#6B7A8F", margin: "4px 0 0", letterSpacing: "-0.15px" }}>Comparing {pkgs.length} packages</p>
        </div>
        <Button variant="secondary" size="sm" icon={<SerIcons.Close size={16} />} onClick={onExit}>Exit Comparison</Button>
      </div>

      {/* Header row of cards — full-width grid (no Category placeholder column).
          The spec table below still has its left Category column for context. */}
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gap: 16 }}>
        {pkgs.map((p) => (
          <div key={p.id} style={{ background: "#FFFFFF", border: "1px solid #E5E7EB", borderRadius: 12, padding: 16 }}>
            <div style={{
              aspectRatio: "4/3", borderRadius: 8, marginBottom: 12,
              background: p.image
                ? `url(${p.image}) center / cover no-repeat`
                : "linear-gradient(180deg, #F0EDE6 0%, #E5E2D9 100%)",
            }} />
            <div style={{ fontSize: 15, fontWeight: 500, color: "#1F3A60", letterSpacing: "-0.313px" }}>{p.name}</div>
            <div style={{ fontSize: 22, fontWeight: 500, color: "#1F3A60", letterSpacing: "-0.449px", fontFeatureSettings: "'tnum'", margin: "6px 0 10px" }}>
              {formatPrice(p.price)}
            </div>
            <Button variant="primary-navy" size="sm" style={{ width: "100%" }} iconRight={<SerIcons.Check size={14} />} onClick={() => onSelect(p)}>
              Select
            </Button>
          </div>
        ))}
      </div>

      {/* Comparison table */}
      <div style={{ background: "#FFFFFF", border: "1px solid #E5E7EB", borderRadius: 12, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: gridTemplate, borderBottom: "1px solid #E5E7EB", background: "#FAFAFA" }}>
          <div style={{ padding: 14, fontSize: 12, fontWeight: 500, color: "#6B7A8F", textTransform: "uppercase", letterSpacing: "0.04em" }}>Category</div>
          {pkgs.map((p) => (
            <div key={p.id} style={{ padding: 14, borderLeft: "1px solid #E5E7EB", fontSize: 13, fontWeight: 500, color: "#1F3A60" }}>{p.name}</div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: gridTemplate, borderBottom: "1px solid #E5E7EB" }}>
          <div style={{ padding: 14, fontSize: 13, color: "#574F40", fontWeight: 500 }}>Venue</div>
          {pkgs.map((p) => (
            <div key={p.id} style={{ padding: 14, borderLeft: "1px solid #E5E7EB", fontSize: 13, color: "#1F3A60" }}>
              {p.venueLabel || "All Venues"}
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: gridTemplate, borderBottom: "1px solid #E5E7EB", background: "#EFE7D4" }}>
          <div style={{ padding: 14, fontSize: 13, color: "#574F40", fontWeight: 500 }}>Base Price</div>
          {pkgs.map((p) => (
            <div key={p.id} style={{ padding: 14, borderLeft: "1px solid #E5E7EB", fontSize: 15, fontWeight: 500, color: "#1F3A60", fontFeatureSettings: "'tnum'" }}>
              {formatPrice(p.price)}
            </div>
          ))}
        </div>

        {sectionList.map((sName, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: gridTemplate, borderBottom: i < sectionList.length - 1 ? "1px solid #E5E7EB" : "none" }}>
            <div style={{ padding: 14, fontSize: 13, color: "#574F40", fontWeight: 500 }}>{sName}</div>
            {pkgs.map((p) => {
              const sec = p.sections.find((s) => s.name === sName);
              return (
                <div key={p.id} style={{ padding: 14, borderLeft: "1px solid #E5E7EB" }}>
                  {sec ? (
                    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                      {sec.items.map((it, j) => (
                        <li key={j} style={{ fontSize: 12, color: "#574F40", display: "flex", gap: 6, alignItems: "flex-start" }}>
                          <span style={{ color: "#1F3A60", marginTop: 2, flexShrink: 0 }}><SerIcons.Check size={12} /></span>
                          {it}
                        </li>
                      ))}
                    </ul>
                  ) : <span style={{ fontSize: 12, color: "#9CA8B8", fontStyle: "italic" }}>Not included</span>}
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { PackageScreen, PackageCard, PackageDetailsModal, CompareView });