import type { ReimbursementEvidenceCapabilities } from "./ReimbursementItemEvidenceList";
import { ReimbursementItemEvidenceList } from "./ReimbursementItemEvidenceList";
import type { ReimbursementWorkspaceModel, ReimbursementWorkspaceSlots } from "../../lib/reimbursementWorkspace";
import { formatDisplayDate, formatMoney } from "../../lib/displayFormat";
import { BusinessDetailAside, BusinessDetailMain, BusinessDetailWorkspace } from "../patterns/BusinessDetailTemplate";
import { EntityOverviewHero } from "../patterns/EntityOverviewHero";
import { PageScaffold } from "../patterns/PageScaffold";
import { SectionPanel } from "../patterns/SectionPanel";

type Props = {
  model: ReimbursementWorkspaceModel;
  capabilities?: ReimbursementEvidenceCapabilities;
  slots: ReimbursementWorkspaceSlots;
};

export function ReimbursementDesktopWorkspaceShell({ model, capabilities, slots }: Props) {
  return (
    <PageScaffold data-testid="reimbursement-desktop-workspace">
      {slots.backAction}
      <EntityOverviewHero
        title={`报销单 ${model.header.displayCode}`}
        subtitle={model.header.description || "未填写事由"}
        meta={(
          <>
            {slots.status}
            <span className="info-chip">报销人：{model.header.ownerName}</span>
            <span className="info-chip">日期：{formatDisplayDate(model.header.reimbursementDate)}</span>
            <span className="info-chip">合计：{formatMoney(model.amountSummary.authoritativeTotalAmount)}</span>
          </>
        )}
      />
      {slots.transientFeedback}
      <BusinessDetailWorkspace className="detail-workspace-grid--payment mx-auto w-full max-w-7xl">
        <BusinessDetailMain>
          {slots.headerDetails}
          {slots.beforeEvidence}
          <SectionPanel title="报销内容" className="scroll-mt-24">
            <div id="reimbursement-workspace-evidence">
              <ReimbursementItemEvidenceList amountSummary={model.amountSummary} evidence={model.evidence} capabilities={capabilities} />
            </div>
          </SectionPanel>
          {slots.afterEvidence}
        </BusinessDetailMain>
        <BusinessDetailAside>
          {slots.actionPanel}
          {slots.asideContext}
        </BusinessDetailAside>
      </BusinessDetailWorkspace>
    </PageScaffold>
  );
}