import { useForm } from '@inertiajs/react';
import { useEffect, useRef, useState } from 'react';
import ResourceIndex from '../../Components/ResourceIndex';
import Badge from '../../Components/Badge';
import { FormSection, TextInput, SelectInput, TextArea, DateInput, Toggle, SmartNumberInput } from '../../Components/Form';
import { DrawerFooter, useDrawerDirty, useDrawerCancel } from '../../Components/SlideOver';
import Button from '../../Components/Button';
import PurityInput from '../../Components/PurityInput';
import WeightInput from '../../Components/WeightInput';
import CustomerLookup from '../../Components/CustomerLookup';
import { useDirtyForm } from '../../hooks/useDirtyForm';
import { useFormKeyboard } from '../../hooks/useFormKeyboard';
import { parseMoney } from '../../lib/parse';

const sc = { pending: 'gray', in_progress: 'warning', ready: 'info', delivered: 'success' };

const round2 = (n) => Math.round(Number(n) * 100) / 100;

/**
 * Booking rate is quoted per 10 g of gold.
 *   approx_value = estimate_weight × (purity / 1000) × (booked_rate / 10)
 * Matches the convention used on daily gold rate boards.
 */
function computeApproxValue(weight, bookedRate10g) {
    const w = Number(weight);
    const r = Number(bookedRate10g);
    if (!w || !r) return '';
    return String(round2(w * (r / 10)));
}

function FormContent({ record, onClose, reopenAsNew, karighars, suppliers, customers, onCustomerAdded }) {
    const isEdit = !!record;
    const formRef = useRef(null);

    // Assignee type is a UI-only field — backend uses karighar_id or supplier_id directly.
    const initialAssigneeType = record?.supplier_id ? 'supplier' : (record?.karighar_id ? 'karighar' : '');

    const { data, setData, post, put, processing, errors } = useForm({
        customer_id: '', customer_name: record?.customer_name || '', customer_mobile: record?.customer_mobile || '',
        customer_gst: '', customer_address: '',   // hidden fields used only by CustomerLookup to cache matched data
        product_name: record?.product_name || '',
        estimate_weight: record?.estimate_weight || '', purity: record?.purity || '',
        customisation_notes: record?.customisation_notes || '',
        width: record?.width || '', height: record?.height || '', length: record?.length || '',
        delivery_date: record?.delivery_date || '',
        rate_booked: !!record?.rate_booked || !!record?.booked_rate,  // Show booked_rate whenever it exists
        booked_rate: record?.booked_rate || '', approx_value: record?.approx_value || '',
        advance_amount: record?.advance_amount || '0', payment_mode: record?.payment_mode || 'cash',
        status: record?.status || 'pending',
        assignee_type: initialAssigneeType,
        karighar_id: record?.karighar_id || '', supplier_id: record?.supplier_id || '',
    });
    const { isDirty, markClean } = useDirtyForm(data);
    useDrawerDirty(isDirty);
    const cancel = useDrawerCancel(onClose);

    const set = (n, v) => {
        setData(prev => {
            const d = { ...prev, [n]: v };
            // Auto-compute approx value whenever any input changes
            if (['estimate_weight', 'booked_rate', 'rate_booked'].includes(n)) {
                if (d.rate_booked) {
                    const auto = computeApproxValue(d.estimate_weight, d.booked_rate);
                    if (auto !== '') d.approx_value = auto;
                }
            }
            if (n === 'assignee_type') {
                if (v === 'karighar') d.supplier_id = '';
                if (v === 'supplier') d.karighar_id = '';
                if (!v) { d.karighar_id = ''; d.supplier_id = ''; }
            }
            return d;
        });
    };

    const save = (andNew = false) => {
        const opts = { onSuccess: () => { markClean(); andNew ? reopenAsNew?.() : onClose(); } };
        isEdit ? put(`/sales-orders/${record.id}`, opts) : post('/sales-orders', opts);
    };
    const handleSubmit = (e) => { e.preventDefault(); save(false); };
    useFormKeyboard(formRef, { onSubmit: () => save(false), onCancel: onClose });

    useEffect(() => {
        const firstError = Object.keys(errors || {})[0];
        if (!firstError || !formRef.current) return;
        const field = formRef.current.querySelector(`[name="${CSS.escape(firstError)}"]`);
        const target = field?.closest('section') || field;
        target?.scrollIntoView({ behavior: 'smooth', block: 'center' });
        field?.focus?.({ preventScroll: true });
    }, [errors]);

    return (
        <form ref={formRef} onSubmit={handleSubmit}>
            <FormSection title="Customer" columns={1}>
                <CustomerLookup
                    customers={customers || []}
                    value={{
                        customer_id: data.customer_id,
                        name: data.customer_name,
                        mobile: data.customer_mobile,
                        gst_number: data.customer_gst,
                        address: data.customer_address,
                    }}
                    onChange={(next) => setData(prev => ({
                        ...prev,
                        customer_id: next.customer_id || '',
                        customer_name: next.name || '',
                        customer_mobile: next.mobile || '',
                        customer_gst: next.gst_number || '',
                        customer_address: next.address || '',
                    }))}
                    onCustomerAdded={onCustomerAdded}
                    errors={{ name: errors.customer_name, mobile: errors.customer_mobile }}
                />
            </FormSection>

            <FormSection title="Product Specs" columns={3}>
                <TextInput label="Product to Make" name="product_name" value={data.product_name} onChange={set} required error={errors.product_name} className="sm:col-span-3" />
                <WeightInput label="Est. Weight" name="estimate_weight" value={data.estimate_weight} onChange={set} required />
                <PurityInput name="purity" value={data.purity} onChange={set} required />
                <TextInput label="Width" name="width" value={data.width} onChange={set} suffix="inch" type="number" />
                <TextInput label="Height" name="height" value={data.height} onChange={set} suffix="inch" type="number" />
                <TextInput label="Length" name="length" value={data.length} onChange={set} suffix="inch" type="number" />
                <TextArea label="Customisation" name="customisation_notes" value={data.customisation_notes} onChange={set} className="sm:col-span-3" />
            </FormSection>

            <FormSection title="Delivery & Payment" columns={2}>
                <DateInput label="Delivery Date" name="delivery_date" value={data.delivery_date} onChange={set} required error={errors.delivery_date} />
                <Toggle label="Rate Booked?" name="rate_booked" checked={data.rate_booked} onChange={set} />
                {data.rate_booked && (
                    <SmartNumberInput
                        label="Booked Rate (per 10 g)"
                        name="booked_rate"
                        value={data.booked_rate}
                        onChange={set}
                        prefix="₹"
                        parser={parseMoney}
                        helper="Approx = booked rate / 10 x weight"
                    />
                )}
                <SmartNumberInput
                    label="Approx Value"
                    name="approx_value"
                    value={data.approx_value}
                    onChange={set}
                    prefix="₹"
                    parser={parseMoney}
                    helper={data.rate_booked ? 'booked rate / 10 x weight' : undefined}
                />
                <SmartNumberInput label="Advance" name="advance_amount" value={data.advance_amount} onChange={set} prefix="₹" parser={parseMoney} />
                <SelectInput
                    label="Payment Mode"
                    name="payment_mode"
                    value={data.payment_mode}
                    onChange={set}
                    options={[
                        { value: 'cash', label: 'Cash' }, { value: 'upi', label: 'UPI' },
                        { value: 'bank_transfer', label: 'Bank Transfer' }, { value: 'card', label: 'Card' },
                    ]}
                />
                <SelectInput
                    label="Status"
                    name="status"
                    value={data.status}
                    onChange={set}
                    options={[
                        { value: 'pending', label: 'Pending' }, { value: 'in_progress', label: 'In Progress' },
                        { value: 'ready', label: 'Ready' }, { value: 'delivered', label: 'Delivered' },
                    ]}
                />
            </FormSection>

            <FormSection title="Assign Fulfillment" columns={2}>
                <SelectInput
                    label="Assignee Type"
                    name="assignee_type"
                    value={data.assignee_type}
                    onChange={set}
                    options={[
                        { value: '', label: 'Not assigned' },
                        { value: 'karighar', label: 'Karighar (in-house)' },
                        { value: 'supplier', label: 'Supplier (outsourced)' },
                    ]}
                />
                {data.assignee_type === 'karighar' && (
                    <SelectInput label="Karighar" name="karighar_id" value={data.karighar_id} onChange={set} placeholder="Select karighar"
                        options={(karighars || []).map(k => ({ value: k.id, label: k.name }))} />
                )}
                {data.assignee_type === 'supplier' && (
                    <SelectInput label="Supplier" name="supplier_id" value={data.supplier_id} onChange={set} placeholder="Select supplier"
                        options={(suppliers || []).map(s => ({ value: s.id, label: s.name }))} />
                )}
            </FormSection>

            <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({ salesOrders, filters, karighars, suppliers, customers }) {
    const [localCustomers, setLocalCustomers] = useState(customers || []);
    const handleCustomerAdded = (customer) => setLocalCustomers(prev => [customer, ...prev]);
    return (
        <ResourceIndex
            title="Sales Orders"
            resourceUrl="/sales-orders"
            rows={salesOrders?.data || []}
            links={salesOrders?.links}
            meta={{ from: salesOrders?.from, to: salesOrders?.to, total: salesOrders?.total }}
            filters={filters}
            formWide
            emptyActionLabel="Create first order"
            renderForm={({ record, onClose, reopenAsNew }) => (
                <FormContent record={record} onClose={onClose} reopenAsNew={reopenAsNew}
                    karighars={karighars} suppliers={suppliers} customers={localCustomers}
                    onCustomerAdded={handleCustomerAdded} />
            )}
            columns={[
                { key: 'order_number', label: 'Order No', sortable: true },
                { key: 'product_name', label: 'Product', mobileHidden: true, render: r => r.product_name || '-' },
                { key: 'customer_name', label: 'Customer', sortable: true },
                { key: 'customer_mobile', label: 'Mobile', mobileHidden: true },
                { key: 'estimate_weight', label: 'Est. Wt', sortable: true, align: 'right', mobileHidden: true, render: r => <span className="tabular-nums">{r.estimate_weight} g</span> },
                { key: 'delivery_date', label: 'Delivery', sortable: true, mobileHidden: true },
                { key: 'approx_value', label: 'Value', sortable: true, align: 'right', render: r => r.approx_value ? <span className="font-semibold text-gray-800 tabular-nums">₹{Number(r.approx_value).toLocaleString('en-IN')}</span> : '-' },
                { key: 'status', label: 'Status', sortable: true, render: r => <Badge color={sc[r.status]}>{r.status?.replace(/_/g, ' ')}</Badge> },
            ]}
        />
    );
}