/* eslint-disable */
// ??? Portal Card ??????????????????????????????????????????????????????????????
const PORTAL_ICONS = {
  'map':         'map-pin',
  'spreadsheet': 'table-2',
  'property':    'building-2',
  'document':    'file-text',
  'analysis':    'bar-chart-3',
  'default':     'folder-open',
};

function PortalCard({ deal }) {
  const icon = PORTAL_ICONS[deal.icon_key] || PORTAL_ICONS['default'];
  const isLinked = !!deal.url;
  const content = (
    <>
      <div className="p-card__icon-area">
        <i data-lucide={icon}></i>
      </div>
      <div className="p-card__body">
        <div className="p-card__title">{deal.title || 'Untitled'}</div>
        <div className="p-card__desc">{deal.description || ''}</div>
        {isLinked && (
          <span className="p-card__open">
            Open Project <i data-lucide="arrow-up-right"></i>
          </span>
        )}
      </div>
    </>
  );

  if (isLinked) {
    return (
      <a className="p-card" href={deal.url} target="_blank" rel="noopener noreferrer">
        {content}
      </a>
    );
  }
  return <div className="p-card">{content}</div>;
}

// ??? Portal App (standalone, no marketing shell) ??????????????????????????????
function PortalApp({ session, onSignOut, partner, deals, loading }) {
  // Inject portal stylesheet once
  React.useEffect(function() {
    document.title = 'CCG Partner Portal';
    var existing = document.getElementById('portal-css');
    if (!existing) {
      var link = document.createElement('link');
      link.id = 'portal-css';
      link.rel = 'stylesheet';
      link.href = 'portal.css?v=1';
      document.head.appendChild(link);
    }
    return function() {
      document.title = 'Carpenter Consulting Group, LLC';
    };
  }, []);

  React.useEffect(function() {
    if (!loading && window.lucide) window.lucide.createIcons();
  }, [loading, deals]);

  var displayName = (partner && partner.full_name) || (session && session.user && session.user.email) || '';
  var activeCount = deals ? deals.filter(function(d){ return d.stage === 'Active'; }).length : 0;

  if (loading) {
    return (
      <div className="portal-root">
        <div className="p-loading">Loading your portal...</div>
      </div>
    );
  }

  return (
    <div className="portal-root">
      {/* Top bar */}
      <div className="p-topbar">
        <div className="p-topbar__brand">
          <img className="p-topbar__logo" src="assets/CCG_LOGO.png" alt="CCG" />
          <div className="p-topbar__divider"></div>
          <span className="p-topbar__label">Partner Portal</span>
        </div>
        <div className="p-topbar__right">
          <span className="p-topbar__user">{displayName}</span>
          <button className="p-topbar__signout" onClick={onSignOut}>Sign Out</button>
        </div>
      </div>

      {/* Content */}
      <main className="p-main">
        <div className="p-welcome">
          <div className="p-welcome__eyebrow">Partner Portal</div>
          <h1 className="p-welcome__title">Welcome back, <strong>{displayName.split(' ')[0]}</strong>.</h1>
        </div>

        <div className="p-section-hd">
          <span className="p-section-hd__label">Your Projects</span>
          <span className="p-section-hd__count">{activeCount}</span>
        </div>

        {deals.length === 0 ? (
          <div className="p-empty">
            <i data-lucide="folder-open"></i>
            <p>No projects yet. Ross will add your engagements here.</p>
          </div>
        ) : (
          <div className="p-grid">
            {deals.map(function(d) { return <PortalCard key={d.id} deal={d} />; })}
          </div>
        )}
      </main>
    </div>
  );
}
window.PortalApp = PortalApp;