'use client';
import Link from 'next/link';
import { useState, useTransition } from 'react';

type Contact = { id: string; name: string };
/** Sipariş detayında: ilanı bir müşteri adayına bağla / bağı kaldır. */
export function LinkContact({ orderId, contacts, current, action }: { orderId: string; contacts: Contact[]; current: string | null; action: (orderId: string, contactId: string | null) => Promise<void> }) {
  const [val, setVal] = useState(current || '');
  const [pending, start] = useTransition();
  const save = (v: string) => { setVal(v); start(() => action(orderId, v || null)); };
  if (!contacts.length) return (
    <p className="text-[13px] text-ink-soft">Bu ilanı bir müşteriye bağlamak için önce <Link href="/panel/musteriler" className="font-semibold underline underline-offset-2">Müşteriler</Link>’den ekleyin.</p>
  );
  return (
    <label className="flex items-center gap-2">
      <span className="tag shrink-0">Müşteri</span>
      <select value={val} onChange={(e) => save(e.target.value)} disabled={pending} className="field flex-1">
        <option value="">— bağlı değil —</option>
        {contacts.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
      </select>
      {pending && <span className="text-[12px] text-ink-soft">…</span>}
    </label>
  );
}