// suppliers.jsx — Tedarikçi listesi/kartı görünümü (Faz 4 / Parça 4.1)
// Satınalma panelinde "Tedarikçiler" sekmesinde gösterilir. Kategoriye göre gruplanmış liste +
// tek tedarikçi detay kartı. Veri: window.DEMO_SUPPLIERS (useSuppliersSnapshot). Davet/kayıt 4.2.
// Ortak stil yardımcıları (backBtn, inputBox, solidBtn, ghostBtn, ApproverAvatar) admin-approvals.jsx'te global.

// ── Durum rozeti ──
function SupplierStatusBadge({ status, size = 'md' }) {
  const m = window.supplierStatusMeta(status);
  const small = size === 'sm';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap',
      padding: small ? '2px 8px' : '3px 10px', borderRadius: 999,
      background: m.bg, color: m.fg, fontSize: small ? 10.5 : 11.5, fontWeight: 600,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: m.fg }} />
      {m.label}
    </span>
  );
}

// ── Puan (yıldız) ──
function SupplierRating({ rating, c }) {
  const r = rating || 0;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }} title={`${r.toFixed(1)} / 5`}>
      {[1, 2, 3, 4, 5].map((i) => (
        <svg key={i} width="13" height="13" viewBox="0 0 24 24"
          fill={i <= Math.round(r) ? '#F59E0B' : 'none'} stroke={i <= Math.round(r) ? '#F59E0B' : c.subtle} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 2l3 6.5 7 .9-5 4.9 1.2 7-6.4-3.4L5.6 21l1.2-7-5-4.9 7-.9z" />
        </svg>
      ))}
      <span style={{ fontSize: 11.5, color: c.muted, marginLeft: 2 }}>{r > 0 ? r.toFixed(1) : '—'}</span>
    </span>
  );
}

// ── Kategori etiketleri (çoklu) ──
function SupplierCatChips({ ids, c }) {
  return (
    <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
      {(ids || []).map((id) => (
        <span key={id} style={{ padding: '2px 8px', borderRadius: 999, background: c.chipBg, color: c.muted, fontSize: 11 }}>
          {window.supplierCategoryLabel(id)}
        </span>
      ))}
    </div>
  );
}

// ── Liste kartı (kompakt) ──
function SupplierMiniCard({ s, c, onOpen }) {
  const [hover, setHover] = React.useState(false);
  const dimmed = s.status === 'banned' || s.status === 'passive';
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => onOpen(s.id)}
      style={{
        background: hover ? c.cardHover : c.card, border: `1px solid ${hover ? c.primary : c.border}`,
        borderRadius: 14, padding: 14, cursor: 'pointer', transition: 'border-color 120ms, background 120ms',
        display: 'flex', alignItems: 'center', gap: 12, opacity: dimmed ? 0.7 : 1,
      }}>
      <ApproverAvatar initials={window.supplierInitials(s)} c={c} bg={s.status === 'banned' ? '#DC2626' : '#475569'} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 14, fontWeight: 600, color: c.text }}>{s.shortName || s.company}</span>
          <SupplierStatusBadge status={s.status} size="sm" />
        </div>
        <div style={{ fontSize: 12, color: c.muted, marginTop: 3, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <SupplierRating rating={s.rating} c={c} />
          <span style={{ color: c.subtle }}>·</span>
          <span>{s.city || '—'}</span>
          <span style={{ color: c.subtle }}>·</span>
          <span>{s.wonCount || 0} ihale · {formatTL(s.totalVolume || 0)}</span>
        </div>
      </div>
      <span style={{ color: c.muted, display: 'flex', flexShrink: 0 }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6" /></svg>
      </span>
    </div>
  );
}

// ── Tedarikçi listesi (kategoriye gruplu) ──
function SuppliersView({ c, onOpen }) {
  const isMobile = useIsMobile();
  const all = useSuppliersSnapshot();
  const cats = window.SUPPLIER_CATEGORIES || [];
  const [q, setQ] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [catFilter, setCatFilter] = React.useState(() => new Set());
  const [inviteOpen, setInviteOpen] = React.useState(false);
  const toggleCatFilter = (id) => setCatFilter((p) => { const n = new Set(p); n.has(id) ? n.delete(id) : n.add(id); return n; });

  const matches = (s) => {
    if (statusFilter !== 'all' && s.status !== statusFilter) return false;
    if (q.trim()) {
      const t = q.trim().toLowerCase();
      const hay = `${s.company} ${s.shortName} ${s.city} ${s.contactName}`.toLowerCase();
      if (!hay.includes(t)) return false;
    }
    return true;
  };
  const filtered = all.filter(matches);

  // Kategoriye göre grupla — bir tedarikçi birden çok kategoride görünebilir.
  // Kategori filtresi seçiliyse yalnızca o kategoriler gösterilir (binlerce kategori için).
  const grouped = cats
    .filter((cat) => catFilter.size === 0 || catFilter.has(cat.id))
    .map((cat) => ({ cat, list: filtered.filter((s) => (s.categories || []).includes(cat.id)) }))
    .filter((g) => g.list.length > 0);
  // Kategorisizler yalnızca filtre yokken gösterilir
  const uncategorized = catFilter.size > 0 ? [] : filtered.filter((s) => !(s.categories || []).some((id) => cats.find((c2) => c2.id === id)));

  const counts = {
    active: all.filter((s) => s.status === 'active').length,
    passive: all.filter((s) => s.status === 'passive').length,
    banned: all.filter((s) => s.status === 'banned').length,
  };

  const openRegister = (token) => { if (window.__openSupplierRegister) window.__openSupplierRegister(token); };

  return (
    <div>
      {inviteOpen && <SupplierInviteModal c={c} onClose={() => setInviteOpen(false)} onOpenRegister={openRegister} />}
      {/* Özet + davet */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
        <div style={{ fontSize: 13, color: c.muted }}>
          {all.length} tedarikçi · <span style={{ color: '#0E9F6E', fontWeight: 600 }}>{counts.active} aktif</span>
          {counts.passive > 0 && <span> · {counts.passive} pasif</span>}
          {counts.banned > 0 && <span style={{ color: c.danger }}> · {counts.banned} banlı</span>}
        </div>
        <button onClick={() => setInviteOpen(true)} style={solidBtn(c.primary, isMobile)}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg>
          Tedarikçi davet et
        </button>
      </div>

      {/* Arama + durum filtresi */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
        <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Firma, şehir veya kişi ara..." style={{ ...inputBox(c), flex: '1 1 220px' }} />
        <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} style={{ ...inputBox(c), flex: '0 0 auto' }}>
          <option value="all">Tüm durumlar</option>
          <option value="active">Aktif</option>
          <option value="passive">Pasif</option>
          <option value="banned">Banlı</option>
          <option value="pending">Kayıt bekliyor</option>
        </select>
      </div>

      {/* Kategori filtresi — aramalı çoklu seçim (binlerce kategori için) */}
      <div style={{ marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
          <span style={{ fontSize: 11.5, color: c.muted }}>Kategoriye göre filtrele</span>
          {catFilter.size > 0 && <button onClick={() => setCatFilter(new Set())} style={{ appearance: 'none', border: 'none', background: 'transparent', cursor: 'pointer', color: c.primary, fontSize: 11.5, fontWeight: 600, fontFamily: 'inherit', padding: 0 }}>Temizle</button>}
        </div>
        <window.CategoryMultiSelect options={cats} selected={catFilter} onToggle={toggleCatFilter} c={c} placeholder="Kategori arayın ve seçin (boş = tüm kategoriler)..." />
      </div>

      {grouped.length === 0 && uncategorized.length === 0 ? (
        <div style={{ background: c.card, border: `1px dashed ${c.border}`, borderRadius: 16, padding: 48, textAlign: 'center', color: c.muted }}>
          <div style={{ fontSize: 15, fontWeight: 600, color: c.text, marginBottom: 6 }}>Tedarikçi bulunamadı</div>
          Arama/filtreyi değiştirin ya da yeni tedarikçi davet edin.
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {grouped.map(({ cat, list }) => (
            <div key={cat.id}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 700, color: c.text }}>{cat.label}</h3>
                <span style={{ fontSize: 12, fontWeight: 600, color: c.muted, background: c.chipBg, padding: '1px 9px', borderRadius: 999 }}>{list.length}</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 10 }}>
                {list.map((s) => <SupplierMiniCard key={s.id} s={s} c={c} onOpen={onOpen} />)}
              </div>
            </div>
          ))}
          {uncategorized.length > 0 && (
            <div>
              <h3 style={{ margin: '0 0 10px', fontSize: 14.5, fontWeight: 700, color: c.text }}>Kategorisiz</h3>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 10 }}>
                {uncategorized.map((s) => <SupplierMiniCard key={s.id} s={s} c={c} onOpen={onOpen} />)}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ── Detay kartı (tam tedarikçi kartı) ──
function FieldRow({ label, value, c }) {
  return (
    <div style={{ display: 'flex', gap: 12, padding: '7px 0', borderBottom: `1px solid ${c.borderSoft}` }}>
      <span style={{ flex: '0 0 150px', fontSize: 12.5, color: c.muted }}>{label}</span>
      <span style={{ flex: 1, minWidth: 0, fontSize: 13, color: c.text, wordBreak: 'break-word' }}>{value || <span style={{ color: c.subtle }}>—</span>}</span>
    </div>
  );
}

function SupplierSection({ title, c, children }) {
  return (
    <div style={{ background: c.card, border: `1px solid ${c.border}`, borderRadius: 16, padding: 18, marginBottom: 14 }}>
      <div style={{ fontSize: 13, fontWeight: 700, color: c.text, marginBottom: 8 }}>{title}</div>
      {children}
    </div>
  );
}

function SupplierDetail({ s, c, onBack }) {
  const isMobile = useIsMobile();
  const docLabels = window.SUPPLIER_DOC_LABELS || {};
  const typeLabel = (window.SUPPLIER_TYPE_LABEL || {})[s.type] || s.type || '—';
  const supplyLabel = (window.SUPPLY_TYPE_LABEL || {})[s.supplyType] || s.supplyType || '—';
  const [docsReqOpen, setDocsReqOpen] = React.useState(false);
  const missingDocs = Object.keys(docLabels).filter((k) => !(s.docs && s.docs[k]));
  // Elle yükleme (yedek yol) — satınalma karttan doğrudan belge ekler
  const doManualUpload = (k, v) => window.__suppliers.updateSupplier(s.id, {
    docs: { ...(s.docs || {}), [k]: !!(v && v.uploaded) },
    docFiles: { ...(s.docFiles || {}), [k]: v && v.fileName },
  });

  function todo(part) {
    alert(`Bu işlem ${part} parçasında eklenecek.`);
  }
  function delSupplier() {
    if (window.confirm(`"${s.company || s.shortName}" tedarikçi kaydı kalıcı olarak silinsin mi? Bu işlem geri alınamaz.`)) {
      if (window.__suppliers && window.__suppliers.removeSupplier) window.__suppliers.removeSupplier(s.id);
      onBack();
    }
  }
  // Bilgileri düzenle → değişiklik uygulanmaz, yöneticinin onayına gönderilir
  const [editing, setEditing] = React.useState(false);
  const meUser = window.__user || {};
  const myMgrId = meUser.managerId || null;
  const mgrName = myMgrId ? ((window.DEMO_USERS || []).find((u) => u.id === myMgrId) || {}).name : null;
  const pe = s.pendingEdit && s.pendingEdit.status === 'pending' ? s.pendingEdit : null;
  function saveEdit(changes) {
    window.__suppliers.proposeEdit(s.id, changes, { by: meUser.id, byName: meUser.name || 'Satınalma', approverId: myMgrId });
    setEditing(false);
    alert(`Değişiklik ${mgrName || 'yönetici'} onayına gönderildi. Onaylanana kadar kartta eski bilgiler görünür.`);
  }
  // Kayıtlı tedarikçiyi silme → yönetici onayına düşer (anında silinmez)
  function requestDelete() {
    const reason = window.prompt('Silme gerekçesi (yönetici onayına gidecek):', '');
    if (reason === null) return;
    window.__suppliers.proposeDelete(s.id, { reason: reason || '', by: meUser.id, byName: meUser.name || 'Satınalma', approverId: myMgrId });
    alert(`Silme talebi ${mgrName || 'yönetici'} onayına gönderildi.`);
  }
  // Banlama → kayıt durur ama teklif alamaz; gerekçe zorunlu, yönetici onayına düşer
  function requestBan() {
    const reason = window.prompt('Banlama gerekçesi (zorunlu — yönetici onayına gidecek):', '');
    if (reason === null) return;
    if (!reason.trim()) { alert('Banlama için gerekçe yazmalısınız.'); return; }
    window.__suppliers.proposeBan(s.id, { reason: reason.trim(), by: meUser.id, byName: meUser.name || 'Satınalma', approverId: myMgrId });
    alert(`Banlama talebi ${mgrName || 'yönetici'} onayına gönderildi. Onaylanana kadar tedarikçi aktif kalır.`);
  }
  // Banı kaldırma → yönetici onayına düşer
  function requestUnban() {
    const reason = window.prompt('Banı kaldırma gerekçesi (yönetici onayına gidecek):', '');
    if (reason === null) return;
    window.__suppliers.proposeUnban(s.id, { reason: reason.trim ? reason.trim() : reason, by: meUser.id, byName: meUser.name || 'Satınalma', approverId: myMgrId });
    alert(`Banı kaldırma talebi ${mgrName || 'yönetici'} onayına gönderildi.`);
  }

  return (
    <div>
      <button onClick={onBack} style={backBtn(c)}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
        Tedarikçilere dön
      </button>

      {editing ? (
        <SupplierEditForm s={s} c={c} mgrName={mgrName} onSubmit={saveEdit} onCancel={() => setEditing(false)} />
      ) : (
      <React.Fragment>
      {/* Başlık */}
      <div style={{ background: c.card, border: `1px solid ${c.border}`, borderRadius: 16, padding: isMobile ? 16 : 22, marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, flexWrap: 'wrap' }}>
          <ApproverAvatar initials={window.supplierInitials(s)} c={c} bg={s.status === 'banned' ? '#DC2626' : '#475569'} size={48} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 18, fontWeight: 700, color: c.text }}>{s.company}</span>
              <SupplierStatusBadge status={s.status} />
            </div>
            <div style={{ fontSize: 12.5, color: c.muted, marginTop: 4 }}>{typeLabel} · {supplyLabel} · {s.city || '—'}</div>
            <div style={{ marginTop: 8 }}><SupplierCatChips ids={s.categories} c={c} /></div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <SupplierRating rating={s.rating} c={c} />
            <div style={{ fontSize: 11.5, color: c.subtle, marginTop: 4 }}>{s.quoteCount || 0} teklif · {s.wonCount || 0} ihale</div>
          </div>
        </div>
      </div>

      {/* Onay bekleyen talep (satınalma düzenledi/silmek istedi, yönetici onayında) */}
      {pe && pe.kind === 'delete' && (
        <div style={{ background: 'rgba(239,68,68,0.08)', border: `1px solid rgba(239,68,68,0.4)`, borderRadius: 14, padding: 16, marginBottom: 14 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: c.danger, marginBottom: 4 }}>Onay bekleyen SİLME talebi</div>
          <div style={{ fontSize: 12.5, color: c.muted }}>
            {pe.byName} bu tedarikçinin silinmesini istedi · {pe.at} · <b>{mgrName || 'Yönetici'}</b> onayında.
            {pe.reason ? <span> Gerekçe: <span style={{ color: c.text }}>{pe.reason}</span></span> : null}
          </div>
        </div>
      )}
      {pe && (pe.kind === 'ban' || pe.kind === 'unban') && (
        <div style={{ background: 'rgba(245,158,11,0.08)', border: `1px solid rgba(245,158,11,0.4)`, borderRadius: 14, padding: 16, marginBottom: 14 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#B45309', marginBottom: 4 }}>
            {pe.kind === 'ban' ? 'Onay bekleyen BANLAMA talebi' : 'Onay bekleyen ban KALDIRMA talebi'}
          </div>
          <div style={{ fontSize: 12.5, color: c.muted }}>
            {pe.byName} {pe.kind === 'ban' ? 'bu tedarikçiyi banlamak istedi' : 'bu tedarikçinin banını kaldırmak istedi'} · {pe.at} · <b>{mgrName || 'Yönetici'}</b> onayında.
            {pe.reason ? <span> Gerekçe: <span style={{ color: c.text }}>{pe.reason}</span></span> : null}
          </div>
        </div>
      )}
      {pe && pe.kind !== 'delete' && pe.kind !== 'ban' && pe.kind !== 'unban' && (
        <div style={{ background: 'rgba(245,158,11,0.08)', border: `1px solid rgba(245,158,11,0.4)`, borderRadius: 14, padding: 16, marginBottom: 14 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#B45309', marginBottom: 4 }}>Onay bekleyen değişiklik ({Object.keys(pe.changes || {}).length} alan)</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginBottom: 10 }}>
            {pe.byName} düzenledi · {pe.at} · <b>{mgrName || 'Yönetici'}</b> onayında. Onaylanana kadar aşağıda <b>eski</b> bilgiler görünür.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {Object.keys(pe.changes || {}).map((k) => (
              <div key={k} style={{ fontSize: 12, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <span style={{ color: c.muted, minWidth: 130 }}>{(window.SUPPLIER_FIELD_LABELS || {})[k] || k}:</span>
                <span style={{ color: c.subtle, textDecoration: 'line-through' }}>{window.formatSupplierVal(k, s[k])}</span>
                <span style={{ color: c.muted }}>→</span>
                <span style={{ color: c.text, fontWeight: 600 }}>{window.formatSupplierVal(k, pe.changes[k])}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Davet edilmiş — henüz kayıt olmadı */}
      {s.status === 'invited' && (
        <div style={{ background: c.selectedBg, border: `1px solid ${c.primary}`, borderRadius: 14, padding: 16, marginBottom: 14 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: c.text, marginBottom: 4 }}>Kayıt bekleniyor</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginBottom: 12 }}>
            Bu firmaya davet gönderildi ancak tedarikçi henüz kayıt formunu doldurmadı. Tek kullanımlık bağlantı kayıt sonrası geçersiz olur.
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button onClick={() => window.__openSupplierRegister && window.__openSupplierRegister(s.inviteToken)} style={solidBtn(c.primary, false)}>Kayıt formunu aç (tedarikçi gözüyle)</button>
            <button onClick={() => { const l = window.inviteLink(s.inviteToken); if (navigator.clipboard) navigator.clipboard.writeText(l); }} style={ghostBtn(c)}>Bağlantıyı kopyala</button>
            <button onClick={delSupplier} style={{ ...ghostBtn(c), color: c.danger }}>Daveti sil</button>
          </div>
        </div>
      )}

      {/* Banlı uyarısı */}
      {s.status === 'banned' && s.banReason && (
        <div style={{ background: 'rgba(239,68,68,0.08)', border: `1px solid rgba(239,68,68,0.3)`, borderRadius: 14, padding: 14, marginBottom: 14 }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: c.danger, marginBottom: 4 }}>Banlı tedarikçi</div>
          <div style={{ fontSize: 12.5, color: c.text }}>{s.banReason}</div>
        </div>
      )}

      <div style={{ display: isMobile ? 'block' : 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <SupplierSection title="Firma kimliği" c={c}>
          <FieldRow label="Resmi ünvan" value={s.company} c={c} />
          <FieldRow label="Firma tipi" value={typeLabel} c={c} />
          <FieldRow label="Vergi dairesi / no" value={`${s.taxOffice || '—'} · ${s.taxNo || '—'}`} c={c} />
          <FieldRow label="MERSİS no" value={s.mersisNo} c={c} />
          <FieldRow label="Ticaret sicil no" value={s.tradeRegNo} c={c} />
          <FieldRow label="Web sitesi" value={s.website} c={c} />
        </SupplierSection>

        <SupplierSection title="İletişim" c={c}>
          <FieldRow label="Adres" value={`${s.address || '—'}${s.city ? ', ' + s.city : ''}`} c={c} />
          <FieldRow label="Telefon" value={s.phone} c={c} />
          <FieldRow label="GSM" value={s.gsm} c={c} />
          <FieldRow label="E-posta" value={s.email} c={c} />
          <FieldRow label="Muhatap" value={s.contactName ? `${s.contactName}${s.contactTitle ? ' · ' + s.contactTitle : ''}` : null} c={c} />
          <FieldRow label="Muhatap iletişim" value={[s.contactPhone, s.contactEmail].filter(Boolean).join(' · ')} c={c} />
        </SupplierSection>

        <SupplierSection title="Ticari" c={c}>
          <FieldRow label="Hizmet alanları" value={(s.categories || []).map(window.supplierCategoryLabel).join(', ')} c={c} />
          <FieldRow label="Vade" value={s.paymentTermDays != null ? `${s.paymentTermDays} gün` : null} c={c} />
          <FieldRow label="Para birimi" value={s.currency} c={c} />
          <FieldRow label="Çalışma şekli" value={supplyLabel} c={c} />
          <FieldRow label="IBAN" value={s.iban} c={c} />
          <FieldRow label="Banka" value={s.bankName} c={c} />
        </SupplierSection>

        <SupplierSection title="Belgeler" c={c}>
          {Object.keys(docLabels).map((k) => {
            const ok = s.docs && s.docs[k];
            return (
              <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: `1px solid ${c.borderSoft}` }}>
                <span style={{ width: 18, height: 18, borderRadius: 6, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: ok ? 'rgba(16,185,129,0.14)' : c.chipBg, color: ok ? '#0E9F6E' : c.subtle, flexShrink: 0 }}>
                  {ok
                    ? <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
                    : <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg>}
                </span>
                <span style={{ fontSize: 12.5, color: ok ? c.text : c.muted }}>{docLabels[k]}</span>
                <span style={{ marginLeft: 'auto', fontSize: 11.5, color: ok ? '#0E9F6E' : c.subtle }}>{ok ? 'Yüklü' : 'Eksik'}</span>
              </div>
            );
          })}
        </SupplierSection>
      </div>

      <SupplierSection title="Performans & sistem" c={c}>
        <FieldRow label="Puan" value={s.rating ? `${s.rating.toFixed(1)} / 5` : null} c={c} />
        <FieldRow label="Teklif / kazanılan" value={`${s.quoteCount || 0} teklif · ${s.wonCount || 0} ihale`} c={c} />
        <FieldRow label="Toplam ciro" value={formatTL(s.totalVolume || 0)} c={c} />
        <FieldRow label="Davet eden" value={s.invitedBy} c={c} />
        <FieldRow label="Kayıt tarihi" value={s.registeredAt} c={c} />
        <FieldRow label="İç not" value={s.internalNote} c={c} />
      </SupplierSection>

      {/* Eksik belge yönetimi — kayıtlı tedarikçide eksik varsa */}
      {s.status !== 'invited' && missingDocs.length > 0 && (
        <div style={{ background: c.card, border: `1px solid ${c.border}`, borderRadius: 16, padding: 18, marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: '#B45309' }} />
            <div style={{ fontSize: 13, fontWeight: 700, color: c.text }}>Eksik belgeler ({missingDocs.length})</div>
          </div>
          <div style={{ fontSize: 12.5, color: c.muted, marginBottom: 14 }}>
            Tedarikçiye tek kullanımlık link gönderip kendisi yükleyebilir (önerilen) ya da elinizdeki belgeyi karttan elle yükleyebilirsiniz.
          </div>
          <button onClick={() => setDocsReqOpen(true)} style={{ ...solidBtn(c.primary, false), marginBottom: 14 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 6 }}><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" /></svg>
            Tedarikçiden belge iste (link gönder)
          </button>
          <div style={{ fontSize: 11.5, color: c.subtle, marginBottom: 8 }}>veya elinizdeki belgeyi elle yükleyin (yedek):</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {missingDocs.map((k) => (
              <window.DocUploadRow key={k} docKey={k} label={docLabels[k]} c={c}
                value={s.docs && s.docs[k] ? { uploaded: true, fileName: (s.docFiles || {})[k] } : null}
                onChange={(v) => doManualUpload(k, v)} />
            ))}
          </div>
        </div>
      )}

      {docsReqOpen && (
        <window.SupplierDocsRequestModal s={s} c={c}
          onClose={() => setDocsReqOpen(false)}
          onOpenDocs={(token) => window.__openSupplierRegister && window.__openSupplierRegister(token, 'docs')} />
      )}

      {/* Aksiyonlar — kayıtlı tedarikçiler için */}
      {s.status !== 'invited' && (
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {pe
            ? <button disabled style={{ ...ghostBtn(c), opacity: 0.5, cursor: 'default' }}>Bilgileri düzenle (onay bekliyor)</button>
            : <button onClick={() => setEditing(true)} style={solidBtn(c.primary, false)}>Bilgileri düzenle</button>}
          <button onClick={() => todo('4.3 (teklif toplama)')} style={ghostBtn(c)}>Teklif iste</button>
          {s.status !== 'banned'
            ? (pe
                ? <button disabled style={{ ...ghostBtn(c), opacity: 0.5, cursor: 'default' }}>Banla (onay bekliyor)</button>
                : <button onClick={requestBan} style={{ ...ghostBtn(c), color: c.danger }}>Banla (yönetici onayı)</button>)
            : (pe
                ? <button disabled style={{ ...ghostBtn(c), opacity: 0.5, cursor: 'default' }}>Banı kaldır (onay bekliyor)</button>
                : <button onClick={requestUnban} style={{ ...ghostBtn(c), color: '#0E9F6E' }}>Banı kaldır (yönetici onayı)</button>)}
          {pe
            ? <button disabled style={{ ...ghostBtn(c), opacity: 0.5, cursor: 'default', marginLeft: 'auto' }}>Kaydı sil (onay bekliyor)</button>
            : <button onClick={requestDelete} style={{ ...ghostBtn(c), color: c.danger, marginLeft: 'auto' }}>Kaydı sil (yönetici onayı)</button>}
        </div>
      )}
      </React.Fragment>
      )}
    </div>
  );
}

// ─────────── Düzenlenebilir alan etiketleri + değer biçimleyici ───────────
const SUPPLIER_FIELD_LABELS = {
  company: 'Resmi ünvan', shortName: 'Kısa ad', type: 'Firma tipi', taxOffice: 'Vergi dairesi', taxNo: 'Vergi no',
  mersisNo: 'MERSİS no', tradeRegNo: 'Ticaret sicil no', website: 'Web sitesi', address: 'Adres', city: 'Şehir',
  phone: 'Telefon', gsm: 'GSM', email: 'E-posta', contactName: 'Muhatap kişi', contactTitle: 'Muhatap ünvanı',
  contactPhone: 'Muhatap telefon', contactEmail: 'Muhatap e-posta', paymentTermDays: 'Vade (gün)', currency: 'Para birimi',
  supplyType: 'Çalışma şekli', iban: 'IBAN', bankName: 'Banka', categories: 'Hizmet kategorileri', internalNote: 'İç not',
};
function formatSupplierVal(field, val) {
  if (val == null || val === '') return '—';
  if (field === 'type') return (window.SUPPLIER_TYPE_LABEL || {})[val] || val;
  if (field === 'supplyType') return (window.SUPPLY_TYPE_LABEL || {})[val] || val;
  if (field === 'categories') return (Array.isArray(val) ? val : []).map(window.supplierCategoryLabel).join(', ') || '—';
  if (field === 'paymentTermDays') return `${val} gün`;
  return String(val);
}

// ─────────── Tedarikçi düzenleme formu (satınalma → yönetici onayı) ───────────
const SUPPLIER_TEXT_FIELDS = ['company', 'shortName', 'taxOffice', 'taxNo', 'mersisNo', 'tradeRegNo', 'website', 'address', 'city', 'phone', 'gsm', 'email', 'contactName', 'contactTitle', 'contactPhone', 'contactEmail', 'iban', 'bankName'];

function SupplierEditForm({ s, c, mgrName, onSubmit, onCancel }) {
  const isMobile = useIsMobile();
  const cats = window.SUPPLIER_CATEGORIES || [];
  const [f, setF] = React.useState(() => {
    const o = {};
    SUPPLIER_TEXT_FIELDS.forEach((k) => { o[k] = s[k] || ''; });
    o.type = s.type || 'ltd'; o.currency = s.currency || 'TRY'; o.supplyType = s.supplyType || '';
    o.paymentTermDays = s.paymentTermDays != null ? String(s.paymentTermDays) : '';
    o.internalNote = s.internalNote || '';
    return o;
  });
  const [picked, setPicked] = React.useState(() => new Set(s.categories || []));
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const toggleCat = (id) => setPicked((p) => { const n = new Set(p); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const lbl = { fontSize: 11.5, color: c.muted, marginBottom: 6, display: 'block' };
  const col = { display: 'flex', flexDirection: 'column' };
  const grid = { display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 };

  function submit() {
    const changes = {};
    SUPPLIER_TEXT_FIELDS.forEach((k) => { const nv = (f[k] || '').trim(); if ((s[k] || '') !== nv) changes[k] = nv; });
    if ((s.type || '') !== f.type) changes.type = f.type;
    if ((s.currency || '') !== f.currency) changes.currency = f.currency;
    if ((s.supplyType || '') !== f.supplyType) changes.supplyType = f.supplyType;
    if ((s.internalNote || '') !== (f.internalNote || '').trim()) changes.internalNote = (f.internalNote || '').trim();
    const pt = parseInt(String(f.paymentTermDays).replace(/[^\d]/g, ''), 10) || 0;
    if ((s.paymentTermDays || 0) !== pt) changes.paymentTermDays = pt;
    const newCats = Array.from(picked);
    if (JSON.stringify((s.categories || []).slice().sort()) !== JSON.stringify(newCats.slice().sort())) changes.categories = newCats;
    if (Object.keys(changes).length === 0) { alert('Herhangi bir değişiklik yapmadınız.'); return; }
    onSubmit(changes);
  }

  const card = { background: c.card, border: `1px solid ${c.border}`, borderRadius: 16, padding: isMobile ? 16 : 22, marginBottom: 14 };
  const field = (k, opts = {}) => (
    <div style={{ ...col, gridColumn: opts.full ? '1 / -1' : 'auto' }}>
      <label style={lbl}>{SUPPLIER_FIELD_LABELS[k]}</label>
      <input value={f[k]} onChange={(e) => set(k, e.target.value)} style={inputBox(c)} />
    </div>
  );

  return (
    <div>
      <div style={{ ...card, borderColor: c.primary }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: c.text, marginBottom: 4 }}>Tedarikçi bilgilerini düzenle</div>
        <div style={{ fontSize: 12.5, color: c.muted, marginBottom: 16 }}>
          Yaptığınız değişiklikler hemen uygulanmaz; <b>{mgrName || 'yöneticinizin'}</b> onayına gönderilir.
        </div>
        <div style={grid}>
          {field('company', { full: true })}
          {field('shortName')}
          <div style={col}>
            <label style={lbl}>{SUPPLIER_FIELD_LABELS.type}</label>
            <select value={f.type} onChange={(e) => set('type', e.target.value)} style={inputBox(c)}>
              {Object.keys(window.SUPPLIER_TYPE_LABEL || {}).map((k) => <option key={k} value={k}>{window.SUPPLIER_TYPE_LABEL[k]}</option>)}
            </select>
          </div>
          {field('taxOffice')}{field('taxNo')}
          {field('mersisNo')}{field('tradeRegNo')}
          {field('website')}
          {field('address', { full: true })}
          {field('city')}
          {field('phone')}{field('gsm')}{field('email')}
          {field('contactName')}{field('contactTitle')}
          {field('contactPhone')}{field('contactEmail')}
        </div>
        <div style={{ marginTop: 14 }}>
          <label style={lbl}>{SUPPLIER_FIELD_LABELS.categories}</label>
          <window.CategoryMultiSelect options={cats} selected={picked} onToggle={toggleCat} c={c} placeholder="Kategori arayın ve seçin..." />
        </div>
        <div style={{ ...grid, marginTop: 14 }}>
          <div style={col}>
            <label style={lbl}>{SUPPLIER_FIELD_LABELS.paymentTermDays}</label>
            <input value={f.paymentTermDays} onChange={(e) => set('paymentTermDays', e.target.value)} style={inputBox(c)} inputMode="numeric" />
          </div>
          <div style={col}>
            <label style={lbl}>{SUPPLIER_FIELD_LABELS.currency}</label>
            <select value={f.currency} onChange={(e) => set('currency', e.target.value)} style={inputBox(c)}><option>TRY</option><option>USD</option><option>EUR</option></select>
          </div>
          <div style={col}>
            <label style={lbl}>{SUPPLIER_FIELD_LABELS.supplyType}</label>
            <select value={f.supplyType} onChange={(e) => set('supplyType', e.target.value)} style={{ ...inputBox(c), color: f.supplyType ? c.text : c.subtle }}>
              <option value="">Seçiniz</option>
              {Object.keys(window.SUPPLY_TYPE_LABEL || {}).map((k) => <option key={k} value={k}>{window.SUPPLY_TYPE_LABEL[k]}</option>)}
            </select>
          </div>
          {field('iban')}{field('bankName')}
        </div>
        <div style={{ marginTop: 14 }}>
          <label style={lbl}>{SUPPLIER_FIELD_LABELS.internalNote}</label>
          <textarea value={f.internalNote} onChange={(e) => set('internalNote', e.target.value)} rows={2} style={{ ...inputBox(c), resize: 'vertical' }} />
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
          <button onClick={submit} style={solidBtn(c.primary, isMobile)}>Onaya gönder</button>
          <button onClick={onCancel} style={ghostBtn(c, isMobile)}>Vazgeç</button>
        </div>
      </div>
    </div>
  );
}

// ─────────── Yönetici onayı: tedarikçi değişiklik kartı (Onay Kutusu'nda) ───────────
function SupplierChangeCard({ s, c, onApprove, onReject }) {
  const isMobile = useIsMobile();
  const pe = s.pendingEdit || {};
  const isDelete = pe.kind === 'delete';
  const isBan = pe.kind === 'ban';
  const isUnban = pe.kind === 'unban';
  const danger = isDelete || isBan; // kırmızı vurgulu işlemler
  const keys = Object.keys(pe.changes || {});
  const badgeLabel = isDelete ? 'Silme talebi' : isBan ? 'Banlama talebi' : isUnban ? 'Ban kaldırma' : `${keys.length} alan`;
  const approveLabel = isDelete ? 'Silmeyi onayla' : isBan ? 'Banlamayı onayla' : isUnban ? 'Banı kaldır' : 'Onayla';
  return (
    <div style={{ background: c.card, border: `1px solid ${danger ? 'rgba(239,68,68,0.4)' : c.border}`, borderRadius: 16, padding: isMobile ? 14 : 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <ApproverAvatar initials={window.supplierInitials(s)} c={c} bg={danger ? '#DC2626' : '#475569'} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: c.text }}>{s.company}</div>
          <div style={{ fontSize: 12, color: c.muted }}>{pe.byName} · {pe.at}</div>
        </div>
        <span style={{ padding: '3px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap', background: danger ? 'rgba(239,68,68,0.14)' : 'rgba(245,158,11,0.14)', color: danger ? '#DC2626' : '#B45309' }}>
          {badgeLabel}
        </span>
      </div>
      <div style={{ padding: '12px 0', borderTop: `1px solid ${c.borderSoft}`, borderBottom: `1px solid ${c.borderSoft}`, marginBottom: 12 }}>
        {isDelete || isBan || isUnban ? (
          <div style={{ fontSize: 12.5, color: c.text }}>
            {isDelete && <span><b>{s.company}</b> kaydının kalıcı olarak silinmesi talep ediliyor.</span>}
            {isBan && <span><b>{s.company}</b> tedarikçisinin <b>banlanması</b> talep ediliyor (kayıt durur, yeni teklif alamaz).</span>}
            {isUnban && <span><b>{s.company}</b> tedarikçisinin <b>banının kaldırılması</b> talep ediliyor (yeniden teklif alabilir).</span>}
            {pe.reason ? <div style={{ marginTop: 4, color: c.muted }}>Gerekçe: {pe.reason}</div> : <div style={{ marginTop: 4, color: c.subtle }}>Gerekçe belirtilmedi.</div>}
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {keys.map((k) => (
              <div key={k} style={{ fontSize: 12.5, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <span style={{ color: c.muted, minWidth: 130 }}>{(window.SUPPLIER_FIELD_LABELS || {})[k] || k}:</span>
                <span style={{ color: c.subtle, textDecoration: 'line-through' }}>{window.formatSupplierVal(k, s[k])}</span>
                <span style={{ color: c.muted }}>→</span>
                <span style={{ color: c.text, fontWeight: 600 }}>{window.formatSupplierVal(k, pe.changes[k])}</span>
              </div>
            ))}
          </div>
        )}
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button onClick={() => onApprove(s.id)} style={solidBtn(danger ? c.danger : c.success, isMobile)}>{approveLabel}</button>
        <button onClick={() => onReject(s.id)} style={{ ...ghostBtn(c, isMobile), color: c.danger }}>Reddet</button>
      </div>
    </div>
  );
}

Object.assign(window, { SuppliersView, SupplierDetail, SupplierStatusBadge, SupplierRating, SupplierMiniCard, SupplierEditForm, SupplierChangeCard, SUPPLIER_FIELD_LABELS, formatSupplierVal });