import { getServerApi } from '@garage/api/server'
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
import {
    BadgeDollarSignIcon,
    CalendarIcon,
    ClipboardListIcon,
    CreditCardIcon,
    HashIcon,
    UserIcon,
} from 'lucide-react'

export default async function PaymentReceivedDetailPage(props: { params: Promise<{ id: string }> }) {
    const { id } = await props.params
    const api = await getServerApi()
    const payment = await api.paymentReceived.show(id)
    const data = (payment as any)?.data ?? payment

    if (!data) {
        return <div className="text-muted-foreground">Payment not found.</div>
    }

    const amount = data.amount_received != null
        ? Number(data.amount_received).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
        : '—'

    const paymentDate = data.payment_date
        ? new Date(data.payment_date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
        : '—'

    const customerName = data.customer?.first_name
        ? `${data.customer.first_name} ${data.customer.last_name ?? ''}`.trim()
        : data.customer?.company_name ?? data.customer_name ?? '—'

    const jobCardLabel = data.job_card?.title ?? data.job_card_name ?? '—'
    const paymentMode = data.payment_mode?.title ?? data.payment_mode?.name ?? data.payment_mode_name ?? '—'

    return (
        <DashboardPage header={null}>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <div className="flex items-center gap-3 rounded-lg border p-4">
                    <HashIcon className="size-5 text-muted-foreground" />
                    <div>
                        <p className="text-xs text-muted-foreground">Payment Number</p>
                        <p className="font-medium">{data.payment_number || '—'}</p>
                    </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border p-4">
                    <UserIcon className="size-5 text-muted-foreground" />
                    <div>
                        <p className="text-xs text-muted-foreground">Customer</p>
                        <p className="font-medium">{customerName}</p>
                    </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border p-4">
                    <ClipboardListIcon className="size-5 text-muted-foreground" />
                    <div>
                        <p className="text-xs text-muted-foreground">Job Card</p>
                        <p className="font-medium">{jobCardLabel}</p>
                    </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border p-4">
                    <BadgeDollarSignIcon className="size-5 text-emerald-600" />
                    <div>
                        <p className="text-xs text-muted-foreground">Amount Received</p>
                        <p className="font-semibold text-emerald-700 dark:text-emerald-400">{amount}</p>
                    </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border p-4">
                    <CreditCardIcon className="size-5 text-muted-foreground" />
                    <div>
                        <p className="text-xs text-muted-foreground">Payment Mode</p>
                        <p className="font-medium capitalize">{paymentMode}</p>
                    </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border p-4">
                    <CalendarIcon className="size-5 text-muted-foreground" />
                    <div>
                        <p className="text-xs text-muted-foreground">Payment Date</p>
                        <p className="font-medium">{paymentDate}</p>
                    </div>
                </div>

                {data.note && (
                    <div className="sm:col-span-2 lg:col-span-3 rounded-lg border p-4">
                        <p className="text-xs text-muted-foreground mb-1">Note</p>
                        <p className="text-sm">{data.note}</p>
                    </div>
                )}
            </div>
        </DashboardPage>
    )
}