import { statusTone } from './quotationStatusTones';
import { StatusBadge } from '@/Components/Proto/UI/StatusBadge';

/**
 * Shared filter + table definition for the three quotation list menus that render
 * the same rows — Quotations (quotations.index), View Head (quotations.view-head),
 * and View All (quotations.view-all). Each page passes its own differences (title,
 * route, header action, storageKey, rowHref) to <QuotationListPage>; the columns,
 * cell rendering, and pill set are identical and live here once.
 *
 * The per-view data differences (no scope vs head-subordinate tree, sales source,
 * tanggal source, scoped dropdown options) are all backend (QuotationController) and
 * produce an identical { quotations, filters, filterOptions } shape — the frontend
 * config does not vary.
 */

const COLUMN_GROUPS = [
    { id: 'identifiers', label: 'Identifiers' },
    { id: 'metadata', label: 'Metadata' },
    { id: 'order', label: 'Order & Dates' },
];

const COLUMN_DEFS = [
    { id: 'id', label: 'Qt No', groupId: 'identifiers', required: true },
    { id: 'company', label: 'Company Name', groupId: 'identifiers', required: true, sticky: true },
    { id: 'status', label: 'Quotation Status', groupId: 'identifiers' },
    { id: 'feedback', label: 'Feedback Status', groupId: 'identifiers' },
    { id: 'creator', label: 'Creator', groupId: 'metadata' },
    { id: 'sales', label: 'Sales', groupId: 'metadata' },
    { id: 'division', label: 'Division', groupId: 'metadata' },
    { id: 'industry', label: 'Industry', groupId: 'metadata' },
    { id: 'companyCategory', label: 'Company Category', groupId: 'metadata', sortable: false },
    { id: 'tanggal', label: 'Tanggal', groupId: 'order' },
    { id: 'poNo', label: 'Customer PO No', groupId: 'order' },
    { id: 'poDate', label: 'Customer PO Date', groupId: 'order' },
    { id: 'deliveryDate', label: 'Delivery Date', groupId: 'order' },
    { id: 'comment', label: 'Comment', groupId: 'order' },
    { id: 'productList', label: 'Product List', groupId: 'order', sortable: false, cellClass: '!whitespace-normal min-w-70 max-w-105 align-top text-foreground' },
];

/** Columns object consumed by <QuotationListPage> (defs + groups + initial visibility). */
export const QUOTATION_COLUMNS = {
    defs: COLUMN_DEFS,
    groups: COLUMN_GROUPS,
    defaultVisible: new Set(COLUMN_DEFS.filter((c) => c.id !== 'productList').map((c) => c.id)),
};

const isBlankDate = (v) => !v || v === '0000-00-00';

/** Shared cell renderer. Empty values render as an em dash (—). */
export const renderQuotationCell = (q, colId) => {
    switch (colId) {
        case 'id': return <strong className="font-bold text-primary tabular-nums">#{q.id}</strong>;
        case 'company': return q.company ? <span className="text-[12px] font-semibold text-foreground">{q.company}</span> : '—';
        case 'status': return q.status ? <StatusBadge tone={statusTone(q.status)}>{q.status}</StatusBadge> : '—';
        case 'division': return q.division ? <span className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-[10px] font-bold uppercase text-muted-foreground">{q.division}</span> : '—';
        case 'feedback': return q.feedback ? <span className="text-muted-foreground">{q.feedback}</span> : '—';
        case 'creator': return q.creator || '—';
        case 'sales': return q.sales || '—';
        case 'industry': return q.industry ? <span className="text-muted-foreground">{q.industry}</span> : '—';
        case 'companyCategory': return q.companyCategory ? <span className="text-muted-foreground">{q.companyCategory}</span> : '—';
        case 'tanggal': return isBlankDate(q.tanggal) ? '—' : <span className="text-[11px] tabular-nums text-muted-foreground">{q.tanggal}</span>;
        case 'poNo': return q.poNo ? <span className="text-[11px] tabular-nums text-muted-foreground">{q.poNo}</span> : '—';
        case 'poDate': return isBlankDate(q.poDate) ? '—' : <span className="text-[11px] tabular-nums text-muted-foreground">{q.poDate}</span>;
        case 'deliveryDate': return isBlankDate(q.deliveryDate) ? '—' : <span className="text-[11px] tabular-nums text-muted-foreground">{q.deliveryDate}</span>;
        case 'comment': return q.comment ? <span className="text-[11px] text-muted-foreground">{q.comment}</span> : '—';
        case 'productList': {
            const items = q.productList || [];
            if (!items.length) return '—';
            return (
                <div className="flex flex-col gap-2">
                    {items.map((p, i) => (
                        <div key={i} className="leading-snug">
                            <strong className="font-semibold text-foreground">{p.productName}</strong>{' '}
                            <span className="text-[11px] text-muted-foreground tabular-nums">Pack: {p.packQty}{p.packName ? ` ${p.packName}` : ''};</span>{' '}
                            <span className="text-[11px] text-primary tabular-nums">Order: {p.orderQty}{p.orderSatuan ? ` ${p.orderSatuan}` : ''}</span>{' '}
                            <span className="text-[11px] text-primary font-medium tabular-nums">* ${p.unitUsd} (IDR {p.unitIdr})</span>{' '}
                            <span className="text-[11px] text-success-text font-medium tabular-nums">= ${p.totalUsd} (IDR {p.totalIdr})</span>
                        </div>
                    ))}
                </div>
            );
        }
        default: return '—';
    }
};

/**
 * The standard 7-pill filter set shared by all three lists. Options come from the
 * page's `filterOptions` prop (already shaped per-view by the controller).
 */
export const quotationListPills = (filterOptions) => [
    { type: 'select', key: 'status', label: 'Status', options: filterOptions?.statuses || [] },
    { type: 'select', key: 'division', label: 'Division', options: filterOptions?.divisions || [] },
    { type: 'select', key: 'industry', label: 'Industry', options: filterOptions?.industries || [] },
    { type: 'option', key: 'creator', label: 'Creator', options: filterOptions?.creators || [] },
    { type: 'option', key: 'sales', label: 'Sales', options: filterOptions?.salesUsers || [] },
    { type: 'isOrder' },
    { type: 'dateRange', label: 'Tanggal' },
];