ApprovalInbox

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Button } from "@/components/ledger/button";
import { EntityMark } from "@/components/ledger/entity-mark";
import { CheckIcon, ChevronDownIcon, DocumentTextIcon, XMarkIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";

export type ApprovalItem = {
  id: string;
  vendor: string;
  amount: MoneyValue;
  dueDate: Date;
  coding: string;
  /** The source document, readable at 390px. */
  documentName: string;
  documentPreview?: string;
};

export interface ApprovalInboxProps {
  className?: string;
  items: ApprovalItem[];
  onApprove?: (id: string) => void;
  /** Rejection requires a reason and routes back to the preparer with it. */
  onReject?: (id: string, reason: string) => void;
}

/**
 * **Mobile-first.** Approvals happen on phones between meetings, so the
 * source document has to be readable at 390px. Swipe actions have an
 * explicit button equivalent, because swipe is undiscoverable.
 *
 * An approver who has to click through to see what they're approving will
 * stop clicking through — so the document is inline.
 */
export function ApprovalInbox({ items, onApprove, onReject, className }: ApprovalInboxProps) {
  const [rejecting, setRejecting] = React.useState<string | null>(null);
  const [reason, setReason] = React.useState("");
  const [expanded, setExpanded] = React.useState<string | null>(items[0]?.id ?? null);

  return (
    <ul className={cn("space-y-3", className)}>
      {items.map((item) => (
        <li className="overflow-hidden rounded-xl border border-border bg-surface" key={item.id}>
          <div className="flex items-start gap-3 p-4">
            <EntityMark category="company" name={item.vendor} size={40} />
            <div className="min-w-0 flex-1">
              <p className="truncate text-body font-medium">{item.vendor}</p>
              <p className="text-caption text-text-secondary">
                Due <span className="numeric">{formatDate(item.dueDate)}</span>
              </p>
              <p className="text-caption text-text-secondary">{item.coding}</p>
            </div>
            <Money size="md" value={item.amount} />
          </div>

          <button
            aria-expanded={expanded === item.id}
            className="flex w-full items-center gap-2 border-t border-border-subtle px-4 py-2 text-label font-medium text-accent"
            onClick={() => setExpanded(expanded === item.id ? null : item.id)}
            type="button"
          >
            <DocumentTextIcon aria-hidden="true" className="size-3.5" />
            {item.documentName}
            <ChevronDownIcon
              aria-hidden="true"
              className={cn(
                "ml-auto size-4 transition-transform duration-2 ease-standard",
                expanded === item.id && "rotate-180",
              )}
            />
          </button>

          {expanded === item.id ? (
            <div className="border-t border-border-subtle bg-surface-sunken p-4">
              <div className="min-h-[160px] rounded-sm border border-border bg-surface p-4">
                <p className="whitespace-pre-wrap text-caption text-text-secondary">
                  {item.documentPreview ??
                    `${item.vendor}\nInvoice document\n\nThis renders inline so the approver can read what they are approving without leaving the inbox.`}
                </p>
              </div>
            </div>
          ) : null}

          {rejecting === item.id ? (
            <div className="space-y-2 border-t border-border-subtle p-4">
              <label className="block">
                <span className="mb-1 block text-label font-medium text-text-secondary">
                  Reason for rejection (required — the preparer sees this)
                </span>
                <textarea
                  className="w-full rounded-sm border border-border bg-surface p-2 text-body outline-none focus-visible:border-accent"
                  onChange={(e) => setReason(e.target.value)}
                  rows={2}
                  value={reason}
                />
              </label>
              <div className="flex gap-2">
                <Button
                  disabled={reason.trim().length < 5}
                  onClick={() => {
                    onReject?.(item.id, reason);
                    setRejecting(null);
                    setReason("");
                  }}
                  variant="destructive"
                >
                  Reject and return to preparer
                </Button>
                <Button onClick={() => setRejecting(null)} variant="ghost">
                  Cancel
                </Button>
              </div>
            </div>
          ) : (
            <div
              className="flex gap-2 border-t border-border-subtle p-4"
              style={{ paddingBottom: "max(16px, env(safe-area-inset-bottom))" }}
            >
              <Button className="flex-1" onClick={() => onApprove?.(item.id)} variant="primary">
                <CheckIcon aria-hidden="true" className="size-4" />
                Approve
              </Button>
              <Button className="flex-1" onClick={() => setRejecting(item.id)} variant="secondary">
                <XMarkIcon aria-hidden="true" className="size-4" />
                Reject
              </Button>
            </div>
          )}
        </li>
      ))}
    </ul>
  );
}