/**
 * CRM Hub — מסך ראשי
 * טאבים: לקוחות · אנשי קשר · בעלי מקצוע
 * מנתב ל-CustomersScreen ו-VendorsScreen הקיימים
 */
(function () {

const CRMHub = ({ onBack }) => {
  const [tab, setTab] = React.useState('customers'); // customers | contacts | vendors

  const tabs = [
    { k: 'customers', label: 'לקוחות', icon: 'users' },
    { k: 'contacts',  label: 'אנשי קשר', icon: 'phone' },
    { k: 'vendors',   label: 'בעלי מקצוע', icon: 'briefcase' },
  ];

  // לקוחות — ContactsScreen מסונן ל-scope='client' (Supabase)
  if (tab === 'customers' && typeof ContactsScreen !== 'undefined') {
    return <ContactsScreen onBack={onBack} onOpenContact={() => {}} initialTab="client" />;
  }

  // אנשי קשר — ContactsScreen קיים
  if (tab === 'contacts' && typeof ContactsScreen !== 'undefined') {
    return <ContactsScreen onBack={onBack} onOpenContact={(id) => {}} />;
  }

  // בעלי מקצוע — VendorsScreen
  if (tab === 'vendors' && typeof VendorsScreen !== 'undefined') {
    return <VendorsScreen onBack={onBack} />;
  }

  // Fallback — layout עם טאבים עצמאיים
  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--ybp-bg,#f6f7f9)',
      fontFamily: 'Assistant, sans-serif',
      direction: 'rtl',
    }}>
      {/* Header */}
      <div style={{
        background: 'var(--ybp-panel,#fff)',
        borderBottom: '1px solid var(--ybp-border,#e5e7eb)',
        padding: '14px 20px',
        display: 'flex', alignItems: 'center', gap: 12,
        position: 'sticky', top: 44, zIndex: 50,
      }}>
        <button onClick={onBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, display: 'flex' }}>
          <Icon name="chevronR" size={22} color="var(--ybp-ink-soft,#6b7280)" />
        </button>
        <h1 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--ybp-ink,#111827)' }}>
          CRM
        </h1>
      </div>

      {/* Tabs */}
      <div style={{
        background: 'var(--ybp-panel,#fff)',
        borderBottom: '1px solid var(--ybp-border,#e5e7eb)',
        display: 'flex', padding: '0 20px',
        position: 'sticky', top: 92, zIndex: 49,
      }}>
        {tabs.map(t => (
          <button key={t.k} onClick={() => setTab(t.k)} style={{
            padding: '12px 16px',
            background: 'none', border: 'none', cursor: 'pointer',
            fontSize: 14, fontWeight: tab === t.k ? 700 : 500,
            color: tab === t.k ? '#1a2c4a' : 'var(--ybp-ink-faint,#6b7280)',
            borderBottom: tab === t.k ? '2.5px solid #1a2c4a' : '2.5px solid transparent',
            fontFamily: 'Assistant, sans-serif',
            display: 'flex', alignItems: 'center', gap: 6,
            transition: 'color 0.15s',
          }}>
            <Icon name={t.icon} size={15} color={tab === t.k ? '#1a2c4a' : 'var(--ybp-ink-faint,#9ca3af)'} />
            {t.label}
          </button>
        ))}
      </div>

      {/* Content placeholder */}
      <div style={{ padding: 40, textAlign: 'center', color: 'var(--ybp-ink-faint,#6b7280)' }}>
        טוען...
      </div>
    </div>
  );
};

Object.assign(window, { CRMHub });
})();