import { useForm } from '@inertiajs/react';
import { useRef, useState } from 'react';
import ResourceIndex from '../../Components/ResourceIndex';
import RelationTable from '../../Components/RelationTable';
import Badge from '../../Components/Badge';
import { FormSection, TextInput, SelectInput, TextArea, DateInput, SmartNumberInput } from '../../Components/Form';
import SlideOver, { 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 { formatDate } from '../../lib/format';
import { parseMoney } from '../../lib/parse';

const today = () => new Date().toISOString().split('T')[0];
const inputDate = (value) => value ? String(value).slice(0, 10) : today();
const inr = (n) => `Rs.${Number(n || 0).toLocaleString('en-IN', { maximumFractionDigits: 2 })}`;
const grams = (n) => `${Number(n || 0).toLocaleString('en-IN', { maximumFractionDigits: 3 })} g`;

const MORT_TYPE_LABEL = {
    additional_loan: 'Add Cash (Top-up loan)',
    interest_payment: 'Interest Payment',
    partial_repayment: 'Partial Repayment',
    full_settlement: 'Full Settlement',
};

const MORT_TYPE_COLOR = {
    additional_loan: 'bg-red-50 text-red-700 border-red-200',
    interest_payment: 'bg-yellow-50 text-yellow-700 border-yellow-200',
    partial_repayment: 'bg-sky-50 text-sky-700 border-sky-200',
    full_settlement: 'bg-green-50 text-green-700 border-green-200',
};

const MORT_TYPE_HELPER = {
    additional_loan: 'Increase outstanding principal',
    interest_payment: 'Logged against interest paid; does not reduce principal',
    partial_repayment: 'Reduces outstanding principal',
    full_settlement: 'Closes the loan and sets principal to zero',
};

function daysForInterest(fromDate, outstanding) {
    if (!fromDate || Number(outstanding || 0) <= 0) return 0;
    const from = new Date(fromDate);
    const now = new Date();
    from.setHours(0, 0, 0, 0);
    now.setHours(0, 0, 0, 0);
    if (from > now) return 0;
    return Math.max(1, Math.floor((now - from) / 86400000));
}

function accruedInterestFor(record, outstanding) {
    if (!record) return 0;
    const transactions = [...(record.transactions || [])]
        .filter(t => t.transaction_date)
        .sort((a, b) => new Date(b.transaction_date) - new Date(a.transaction_date));
    const fromDate = transactions[0]?.transaction_date || record.mortgage_date;
    const dailyRate = Number(record.interest_rate || 0) / 100 / 30;
    return Math.round(Number(outstanding || 0) * dailyRate * daysForInterest(fromDate, outstanding) * 100) / 100;
}

function productValueFor(record, currentGoldRate) {
    const rate = Number(currentGoldRate || 0);
    const purity = Number(record?.purity || 0);
    const purityRatio = purity <= 1 ? purity : purity / 100;
    if (!record || rate <= 0 || purityRatio <= 0) return 0;
    return Math.round(Number(record.net_weight || 0) * purityRatio * (rate / 10) * 100) / 100;
}

function LoanStatus({ record, currentGoldRate }) {
    if (!record) return null;
    const outstanding = Number(record.outstanding_principal ?? record.amount_given) || 0;
    const interest = accruedInterestFor(record, outstanding);
    const totalDue = outstanding + interest;
    const productVal = productValueFor(record, currentGoldRate);
    const lossMargin = productVal - totalDue;

    return (
        <div className="my-4 p-4 rounded-xl border border-primary-200 bg-gradient-to-br from-primary-50/40 via-white to-primary-50/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.6)]">
            <h3 className="font-display italic text-xs text-primary-700 mb-3">Live Mortgage Status</h3>
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
                <div>
                    <p className="text-[11px] text-gray-500 uppercase tracking-wider">Outstanding</p>
                    <p className="font-display text-base font-bold text-gray-800 tabular-nums">{inr(outstanding)}</p>
                    <p className="text-[10px] text-gray-400 mt-0.5">Principal only</p>
                </div>
                <div>
                    <p className="text-[11px] text-gray-500 uppercase tracking-wider">Accrued Interest</p>
                    <p className="font-display text-base font-bold text-amber-700 tabular-nums">{inr(interest)}</p>
                    <p className="text-[10px] text-gray-400 mt-0.5">Since last transaction</p>
                </div>
                <div>
                    <p className="text-[11px] text-primary-700 uppercase tracking-wider font-semibold">Total Due Today</p>
                    <p className="font-display text-base font-bold text-primary-800 tabular-nums">{inr(totalDue)}</p>
                    <p className="text-[10px] text-gray-400 mt-0.5">Principal + interest</p>
                </div>
                <div>
                    <p className="text-[11px] text-gray-500 uppercase tracking-wider">Product Value</p>
                    <p className={`font-display text-base font-bold tabular-nums ${lossMargin < 0 ? 'text-red-600' : 'text-green-700'}`}>{inr(productVal)}</p>
                    <p className="text-[10px] text-gray-400 mt-0.5">@ {inr(currentGoldRate)} / 10 g</p>
                </div>
            </div>
            {lossMargin < 0 && productVal > 0 && (
                <div className="mt-3 pt-3 border-t border-primary-200 text-xs text-red-700 font-semibold">
                    In loss by {inr(Math.abs(lossMargin))}: outstanding exceeds product value at current rate.
                </div>
            )}
        </div>
    );
}

function FormContent({ record, onClose, reopenAsNew, customers, onCustomerAdded, currentGoldRate }) {
    const isEdit = !!record;
    const formRef = useRef(null);
    const { data, setData, post, put, processing, errors } = useForm({
        customer_id: '',
        customer_name: record?.customer_name || '',
        customer_mobile: record?.customer_mobile || '',
        customer_gst: '',
        customer_address: '',
        mortgage_date: inputDate(record?.mortgage_date),
        product_description: record?.product_description || '',
        gross_weight: record?.gross_weight || '',
        net_weight: record?.net_weight || '',
        purity: record?.purity || '',
        amount_given: record?.amount_given || '',
        interest_rate: record?.interest_rate || '',
        status: record?.status || 'active',
        opening_receivable: record?.opening_receivable ?? '0',
        opening_payable: record?.opening_payable ?? '0',
        opening_metal_receivable: record?.opening_metal_receivable ?? '0',
        opening_metal_payable: record?.opening_metal_payable ?? '0',
    });
    const { isDirty, markClean } = useDirtyForm(data);
    useDrawerDirty(isDirty);
    const cancel = useDrawerCancel(onClose);

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

    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 }}
                />
                <DateInput label="Mortgage Date" name="mortgage_date" value={data.mortgage_date} onChange={set} required error={errors.mortgage_date} />
            </FormSection>

            <FormSection title="Product Pledged" columns={2}>
                <TextArea label="Description" name="product_description" value={data.product_description} onChange={set} required className="sm:col-span-2" error={errors.product_description} />
                <WeightInput label="Gross Weight" name="gross_weight" value={data.gross_weight} onChange={set} required error={errors.gross_weight} />
                <WeightInput label="Net Weight" name="net_weight" value={data.net_weight} onChange={set} required error={errors.net_weight} />
                <PurityInput name="purity" value={data.purity} onChange={set} required className="sm:col-span-2" error={errors.purity} />
            </FormSection>

            <FormSection title="Loan Terms" columns={2}>
                <SmartNumberInput label="Amount Given" name="amount_given" value={data.amount_given} onChange={set} required prefix="Rs." parser={parseMoney} helper="Accepts 50k, 1.2L" error={errors.amount_given} />
                <TextInput label="Monthly Interest Rate" name="interest_rate" value={data.interest_rate} onChange={set} required suffix="%" type="number" error={errors.interest_rate} />
                <SelectInput
                    label="Status"
                    name="status"
                    value={data.status}
                    onChange={set}
                    options={[{ value: 'active', label: 'Active' }, { value: 'settled', label: 'Settled' }]}
                    error={errors.status}
                />
            </FormSection>

            <FormSection title="Opening Mortgage Ledger" description="Defaults to zero. Use only for balances that existed before this mortgage was entered here." 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 && <LoanStatus record={record} currentGoldRate={currentGoldRate} />}

            <DrawerFooter>
                <p className="text-[11px] text-gray-400 mr-auto hidden sm:block">
                    Ctrl+Enter 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>
    );
}

function TransactionsPanel({ mortgage }) {
    if (!mortgage) return null;
    const outstanding = Number(mortgage.outstanding_principal || 0);
    const interest = accruedInterestFor(mortgage, outstanding);
    const totalDue = Math.round((outstanding + interest) * 100) / 100;

    return (
        <RelationTable
            title="Transactions"
            rows={mortgage.transactions || []}
            storeUrl={`/mortgages/${mortgage.id}/transactions`}
            deleteUrl={(row) => `/mortgages/${mortgage.id}/transactions/${row.id}`}
            defaultDraft={{
                transaction_date: today(),
                type: 'partial_repayment',
                amount: '',
                notes: '',
            }}
            emptyMessage="No transactions yet. Record the first payment, top-up, or settlement."
            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 ${MORT_TYPE_COLOR[r.type] || 'bg-gray-100 border-gray-200'}`}>
                        {MORT_TYPE_LABEL[r.type] || r.type}
                    </span>
                )},
                { key: 'amount', label: 'Amount', align: 'right', render: r => <span className="font-semibold text-gray-800 tabular-nums">{inr(r.amount)}</span> },
                { key: 'running_balance', label: 'Balance', align: 'right', mobileHidden: true, render: r => <span className="text-gray-600 tabular-nums">{inr(r.running_balance)}</span> },
                { key: 'notes', label: 'Notes', mobileHidden: true, render: r => r.notes ? <span className="text-gray-500 text-xs">{r.notes}</span> : <span className="text-gray-300">-</span> },
            ]}
            renderForm={({ draft, setDraft, errors }) => {
                const upd = (name, value) => setDraft(prev => ({
                    ...prev,
                    [name]: value,
                    ...(name === 'type' && value === 'full_settlement' ? { amount: String(totalDue) } : {}),
                }));

                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 error={errors.transaction_date} />
                        <SelectInput
                            label="Type"
                            name="type"
                            value={draft.type}
                            onChange={upd}
                            required
                            options={Object.entries(MORT_TYPE_LABEL).map(([value, label]) => ({ value, label }))}
                            helper={MORT_TYPE_HELPER[draft.type]}
                            error={errors.type}
                        />
                        <SmartNumberInput label="Amount" name="amount" value={draft.amount} onChange={upd} required prefix="Rs." parser={parseMoney} error={errors.amount} />
                        <TextArea label="Notes" name="notes" value={draft.notes} onChange={upd} className="sm:col-span-2" error={errors.notes} />
                    </div>
                );
            }}
        />
    );
}

function LedgerPanel({ mortgage }) {
    const entries = mortgage?.ledger_entries || mortgage?.ledgerEntries || [];

    return (
        <RelationTable
            title="Mortgage Ledger"
            rows={entries}
            emptyMessage="No ledger entries posted yet."
            columns={[
                { key: 'entry_date', label: 'Date', render: r => formatDate(r.entry_date) },
                { key: 'description', label: 'Description', render: r => r.description || '-' },
                { key: 'debit', label: 'Debit', align: 'right', render: r => Number(r.debit) ? inr(r.debit) : <span className="text-gray-300">-</span> },
                { key: 'credit', label: 'Credit', align: 'right', render: r => Number(r.credit) ? inr(r.credit) : <span className="text-gray-300">-</span> },
                { key: 'running_cash_balance', label: 'Cash Balance', align: 'right', render: r => <span className="font-semibold">{inr(r.running_cash_balance)}</span> },
                { key: 'running_metal_balance', label: 'Metal Balance', align: 'right', mobileHidden: true, render: r => grams(r.running_metal_balance) },
            ]}
        />
    );
}

const transactionIcon = (
    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V7m0 9v1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
);

const ledgerIcon = (
    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M9 7h6m-6 4h6m-6 4h4M6 3h9l3 3v15H6V3z" />
    </svg>
);

export default function Index({ mortgages, filters, customers, currentGoldRate }) {
    const rows = mortgages?.data || [];
    const [localCustomers, setLocalCustomers] = useState(customers || []);
    const [transactionsId, setTransactionsId] = useState(null);
    const [ledgerId, setLedgerId] = useState(null);
    const selectedTransactions = rows.find(row => row.id === transactionsId);
    const selectedLedger = rows.find(row => row.id === ledgerId);
    const handleCustomerAdded = (customer) => setLocalCustomers(prev => [customer, ...prev]);

    return (
        <>
            <ResourceIndex
                title="Mortgages"
                resourceUrl="/mortgages"
                rows={rows}
                links={mortgages?.links}
                meta={{ from: mortgages?.from, to: mortgages?.to, total: mortgages?.total }}
                filters={filters}
                formWide
                emptyActionLabel="Record first mortgage"
                renderForm={({ record, onClose, reopenAsNew }) => (
                    <FormContent
                        record={record}
                        onClose={onClose}
                        reopenAsNew={reopenAsNew}
                        customers={localCustomers}
                        onCustomerAdded={handleCustomerAdded}
                        currentGoldRate={currentGoldRate}
                    />
                )}
                rowActionItems={(row) => [
                    {
                        label: 'Transactions',
                        icon: transactionIcon,
                        color: 'success',
                        onClick: () => setTransactionsId(row.id),
                    },
                    {
                        label: 'Ledger',
                        icon: ledgerIcon,
                        color: 'info',
                        onClick: () => setLedgerId(row.id),
                    },
                ]}
                columns={[
                    { key: 'mortgage_number', label: 'No', sortable: true },
                    { key: 'customer_name', label: 'Customer', sortable: true },
                    { key: 'mortgage_date', label: 'Date', sortable: true, mobileHidden: true },
                    { key: 'net_weight', label: 'Net Wt', align: 'right', mobileHidden: true, render: r => <span className="tabular-nums">{grams(r.net_weight)}</span> },
                    { key: 'purity', label: 'Purity', align: 'right', mobileHidden: true, render: r => <span className="tabular-nums">{r.purity}%</span> },
                    { key: 'amount_given', label: 'Given', sortable: true, align: 'right', mobileHidden: true, render: r => <span className="font-semibold text-gray-800 tabular-nums">{inr(r.amount_given)}</span> },
                    { key: 'outstanding_principal', label: 'Outstanding', sortable: true, align: 'right', render: r => <span className="font-semibold text-red-600 tabular-nums">{inr(r.outstanding_principal)}</span> },
                    { key: 'interest_rate', label: 'Rate', sortable: true, align: 'right', mobileHidden: true, render: r => <span className="tabular-nums">{r.interest_rate}%</span> },
                    { key: 'status', label: 'Status', sortable: true, render: r => <Badge color={r.status === 'active' ? 'warning' : 'success'}>{r.status}</Badge> },
                ]}
            />

            <SlideOver
                open={!!selectedTransactions}
                onClose={() => setTransactionsId(null)}
                title={`Transactions - ${selectedTransactions?.mortgage_number || ''}`}
                subtitle={selectedTransactions?.customer_name}
                wide="90"
            >
                <LoanStatus record={selectedTransactions} currentGoldRate={currentGoldRate} />
                <TransactionsPanel mortgage={selectedTransactions} />
            </SlideOver>

            <SlideOver
                open={!!selectedLedger}
                onClose={() => setLedgerId(null)}
                title={`Ledger - ${selectedLedger?.mortgage_number || ''}`}
                subtitle={selectedLedger?.customer_name}
                wide="90"
            >
                <LedgerPanel mortgage={selectedLedger} />
            </SlideOver>
        </>
    );
}