import type { ReimbursementEvidenceCapabilities } from "./ReimbursementItemEvidenceList";
import { ReimbursementItemEvidenceList } from "./ReimbursementItemEvidenceList";
import type { ReimbursementWorkspaceModel, ReimbursementWorkspaceSlots } from "../../lib/reimbursementWorkspace";
import { formatDisplayDate, formatMoney } from "../../lib/displayFormat";
import { MobileDetailHeader } from "../mobile/MobileDetailHeader";
import { MOBILE_STICKY_ACTION_PAGE_CLASS } from "../patterns/MobileStickyActionBar";
import { PageScaffold } from "../patterns/PageScaffold";

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

export function ReimbursementMobileWorkspaceShell({ model, capabilities, slots, fallbackTo }: Props) {
  return (
    <PageScaffold className={slots.mobileActions ? MOBILE_STICKY_ACTION_PAGE_CLASS : undefined} data-testid="reimbursement-mobile-workspace">
      <MobileDetailHeader
        fallbackTo={fallbackTo}
        status={slots.status}
        subtitle="报销详情"
        testId="mobile-reimbursement-detail-header"
        title={model.header.displayCode}
      />
      {slots.transientFeedback}
      <section className="mobile-card mobile-focus-card mobile-page-stack">
        <div>
          <p className="text-xs text-zinc-500">报销合计</p>
          <p className="mt-1 text-3xl font-semibold text-zinc-950">{formatMoney(model.amountSummary.authoritativeTotalAmount)}</p>
        </div>
        <div className="mobile-info-grid">
          <div className="mobile-list-card">
            <p className="text-xs text-zinc-500">报销人</p>
            <p className="mt-1 font-medium text-zinc-900">{model.header.ownerName}</p>
          </div>
          <div className="mobile-list-card">
            <p className="text-xs text-zinc-500">报销日期</p>
            <p className="mt-1 font-medium text-zinc-900">{formatDisplayDate(model.header.reimbursementDate)}</p>
          </div>
        </div>
        <div>
          <p className="text-xs text-zinc-500">事由</p>
          <p className="mt-1 text-sm leading-6 text-zinc-700">{model.header.description || "未填写事由"}</p>
        </div>
        {slots.headerDetails}
      </section>
      {slots.beforeEvidence}
      <section className="mobile-card scroll-mt-20" data-testid="reimbursement-workspace-evidence" id="reimbursement-workspace-evidence">
        <h2 className="mb-3 text-base font-semibold text-zinc-900">报销内容</h2>
        <ReimbursementItemEvidenceList amountSummary={model.amountSummary} evidence={model.evidence} capabilities={capabilities} mobile />
      </section>
      {slots.afterEvidence}
      {slots.timeline}
      {slots.mobileActions}
    </PageScaffold>
  );
}