/* global window React ReactDOM */
const { useState, useEffect } = React;
const {
  TopNav, Footer, StepIndicator, LoginPage,
  RegistrantDashboard, A1CropSelection, A2GAPConditions, A3FileSelection,
  A4DecisionTree, A5OutputReport, A6Submit, ArchivedSubmission,
  B1Dashboard, B2FileValidation, B3ReportReview,
  DEFAULT_GAP,
} = window;

const INITIAL_SUBMISSION = {
  crop: null, gapConfirmed: false, gap: { ...DEFAULT_GAP },
  selectedDemoFile: null, reportViewed: false, submitted: false,
};

const PAGE_LABEL = {
  "registrant.dashboard": "Submissions",
  "registrant.a1": "Crop selection",
  "registrant.a2": "GAP conditions",
  "registrant.a3": "Trial data",
  "registrant.a4": "Decision tree",
  "registrant.a5": "Report",
  "registrant.a6": "Submit",
  "registrant.archive": "Archived submission",
  "regulator.dashboard": "Queue",
  "regulator.b2": "File validation",
  "regulator.b3": "Assessment report",
};

function App() {
  const [user, setUser] = useState(null);
  const [page, setPage] = useState("login");
  const [submission, setSubmission] = useState(INITIAL_SUBMISSION);
  const [selectedSubmissionId, setSelectedSubmissionId] = useState(null);

  const onLogin = (u) => {
    setUser(u);
    setSubmission(INITIAL_SUBMISSION);
    setSelectedSubmissionId(null);
    setPage(u.role === "registrant" ? "registrant.dashboard" : "regulator.dashboard");
  };
  const onLogout = () => { setUser(null); setPage("login"); };
  const updateSubmission = (patch) => setSubmission(prev => ({ ...prev, ...patch }));

  if (!user) return <LoginPage onLogin={onLogin} />;

  const isRegistrant = user.role === "registrant";
  const isRegistrantWorkflow = isRegistrant && page.startsWith("registrant.") && page !== "registrant.dashboard" && page !== "registrant.archive";
  const showSteps = isRegistrantWorkflow;

  const breadcrumb = PAGE_LABEL[page];

  const renderPage = () => {
    switch (page) {
      case "registrant.dashboard":
        return <RegistrantDashboard user={user}
          onNew={() => { setSubmission(INITIAL_SUBMISSION); setPage("registrant.a1"); }}
          onResume={() => setPage("registrant.a1")}
          onViewArchive={(ref) => { setSelectedSubmissionId(ref); setPage("registrant.archive"); }}
        />;
      case "registrant.a1": return <A1CropSelection submission={submission} onUpdate={updateSubmission} onNavigate={setPage}/>;
      case "registrant.a2": return <A2GAPConditions submission={submission} onUpdate={updateSubmission} onNavigate={setPage}/>;
      case "registrant.a3": return <A3FileSelection submission={submission} onUpdate={updateSubmission} onNavigate={setPage}/>;
      case "registrant.a4": return <A4DecisionTree submission={submission} onNavigate={setPage}/>;
      case "registrant.a5": return <A5OutputReport submission={submission} user={user} onUpdate={updateSubmission} onNavigate={setPage}/>;
      case "registrant.a6": return <A6Submit submission={submission} user={user} onUpdate={updateSubmission} onNavigate={setPage} onHome={() => setPage("registrant.dashboard")}/>;
      case "registrant.archive": return <ArchivedSubmission refId={selectedSubmissionId} onBack={() => setPage("registrant.dashboard")}/>;
      case "regulator.dashboard": return <B1Dashboard user={user} onSelect={(id) => { setSelectedSubmissionId(id); setPage("regulator.b2"); }}/>;
      case "regulator.b2": return <B2FileValidation submissionId={selectedSubmissionId} onViewReport={() => setPage("regulator.b3")} onBack={() => setPage("regulator.dashboard")}/>;
      case "regulator.b3": return <B3ReportReview submissionId={selectedSubmissionId} onBack={() => setPage("regulator.dashboard")} onBackToValidation={() => setPage("regulator.b2")}/>;
      default: return null;
    }
  };

  return (
    <div className="rac-app">
      <TopNav user={user} page={page} onNavigate={setPage} onLogout={onLogout} breadcrumb={breadcrumb}/>
      <div className="rac-main">
        {showSteps && <StepIndicator page={page} submission={submission} onNavigate={setPage}/>}
        <main className="rac-content">{renderPage()}</main>
      </div>
      <Footer/>
    </div>
  );
}

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