import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { printReceipt } from '@/lib/pos';
import { currency, dateTime, qty } from '@/lib/format';
import { METHOD_LABELS, REASON_LABELS } from '@/lib/returns';
import { Head, Link, usePage } from '@inertiajs/react';

export default function Show({ ret: r }) {
    const { shop } = usePage().props;
    const money = (v) => currency(v, shop?.currency);
    const isCredit = Number(r.credited_amount) > 0;

    return (
        <AuthenticatedLayout
            header={
                <div className="flex flex-wrap items-center justify-between gap-3">
                    <div className="flex items-center gap-3">
                        <Link href={route('returns.index')} className="text-sm text-gray-500 hover:underline">← Returns</Link>
                        <h2 className="text-xl font-semibold text-gray-800">{r.return_no}</h2>
                        <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${isCredit ? 'bg-amber-100 text-amber-800' : 'bg-blue-100 text-blue-800'}`}>{isCredit ? 'Credit note' : 'Refund'}</span>
                    </div>
                    <div className="flex gap-3">
                        <button onClick={() => printReceipt(route('returns.credit-note', r.id))} className="rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 hover:bg-gray-50">Print</button>
                        <a href={route('returns.credit-note', { saleReturn: r.id, format: 'pdf' })} target="_blank" rel="noreferrer" className="rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 hover:bg-gray-50">PDF</a>
                    </div>
                </div>
            }
        >
            <Head title={r.return_no} />

            <div className="mx-auto max-w-4xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
                <section className="grid gap-4 rounded-lg bg-white p-6 text-sm shadow-sm sm:grid-cols-4">
                    <div><div className="text-xs text-gray-500">Original invoice</div>{r.sale && <Link href={route('sales.show', r.sale.id)} className="font-medium text-indigo-600 hover:underline">{r.sale.invoice_no}</Link>}</div>
                    <div><div className="text-xs text-gray-500">Customer</div>{r.customer ? <Link href={route('customers.show', r.customer.id)} className="font-medium text-indigo-600 hover:underline">{r.customer.name}</Link> : 'Walk-in'}</div>
                    <div><div className="text-xs text-gray-500">Date</div>{dateTime(r.returned_at)}</div>
                    <div><div className="text-xs text-gray-500">Processed by</div>{r.user ?? '—'}</div>
                    <div><div className="text-xs text-gray-500">Reason</div>{REASON_LABELS[r.reason] ?? r.reason ?? '—'}</div>
                    {r.notes && <div className="sm:col-span-3"><div className="text-xs text-gray-500">Notes</div>{r.notes}</div>}
                </section>

                <section className="overflow-x-auto rounded-lg bg-white shadow-sm">
                    <table className="w-full text-left text-sm">
                        <thead className="bg-gray-50 text-gray-600"><tr><th className="p-3">Item</th><th className="p-3 text-right">Qty</th><th className="p-3">Stock</th><th className="p-3 text-right">Amount</th></tr></thead>
                        <tbody className="divide-y">
                            {r.items.map((i) => (
                                <tr key={i.id}>
                                    <td className="p-3"><span className="font-medium">{i.name}</span> <span className="text-xs text-gray-500">{i.sku}</span></td>
                                    <td className="p-3 text-right">{qty(i.quantity)}</td>
                                    <td className="p-3">{i.restock ? <span className="text-green-700">Restocked</span> : <span className="text-red-600">Written off</span>}</td>
                                    <td className="p-3 text-right">{money(i.total)}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </section>

                <section className="ms-auto max-w-sm space-y-1 rounded-lg bg-white p-5 text-sm shadow-sm">
                    <div className="flex justify-between text-gray-600"><span>Subtotal</span><span>{money(r.subtotal)}</span></div>
                    {Number(r.tax) > 0 && <div className="flex justify-between text-gray-600"><span>Tax</span><span>{money(r.tax)}</span></div>}
                    <div className="flex justify-between border-t pt-2 text-base font-semibold"><span>Total returned</span><span>{money(r.total)}</span></div>
                    {Number(r.refunded_amount) > 0 && <div className="flex justify-between text-red-600"><span>Paid back ({METHOD_LABELS[r.refund_method]?.toLowerCase()})</span><span>{money(r.refunded_amount)}</span></div>}
                    {isCredit && <div className="flex justify-between text-amber-700"><span>Credited to customer account</span><span>{money(r.credited_amount)}</span></div>}
                    {r.customer && isCredit && <div className="flex justify-between text-xs text-gray-500"><span>Account balance now</span><span>{money(r.customer.balance)}</span></div>}
                </section>
            </div>
        </AuthenticatedLayout>
    );
}
