// WTS Cyprus — App root: routing + role state
const { useState } = React;

const ROLE_USER_MAP = {
  admin:   USERS.find(u => u.id === 'u1'),
  partner: USERS.find(u => u.id === 'u2'),
  staff:   USERS.find(u => u.id === 'u3'),
  client:  USERS.find(u => u.id === 'u2'), // placeholder — Client role renders the portal instead of the shell
};

// ── Admin: Users ───────────────────────────────────────────────────────────
const UsersAdmin = () => {
  const toast = useToast();
  return (
    <div className="ck-page">
      <div className="ck-page__header">
        <div>
          <div className="ck-page__title">Users</div>
          <div className="ck-muted" style={{ marginTop: 5 }}>{USERS.length} staff accounts · invited-only, email + OTP</div>
        </div>
        <Button disabled><Icon name="user-plus" size={14} /> Invite user</Button>
      </div>
      <Card style={{ padding: 0, gap: 0 }}>
        <CardContent style={{ padding: 0 }}>
          <table className="ck-table">
            <thead><tr><th>Name</th><th>Email</th><th style={{ width: 110 }}>Role</th><th style={{ width: 150 }}>Modules</th><th style={{ width: 90 }}>Status</th><th style={{ width: 36 }}></th></tr></thead>
            <tbody>
              {USERS.map(u => (
                <tr key={u.id}>
                  <td><div style={{ display: 'flex', alignItems: 'center', gap: 9 }}><Avatar user={u} size={26} /><span style={{ fontWeight: 500, fontSize: 13.5 }}>{u.name}</span></div></td>
                  <td style={{ fontSize: 12.5, color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)' }}>{u.email}</td>
                  <td><span className="ck-badge ck-badge--secondary" style={{ textTransform: 'capitalize' }}>{u.role}</span></td>
                  <td><div style={{ display: 'flex', gap: 4 }}>{u.modules.map(m => <span key={m} className="ck-badge ck-badge--outline" style={{ textTransform: 'uppercase', fontSize: 10 }}>{m}</span>)}</div></td>
                  <td><StatusBadge status="active" /></td>
                  <td onClick={e => e.stopPropagation()}><KebabMenu items={[
                    { icon: 'shield', label: 'Change role', onClick: () => toast.info('Role change', 'Takes effect on next sign-in') },
                    { icon: 'user-x', label: 'Deactivate', danger: true, onClick: () => toast.error('Deactivated', u.name) },
                  ]} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </div>
  );
};

// ── Admin: Client profiles (F5) ────────────────────────────────────────────
const ClientsAdmin = () => {
  const toast = useToast();
  return (
    <div className="ck-page">
      <div className="ck-page__header">
        <div>
          <div className="ck-page__title">Client profiles</div>
          <div className="ck-muted" style={{ marginTop: 5 }}>{CLIENTS.filter(c => c.status === 'active').length} active · one registry shared by both modules</div>
        </div>
        <Button disabled><Icon name="plus" size={14} /> New client</Button>
      </div>
      <Card style={{ padding: 0, gap: 0 }}>
        <CardContent style={{ padding: 0 }}>
          <table className="ck-table">
            <thead><tr><th>Legal name</th><th style={{ width: 120 }}>Reg. ID</th><th style={{ width: 100 }}>Jurisdiction</th><th>Service lines</th><th style={{ width: 200 }}>Primary contact</th><th style={{ width: 90 }}>Status</th></tr></thead>
            <tbody>
              {CLIENTS.map(c => (
                <tr key={c.id}>
                  <td style={{ fontWeight: 500, fontSize: 13.5 }}>{c.legalName}</td>
                  <td style={{ fontSize: 12.5, color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)' }}>{c.regId}</td>
                  <td style={{ fontSize: 12.5, color: 'var(--muted-foreground)' }}>{c.jurisdiction}</td>
                  <td><div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>{c.serviceLines.map(s => <span key={s} className="ck-badge ck-badge--secondary">{serviceLineLabel(s)}</span>)}</div></td>
                  <td style={{ fontSize: 12.5 }}>{c.contacts[0]?.name}<div style={{ color: 'var(--muted-foreground)', fontSize: 11.5, fontFamily: 'var(--font-mono)' }}>{c.contacts[0]?.email}</div></td>
                  <td><StatusBadge status={c.status === 'active' ? 'active' : 'inactive'} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </div>
  );
};

const App = () => {
  const [role,  setRole]  = useState('admin');
  const [route, setRoute] = useState({ name: 'home' });
  const [navOpen, setNavOpen] = useState(false);
  const [tourOpen, setTourOpen] = useState(false);
  const [bannerHidden, setBannerHidden] = useState(false);

  // Client role → render the WTS-branded client portal instead of the staff shell
  if (role === 'client') {
    return (
      <ToastProvider>
        <ClientPortal onExit={() => { setRole('admin'); setRoute({ name: 'home' }); }} />
      </ToastProvider>
    );
  }

  const currentUser = ROLE_USER_MAP[role];

  const topRoute = (() => {
    if (route.name === 'engagement-detail' || route.name === 'pbc-engagements') return 'pbc-engagements';
    if (route.name === 'tp-study-detail' || route.name === 'tp-studies-new' || route.name === 'tp-studies') return 'tp-studies';
    return route.name;
  })();

  const handleRoleChange = (newRole) => { setRole(newRole); setRoute({ name: 'home' }); setNavOpen(false); };
  const handleNavigate = (key) => {
    if ((key === 'admin-users' || key === 'admin-clients') && role !== 'admin') return;
    setRoute({ name: key }); setNavOpen(false);
  };

  const goToEngagement = (id) => setRoute({ name: 'engagement-detail', id });
  const goToList       = ()   => setRoute({ name: 'pbc-engagements' });
  const goToStudies    = ()   => setRoute({ name: 'tp-studies' });
  const goToStudy      = (id) => setRoute({ name: 'tp-study-detail', id });
  const goToNewStudy   = ()   => setRoute({ name: 'tp-studies-new' });

  const crumbs = (() => {
    switch (route.name) {
      case 'home':              return [{ label: 'Overview' }];
      case 'pbc-engagements':   return [{ label: 'PBC' }, { label: 'Engagements' }];
      case 'pbc-inbox':         return [{ label: 'PBC' }, { label: 'Review inbox' }];
      case 'engagement-detail': {
        const eng = getEngagementById(route.id);
        return [{ label: 'PBC' }, { label: 'Engagements', onClick: goToList }, { label: eng ? eng.name : '—' }];
      }
      case 'tp-studies':        return [{ label: 'Transfer Pricing' }, { label: 'Studies' }];
      case 'tp-studies-new':    return [{ label: 'Transfer Pricing' }, { label: 'Studies', onClick: goToStudies }, { label: 'New study' }];
      case 'tp-study-detail': {
        const st = STUDIES.find(s => s.id === route.id);
        return [{ label: 'Transfer Pricing' }, { label: 'Studies', onClick: goToStudies }, { label: st ? st.name : '—' }];
      }
      case 'admin-users':       return [{ label: 'Admin' }, { label: 'Users' }];
      case 'admin-clients':     return [{ label: 'Admin' }, { label: 'Clients' }];
      default:                  return [{ label: 'Overview' }];
    }
  })();

  const renderContent = () => {
    switch (route.name) {
      case 'home':
        if (role === 'staff') return <StaffHome userId={currentUser.id} onStartTour={() => setTourOpen(true)} showBanner={!bannerHidden} onDismissBanner={() => setBannerHidden(true)} />;
        return <PartnerHome isAdmin={role === 'admin'} onNavigate={handleNavigate} onStartTour={() => setTourOpen(true)} showBanner={!bannerHidden} onDismissBanner={() => setBannerHidden(true)} />;
      case 'pbc-engagements':
        return <EngagementsList role={role} userId={currentUser.id} onOpenEngagement={goToEngagement} />;
      case 'pbc-inbox':
        return <ReviewInbox role={role} userId={currentUser.id} onOpenEngagement={goToEngagement} />;
      case 'engagement-detail': {
        const eng = getEngagementById(route.id);
        if (!eng) return <EngagementsList role={role} userId={currentUser.id} onOpenEngagement={goToEngagement} />;
        return <EngagementDetail eng={eng} />;
      }
      case 'tp-studies':
        return <StudiesList role={role} userId={currentUser.id} onOpenStudy={goToStudy} onNewStudy={goToNewStudy} />;
      case 'tp-studies-new':
        return <NewStudyForm onCancel={goToStudies} onRun={() => goToStudy('s3')} />;
      case 'tp-study-detail': {
        const st = STUDIES.find(s => s.id === route.id);
        if (!st) return <StudiesList role={role} userId={currentUser.id} onOpenStudy={goToStudy} onNewStudy={goToNewStudy} />;
        return <StudyDetail study={st} onBack={goToStudies} />;
      }
      case 'admin-users':   return <UsersAdmin />;
      case 'admin-clients': return <ClientsAdmin />;
      default:              return null;
    }
  };

  return (
    <ToastProvider>
      <div className="wts-shell">
        <div className={cn('wts-nav-overlay', navOpen && 'wts-nav-overlay--open')} onClick={() => setNavOpen(false)} />
        <WTSSidebar currentTopRoute={topRoute} onNavigate={handleNavigate} currentUser={currentUser} role={role} navOpen={navOpen} />
        <div className="wts-main">
          <WTSHeader crumbs={crumbs} role={role} onRoleChange={handleRoleChange} onToggleNav={() => setNavOpen(o => !o)} />
          <main className="wts-content">
            <div className="wts-content-inner">{renderContent()}</div>
          </main>
        </div>
      </div>
      <OnboardingTour open={tourOpen} onNavigate={(r) => { setRoute(r); setNavOpen(false); }} onClose={() => setTourOpen(false)} />
    </ToastProvider>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);