import { useForm } from '@inertiajs/react';
import { useRef } from 'react';
import ResourceIndex from '../../Components/ResourceIndex';
import RelationTable from '../../Components/RelationTable';
import { FormSection, TextInput, TextArea, SelectInput, DateInput, SmartNumberInput } from '../../Components/Form';
import { DrawerFooter, useDrawerDirty, useDrawerCancel } from '../../Components/SlideOver';
import Button from '../../Components/Button';
import { useDirtyForm } from '../../hooks/useDirtyForm';
import { useFormKeyboard } from '../../hooks/useFormKeyboard';
import { formatDate } from '../../lib/format';
import { parseMoney, parseWeight, isValidMobile } from '../../lib/parse';

const TRX_TYPE_LABEL = {
    metal_given: 'Metal Given',
    cash_given: 'Cash Given',
    ornament_received: 'Ornament Received',
    metal_returned: 'Metal Returned',
    labour_payment: 'Labour Payment',
};

const TRX_TYPE_COLOR = {
    metal_given: 'bg-red-50 text-red-700 border-red-200',
    cash_given: 'bg-red-50 text-red-700 border-red-200',
    ornament_received: 'bg-green-50 text-green-700 border-green-200',
    metal_returned: 'bg-green-50 text-green-700 border-green-200',
    labour_payment: 'bg-green-50 text-green-700 border-green-200',
};

const ORDER_STATUS_COLOR = {
    assigned: 'bg-gray-100 text-gray-700 border-gray-200',
    in_progress: 'bg-yellow-50 text-yellow-700 border-yellow-200',
    completed: 'bg-sky-50 text-sky-700 border-sky-200',
    received: 'bg-green-50 text-green-700 border-green-200',
};

function FormContent({ record, onClose, reopenAsNew, availableProducts = [] }) {
    const isEdit = !!record;
    const formRef = useRef(null);
    const { data, setData, post, put, processing, errors } = useForm({
        name: record?.name || '', mobile: record?.mobile || '',
        specialisation: record?.specialisation || '', address: record?.address || '',
        opening_receivable: record?.opening_receivable || '',
        opening_payable: record?.opening_payable || '',
        opening_metal_receivable: record?.opening_metal_receivable || '',
        opening_metal_payable: record?.opening_metal_payable || '',
    });
    const { isDirty, markClean } = useDirtyForm(data);
    useDrawerDirty(isDirty);
    const cancel = useDrawerCancel(onClose);
    const save = (andNew = false) => {
        const opts = { onSuccess: () => { markClean(); andNew ? reopenAsNew?.() : onClose(); } };
        isEdit ? put(`/karighars/${record.id}`, opts) : post('/karighars', opts);
    };
    const handleSubmit = (e) => { e.preventDefault(); save(false); };
    const set = (n, v) => setData(n, v);
    useFormKeyboard(formRef, { onSubmit: () => save(false), onCancel: onClose });

    const mobileValid = data.mobile && isValidMobile(data.mobile) ? 'Valid' : null;
    const mobileError = data.mobile && !isValidMobile(data.mobile) ? '10 digits' : null;

    return (
        <form ref={formRef} onSubmit={handleSubmit}>
            <FormSection title="Karighar Details" columns={2}>
                <TextInput label="Name" name="name" value={data.name} onChange={set} required error={errors.name} />
                <TextInput label="Mobile" name="mobile" value={data.mobile} onChange={set} prefix="+91" error={mobileError || errors.mobile} valid={mobileValid} />
                <TextInput label="Specialisation" name="specialisation" value={data.specialisation} onChange={set} placeholder="e.g. Kundan, Filigree, Diamond setting" />
                <TextArea label="Address" name="address" value={data.address} onChange={set} />
            </FormSection>

            {/* Relation tables — only visible when editing an existing karighar */}
            <FormSection title="Opening Balances" description="Cash and metal balances before this system starts tracking the karighar." columns={2}>
                <TextInput label="Receivable From Party" name="opening_receivable" value={data.opening_receivable} onChange={set} prefix="Rs." type="number" error={errors.opening_receivable} />
                <TextInput label="Payable To Party" name="opening_payable" value={data.opening_payable} onChange={set} prefix="Rs." type="number" error={errors.opening_payable} />
                <TextInput label="Metal Receivable" name="opening_metal_receivable" value={data.opening_metal_receivable} onChange={set} suffix="g" type="number" error={errors.opening_metal_receivable} />
                <TextInput label="Metal Payable" name="opening_metal_payable" value={data.opening_metal_payable} onChange={set} suffix="g" type="number" error={errors.opening_metal_payable} />
            </FormSection>

            {isEdit && (
                <>
                    <RelationTable
                        title="Ledger Transactions"
                        icon={
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
                                <path strokeLinecap="round" strokeLinejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                        }
                        rows={record?.transactions || []}
                        storeUrl={`/karighars/${record.id}/transactions`}
                        deleteUrl={(row) => `/karighars/${record.id}/transactions/${row.id}`}
                        defaultDraft={{
                            transaction_date: new Date().toISOString().split('T')[0],
                            type: 'metal_given', metal_weight: '', metal_purity: '',
                            cash_amount: '', product_id: '', notes: '',
                        }}
                        emptyMessage="No transactions recorded yet."
                        columns={[
                            { key: 'transaction_date', label: 'Date', render: r => formatDate(r.transaction_date) },
                            { key: 'type', label: 'Type', render: r => (
                                <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-[0.6875rem] font-semibold border ${TRX_TYPE_COLOR[r.type] || 'bg-gray-100 border-gray-200'}`}>
                                    {TRX_TYPE_LABEL[r.type] || r.type}
                                </span>
                            )},
                            { key: 'metal_weight', label: 'Weight', align: 'right', render: r => r.metal_weight ? `${r.metal_weight} g` : <span className="text-gray-300">—</span> },
                            { key: 'cash_amount', label: 'Cash', align: 'right', render: r => r.cash_amount > 0 ? `₹${Number(r.cash_amount).toLocaleString('en-IN')}` : <span className="text-gray-300">—</span> },
                            { key: 'notes', label: 'Notes', render: r => r.notes ? <span className="text-gray-500 text-xs">{r.notes}</span> : <span className="text-gray-300">—</span> },
                        ]}
                        renderForm={({ draft, setDraft }) => {
                            const upd = (n, v) => setDraft(prev => ({ ...prev, [n]: v }));
                            const showMetal = ['metal_given', 'ornament_received', 'metal_returned'].includes(draft.type);
                            const showCash = ['cash_given', 'labour_payment'].includes(draft.type);
                            const showProduct = draft.type === 'ornament_received';
                            return (
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                    <DateInput label="Date" name="transaction_date" value={draft.transaction_date} onChange={upd} required />
                                    <SelectInput
                                        label="Type"
                                        name="type"
                                        value={draft.type}
                                        onChange={upd}
                                        required
                                        options={Object.entries(TRX_TYPE_LABEL).map(([v, l]) => ({ value: v, label: l }))}
                                    />
                                    {showMetal && <TextInput label="Metal Weight" name="metal_weight" value={draft.metal_weight} onChange={upd} suffix="g" type="number" />}
                                    {showMetal && <TextInput label="Purity" name="metal_purity" value={draft.metal_purity} onChange={upd} type="number" />}
                                    {showCash && <TextInput label="Cash Amount" name="cash_amount" value={draft.cash_amount} onChange={upd} prefix="₹" type="number" />}
                                    {showProduct && (
                                        <SelectInput
                                            label="Product Received"
                                            name="product_id"
                                            value={draft.product_id}
                                            onChange={upd}
                                            placeholder="Select product"
                                            options={availableProducts.map(p => ({ value: p.id, label: p.product_code }))}
                                        />
                                    )}
                                    <TextArea label="Notes" name="notes" value={draft.notes} onChange={upd} rows={1} className="sm:col-span-2" />
                                </div>
                            );
                        }}
                    />

                    <RelationTable
                        title="Orders"
                        icon={
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
                                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                            </svg>
                        }
                        rows={record?.orders || []}
                        storeUrl={`/karighars/${record.id}/orders`}
                        deleteUrl={(row) => `/karighars/${record.id}/orders/${row.id}`}
                        defaultDraft={{
                            description: '', metal_given: '', metal_purity: '',
                            cash_advance: '', expected_delivery: '', status: 'assigned',
                        }}
                        emptyMessage="No orders assigned yet."
                        columns={[
                            { key: 'description', label: 'Description', render: r => <span className="font-medium text-gray-800">{r.description}</span> },
                            { key: 'metal_given', label: 'Metal', align: 'right', render: r => r.metal_given ? `${r.metal_given} g` : <span className="text-gray-300">—</span> },
                            { key: 'cash_advance', label: 'Advance', align: 'right', render: r => r.cash_advance > 0 ? `₹${Number(r.cash_advance).toLocaleString('en-IN')}` : <span className="text-gray-300">—</span> },
                            { key: 'expected_delivery', label: 'Delivery', render: r => r.expected_delivery ? formatDate(r.expected_delivery) : <span className="text-gray-300">—</span> },
                            { key: 'status', label: 'Status', render: r => (
                                <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-[0.6875rem] font-semibold border ${ORDER_STATUS_COLOR[r.status] || 'bg-gray-100 border-gray-200'}`}>
                                    {r.status?.replace('_', ' ')}
                                </span>
                            )},
                        ]}
                        renderForm={({ draft, setDraft }) => {
                            const upd = (n, v) => setDraft(prev => ({ ...prev, [n]: v }));
                            return (
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                    <TextArea label="Description" name="description" value={draft.description} onChange={upd} required rows={2} className="sm:col-span-2" />
                                    <TextInput label="Metal Given" name="metal_given" value={draft.metal_given} onChange={upd} suffix="g" type="number" />
                                    <TextInput label="Purity" name="metal_purity" value={draft.metal_purity} onChange={upd} type="number" />
                                    <TextInput label="Cash Advance" name="cash_advance" value={draft.cash_advance} onChange={upd} prefix="₹" type="number" />
                                    <DateInput label="Expected Delivery" name="expected_delivery" value={draft.expected_delivery} onChange={upd} />
                                    <SelectInput
                                        label="Status"
                                        name="status"
                                        value={draft.status}
                                        onChange={upd}
                                        options={[
                                            { value: 'assigned', label: 'Assigned' },
                                            { value: 'in_progress', label: 'In Progress' },
                                            { value: 'completed', label: 'Completed' },
                                            { value: 'received', label: 'Received' },
                                        ]}
                                    />
                                </div>
                            );
                        }}
                    />
                </>
            )}

            <DrawerFooter>
                <p className="text-[11px] text-gray-400 mr-auto hidden sm:block">
                    <kbd className="px-1 py-0.5 bg-gray-100 rounded">⌘</kbd>+<kbd className="px-1 py-0.5 bg-gray-100 rounded">Enter</kbd> to save
                </p>
                <Button variant="secondary" onClick={cancel} type="button">Cancel</Button>
                {!isEdit && (
                    <Button variant="secondary" type="button" onClick={() => save(true)} disabled={processing}>
                        {processing ? '…' : 'Save & Add Another'}
                    </Button>
                )}
                <Button type="submit" disabled={processing}>{processing ? 'Saving…' : isEdit ? 'Update' : 'Save'}</Button>
            </DrawerFooter>
        </form>
    );
}

export default function Index({ karighars, filters, availableProducts }) {
    return (
        <ResourceIndex
            title="Karighars"
            resourceUrl="/karighars"
            rows={karighars?.data || []}
            links={karighars?.links}
            meta={{ from: karighars?.from, to: karighars?.to, total: karighars?.total }}
            filters={filters}
            formWide
            emptyActionLabel="Add first karighar"
            renderForm={({ record, onClose, reopenAsNew }) => <FormContent record={record} onClose={onClose} reopenAsNew={reopenAsNew} availableProducts={availableProducts} />}
            columns={[
                { key: 'name', label: 'Name', sortable: true },
                { key: 'mobile', label: 'Mobile' },
                { key: 'specialisation', label: 'Specialisation', sortable: true, mobileHidden: true },
                { key: 'orders_count', label: 'Orders', align: 'center', render: r => (
                    <span className="inline-flex items-center justify-center min-w-[24px] h-6 rounded-full bg-primary-100 text-primary-700 text-xs font-semibold px-2">
                        {r.orders_count || 0}
                    </span>
                )},
            ]}
        />
    );
}