// HireArt Onboarding Form — App
const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React;

const STEPS = [
  { id: "job", num: 1, title: "Job", icon: "briefcase" },
  { id: "candidate", num: 2, title: "Candidate", icon: "user" },
  { id: "compensation", num: 3, title: "Compensation", icon: "bank" },
  { id: "team", num: 4, title: "Team", icon: "users" },
  { id: "contract", num: 5, title: "Contract", icon: "edit-2" },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Form data
  const [data, setData] = useS({
    // Job
    jobTab: "new",
    jobId: "",
    classification: "",
    newJob: {
      roleName: "",
      country: "",
      state: "",
      description: "",
      workEnvironment: "",
      officeId: "",
      newOffice: null,
    },
    collaborators: [],
    // Candidate
    candidateTab: "new",
    candidateId: "",
    newCandidate: {
      firstName: "", lastName: "", email: "", country: "", phoneCode: "+1", phone: "",
    },
    // Compensation
    hasPayRateDecided: "",
    payRate: "",
    payFrequency: "salary",
    currency: "USD",
    bonusContext: "",
    deliverableRateType: "variable",
    eorProvider: "",
    eorProviderOther: "",
    billRate: "",
    billRateFrequency: "monthly",
    // Team
    department: "",
    teamId: "",
    supervisorId: "",
    supervisorInvite: null,
    // Contract
    workSchedule: "",
    startDateType: "asap",
    startDate: undefined,
    hasPlannedEnd: "",
    knownDurationType: "",
    endDate: undefined,
    estimatedDurationValue: "",
    estimatedDurationUnit: "months",
    candidateAware: "",
    candidateAgreedPay: "",
    candidateAgreedStart: "",
    additionalDetails: "",
  });

  const [activeStep, setActiveStep] = useS("job");
  const [errors, setErrors] = useS({});
  const [reviewOpen, setReviewOpen] = useS(false);
  const [submitted, setSubmitted] = useS(false);

  function set(key, value) {
    setData((d) => ({ ...d, [key]: value }));
  }

  // Derive job characteristics from data
  const derivedJob = useM(() => {
    if (data.jobTab === "existing") {
      const j = EXISTING_JOBS.find(x => x.id === data.jobId);
      return j || {};
    }
    const et = deriveEmploymentType(data.newJob.country, data.classification);
    const office = (() => {
      const all = [...OFFICES, ...(data.newJob.newOffice ? [data.newJob.newOffice] : [])];
      return all.find(o => o.id === data.newJob.officeId);
    })();
    return {
      roleName: data.newJob.roleName,
      country: data.newJob.country,
      state: data.newJob.state,
      classification: data.classification,
      employmentType: et,
      workEnvironment: data.newJob.workEnvironment,
      office,
    };
  }, [data]);

  // Step completion logic — for sidebar checkmarks
  const stepStatus = useM(() => {
    const job =
      (data.jobTab === "existing" && !!data.jobId) ||
      (data.jobTab === "new" && data.newJob.roleName && data.newJob.country && data.classification && data.newJob.workEnvironment && data.newJob.description);
    const candidate =
      (data.candidateTab === "existing" && !!data.candidateId) ||
      (data.candidateTab === "new" && data.newCandidate.firstName && data.newCandidate.lastName && data.newCandidate.email && data.newCandidate.country);
    const comp =
      (data.hasPayRateDecided === "none") ||
      (data.hasPayRateDecided === "pay" && data.payRate && data.currency);
    const team = !!data.department && !!data.supervisorId;
    const contract =
      data.startDateType === "asap" ||
      (data.startDateType === "date" && !!data.startDate);
    const contractFull = contract && !!data.workSchedule && !!data.hasPlannedEnd && !!data.candidateAware && !!data.candidateAgreedPay && !!data.candidateAgreedStart;
    return { job, candidate, comp, team, contract: contractFull };
  }, [data]);

  const completedCount = Object.values(stepStatus).filter(Boolean).length;
  const progress = (completedCount / 5) * 100;

  // Scroll spy: detect active step on scroll
  useE(() => {
    function onScroll() {
      let curr = "job";
      for (const s of STEPS) {
        const el = document.getElementById(`section-${s.id}`);
        if (el && el.getBoundingClientRect().top < 200) curr = s.id;
      }
      setActiveStep(curr);
    }
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  function scrollToStep(id) {
    const el = document.getElementById(`section-${id}`);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 152;
      window.scrollTo({ top, behavior: "smooth" });
    }
  }

  function validate() {
    const e = {};
    // Job
    if (data.jobTab === "existing" && !data.jobId) e.jobId = "Please select a job.";
    if (data.jobTab === "new") {
      if (!data.newJob.roleName) e.roleName = "Role title is required.";
      if (!data.newJob.workEnvironment) e.workEnvironment = "Please choose a work environment.";
      if (data.newJob.workEnvironment === "remote" && !data.newJob.country) e.country = "Country is required.";
      if ((data.newJob.workEnvironment === "hybrid" || data.newJob.workEnvironment === "onsite") && !data.newJob.officeId) e.officeId = "Please choose an office.";
      if (!data.classification) e.classification = "Please choose a classification.";
      if (!data.newJob.description) e.description = "Description is required.";
    }
    // Candidate
    if (data.candidateTab === "existing" && !data.candidateId) e.candidateId = "Select a candidate.";
    if (data.candidateTab === "new") {
      if (!data.newCandidate.firstName) e.firstName = "Required.";
      if (!data.newCandidate.lastName) e.lastName = "Required.";
      if (!data.newCandidate.email) e.email = "Required.";
      else if (!/.+@.+\..+/.test(data.newCandidate.email)) e.email = "Please enter a valid email.";
      if (!data.newCandidate.country) e.candidateCountry = "Required.";
    }
    // Comp
    if (!data.hasPayRateDecided) e.payDecided = "Required.";
    if (data.hasPayRateDecided === "pay" && !data.payRate) e.payRate = "Pay rate is required.";
    // Team
    if (!data.department) e.department = "Department is required.";
    if (!data.supervisorId && !data.supervisorInvite) e.supervisorId = "Manager is required.";
    // Contract
    if (!data.workSchedule) e.workSchedule = "Choose a work schedule.";
    if (data.startDateType === "date" && !data.startDate) e.startDate = "Pick a start date.";
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function openReview() {
    if (validate()) setReviewOpen(true);
    else {
      // scroll to first errored section
      const firstKey = Object.keys(errors)[0];
      const sectionMap = {
        jobId: "job", roleName: "job", country: "job", classification: "job", workEnvironment: "job", officeId: "job", description: "job",
        candidateId: "candidate", firstName: "candidate", lastName: "candidate", email: "candidate", candidateCountry: "candidate",
        payDecided: "compensation", payRate: "compensation",
        department: "team", supervisorId: "team",
        startDate: "contract", workSchedule: "contract",
      };
      const target = sectionMap[firstKey];
      if (target) setTimeout(() => scrollToStep(target), 50);
    }
  }

  function submit() {
    setReviewOpen(false);
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 4000);
  }

  // ---------- Layout helpers ----------
  function getSidebarPlacement() {
    return t.sidebarPlacement || "left";
  }

  return (
    <div style={{ background: "#F6F6F6", minHeight: "100vh" }}>
      {/* Topbar */}
      <div className="topbar">
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <img src={(window.__resources && window.__resources.logoPrimary) || "assets/logos/logo-primary.svg"} alt="HireArt" style={{ height: 24 }} />
            <span style={{ fontSize: 13, color: "var(--color-neutral-60)", paddingLeft: 16, borderLeft: "1.5px solid var(--color-neutral-30)" }}>
              Onboarding · Aurora Dynamics
            </span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Button variant="ghost" size="sm">
              <Icon name="external-link" size={13} /> Save &amp; exit
            </Button>
            <Button variant="ghost" size="sm">
              <Icon name="users" size={13} /> Invite collaborator
            </Button>
            <span className="pill-avatar" style={{ background: "var(--color-purple-60)" }}>SM</span>
          </div>
        </div>
      </div>

      {/* Main */}
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "32px 24px 64px", display: "grid", gridTemplateColumns: getSidebarPlacement() === "left" ? "260px 1fr" : "1fr 260px", gap: 32 }}>
        {/* Sidebar */}
        <aside style={{ position: "sticky", top: 24, alignSelf: "start", order: getSidebarPlacement() === "left" ? 0 : 1 }}>
          <div className="eyebrow" style={{ marginBottom: 4 }}>Section {STEPS.find(s => s.id === activeStep)?.num} of 5</div>
          <h1 style={{ fontFamily: "var(--font-headline)", fontSize: 26, fontWeight: 700, lineHeight: 1.15, margin: "0 0 10px" }}>
            New&nbsp;hire onboarding
          </h1>
          <div className="sidebar-progress">
            <div className="sidebar-progress-fill" style={{ width: `${progress}%` }} />
          </div>
          <div style={{ fontSize: 12, color: "var(--color-neutral-70)", marginBottom: 20 }}>
            {completedCount} of 5 sections complete
          </div>

          <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {STEPS.map((s) => {
              const status = stepStatus[s.id];
              const active = activeStep === s.id;
              return (
                <button
                  key={s.id}
                  className={`sidebar-step ${active ? "active" : ""} ${status ? "complete" : ""}`}
                  onClick={() => scrollToStep(s.id)}
                >
                  <span className="sidebar-step-num">
                    {status ? <Icon name="check" size={14} color={active ? "#fff" : "#fff"} style={{ filter: "invert(1)" }} /> : s.num}
                  </span>
                  {s.title}
                </button>
              );
            })}
          </nav>

        </aside>

        {/* Form */}
        <main>
          <JobSection data={data} set={set} errors={errors} />
          <CandidateSection data={data} set={set} errors={errors} />
          <CompensationSection data={data} set={set} errors={errors} derivedJob={derivedJob} />
          <TeamSection data={data} set={set} errors={errors} />
          <ContractSection data={data} set={set} errors={errors} derivedJob={derivedJob} />

          {/* Footer actions */}
          <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "center", padding: 20, background: "#fff", border: "1px solid var(--color-neutral-20)", borderRadius: 12 }}>
            <div style={{ fontSize: 13, color: "var(--color-neutral-70)" }}>
              {completedCount === 5
                ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--color-green-100)", fontWeight: 600 }}><Icon name="check" size={14} /> All sections complete — ready to review.</span>
                : <span>Complete all 5 sections to submit.</span>}
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              <Button variant="secondary">Save draft</Button>
              <Button variant="primary" iconRight="arrow-right" onClick={openReview}>
                Submit
              </Button>
            </div>
          </div>
        </main>
      </div>

      {/* Review dialog */}
      <ReviewDialog
        open={reviewOpen}
        onClose={() => setReviewOpen(false)}
        onSubmit={submit}
        data={data}
        derivedJob={derivedJob}
        onEdit={(stepId) => { setReviewOpen(false); setTimeout(() => scrollToStep(stepId), 100); }}
      />

      {/* Success toast */}
      {submitted && (
        <div className="toast">
          <Icon name="check" size={16} color="#fff" />
          Onboarding submitted! HireArt is reviewing.
        </div>
      )}

      {/* Tweaks */}
      <TweaksPanel>
        <TweakSection label="Layout" />
        <TweakRadio
          label="Sidebar"
          value={t.sidebarPlacement}
          options={["left", "right"]}
          onChange={(v) => setTweak("sidebarPlacement", v)}
        />
        <TweakSection label="Radio cards" />
        <TweakRadio
          label="Selected style"
          value={t.radioCardVariant}
          options={["standard", "bold"]}
          onChange={(v) => {
            setTweak("radioCardVariant", v);
            // toggle global class
            document.documentElement.classList.toggle("rc-bold", v === "bold");
          }}
        />
        <TweakSection label="Form data" />
        <TweakButton
          label="Fill with example"
          onClick={() => {
            setData((d) => ({
              ...d,
              jobTab: "new",
              newJob: { ...d.newJob, roleName: "Senior ML Engineer", country: "USA", state: "California", description: "Lead applied research on document AI.", workEnvironment: "remote", officeId: "", newOffice: null },
              classification: "employee",
              candidateTab: "new",
              newCandidate: { firstName: "Jordan", lastName: "Liu", email: "jordan.liu@example.com", country: "USA", phoneCode: "+1", phone: "(415) 555-0142" },
              hasPayRateDecided: "pay",
              payRate: "180000",
              payFrequency: "salary",
              currency: "USD",
              bonusContext: "10% target performance bonus + equity grant.",
              department: "Engineering",
              teamId: "Engineering::Platform",
              supervisorId: "sup_1",
              workSchedule: "full_time",
              startDateType: "date",
              startDate: new Date(Date.now() + 14 * 86400000),
              hasPlannedEnd: "no",
              candidateAware: "yes",
              candidateAgreedPay: "yes",
              candidateAgreedStart: "yes",
              additionalDetails: "",
            }));
          }}
        />
        <TweakButton
          label="Reset"
          onClick={() => window.location.reload()}
        />
      </TweaksPanel>
    </div>
  );
}

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