"use client"

import { ArrowLeft, GitCompareArrows } from "lucide-react"
import Link from "next/link"

import { ListPageCard } from "@/app/dashboard/_components"
import { Button } from "@/components/ui/button"
import { CustomerCompareWorkspace } from "@/components/xml-apis/upload-xml/components/customer-compare/customer-compare-workspace"

const LIST_HREF = "/dashboard/xml-apis/upload-xml"

/**
 * "Compare POS by customer": its own page, reached from the Upload XML list. Compares one customer's (or every
 * customer's) bank positions day by day from the statements already uploaded.
 */
export function UploadXmlCustomerComparePage() {
  return (
    <ListPageCard
      icon={GitCompareArrows}
      title="Compare POS by customer"
      description="Pick a customer, or tick All customers, then a date range. Each day's bank statement is compared with the one before it — using only that customer's positions, or every customer's when All customers is ticked."
      breadcrumb={[
        { label: "XML API" },
        { label: "Upload XML", href: LIST_HREF },
        { label: "Compare POS by customer" },
      ]}
      actions={
        <Button variant="outline" size="sm" className="h-8 gap-1.5" asChild>
          <Link href={LIST_HREF}>
            <ArrowLeft className="size-4" />
            Back to Upload XML
          </Link>
        </Button>
      }
    >
      <CustomerCompareWorkspace />
    </ListPageCard>
  )
}