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

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

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

    const amount = data.payment_made != null
        ? Number(data.payment_made).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 vendorLabel = data.vendor?.company_name
        ?? (data.vendor?.first_name ? `${data.vendor.first_name} ${data.vendor.last_name ?? ''}`.trim() : null)
        ?? data.vendor_name
        ?? (data.employee?.first_name ? `${data.employee.first_name} ${data.employee.last_name ?? ''}`.trim() : null)
        ?? data.employee_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">
                    <Building2Icon className="size-5 text-muted-foreground" />
                    <div>
                        <p className="text-xs text-muted-foreground">Vendor / Employee</p>
                        <p className="font-medium">{vendorLabel}</p>
                    </div>
                </div>

                <div className="flex items-center gap-3 rounded-lg border p-4">
                    <BriefcaseIcon className="size-5 text-muted-foreground" />
                    <div>
                        <p className="text-xs text-muted-foreground">Payment For</p>
                        <p className="font-medium capitalize">{data.payment_for || '—'}</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</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.payment_reference && (
                    <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">Reference</p>
                            <p className="font-medium">{data.payment_reference}</p>
                        </div>
                    </div>
                )}

                {data.paid_through && (
                    <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">Paid Through</p>
                            <p className="font-medium">{data.paid_through}</p>
                        </div>
                    </div>
                )}

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