import { Head, router } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';
import PageHeader from '@/Components/PageHeader';
import { formatDateTime } from '@/utils/formatters';
import Badge from '@/Components/Badge';
import { useState } from 'react';

const TX_COLORS = { receipt: 'success', issue: 'danger', adjustment: 'warning', transfer: 'info' };

export default function InventoryReport({ transactions, filters, items }) {
    const [itemId, setItemId] = useState(filters?.inventory_item_id ?? '');
    const [from, setFrom] = useState(filters?.from ?? '');
    const [to, setTo] = useState(filters?.to ?? '');

    function applyFilter(e) {
        e.preventDefault();
        router.get(route('inventory.report'), { inventory_item_id: itemId, from, to }, { preserveState: true, replace: true });
    }

    return (
        <AppLayout>
            <Head title="Stock Movement Report" />
            <PageHeader title="Stock Movement Report" />
            <div className="p-4 sm:p-6">
                <form onSubmit={applyFilter} className="flex gap-3 mb-4 flex-wrap items-end">
                    <div className="flex flex-col gap-1">
                        <label className="text-xs text-gray-500">Item</label>
                        <select className="form-input text-sm" value={itemId} onChange={e => setItemId(e.target.value)}>
                            <option value="">All Items</option>
                            {(items ?? []).map(i => <option key={i.id} value={i.id}>{i.name}</option>)}
                        </select>
                    </div>
                    <div className="flex flex-col gap-1">
                        <label className="text-xs text-gray-500">From</label>
                        <input type="date" className="form-input text-sm" value={from} onChange={e => setFrom(e.target.value)} />
                    </div>
                    <div className="flex flex-col gap-1">
                        <label className="text-xs text-gray-500">To</label>
                        <input type="date" className="form-input text-sm" value={to} onChange={e => setTo(e.target.value)} />
                    </div>
                    <button type="submit" className="btn btn-primary text-sm">Filter</button>
                </form>

                <div className="card overflow-hidden">
                    <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50">
                            <tr>{['Date','Item','Type','Qty','Reference','Notes','By'].map(h => (
                                <th key={h} className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">{h}</th>
                            ))}</tr>
                        </thead>
                        <tbody className="divide-y divide-gray-100">
                            {(transactions ?? []).map(tx => (
                                <tr key={tx.id} className="hover:bg-gray-50">
                                    <td className="px-4 py-3 text-sm">{formatDateTime(tx.transaction_date)}</td>
                                    <td className="px-4 py-3 text-sm font-medium">{tx.item?.name}</td>
                                    <td className="px-4 py-3"><Badge variant={TX_COLORS[tx.type] ?? 'gray'}>{tx.type}</Badge></td>
                                    <td className={`px-4 py-3 text-sm font-semibold ${tx.type === 'receipt' ? 'text-green-700' : 'text-red-700'}`}>
                                        {tx.type === 'receipt' || (tx.type === 'adjustment' && tx.quantity > 0) ? '+' : '-'}{Math.abs(tx.quantity)}
                                    </td>
                                    <td className="px-4 py-3 text-sm text-gray-500">{tx.reference ?? '—'}</td>
                                    <td className="px-4 py-3 text-sm text-gray-600">{tx.notes}</td>
                                    <td className="px-4 py-3 text-sm text-gray-500">{tx.performedBy?.name}</td>
                                </tr>
                            ))}
                            {(transactions ?? []).length === 0 && (
                                <tr><td colSpan={7} className="px-4 py-8 text-center text-gray-400">No transactions found.</td></tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        </AppLayout>
    );
}
