// Main app shell — sidebar, top bar, role switcher, view routing, tweaks integration

const { useState: useSx, useEffect: useEx } = React;

const ROLES = [
{ id: 'u1', label: 'Marcus Webb · Test Engineer' },
{ id: 'u3', label: 'David Okonkwo · Approver' },
{ id: 'u5', label: 'Tom Castellan · Admin' }];


function ForceMark({ height = 32 }) {
  return (
    <div style={{
      height,
      padding: '4px 10px',
      background: 'white',
      borderRadius: 4,
      display: 'flex',
      alignItems: 'center'
    }}>
      <img src="assets/force-logo.png" alt="Force Technologies" style={{ height: height - 8, display: 'block' }} />
    </div>);

}

function App({ data }) {
  // ---- Tweaks ----
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "density": "comfortable",
    "accentMode": "default",
    "showBrowserChrome": true,
    "scenarioRole": "u1"
  } /*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Force a current user from tweaks
  const currentUser = data.USERS.find((u) => u.id === tweaks.scenarioRole) || data.USERS[0];

  // Routing
  const [view, setView] = useSx({ name: 'dashboard' });
  const [showNew, setShowNew] = useSx(false);
  const [showPdf, setShowPdf] = useSx(null);
  const [showApprove, setShowApprove] = useSx(false);
  const [showReject, setShowReject] = useSx(false);
  const [adminSection, setAdminSection] = useSx('equipment');
  const [toast, setToast] = useSx(null);

  // Update a job's status (simulated mutations live in component state)
  const [jobOverrides, setJobOverrides] = useSx({});
  const dataView = {
    ...data,
    JOBS: data.JOBS.map((j) => jobOverrides[j.id] ? { ...j, ...jobOverrides[j.id] } : j)
  };
  const updateJob = (id, patch) => {
    setJobOverrides((o) => ({ ...o, [id]: { ...(o[id] || {}), ...patch } }));
  };

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 2600);
  };

  const goJob = (jobId) => setView({ name: 'job', jobId });
  const goTest = (jobId, testId) => setView({ name: 'test', jobId, testId });
  const goTab = (name) => setView({ name });

  // Role-based nav
  const canSeeAdmin = currentUser.role === 'Admin';

  const counts = {
    inProgress: dataView.JOBS.filter((j) => j.status === 'In Progress').length,
    forApproval: dataView.JOBS.filter((j) => j.status === 'For Approval').length,
    archive: dataView.JOBS.filter((j) => j.status === 'Complete').length
  };

  // density adjusts root font-size variable
  useEx(() => {
    document.documentElement.style.setProperty('--app-density', tweaks.density === 'compact' ? '0.93' : '1');
    if (tweaks.density === 'compact') {
      document.body.style.fontSize = '12px';
    } else {
      document.body.style.fontSize = '13px';
    }
    if (tweaks.accentMode === 'navy') {
      document.documentElement.style.setProperty('--light-blue', '#2052c8');
      document.documentElement.style.setProperty('--light-blue-soft', '#e6ecfa');
    } else if (tweaks.accentMode === 'teal') {
      document.documentElement.style.setProperty('--light-blue', '#0d8a8a');
      document.documentElement.style.setProperty('--light-blue-soft', '#ddefef');
    } else {
      document.documentElement.style.setProperty('--light-blue', '#00ADEF');
      document.documentElement.style.setProperty('--light-blue-soft', '#e6f6fd');
    }
  }, [tweaks.density, tweaks.accentMode]);

  return (
    <div className="app">
      {/* Top bar */}
      <div className="topbar">
        <div className="brand">
          <ForceMark height={36} />
          <div className="name" style={{ marginLeft: 4 }}>
            <span className="t2" style={{ fontSize: 10.5 }}>Components Lab Portal</span>
            <span className="t1" style={{ fontSize: 12, fontWeight: 700, marginTop: 1 }}>AS6171A Counterfeit Risk Mitigation</span>
          </div>
        </div>
        <div className="spacer" />
        <div className="topbar-search">
          <Icon name="search" size={14} />
          <input placeholder="Search reports, parts, customers…" />
          <span style={{ fontSize: 10, padding: '2px 5px', background: 'rgba(255,255,255,0.1)', borderRadius: 3 }}>⌘K</span>
        </div>
        <button className="topbar-action"><Icon name="bell" size={14} /> {data.NOTIFICATIONS.length}</button>
        <select
          className="topbar-action"
          value={tweaks.scenarioRole}
          onChange={(e) => setTweak('scenarioRole', e.target.value)}
          style={{ background: 'rgba(255,255,255,0.08)', color: 'white', border: '1px solid rgba(255,255,255,0.18)', cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, padding: '6px 10px', borderRadius: 4 }}
          title="Switch role (demo)">
          
          {ROLES.map((r) => <option key={r.id} value={r.id} style={{ color: 'var(--dark-blue)' }}>👤 {r.label}</option>)}
        </select>
        <div className="user-chip">
          <div className="avatar">{currentUser.initials}</div>
          <div className="who"><span className="n">{currentUser.name}</span><span className="r">{currentUser.role}</span></div>
        </div>
      </div>

      {/* Sidebar */}
      <div className="sidebar">
        <div className="nav-section">
          <button className={`nav-item ${view.name === 'dashboard' ? 'active' : ''}`} onClick={() => goTab('dashboard')}>
            <span className="ico"><Icon name="dashboard" size={15} /></span>Dashboard
          </button>
          <button className={`nav-item ${view.name === 'jobs' || view.name === 'job' || view.name === 'test' ? 'active' : ''}`} onClick={() => goTab('jobs')}>
            <span className="ico"><Icon name="jobs" size={15} /></span>Jobs
            <span className="badge">{counts.inProgress + counts.forApproval}</span>
          </button>
          <button className={`nav-item ${view.name === 'archive' ? 'active' : ''}`} onClick={() => goTab('archive')}>
            <span className="ico"><Icon name="archive" size={15} /></span>Archive
            <span className="badge">{counts.archive}</span>
          </button>
        </div>

        {canSeeAdmin &&
        <div className="nav-section">
            <div className="nav-label">Admin</div>
            <button className={`nav-item ${view.name === 'admin' && adminSection === 'equipment' ? 'active' : ''}`} onClick={() => {setAdminSection('equipment');goTab('admin');}}>
              <span className="ico"><Icon name="equipment" size={15} /></span>Equipment
            </button>
            <button className={`nav-item ${view.name === 'admin' && adminSection === 'users' ? 'active' : ''}`} onClick={() => {setAdminSection('users');goTab('admin');}}>
              <span className="ico"><Icon name="users" size={15} /></span>Users &amp; Roles
            </button>
            <button className={`nav-item ${view.name === 'admin' && adminSection === 'standard-responses' ? 'active' : ''}`} onClick={() => {setAdminSection('standard-responses');goTab('admin');}}>
              <span className="ico"><Icon name="snippet" size={15} /></span>Standard Responses
            </button>
            <button className={`nav-item ${view.name === 'admin' && adminSection === 'test-config' ? 'active' : ''}`} onClick={() => {setAdminSection('test-config');goTab('admin');}}>
              <span className="ico"><Icon name="sliders" size={15} /></span>Test Configuration
            </button>
            <button className={`nav-item ${view.name === 'admin' && adminSection === 'test-templates' ? 'active' : ''}`} onClick={() => {setAdminSection('test-templates');goTab('admin');}}>
              <span className="ico"><Icon name="layers" size={15} /></span>Test Templates
            </button>
          </div>
        }

        <div className="footer-info">
          <div style={{ fontWeight: 600, color: 'var(--dark-blue)', fontSize: 11 }}>Phase 1 Build</div>
          <div>v1.0.0-rc · 29 Apr 2026</div>
          <div style={{ marginTop: 6 }}>AS6171A · Moderate Risk · Model 2</div>
        </div>
      </div>

      {/* Main content */}
      <div className="main">
        {view.name === 'dashboard' &&
        <Dashboard data={dataView} currentUser={currentUser}
        onOpenJob={goJob}
        onNewJob={() => setShowNew(true)}
        onGoTab={goTab} />
        }
        {view.name === 'jobs' &&
        <JobsList data={dataView} currentUser={currentUser}
        onOpenJob={goJob} onNewJob={() => setShowNew(true)} />
        }
        {view.name === 'archive' &&
        <JobsList data={dataView} currentUser={currentUser}
        onOpenJob={goJob} archive={true} />
        }
        {view.name === 'job' &&
        <JobDetail data={dataView} jobId={view.jobId} currentUser={currentUser}
        onOpenTest={goTest}
        onBack={() => setView({ name: 'jobs' })}
        onSubmitForApproval={() => {
          updateJob(view.jobId, { status: 'For Approval', submittedForApprovalAt: '2026-04-29 10:14' });
          showToast('Submitted for approval — David Okonkwo notified.');
        }}
        onApprove={() => setShowApprove(true)}
        onReject={() => setShowReject(true)}
        onIssue={() => {
          updateJob(view.jobId, { status: 'Complete', issuedAt: '2026-04-29 10:30' });
          showToast('Report issued to customer. PDF released.');
        }}
        onPreviewPdf={() => setShowPdf(view.jobId)} />
        }
        {view.name === 'test' &&
        <TestEntry data={dataView} jobId={view.jobId} testId={view.testId} currentUser={currentUser}
        onBack={() => setView({ name: 'job', jobId: view.jobId })}
        onSave={() => showToast('Draft saved.')}
        onComplete={() => showToast('Test marked complete.')} />

        }
        {view.name === 'admin' &&
        <AdminPage data={dataView} currentUser={currentUser}
        section={adminSection}
        onSection={setAdminSection} />
        }
      </div>

      {/* Modals */}
      {showNew && <NewJobModal data={dataView} onClose={() => setShowNew(false)}
      onCreate={() => {setShowNew(false);showToast('Job created — FT-CR-2026-0187. 9 planned tests added.');}} />}
      {showPdf && <PdfPreview data={dataView} jobId={showPdf} onClose={() => setShowPdf(null)} />}
      {showApprove &&
      <ApproveModal onCancel={() => setShowApprove(false)}
      onConfirm={() => {
        updateJob(view.jobId, { status: 'Approved', approvedAt: '2026-04-29 10:18' });
        setShowApprove(false);
        showToast('Approved. Ready for issue.');
      }} />
      }
      {showReject &&
      <RejectModal onCancel={() => setShowReject(false)}
      onConfirm={(reason) => {
        updateJob(view.jobId, { status: 'Rejected', rejectedAt: '2026-04-29 10:18', rejectionReason: reason, rejectedById: currentUser.id });
        setShowReject(false);
        showToast('Returned for revision. Engineer notified.');
      }} />
      }

      {/* Toast */}
      {toast &&
      <div style={{
        position: 'fixed', right: 20, bottom: 20,
        background: 'var(--dark-blue)', color: 'white',
        padding: '12px 18px', borderRadius: 6,
        boxShadow: '0 8px 28px rgba(35,38,86,0.25)',
        fontSize: 12.5, fontWeight: 500,
        display: 'flex', alignItems: 'center', gap: 10,
        zIndex: 200
      }}>
          <Icon name="check-circle" size={16} color="var(--light-blue)" />{toast}
        </div>
      }

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Demo scenario">
          <TweakSelect label="Active role"
          value={tweaks.scenarioRole}
          options={ROLES.map((r) => ({ value: r.id, label: r.label }))}
          onChange={(v) => setTweak('scenarioRole', v)} />
          <div style={{ fontSize: 10.5, color: 'var(--body-text)', marginTop: 6, lineHeight: 1.4 }}>
            Switching role changes which actions are exposed (per the permission matrix in Admin → Users).
          </div>
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio label="Row density"
          value={tweaks.density}
          options={[{ value: 'comfortable', label: 'Comfortable' }, { value: 'compact', label: 'Compact' }]}
          onChange={(v) => setTweak('density', v)} />
        </TweakSection>
        <TweakSection label="Accent">
          <TweakRadio label="Accent colour"
          value={tweaks.accentMode}
          options={[
          { value: 'default', label: 'Light Blue' },
          { value: 'navy', label: 'Indigo' },
          { value: 'teal', label: 'Teal' }]
          }
          onChange={(v) => setTweak('accentMode', v)} />
          <div style={{ fontSize: 10.5, color: 'var(--body-text)', marginTop: 6, lineHeight: 1.4 }}>
            Brand spec uses Light Blue (#00ADEF) — the alternates are for exploration only.
          </div>
        </TweakSection>
        <TweakSection label="Quick demo links">
          <TweakButton label="Open active in-progress job (T4 RES)" onClick={() => goTest('j1', 'RES')} />
          <TweakButton label="Open job awaiting your approval" onClick={() => {setTweak('scenarioRole', 'u3');goJob('j2');}} />
          <TweakButton label="Open rejected job (revisions needed)" onClick={() => {setTweak('scenarioRole', 'u6');goJob('j3');}} />
          <TweakButton label="Preview a finished PDF (FT-CR-2026-0172)" onClick={() => setShowPdf('j5')} />
        </TweakSection>
      </TweaksPanel>
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App data={window.FORCE_DATA} />);