رسیدِ تراکنش (اپ)

"use client"

import * as React from "react"

import { CheckIcon, ChevronRightIcon, CopyIcon, ShareIcon } from "@/components/icons"
import { AppBar, AppBarActions, AppBarLeading, AppBarTitle } from "@/components/ui/app-bar"
import { BankLogo } from "@/components/ui/bank-logo"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { toast } from "@/components/ui/toast"
import { formatCurrency, formatJalaliDateTime, toFaDigits } from "@/lib/persian"

const TRACKING = "48120993"

/**
 * جزئیاتِ تراکنش و رسید در اپ: وضعیتِ موفق با مبلغِ درشت، کارتِ رسید با لبهٔ دندانه‌دار،
 * ردیف‌های مبدأ و مقصد با لوگوی بانک، کدِ پیگیری با کپی، و اشتراک‌گذاری در پایینِ چسبان.
 */
export default function MobileTransactionBlock() {
  const rows = [
    { label: "زمان", value: formatJalaliDateTime("2026-10-06T10:24:00") },
    { label: "از", value: "کیف پولِ آوند" },
    { label: "کارمزد", value: formatCurrency(0) },
  ]

  return (
    <ControlSizeProvider size="xl" asChild>
      <div className="mx-auto flex min-h-svh w-full max-w-md flex-col bg-subtle">
        <AppBar className="bg-subtle">
          <AppBarLeading>
            <Button variant="ghost" size="icon" aria-label="بازگشت">
              <ChevronRightIcon className="ltr:rotate-180" />
            </Button>
          </AppBarLeading>
          <AppBarTitle>رسیدِ انتقال</AppBarTitle>
          <AppBarActions />
        </AppBar>

        <main className="flex flex-1 flex-col gap-6 p-4">
          <section className="relative flex flex-col overflow-hidden rounded-xl bg-card">
            <div className="flex flex-col items-center gap-3 px-6 pt-8 pb-6 text-center" role="status">
              <span aria-hidden className="flex size-14 items-center justify-center rounded-full bg-success-subtle text-success [&>svg]:size-7">
                <CheckIcon />
              </span>
              <span className="text-sm text-muted-foreground">انتقال موفق بود</span>
              <span className="text-3xl font-black tabular-nums">{formatCurrency(1_200_000)}</span>
            </div>
            {/* لبهٔ پاره‌شدهٔ رسید: دو نیم‌دایره با رنگِ پس‌زمینه و خطِ‌چین میانشان. */}
            <div aria-hidden className="relative flex items-center">
              <span className="absolute -start-3 size-6 rounded-full bg-subtle" />
              <span className="mx-5 w-full border-t-2 border-dashed border-border" />
              <span className="absolute -end-3 size-6 rounded-full bg-subtle" />
            </div>
            <dl className="flex flex-col gap-4 px-6 pt-6 pb-8 text-sm">
              <div className="flex items-center justify-between gap-3">
                <dt className="text-muted-foreground">به</dt>
                <dd className="flex items-center gap-2">
                  <span className="flex flex-col items-end">
                    <span className="font-medium">سارا محمدی</span>
                    <bdi dir="ltr" className="text-xs text-muted-foreground">
                      {toFaDigits("6037 •••• •••• 5678")}
                    </bdi>
                  </span>
                  <BankLogo cardNumber="6037997512345678" size="sm" />
                </dd>
              </div>
              {rows.map((row) => (
                <div key={row.label} className="flex justify-between gap-3">
                  <dt className="text-muted-foreground">{row.label}</dt>
                  <dd>{row.value}</dd>
                </div>
              ))}
              <div className="flex items-center justify-between gap-3">
                <dt className="text-muted-foreground">کدِ پیگیری</dt>
                <dd className="flex items-center gap-1">
                  <bdi dir="ltr" className="font-semibold tracking-wider">
                    {toFaDigits(TRACKING)}
                  </bdi>
                  <Button
                    variant="ghost"
                    size="icon"
                    aria-label="کپی کدِ پیگیری"
                    onClick={() => {
                      void navigator.clipboard?.writeText(TRACKING)
                      toast.success("کدِ پیگیری کپی شد.")
                    }}
                  >
                    <CopyIcon />
                  </Button>
                </dd>
              </div>
            </dl>
          </section>
        </main>

        <footer className="sticky bottom-0 flex gap-3 bg-subtle p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
          <Button variant="outline" className="flex-1 bg-card">
            <ShareIcon />
            اشتراکِ رسید
          </Button>
          <Button className="flex-1">بازگشت به خانه</Button>
        </footer>
      </div>
    </ControlSizeProvider>
  )
}