/* SER-OS — Right-rail Arrangement Summary */

function OrderSummary({ caseDetails, lineItems, total, onContinue }) {
  return (
    <aside style={{
      width: 384, flexShrink: 0, background: "#FFFFFF",
      borderLeft: "1px solid var(--border-subtle)",
      padding: 24, display: "flex", flexDirection: "column", gap: 24,
      alignSelf: "stretch",
    }}>
      {/* Header */}
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <h2 style={{ font: "500 20px/28px Inter, sans-serif", letterSpacing: "-0.449px", color: "var(--fg-primary)", margin: 0 }}>
          Arrangement Summary
        </h2>
        <span style={{ fontSize: 14, color: "var(--fg-secondary)", letterSpacing: "-0.15px", fontFeatureSettings: "'tnum'" }}>
          {caseDetails.quotationId}
        </span>
      </div>

      {/* Case Details panel */}
      <section style={{ border: "1px solid var(--border-subtle)", borderRadius: 8, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 16px 12px" }}>
          <h3 style={{ font: "500 18px/27px Inter", letterSpacing: "-0.439px", color: "var(--fg-primary)", margin: 0 }}>
            Case Details
          </h3>
          <EditPill />
        </div>
        <div style={{ padding: "0 16px 16px", display: "flex", flexDirection: "column", gap: 6 }}>
          <Detail label="Contact"  value={caseDetails.contact} />
          <Detail label="Deceased" value={caseDetails.deceased} />
          <Detail label="Religion" value={caseDetails.religion} />
        </div>
      </section>

      {/* Order Summary list */}
      <section style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <h3 style={{ font: "500 18px/27px Inter", letterSpacing: "-0.439px", color: "var(--fg-primary)", margin: 0 }}>
          Order Summary
        </h3>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {lineItems.map((item, i) => (
            <SummaryLineItem key={i} item={item} />
          ))}
        </div>
      </section>

      {/* Notes */}
      <section style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <SerIcons.Notes size={16} color="#6B7A8F" />
          <h3 style={{ font: "500 18px/27px Inter", letterSpacing: "-0.439px", color: "var(--fg-primary)", margin: 0 }}>
            Notes
          </h3>
        </div>
        <Textarea placeholder="Add arrangement notes..." rows={3} />
      </section>

      <div style={{ flex: 1 }} />

      {/* Total + Continue */}
      <section style={{
        border: "1px solid var(--border-subtle)", borderRadius: 8, padding: "20px",
        display: "flex", flexDirection: "column", gap: 16,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <span style={{ fontSize: 16, fontWeight: 500, color: "var(--fg-primary)", letterSpacing: "-0.313px" }}>Total</span>
          <span style={{ fontSize: 24, lineHeight: "32px", fontWeight: 500, color: "var(--fg-primary)", letterSpacing: "0.07px", fontFeatureSettings: "'tnum'" }}>
            {total}
          </span>
        </div>
        <Button
          variant="primary-navy" size="lg"
          iconRight={<SerIcons.Arrow size={18} />}
          onClick={onContinue}
          style={{ width: "100%" }}
        >
          Continue
        </Button>
      </section>
    </aside>
  );
}

function Detail({ label, value }) {
  return (
    <div style={{ fontSize: 14, color: "var(--fg-secondary)", letterSpacing: "-0.15px" }}>
      <span style={{ color: "var(--fg-secondary)" }}>{label}: </span>{value}
    </div>
  );
}

function SummaryLineItem({ item }) {
  const isActive = !item.empty;
  return (
    <div style={{
      padding: 12, borderRadius: 8,
      background: isActive ? "#EFE7D4" : "transparent",
      border: isActive ? "none" : "1px solid var(--slate-150)",
      display: "flex", flexDirection: "column", gap: 6,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 15, fontWeight: 500, color: "var(--fg-primary)", letterSpacing: "-0.313px" }}>
          {item.label}
        </span>
        <span style={{
          fontSize: 15, fontWeight: 500, letterSpacing: "-0.313px",
          color: item.empty ? "#9CA8B8" : "#1F3A60", fontFeatureSettings: "'tnum'",
        }}>{item.price}</span>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", minHeight: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ fontSize: 12, color: "var(--fg-secondary)" }}>{item.meta || "No item"}</span>
          {item.tag && <Tag variant="light">{item.tag}</Tag>}
        </div>
        <EditPill />
      </div>
    </div>
  );
}

Object.assign(window, { OrderSummary });