import type { Template } from "@/lib/contract/schema";
import { activityRecap, describeLink, evaluate, formatDateTime, formatDay, statusAt, summarize } from "@/lib/engine";
import { contractHref } from "@/lib/routes";
import { ApprovalCard, Receipt, RiskSummary, TraceEvent, cx } from "@/design-system";

export interface ActivityRecapProps {
  template: Template;
  /** Fixed snapshot instant, parsed by the engine. Never the browser clock. */
  now: number;
  className?: string;
}

/** A read-only composition of the existing activity patterns, using the supplied note. */
export function ActivityRecap({ template, now, className }: ActivityRecapProps) {
  const run = evaluate(template.contract, template.fixture);
  const recap = activityRecap(run, now);
  const editorHref = contractHref(template.id);
  return (
    <section aria-label={`${template.runs} activity recap`} className={cx("min-w-0 rounded-lg border border-line bg-surface p-4 sm:p-6", className)}>
      <header className="border-b border-line pb-5">
        <p className="text-xs font-medium uppercase tracking-wide text-ink-2">{template.runs} / {template.fixture.title}</p>
        <h3 className="mt-2 font-display text-2xl">A little household catch-up.</h3>
        <p className="mt-2 text-sm text-ink-2 tnum">As of {formatDateTime(now)}</p>
        <div className="mt-4"><RiskSummary summary={summarize(template.contract)} variant="compact" /></div>
      </header>
      {recap.empty ? <p className="py-6 text-ink-2">{recap.emptyMessage}</p> : (
        <div className="mt-5 grid min-w-0 gap-6 xl:grid-cols-2">
          <div className="min-w-0">
            <h4 className="text-xs font-medium uppercase tracking-wide text-ink-2">Latest activity</h4>
            {recap.groups.map(({ day, events }) => (
              <div key={day} className="mt-4">
                <p className="border-b border-line pb-2 text-sm text-ink-2">{formatDay(day)}</p>
                {events.map((event) => <TraceEvent key={event.id} event={event} status={statusAt(event, now)} link={describeLink(event, template.contract)} linkHref={editorHref} />)}
              </div>
            ))}
          </div>
          <div className="grid min-w-0 content-start gap-5">
            {recap.openAsk ? <ApprovalCard event={recap.openAsk} escalation={template.contract.escalation} now={now} link={describeLink(recap.openAsk, template.contract)} linkHref={editorHref} /> : null}
            {recap.unattendedReceipt ? (
              <div>
                <h4 className="mb-3 text-xs font-medium uppercase tracking-wide text-ink-2">Latest itemised receipt · Done on its own</h4>
                <Receipt event={recap.unattendedReceipt} policy={template.contract.receipts} link={describeLink(recap.unattendedReceipt, template.contract)} linkHref={editorHref} />
              </div>
            ) : null}
          </div>
        </div>
      )}
    </section>
  );
}