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

/**
 * The "Link With …" candidate table — a port of the three legacy partials every linking
 * point in the LWR module included: listlinkwithquotation.php (11 columns),
 * listlinkwithsample.php (12) and listlinkwithvisit.php (10).
 *
 * They are deliberately WIDE. Picking the right document out of a company's history needs
 * the status, who created it, which division, the dates and — the widest column of all —
 * the item list. A row of "No. 412 · Approved" cannot be told apart from its neighbour.
 *
 * Same component in all three places (LWR detail modal, Create form, Revise form) because
 * legacy included the same partial in all three.
 */

// Column sets, legacy order. `items` is the trailing summary column (ProductList /
// SampleList / History in legacy) — an array of strings from DocumentLink::detailLines().
const COLUMNS = {
    quotation: [
        { key: 'id', label: 'Quo.No', w: 'w-20' },
        { key: 'status', label: 'Status', w: 'w-28', badge: true },
        { key: 'company', label: 'Company', w: 'w-44' },
        { key: 'feedbackStatus', label: 'FeedbackStatus', w: 'w-32' },
        { key: 'creator', label: 'Creator', w: 'w-28' },
        { key: 'sales', label: 'Sales', w: 'w-28' },
        { key: 'division', label: 'Division', w: 'w-28' },
        { key: 'tanggal', label: 'Tanggal', w: 'w-28' },
        { key: 'deliveryDate', label: 'DeliveryDate', w: 'w-28' },
        { key: 'comment', label: 'Comment', w: 'w-36' },
        { key: 'items', label: 'ProductList', w: 'w-80', list: true },
    ],
    sample: [
        { key: 'id', label: 'SO.No', w: 'w-20' },
        { key: 'status', label: 'Status', w: 'w-28', badge: true },
        { key: 'company', label: 'Company', w: 'w-44' },
        { key: 'feedbackStatus', label: 'FeedbackStatus', w: 'w-32' },
        { key: 'creator', label: 'Creator', w: 'w-28' },
        { key: 'sales', label: 'Sales', w: 'w-28' },
        { key: 'division', label: 'Division', w: 'w-28' },
        { key: 'tanggal', label: 'Tanggal', w: 'w-28' },
        { key: 'deliveryBy', label: 'DeliveryBy', w: 'w-28' },
        { key: 'comment', label: 'Comment', w: 'w-36' },
        { key: 'project', label: 'Project', w: 'w-32' },
        { key: 'items', label: 'SampleList', w: 'w-80', list: true },
    ],
    visit: [
        { key: 'id', label: 'VR.No', w: 'w-20' },
        { key: 'status', label: 'Status', w: 'w-28', badge: true },
        { key: 'company', label: 'Company', w: 'w-44' },
        { key: 'division', label: 'Division', w: 'w-28' },
        { key: 'purpose', label: 'Purpose', w: 'w-40' },
        { key: 'sales', label: 'Sales', w: 'w-28' },
        { key: 'visitWith', label: 'VisitWith', w: 'w-36' },
        { key: 'meetWith', label: 'MeetWith', w: 'w-36' },
        { key: 'scheduleDate', label: 'ScheduleDate', w: 'w-32', sub: 'scheduleTime' },
        { key: 'items', label: 'History', w: 'w-80', list: true },
    ],
};

const TH = 'whitespace-nowrap border-b border-border px-3 py-2 text-left text-[11px] font-bold uppercase tracking-wide text-muted-foreground';
const TD = 'border-b border-border/60 px-3 py-2 align-top text-[12px] text-foreground';

export function LinkPickerTable({ type, rows = [], checked, onToggle, loading = false }) {
    const cols = COLUMNS[type] || COLUMNS.quotation;

    if (loading) {
        return <p className="m-0 px-3.5 py-8 text-center text-[13px] text-muted-foreground">Memuat…</p>;
    }
    if (rows.length === 0) {
        return <p className="m-0 px-3.5 py-8 text-center text-[13px] text-muted-foreground">Tidak ada dokumen yang bisa ditautkan.</p>;
    }

    return (
        <div className="overflow-x-auto">
            <table className="w-full border-separate border-spacing-0">
                <thead>
                    <tr>
                        <th className={`${TH} w-10`} aria-label="Pilih" />
                        {cols.map((c) => <th key={c.key} className={`${TH} ${c.w}`}>{c.label}</th>)}
                    </tr>
                </thead>
                <tbody>
                    {rows.map((r) => (
                        <tr key={r.id} className="cursor-pointer transition-colors hover:bg-secondary/60"
                            onClick={() => onToggle(r.id)}>
                            <td className={TD}>
                                <input type="checkbox" className="size-4 accent-primary" checked={checked.has(r.id)}
                                    onChange={() => onToggle(r.id)} onClick={(e) => e.stopPropagation()}
                                    aria-label={`Pilih No. ${r.id}`} />
                            </td>
                            {cols.map((c) => (
                                <td key={c.key} className={TD}>
                                    {c.list ? (
                                        (r.items || []).length === 0
                                            ? <span className="text-muted-foreground/55">—</span>
                                            : <div className="flex flex-col gap-0.5 text-muted-foreground">
                                                {r.items.map((line, i) => <span key={i}>{line}</span>)}
                                            </div>
                                    ) : c.badge ? (
                                        r[c.key] ? <StatusBadge tone="neutral">{r[c.key]}</StatusBadge> : <span className="text-muted-foreground/55">—</span>
                                    ) : (
                                        <div className="flex flex-col">
                                            <span>{r[c.key] || <span className="text-muted-foreground/55">—</span>}</span>
                                            {c.sub && r[c.sub] ? <span className="text-[11px] text-muted-foreground">{r[c.sub]}</span> : null}
                                        </div>
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}