// MyMarian frontend-only admin console.

function AdminDashboard({ authUser = null, navigate = () => {}, onSignOut = () => {}, onOpenLearning = () => {} }) {
  const isMobile = useIsMobile(900);
  const [adminSidebarOpen, setAdminSidebarOpen] = React.useState(!isMobile);
  const [activeTab, setActiveTab] = React.useState('overview');
  const [query, setQuery] = React.useState('');
  const [paymentFilter, setPaymentFilter] = React.useState('all');
  const [roleFilter, setRoleFilter] = React.useState('all');
  const [toast, setToast] = React.useState('');
  const [adminData, setAdminData] = React.useState(null);
  const [adminLoading, setAdminLoading] = React.useState(true);
  const [adminError, setAdminError] = React.useState('');
  const [adminProfiles, setAdminProfiles] = React.useState([]);
  const [profilesLoading, setProfilesLoading] = React.useState(false);
  const [showProfileForm, setShowProfileForm] = React.useState(false);
  const [showTemporaryPassword, setShowTemporaryPassword] = React.useState(false);
  const [selectedCourseBucket, setSelectedCourseBucket] = React.useState(null);
  const [bucketForm, setBucketForm] = React.useState({ courseTitle: '', courseIdsText: '' });
  const [bucketSaving, setBucketSaving] = React.useState(false);
  const [profileForm, setProfileForm] = React.useState({
    firstName: '',
    lastName: '',
    email: '',
    username: '',
    role: 'mymarian-admin',
    temporaryPassword: '',
  });

  React.useEffect(() => {
    setAdminSidebarOpen(!isMobile);
  }, [isMobile]);

  const adminUsers = (adminData && adminData.users) || [];
  const adminPayments = (adminData && adminData.payments) || [];
  const adminCourses = (adminData && adminData.courses) || [];
  const adminAuditEvents = (adminData && adminData.auditEvents) || [];
  const adminGrowthSeries = (adminData && adminData.growthSeries) || ADMIN_GROWTH_SERIES;
  const adminSummary = (adminData && adminData.summary) || {};
  const learningAnalytics = adminSummary.learningAnalytics || {};
  const adminCapabilities = (adminData && adminData.capabilities) || {};
  const adminAuthorization = (adminData && adminData.admin && adminData.admin.authorization) || {};
  const canManageAdminProfiles = Boolean(adminCapabilities.manageAdminProfiles || adminAuthorization.isSuperAdmin);
  const canManageCourseBuckets = Boolean(adminCapabilities.manageCourseBuckets || adminAuthorization.isSuperAdmin);
  const paidPayments = adminPayments.filter(payment => payment.status === 'paid');
  const failedPayments = adminPayments.filter(payment => payment.status === 'failed');
  const paidUsers = adminUsers.filter(user => user.paymentStatus === 'paid');
  const activeUsers = adminUsers.filter(user => user.activityStatus === 'active');
  const studentUsers = adminUsers.filter(user => user.role === 'student');
  const totalRevenue = paidPayments.reduce((sum, payment) => sum + payment.amount, 0);
  const conversionRate = studentUsers.length ? Math.round((paidUsers.length / studentUsers.length) * 100) : 0;
  const averageProgress = adminSummary.progressAvailable
    ? Math.round(Number(adminSummary.averageProgress || 0))
    : Math.round(
      studentUsers
        .filter(user => user.progressAvailable)
        .reduce((sum, user) => sum + user.progress, 0) / Math.max(studentUsers.filter(user => user.progressAvailable).length, 1)
    );
  const maxCourseEnrollments = Math.max(...adminCourses.map(course => course.enrollments), 1);
  const formatAdminCount = value => Number(value || 0).toLocaleString();
  const formatAdminHours = value => `${Number(value || 0).toLocaleString(undefined, { maximumFractionDigits: 1 })}h`;
  const bucketStatusCounts = (course) => {
    const learners = course.bucketLearners || [];
    return learners.reduce((counts, learner) => {
      const status = learner.enrollmentStatus || 'unknown';
      counts[status] = (counts[status] || 0) + 1;
      return counts;
    }, {});
  };

  const adminRequest = async (path, options = {}) => {
    const csrfToken = window.MyMarianRuntime.csrfToken();
    const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
    if (csrfToken && !headers['X-CSRF-Token']) {
      headers['X-CSRF-Token'] = csrfToken;
    }
    const response = await fetch(apiUrl(path), {
      credentials: 'include',
      headers,
      ...options,
    });
    window.MyMarianRuntime.rememberCsrfToken(response);
    const data = await response.json().catch(() => ({}));
    if (!response.ok) {
      const error = new Error(data.error || `Request failed with ${response.status}`);
      error.data = data;
      throw error;
    }
    return data;
  };

  const loadAdminData = React.useCallback(async () => {
    setAdminLoading(true);
    setAdminError('');
    try {
      const [
        admin,
        summary,
        users,
        payments,
        courses,
        auditEvents,
        growth,
        platform,
      ] = await Promise.all([
        adminRequest('/api/admin/me'),
        adminRequest('/api/admin/dashboard/summary'),
        adminRequest('/api/admin/dashboard/users'),
        adminRequest('/api/admin/dashboard/payments'),
        adminRequest('/api/admin/dashboard/courses'),
        adminRequest('/api/admin/dashboard/audit-events'),
        adminRequest('/api/admin/dashboard/growth'),
        adminRequest('/api/admin/dashboard/platform'),
      ]);
      setAdminData({
        admin,
        summary: summary.summary || {},
        users: users.users || [],
        payments: payments.payments || [],
        courses: courses.courses || [],
        auditEvents: auditEvents.auditEvents || [],
        growthSeries: growth.growthSeries || [],
        openedx: platform.openedx || {},
        capabilities: platform.capabilities || {},
      });
    } catch (error) {
      setAdminError(error.data && error.data.detail ? error.data.detail : error.message);
    } finally {
      setAdminLoading(false);
    }
  }, []);

  React.useEffect(() => {
    loadAdminData();
  }, [loadAdminData]);

  React.useEffect(() => {
    if (!selectedCourseBucket) return;
    setBucketForm({
      courseTitle: selectedCourseBucket.courseTitle || selectedCourseBucket.title || '',
      courseIdsText: (selectedCourseBucket.courseIds || []).join('\n'),
    });
  }, [selectedCourseBucket]);

  const filteredUsers = adminUsers.filter(user => {
    const searchable = `${user.name} ${user.email} ${user.grade} ${user.stream} ${user.accessName} ${user.paymentStatus} ${user.enrollmentStatus}`.toLowerCase();
    const matchesQuery = searchable.includes(query.trim().toLowerCase());
    const matchesPayment = paymentFilter === 'all' || user.paymentStatus === paymentFilter;
    const matchesRole = roleFilter === 'all' || user.role === roleFilter;
    return matchesQuery && matchesPayment && matchesRole;
  });

  const exportUsersCsv = () => {
    const headers = ['id', 'name', 'email', 'role', 'grade', 'stream', 'accessName', 'paymentStatus', 'enrollmentStatus', 'revenue', 'lastSeen'];
    const rows = filteredUsers.map(user => headers.map(key => `"${String(user[key] || '').replace(/"/g, '""')}"`).join(','));
    const csv = [headers.join(','), ...rows].join('\n');
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'mymarian-users-export.csv';
    document.body.appendChild(link);
    link.click();
    link.remove();
    URL.revokeObjectURL(url);
    setToast('User CSV export prepared.');
  };

  const showUnavailable = (label) => {
    setToast(`${label} is not connected yet. The payment provider integration is still pending.`);
    window.setTimeout(() => setToast(''), 3200);
  };

  const markUserPaid = async (user) => {
    try {
      await adminRequest(`/api/admin/users/${user.id}/mark-paid`, { method: 'POST', body: JSON.stringify({}) });
      setToast(`${user.name} marked paid and enrollment sync was queued.`);
      await loadAdminData();
    } catch (error) {
      setToast(error.data && error.data.detail ? error.data.detail : error.message);
    }
    window.setTimeout(() => setToast(''), 4200);
  };

  const queueUserEnrollment = async (user) => {
    try {
      await adminRequest(`/api/admin/users/${user.id}/queue-enrollment`, { method: 'POST', body: JSON.stringify({}) });
      setToast(`Enrollment sync queued for ${user.name}.`);
      await loadAdminData();
    } catch (error) {
      setToast(error.data && error.data.detail ? error.data.detail : error.message);
    }
    window.setTimeout(() => setToast(''), 4200);
  };

  const updateBucketForm = (key, value) => {
    setBucketForm(current => ({ ...current, [key]: value }));
  };

  const saveCourseBucket = async () => {
    if (!selectedCourseBucket) return;
    setBucketSaving(true);
    try {
      const data = await adminRequest(`/api/admin/course-buckets/${encodeURIComponent(selectedCourseBucket.key)}`, {
        method: 'PUT',
        body: JSON.stringify({
          courseTitle: bucketForm.courseTitle,
          courseIdsText: bucketForm.courseIdsText,
        }),
      });
      setToast('Course bucket mapping saved.');
      await loadAdminData();
      if (data.bucket) {
        setSelectedCourseBucket(current => ({ ...(current || {}), ...data.bucket }));
      }
    } catch (error) {
      setToast(error.data && error.data.error ? error.data.error : error.message);
    } finally {
      setBucketSaving(false);
      window.setTimeout(() => setToast(''), 4200);
    }
  };

  const loadAdminProfiles = React.useCallback(async () => {
    if (!canManageAdminProfiles) return;
    setProfilesLoading(true);
    try {
      const data = await adminRequest('/api/admin/profiles');
      setAdminProfiles(data.profiles || []);
    } catch (error) {
      setToast(error.data && error.data.detail ? error.data.detail : error.message);
    } finally {
      setProfilesLoading(false);
    }
  }, [canManageAdminProfiles]);

  React.useEffect(() => {
    if (activeTab === 'profiles' && canManageAdminProfiles) {
      loadAdminProfiles();
    }
  }, [activeTab, canManageAdminProfiles, loadAdminProfiles]);

  const updateProfileForm = (key, value) => {
    setProfileForm(current => ({ ...current, [key]: value }));
  };

  const createAdminProfile = async () => {
    try {
      await adminRequest('/api/admin/profiles', {
        method: 'POST',
        body: JSON.stringify(profileForm),
      });
      setToast('Admin profile saved in Keycloak.');
      setProfileForm({
        firstName: '',
        lastName: '',
        email: '',
        username: '',
        role: 'mymarian-admin',
        temporaryPassword: '',
      });
      await loadAdminProfiles();
    } catch (error) {
      setToast(error.data && error.data.error ? error.data.error : error.message);
    }
    window.setTimeout(() => setToast(''), 4200);
  };

  const deactivateAdminProfile = async (profile) => {
    const label = profile.email || profile.username || 'this admin profile';
    if (!window.confirm(`Deactivate admin access for ${label}?`)) return;
    try {
      await adminRequest(`/api/admin/profiles/${encodeURIComponent(profile.id)}`, {
        method: 'DELETE',
      });
      setToast('Admin access deactivated.');
      await loadAdminProfiles();
    } catch (error) {
      setToast(error.data && error.data.error ? error.data.error : error.message);
    }
    window.setTimeout(() => setToast(''), 4200);
  };

  const tabs = [
    { key: 'overview', label: 'Overview', icon: '⊞', description: 'Operational summary' },
    { key: 'users', label: 'Users', icon: '◉', description: 'Profiles and account state' },
    { key: 'billing', label: 'Payments', icon: '₿', description: 'Billing records' },
    { key: 'analytics', label: 'Analytics', icon: '▤', description: 'Growth and learning signals' },
    { key: 'access', label: 'Course Access', icon: '▧', description: 'Enrollment rules' },
    ...(canManageAdminProfiles ? [{ key: 'profiles', label: 'Admin Profiles', icon: '♜', description: 'Super Admin management' }] : []),
    { key: 'audit', label: 'Audit Logs', icon: '◇', description: 'Admin activity' },
  ];
  const activeTabMeta = tabs.find(tab => tab.key === activeTab) || tabs[0];

  const userColumns = [
    { key: 'user', label: 'User', render: user => <AdminUserCell user={user} /> },
    { key: 'role', label: 'Role', render: user => <AdminStatusBadge status={user.role} tone={user.role === 'student' ? 'neutral' : 'info'} /> },
    { key: 'grade', label: 'Grade', render: user => user.grade === '-' ? '-' : `Grade ${user.grade}` },
    { key: 'stream', label: 'Stream' },
    { key: 'accessName', label: 'Access' },
    { key: 'paymentStatus', label: 'Payment', render: user => <AdminStatusBadge status={user.paymentStatus} /> },
    { key: 'enrollmentStatus', label: 'Enrollment', render: user => <AdminStatusBadge status={user.enrollmentStatus} /> },
    { key: 'lastSeen', label: 'Last seen' },
    {
      key: 'actions',
      label: 'Actions',
      align: 'right',
      render: user => (
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <AdminActionButton variant="ghost" onClick={() => queueUserEnrollment(user)}>Sync</AdminActionButton>
          {user.paymentStatus !== 'paid' && (
            <AdminActionButton onClick={() => markUserPaid(user)}>Mark paid</AdminActionButton>
          )}
        </div>
      ),
    },
  ];

  const paymentAccessLabel = (payment) => {
    if (payment.accessName) return payment.accessName;
    if (payment.grade && payment.stream && !['All', '-'].includes(payment.stream)) {
      return `Grade ${payment.grade} ${payment.stream}`;
    }
    if (payment.grade) return `Grade ${payment.grade}`;
    if (payment.plan) return String(payment.plan).replace(/_/g, ' ');
    return 'Assigned course access';
  };

  const paymentTypeLabel = (payment) => {
    if (payment.paymentType) return payment.paymentType;
    if (payment.type) return payment.type;
    if (payment.plan) return 'Legacy payment record';
    return 'One-time course access';
  };

  const paymentColumns = [
    { key: 'id', label: 'Payment ID' },
    { key: 'user', label: 'User', render: payment => <div><strong>{payment.user}</strong><div style={{ color: BRAND.muted, fontSize: 11 }}>{payment.email}</div></div> },
    { key: 'accessName', label: 'Access purchased', render: payment => paymentAccessLabel(payment) },
    { key: 'paymentType', label: 'Type', render: payment => paymentTypeLabel(payment) },
    { key: 'amount', label: 'Amount paid', render: payment => AdminMoney(payment.amount) },
    { key: 'method', label: 'Method' },
    { key: 'status', label: 'Status', render: payment => <AdminStatusBadge status={payment.status} /> },
    { key: 'date', label: 'Date' },
    { key: 'providerRef', label: 'Provider ref' },
  ];

  const courseColumns = [
    { key: 'title', label: 'Course', render: course => <div><strong>{course.title}</strong><div style={{ color: BRAND.muted, fontSize: 11 }}>{course.courseId}</div></div> },
    { key: 'gradeRule', label: 'Grade' },
    { key: 'streamRule', label: 'Stream' },
    { key: 'price', label: 'One-time price', render: course => AdminMoney(course.price) },
    { key: 'enrollments', label: 'Enrollments' },
    {
      key: 'completionRate',
      label: 'Completion',
      render: course => course.completionAvailable ? `${course.completionRate}%` : (course.completionLabel || 'Progress source unavailable'),
    },
    { key: 'revenue', label: 'One-time revenue', render: course => AdminMoney(course.revenue) },
    { key: 'status', label: 'Status', render: course => <AdminStatusBadge status={course.status} /> },
  ];

  const renderOverview = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 14 }}>
        <AdminMetricCard label="Total users" value={adminSummary.totalUsers || adminUsers.length} detail={`${activeUsers.length} active accounts`} tone="info" trend="U" />
        <AdminMetricCard label="Paid learners" value={adminSummary.paidLearners || paidUsers.length} detail={`${adminSummary.conversionRate ?? conversionRate}% one-time payment conversion`} tone="success" trend="P" />
        <AdminMetricCard label="One-time revenue" value={AdminMoney(totalRevenue)} detail={`${failedPayments.length} failed payment needs review`} tone="success" trend="B" />
        <AdminMetricCard label="Course progress" value={adminSummary.progressAvailable ? `${averageProgress}%` : 'Pending'} detail={adminSummary.progressAvailable ? 'Average progress across student users' : 'Progress analytics are not connected yet'} tone="warning" trend="%" />
        <AdminMetricCard
          label="Weekly study"
          value={learningAnalytics.available ? formatAdminHours(learningAnalytics.weeklyHours) : 'Pending'}
          detail={learningAnalytics.available ? `${formatAdminCount(learningAnalytics.activeLearners)} active learners from Cairn events` : 'Waiting for Cairn/ClickHouse learner events'}
          tone="info"
          trend="H"
        />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(320px, 0.8fr)', gap: 16 }}>
        <AdminCard style={{ padding: 18 }}>
          <AdminSectionHeader title="Enrollment Health" subtitle="Operational view of Open edX sync status by user." />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {['synced', 'retrying', 'waiting_payment', 'blocked'].map(status => {
              const count = adminUsers.filter(user => user.enrollmentStatus === status).length;
              return (
                <AdminBar
                  key={status}
                  label={status.replace(/_/g, ' ')}
                  value={count}
                  max={adminUsers.length}
                  color={status === 'synced' ? BRAND.primary : status === 'blocked' ? '#dc2626' : BRAND.gold}
                  rightLabel={`${count} users`}
                />
              );
            })}
          </div>
        </AdminCard>

        <AdminCard style={{ padding: 18 }}>
          <AdminSectionHeader title="Recent Payment Events" subtitle="Latest billing statuses from the local admin snapshot." />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {adminPayments.slice(0, 4).map(payment => (
              <div key={payment.id} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center' }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ color: BRAND.dark, fontSize: 13, fontWeight: 900, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{payment.user}</div>
                  <div style={{ color: BRAND.muted, fontSize: 11 }}>{paymentAccessLabel(payment)} · {payment.method} · {AdminMoney(payment.amount)}</div>
                </div>
                <AdminStatusBadge status={payment.status} />
              </div>
            ))}
          </div>
        </AdminCard>
      </div>
    </div>
  );

  const renderUsers = () => (
    <AdminCard>
      <div style={{ padding: 16, borderBottom: `1px solid ${BRAND.border}`, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
        <AdminInput value={query} onChange={setQuery} placeholder="Search users, email, grade, stream..." />
        <AdminSelect
          value={paymentFilter}
          onChange={setPaymentFilter}
          options={[
            { value: 'all', label: 'All payments' },
            { value: 'paid', label: 'Paid' },
            { value: 'pending', label: 'Pending' },
            { value: 'failed', label: 'Failed' },
            { value: 'staff', label: 'Staff' },
          ]}
        />
        <AdminSelect
          value={roleFilter}
          onChange={setRoleFilter}
          options={[
            { value: 'all', label: 'All roles' },
            { value: 'student', label: 'Students' },
            { value: 'support_admin', label: 'Support admins' },
          ]}
        />
        <div style={{ flex: 1 }} />
        <AdminActionButton variant="ghost" onClick={exportUsersCsv}>Export CSV</AdminActionButton>
      </div>
      <AdminTable columns={userColumns} rows={filteredUsers} />
    </AdminCard>
  );

  const renderBilling = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 14 }}>
        <AdminMetricCard label="Paid payments" value={paidPayments.length} detail={AdminMoney(totalRevenue)} tone="success" trend="P" />
        <AdminMetricCard label="Failed payments" value={failedPayments.length} detail="Needs finance follow-up" tone="danger" trend="!" />
        <AdminMetricCard label="Pending payments" value={adminPayments.filter(payment => payment.status === 'pending').length} detail="Awaiting provider confirmation" tone="warning" trend="T" />
      </div>
      <AdminCard>
        <div style={{ padding: 16, borderBottom: `1px solid ${BRAND.border}`, display: 'flex', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
          <AdminSectionHeader title="One-Time Payment Records" subtitle="Individual learners pay once for access to their assigned grade or stream course." />
          <AdminActionButton onClick={() => showUnavailable('Manual payment adjustment')}>Manual adjustment</AdminActionButton>
        </div>
        <AdminTable columns={paymentColumns} rows={adminPayments} />
      </AdminCard>
    </div>
  );

  const renderAnalytics = () => (
    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(320px, 0.9fr)', gap: 16 }}>
      <AdminCard style={{ padding: 18, gridColumn: '1 / -1' }}>
        <AdminSectionHeader
          title="Collective Learning Analytics"
          subtitle={
            learningAnalytics.available
              ? `Aggregated from ${formatAdminCount(learningAnalytics.trackedLearners)} learners with Cairn/ClickHouse progress.`
              : 'Cairn/ClickHouse has not returned usable learner progress yet.'
          }
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12, marginBottom: 16 }}>
          {[
            {
              label: 'Tracked learners',
              value: formatAdminCount(learningAnalytics.trackedLearners),
              detail: `${formatAdminCount(learningAnalytics.activeLearners)} active this period`,
              tone: 'info',
            },
            {
              label: 'Weekly study',
              value: learningAnalytics.available ? formatAdminHours(learningAnalytics.weeklyHours) : 'Pending',
              detail: `${formatAdminHours(learningAnalytics.averageWeeklyHours)} avg per tracked learner`,
              tone: 'success',
            },
            {
              label: 'Cairn events',
              value: formatAdminCount(learningAnalytics.totalEvents),
              detail: `${formatAdminHours(learningAnalytics.totalStudyHours)} total study time`,
              tone: 'neutral',
            },
            {
              label: 'Average streak',
              value: learningAnalytics.available ? `${learningAnalytics.averageStreakDays || 0} days` : 'Pending',
              detail: 'Across tracked learners',
              tone: 'warning',
            },
          ].map(metric => {
            const palette = ADMIN_TONES[metric.tone] || ADMIN_TONES.neutral;
            return (
              <div key={metric.label} style={{ border: `1px solid ${palette.border}`, background: palette.bg, borderRadius: 8, padding: 13 }}>
                <div style={{ color: palette.fg, fontSize: 11, fontWeight: 900, textTransform: 'uppercase' }}>{metric.label}</div>
                <div style={{ color: BRAND.dark, fontSize: 23, fontWeight: 900, marginTop: 6, lineHeight: 1 }}>{metric.value}</div>
                <div style={{ color: BRAND.muted, fontSize: 11, lineHeight: 1.4, marginTop: 6 }}>{metric.detail}</div>
              </div>
            );
          })}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 14 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <AdminBar
              label="Avg progress"
              value={learningAnalytics.available ? learningAnalytics.averageProgress : 0}
              max={100}
              color={BRAND.primary}
              rightLabel={learningAnalytics.available ? `${learningAnalytics.averageProgress}%` : 'Pending'}
            />
            <AdminBar
              label="Overall blocks"
              value={learningAnalytics.available ? learningAnalytics.overallProgress : 0}
              max={100}
              color={BRAND.primary}
              rightLabel={
                learningAnalytics.available
                  ? `${learningAnalytics.completedBlocks}/${learningAnalytics.totalBlocks}`
                  : 'Pending'
              }
            />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <AdminBar
              label="Videos"
              value={learningAnalytics.available ? learningAnalytics.videoCompletionRate : 0}
              max={100}
              color={BRAND.gold}
              rightLabel={
                learningAnalytics.available
                  ? `${learningAnalytics.watchedVideos}/${learningAnalytics.totalVideos}`
                  : 'Pending'
              }
            />
            <AdminBar
              label="Quizzes"
              value={learningAnalytics.available ? learningAnalytics.quizCompletionRate : 0}
              max={100}
              color={BRAND.gold}
              rightLabel={
                learningAnalytics.available
                  ? `${learningAnalytics.completedQuizzes}/${learningAnalytics.totalQuizzes}`
                  : 'Pending'
              }
            />
          </div>
        </div>
      </AdminCard>

      <AdminCard style={{ padding: 18 }}>
        <AdminSectionHeader title="User Growth" subtitle="Cumulative learners and paid learners by day." />
        <AdminMiniChart series={adminGrowthSeries} />
        <div style={{ display: 'flex', gap: 16, marginTop: 8, color: BRAND.muted, fontSize: 11, fontWeight: 800 }}>
          <span><span style={{ color: BRAND.primary }}>■</span> Users</span>
          <span><span style={{ color: BRAND.gold }}>■</span> Paid</span>
        </div>
      </AdminCard>

      <AdminCard style={{ padding: 18 }}>
        <AdminSectionHeader title="Course Completion" subtitle="Uses Open edX progress data when that source is connected." />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {adminCourses.map(course => (
            <AdminBar
              key={course.courseId}
              label={course.title}
              value={course.completionAvailable ? course.completionRate : 0}
              max={100}
              color={course.completionAvailable && course.completionRate >= 50 ? BRAND.primary : BRAND.gold}
              rightLabel={course.completionAvailable ? `${course.completionRate}%` : 'Pending'}
            />
          ))}
        </div>
      </AdminCard>

      <AdminCard style={{ padding: 18, gridColumn: '1 / -1' }}>
        <AdminSectionHeader title="Most Active Courses" subtitle="Distinct learners counted from MyMarian course assignment records." />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {adminCourses.map(course => (
            <AdminBar
              key={course.courseId}
              label={course.title}
              value={course.enrollments}
              max={maxCourseEnrollments}
              color={BRAND.primary}
              rightLabel={`${course.enrollments} learners`}
            />
          ))}
        </div>
      </AdminCard>
    </div>
  );

  const renderAccess = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <AdminCard style={{ padding: 18 }}>
        <AdminSectionHeader
          title="Six Course Access Buckets"
          subtitle="Each paid learner is assigned to exactly one course based on grade and, for Grades 11-12, stream."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 12 }}>
          {adminCourses.map(course => {
            const bucketLearners = course.bucketLearners || [];
            const statusCounts = bucketStatusCounts(course);
            const syncedCount = statusCounts.synced || 0;
            const retryingCount = statusCounts.retrying || 0;
            const needsReviewCount = retryingCount + (statusCounts.waiting_payment || 0) + (statusCounts.not_synced || 0) + (statusCounts.blocked || 0);
            return (
              <button
                key={course.courseId}
                type="button"
                onClick={() => setSelectedCourseBucket(course)}
                style={{
                  padding: 14,
                  border: `1px solid ${BRAND.border}`,
                  borderRadius: 8,
                  background: '#fff',
                  textAlign: 'left',
                  fontFamily: 'inherit',
                  cursor: 'pointer',
                }}
              >
                <div style={{ color: BRAND.dark, fontSize: 13, fontWeight: 900 }}>{course.accessName}</div>
                <div style={{ color: BRAND.muted, fontSize: 12, lineHeight: 1.6, marginTop: 6 }}>
                  {course.gradeRule} · {course.streamRule} · {AdminMoney(course.price)}
                </div>
                <div style={{ color: BRAND.primary, fontSize: 11, fontWeight: 800, marginTop: 8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {course.courseId}
                </div>

                <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${BRAND.border}` }}>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
                    <AdminStatusBadge status={`${bucketLearners.length} learners`} tone="neutral" />
                    <AdminStatusBadge status={`${syncedCount} synced`} tone={syncedCount ? 'success' : 'neutral'} />
                    {retryingCount > 0 && <AdminStatusBadge status={`${retryingCount} retrying`} tone="warning" />}
                    {needsReviewCount > 0 && <AdminStatusBadge status={`${needsReviewCount} needs review`} tone="warning" />}
                  </div>
                  <div style={{ marginTop: 10, color: BRAND.muted, fontSize: 11, fontWeight: 800 }}>
                    Open bucket details
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </AdminCard>
      <AdminCard>
        <AdminTable columns={courseColumns} rows={adminCourses} />
      </AdminCard>
    </div>
  );

  const renderAudit = () => (
    <div>
      <AdminCard style={{ padding: 18 }}>
          <AdminSectionHeader title="Recent Admin Activity" subtitle="Clear audit timeline for staff and Super Admin actions." />
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {adminAuditEvents.map(event => (
            <div key={event.id} style={{ display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 12, padding: '13px 0', borderBottom: `1px solid ${BRAND.border}` }}>
              <div style={{ color: BRAND.muted, fontSize: 11, fontWeight: 800 }}>{event.time}</div>
              <div>
                <div style={{ color: BRAND.dark, fontSize: 13, fontWeight: 900 }}>{event.action}</div>
                <div style={{ color: BRAND.muted, fontSize: 12 }}>{event.actor} · {event.target}</div>
                {event.description && (
                  <div style={{ color: BRAND.text, fontSize: 12, lineHeight: 1.5, marginTop: 4 }}>{event.description}</div>
                )}
              </div>
              <AdminStatusBadge status={event.status} />
            </div>
          ))}
        </div>
      </AdminCard>
    </div>
  );

  const adminProfileColumns = [
    { key: 'email', label: 'Admin', render: profile => (
      <div>
        <strong>{profile.firstName || profile.lastName ? `${profile.firstName || ''} ${profile.lastName || ''}`.trim() : profile.username}</strong>
        <div style={{ color: BRAND.muted, fontSize: 11 }}>{profile.email || profile.username}</div>
      </div>
    ) },
    { key: 'username', label: 'Username' },
    { key: 'adminType', label: 'Role', render: profile => <AdminStatusBadge status={profile.adminType || 'admin'} tone={profile.isSuperAdmin ? 'info' : 'neutral'} /> },
    { key: 'enabled', label: 'Status', render: profile => <AdminStatusBadge status={profile.enabled ? 'active' : 'inactive'} /> },
    { key: 'actions', label: 'Actions', align: 'right', render: profile => (
      <AdminActionButton variant="danger" onClick={() => deactivateAdminProfile(profile)}>Deactivate</AdminActionButton>
    ) },
  ];

  const renderAdminProfiles = () => {
    if (!canManageAdminProfiles) {
      return (
        <AdminCard style={{ padding: 18 }}>
          <AdminSectionHeader title="Forbidden" subtitle="Only Super Admin users can manage admin profiles." />
        </AdminCard>
      );
    }
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <AdminCard style={{ padding: 18 }}>
          <AdminSectionHeader
            title="Admin Profile Controls"
            subtitle="Super Admin only. Admin users authenticate in Keycloak and do not receive learner LMS sessions."
            action={<AdminActionButton onClick={() => setShowProfileForm(open => !open)}>{showProfileForm ? 'Close form' : 'New admin profile'}</AdminActionButton>}
          />
          <div style={{
            border: `1px solid ${BRAND.border}`,
            background: '#fbfcfb',
            borderRadius: 8,
            padding: 14,
            color: BRAND.muted,
            fontSize: 12,
            lineHeight: 1.6,
          }}>
            New admin profiles are created in Keycloak with a required password update. Use the smallest role that fits the person's work.
          </div>
          {showProfileForm && (
            <>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 14, maxWidth: 520 }}>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6, color: BRAND.dark, fontSize: 12, fontWeight: 900 }}>
                  First name
                  <AdminInput
                    value={profileForm.firstName}
                    onChange={value => updateProfileForm('firstName', value)}
                    placeholder="First name"
                    name="new_admin_first_name"
                    autoComplete="off"
                  />
                </label>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6, color: BRAND.dark, fontSize: 12, fontWeight: 900 }}>
                  Last name
                  <AdminInput
                    value={profileForm.lastName}
                    onChange={value => updateProfileForm('lastName', value)}
                    placeholder="Last name"
                    name="new_admin_last_name"
                    autoComplete="off"
                  />
                </label>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6, color: BRAND.dark, fontSize: 12, fontWeight: 900 }}>
                  Email
                  <AdminInput
                    value={profileForm.email}
                    onChange={value => updateProfileForm('email', value)}
                    placeholder="Email"
                    name="new_admin_contact_email"
                    autoComplete="off"
                    inputMode="email"
                  />
                </label>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6, color: BRAND.dark, fontSize: 12, fontWeight: 900 }}>
                  Admin username
                  <AdminInput
                    value={profileForm.username}
                    onChange={value => updateProfileForm('username', value)}
                    placeholder="Username optional"
                    name="new_admin_account_handle"
                    autoComplete="off"
                    spellCheck={false}
                  />
                </label>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6, color: BRAND.dark, fontSize: 12, fontWeight: 900 }}>
                  Role
                  <AdminSelect
                    value={profileForm.role}
                    onChange={value => updateProfileForm('role', value)}
                    options={[
                      { value: 'mymarian-admin', label: 'Admin' },
                      { value: 'mymarian-super-admin', label: 'Super Admin' },
                    ]}
                  />
                </label>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6, color: BRAND.dark, fontSize: 12, fontWeight: 900 }}>
                  Temporary password
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8 }}>
                    <AdminInput
                      type={showTemporaryPassword ? 'text' : 'password'}
                      value={profileForm.temporaryPassword}
                      onChange={value => updateProfileForm('temporaryPassword', value)}
                      placeholder="Temporary password optional"
                      name="new_admin_temporary_secret"
                      autoComplete="new-password"
                      spellCheck={false}
                    />
                    <AdminActionButton variant="ghost" onClick={() => setShowTemporaryPassword(show => !show)}>
                      {showTemporaryPassword ? 'Hide' : 'Show'}
                    </AdminActionButton>
                  </div>
                </label>
              </div>
              <div style={{ marginTop: 12, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <AdminActionButton onClick={createAdminProfile}>Save admin profile</AdminActionButton>
                <AdminActionButton variant="ghost" onClick={loadAdminProfiles}>Refresh list</AdminActionButton>
              </div>
            </>
          )}
        </AdminCard>

        <AdminCard>
          <div style={{ padding: 16, borderBottom: `1px solid ${BRAND.border}`, display: 'flex', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <AdminSectionHeader
              title="Keycloak Admin Profiles"
              subtitle={profilesLoading ? 'Loading Keycloak admin profiles...' : 'Admin access is controlled by Keycloak realm roles.'}
            />
          </div>
          <AdminTable columns={adminProfileColumns} rows={adminProfiles} emptyText="No Keycloak admin profiles found." />
        </AdminCard>
      </div>
    );
  };

  const renderCourseBucketModal = () => {
    if (!selectedCourseBucket) return null;
    const course = adminCourses.find(item => item.key === selectedCourseBucket.key) || selectedCourseBucket;
    const learners = course.bucketLearners || [];
    const blockedLearners = learners.filter(learner => learner.enrollmentStatus === 'blocked');
    const attentionLearners = learners.filter(learner => ['blocked', 'retrying', 'waiting_payment', 'not_synced'].includes(learner.enrollmentStatus));
    const statusCounts = bucketStatusCounts(course);

    return (
      <div
        onClick={() => setSelectedCourseBucket(null)}
        style={{
          position: 'fixed',
          inset: 0,
          zIndex: 80,
          background: 'rgba(7,31,20,0.58)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 18,
        }}
      >
        <AdminCard
          style={{ width: 'min(920px, 100%)', maxHeight: '88vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}
          onClick={(event) => event.stopPropagation()}
        >
          <div style={{ padding: 18, borderBottom: `1px solid ${BRAND.border}`, display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'flex-start' }}>
            <AdminSectionHeader
              title={course.accessName || course.title}
              subtitle={`${course.gradeRule} · ${course.streamRule} · ${course.courseId}`}
            />
            <AdminActionButton variant="ghost" onClick={() => setSelectedCourseBucket(null)}>Close</AdminActionButton>
          </div>

          <div style={{ padding: 18, overflowY: 'auto', minHeight: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 10 }}>
              {[
                { label: 'Learners', value: learners.length, detail: 'Students matching this bucket', tone: 'info' },
                { label: 'Synced', value: statusCounts.synced || 0, detail: 'Enrollment is ready', tone: 'success' },
                { label: 'Needs review', value: attentionLearners.length, detail: 'Waiting, retrying, or blocked', tone: attentionLearners.length ? 'warning' : 'neutral' },
                { label: 'Blocked', value: blockedLearners.length, detail: 'Manual follow-up needed', tone: blockedLearners.length ? 'danger' : 'neutral' },
              ].map(metric => {
                const palette = ADMIN_TONES[metric.tone] || ADMIN_TONES.neutral;
                return (
                  <div key={metric.label} style={{ border: `1px solid ${palette.border}`, background: palette.bg, borderRadius: 8, padding: 13 }}>
                    <div style={{ color: palette.fg, fontSize: 11, fontWeight: 900, textTransform: 'uppercase' }}>{metric.label}</div>
                    <div style={{ color: BRAND.dark, fontSize: 24, fontWeight: 900, marginTop: 6 }}>{metric.value}</div>
                    <div style={{ color: BRAND.muted, fontSize: 11, lineHeight: 1.4, marginTop: 4 }}>{metric.detail}</div>
                  </div>
                );
              })}
            </div>

            {canManageCourseBuckets && (
              <div style={{ border: `1px solid ${BRAND.border}`, borderRadius: 8, padding: 14, background: '#fbfcfb' }}>
                <AdminSectionHeader title="Course Mapping" subtitle={`Source: ${course.source || 'default'}${course.updatedBy ? ` · Updated by ${course.updatedBy}` : ''}`} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 680 }}>
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 6, color: BRAND.dark, fontSize: 12, fontWeight: 900 }}>
                    Display title
                    <AdminInput
                      value={bucketForm.courseTitle}
                      onChange={value => updateBucketForm('courseTitle', value)}
                      placeholder="Grade 12 Natural Course"
                    />
                  </label>
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 6, color: BRAND.dark, fontSize: 12, fontWeight: 900 }}>
                    Open edX course IDs
                    <textarea
                      value={bucketForm.courseIdsText}
                      onChange={event => updateBucketForm('courseIdsText', event.target.value)}
                      placeholder="course-v1:Org+Course+Run"
                      rows={Math.max(3, Math.min(8, bucketForm.courseIdsText.split('\n').length + 1))}
                      style={{
                        minHeight: 92,
                        resize: 'vertical',
                        border: `1px solid ${BRAND.border}`,
                        borderRadius: 7,
                        padding: '10px 11px',
                        color: BRAND.dark,
                        fontFamily: 'Plus Jakarta Sans, sans-serif',
                        fontSize: 13,
                        lineHeight: 1.5,
                        outline: 'none',
                      }}
                    />
                  </label>
                  <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                    <AdminActionButton onClick={saveCourseBucket} disabled={bucketSaving}>{bucketSaving ? 'Saving...' : 'Save mapping'}</AdminActionButton>
                    <AdminActionButton
                      variant="ghost"
                      onClick={() => setBucketForm({
                        courseTitle: course.courseTitle || course.title || '',
                        courseIdsText: (course.courseIds || []).join('\n'),
                      })}
                    >
                      Reset fields
                    </AdminActionButton>
                  </div>
                </div>
              </div>
            )}

            {blockedLearners.length > 0 && (
              <div style={{ padding: 14, border: '1px solid #fecaca', borderRadius: 8, background: '#fffafa' }}>
                <AdminSectionHeader title="Blocked Students" subtitle="These learners need admin review before enrollment can finish." />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {blockedLearners.map(learner => (
                    <div key={learner.id || learner.email} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center' }}>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ color: BRAND.dark, fontSize: 13, fontWeight: 900 }}>{learner.name}</div>
                        <div style={{ color: BRAND.muted, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{learner.email}</div>
                      </div>
                      <AdminStatusBadge status={learner.enrollmentStatus} />
                    </div>
                  ))}
                </div>
              </div>
            )}

            <div style={{ border: `1px solid ${BRAND.border}`, borderRadius: 8, overflow: 'auto', maxHeight: 360 }}>
              <div style={{ padding: 14, borderBottom: `1px solid ${BRAND.border}` }}>
                <AdminSectionHeader title="Students In This Bucket" subtitle="Learners are grouped here by grade and stream from their MyMarian registration." />
              </div>
              <AdminTable
                columns={[
                  { key: 'name', label: 'Student', render: learner => <div><strong>{learner.name}</strong><div style={{ color: BRAND.muted, fontSize: 11 }}>{learner.email}</div></div> },
                  { key: 'enrollmentStatus', label: 'Enrollment', render: learner => <AdminStatusBadge status={learner.enrollmentStatus || 'pending'} /> },
                ]}
                rows={learners}
                emptyText="No learners match this bucket yet."
              />
            </div>
          </div>
        </AdminCard>
      </div>
    );
  };

  const renderActiveTab = () => {
    if (activeTab === 'users') return renderUsers();
    if (activeTab === 'billing') return renderBilling();
    if (activeTab === 'analytics') return renderAnalytics();
    if (activeTab === 'access') return renderAccess();
    if (activeTab === 'profiles') return renderAdminProfiles();
    if (activeTab === 'audit') return renderAudit();
    return renderOverview();
  };

  if (adminLoading) {
    return (
      <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f6f8f6', fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
        <AdminCard style={{ padding: 22, maxWidth: 420, width: 'calc(100% - 32px)', textAlign: 'center' }}>
          <div style={{
            width: 38,
            height: 38,
            borderRadius: '50%',
            border: `3px solid ${BRAND.border}`,
            borderTopColor: BRAND.primary,
            margin: '0 auto 16px',
            animation: 'mm-spin-slow 0.9s linear infinite',
          }} />
          <AdminSectionHeader title="Loading Admin Console" subtitle="Checking Keycloak authorization and loading MyMarian operations data." />
        </AdminCard>
      </div>
    );
  }

  if (adminError) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f6f8f6', padding: 18, fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
        <AdminCard style={{ padding: 24, maxWidth: 560, width: '100%' }}>
          <AdminSectionHeader title="Admin Access Required" subtitle={adminError} />
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <AdminActionButton onClick={loadAdminData}>Retry</AdminActionButton>
            <AdminActionButton variant="ghost" onClick={() => navigate('landing')}>Back to site</AdminActionButton>
            <AdminActionButton variant="ghost" onClick={onSignOut}>Sign out</AdminActionButton>
          </div>
        </AdminCard>
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', height: '100vh', overflow: 'hidden', fontFamily: 'Plus Jakarta Sans, sans-serif', color: BRAND.text }}>
      {isMobile && adminSidebarOpen && (
        <div
          onClick={() => setAdminSidebarOpen(false)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 30 }}
        />
      )}

      <aside style={{
        width: isMobile ? (adminSidebarOpen ? 240 : 0) : (adminSidebarOpen ? 220 : 64),
        background: BRAND.night,
        display: 'flex',
        flexDirection: 'column',
        flexShrink: 0,
        transition: 'width 0.25s ease, transform 0.25s ease',
        overflow: 'hidden',
        position: isMobile ? 'fixed' : 'relative',
        top: 0, bottom: 0, left: 0,
        zIndex: 40,
      }}>
        <button
          onClick={() => navigate('landing')}
          aria-label="MyMarian admin home"
          style={{
            padding: adminSidebarOpen ? '22px 18px 16px' : '22px 12px 16px',
            borderBottom: '1px solid #ffffff18',
            position: 'relative',
            overflow: 'hidden',
            flexShrink: 0,
            background: 'transparent',
            border: 'none',
            cursor: 'pointer',
            fontFamily: 'inherit',
            textAlign: 'left',
            width: '100%',
          }}
        >
          <EthiopianPattern opacity={0.07} color={BRAND.gold} />
          <div style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
            <BrandMark size={36} glow />
            {adminSidebarOpen && (
              <div>
                <div style={{ color: '#fff', fontFamily: 'Playfair Display, Georgia, serif', fontSize: 17, fontWeight: 700, lineHeight: 1.1 }}>
                  <span style={{ color: '#fff' }}>My</span><span style={{ color: BRAND.gold }}>Marian</span>
                </div>
                <div style={{ color: `${BRAND.gold}99`, fontSize: 9.5, fontWeight: 600, letterSpacing: 1 }}>ADMIN CONSOLE</div>
              </div>
            )}
          </div>
        </button>

        <nav style={{ flex: 1, padding: '12px 8px', display: 'flex', flexDirection: 'column', gap: 2, overflowY: 'auto' }}>
          {tabs.map(tab => {
            const active = activeTab === tab.key;
            return (
              <button
                key={tab.key}
                onClick={() => {
                  setActiveTab(tab.key);
                  if (isMobile) setAdminSidebarOpen(false);
                }}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 10,
                  padding: adminSidebarOpen ? '10px 12px' : '10px 0',
                  justifyContent: adminSidebarOpen ? 'flex-start' : 'center',
                  borderRadius: 8,
                  border: 'none',
                  background: active ? BRAND.primary : 'transparent',
                  color: active ? '#fff' : '#ffffff70',
                  fontFamily: 'Plus Jakarta Sans, sans-serif',
                  fontWeight: active ? 700 : 500,
                  fontSize: 14,
                  cursor: 'pointer',
                  width: '100%',
                  textAlign: 'left',
                  transition: 'all 0.15s',
                  borderLeft: active ? `3px solid ${BRAND.gold}` : '3px solid transparent',
                }}
                title={tab.label}
              >
                <span style={{
                  width: 20,
                  textAlign: 'center',
                  fontSize: 13,
                  flexShrink: 0,
                }}>
                  {tab.icon}
                </span>
                {adminSidebarOpen && <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{tab.label}</span>}
              </button>
            );
          })}
        </nav>

        {adminSidebarOpen && (
          <div style={{ padding: '12px 14px', borderTop: '1px solid #ffffff18', flexShrink: 0 }}>
            <div style={{ fontSize: 10, color: '#ffffff40', fontWeight: 600, letterSpacing: 0.5, marginBottom: 6 }}>ADMIN WORKSPACE</div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              background: '#ffffff10',
              border: `1px solid ${BRAND.gold}44`,
              borderRadius: 8,
              padding: '8px 12px',
            }}>
              <span style={{ color: '#fff', fontWeight: 800, fontSize: 14, letterSpacing: 0.5 }}>Operations</span>
              <span style={{ color: BRAND.gold, fontSize: 10, fontWeight: 700, letterSpacing: 0.5 }}>● READY</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 8, marginTop: 10 }}>
              <button
                onClick={onSignOut}
                style={{
                  height: 32,
                  borderRadius: 7,
                  border: `1px solid ${BRAND.gold}66`,
                  background: 'transparent',
                  color: BRAND.gold,
                  fontFamily: 'inherit',
                  fontSize: 10.5,
                  fontWeight: 800,
                  cursor: 'pointer',
                }}
              >
                Sign out
              </button>
            </div>
          </div>
        )}

        <button
          onClick={() => setAdminSidebarOpen(o => !o)}
          style={{
            background: '#ffffff0e',
            border: 'none',
            color: '#ffffff60',
            padding: '10px',
            cursor: 'pointer',
            fontSize: 14,
            fontFamily: 'inherit',
            borderTop: '1px solid #ffffff12',
            flexShrink: 0,
          }}
        >{adminSidebarOpen ? '◀ Collapse' : '▶'}</button>
      </aside>

      <main style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', background: '#f6f8f6', overflow: 'hidden' }}>
        <header style={{
          height: 62,
          padding: isMobile ? '0 14px' : '0 24px',
          borderBottom: `1px solid ${BRAND.border}`,
          background: '#fff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 14,
          flexShrink: 0,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
            {isMobile && (
              <button
                onClick={() => setAdminSidebarOpen(true)}
                aria-label="Open admin menu"
                style={{
                  width: 38,
                  height: 38,
                  borderRadius: 7,
                  border: `1px solid ${BRAND.border}`,
                  background: '#fff',
                  color: BRAND.dark,
                  fontSize: 17,
                  cursor: 'pointer',
                }}
              >
                ☰
              </button>
            )}
            <div style={{
              width: 36,
              height: 36,
              borderRadius: 8,
              background: `${BRAND.primary}12`,
              color: BRAND.primary,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontWeight: 900,
              flexShrink: 0,
            }}>
              {activeTabMeta.icon}
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ color: BRAND.dark, fontSize: 15, fontWeight: 900 }}>{activeTabMeta.label}</div>
              <div style={{ color: BRAND.muted, fontSize: 11, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                Separate admin workspace · {activeTabMeta.description}
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            {!isMobile && <AdminActionButton variant="ghost" onClick={loadAdminData}>Refresh</AdminActionButton>}
            {!isMobile && <AdminActionButton variant="ghost" onClick={exportUsersCsv}>Export users</AdminActionButton>}
            <Avatar name={(authUser && authUser.name) || 'Admin User'} size={34} bg={BRAND.primary} />
          </div>
        </header>

        <div style={{ flex: 1, overflowY: 'auto', padding: isMobile ? 14 : 24 }}>
          <div style={{ maxWidth: 1320, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{
              background: BRAND.dark,
              borderRadius: 8,
              padding: 22,
              color: '#fff',
              position: 'relative',
              overflow: 'hidden',
            }}>
              <EthiopianPattern opacity={0.08} color={BRAND.gold} />
              <div style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 18, flexWrap: 'wrap' }}>
                <div>
                  <div style={{ color: `${BRAND.gold}cc`, fontSize: 11, fontWeight: 900, letterSpacing: 1, textTransform: 'uppercase' }}>
                    MyMarian Operations
                  </div>
                  <h1 style={{ margin: '6px 0 4px', fontSize: 28, lineHeight: 1.1, fontWeight: 900 }}>
                    Admin Console
                  </h1>
                  <p style={{ margin: 0, color: '#ffffffb3', fontSize: 13, lineHeight: 1.5 }}>
                    Users, payments, enrollment access, and learning analytics in one workspace.
                  </p>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Avatar name={(authUser && authUser.name) || 'Admin User'} size={38} bg={BRAND.gold} />
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 900 }}>{(authUser && authUser.name) || 'Admin Preview'}</div>
                    <div style={{ color: '#ffffff99', fontSize: 11 }}>Role-based access ready</div>
                  </div>
                </div>
              </div>
            </div>

        {toast && (
          <div style={{
            padding: '11px 14px',
            borderRadius: 8,
            border: `1px solid ${ADMIN_TONES.info.border}`,
            background: ADMIN_TONES.info.bg,
            color: ADMIN_TONES.info.fg,
            fontSize: 13,
            fontWeight: 800,
          }}>
            {toast}
          </div>
        )}

            {renderActiveTab()}
          </div>
        </div>
      </main>
      {renderCourseBucketModal()}
      </div>
  );
}