"use client";

import { useRouter } from "next/navigation";
import { TOTAL_STEPS } from "@/app/lib/astrologerSteps";
import DashboardSidebar from "@/app/components/astrologer/DashboardSidebar";

interface Props {
  step: number;
  title: string;
  mode?: "register" | "edit";
  loading?: boolean;
  onSave: () => void;
  onBack?: () => void;
  children: React.ReactNode;
}

export default function StepShell({
  step,
  title,
  mode = "register",
  loading = false,
  onSave,
  onBack,
  children,
}: Props) {
  const router = useRouter();

  const isEdit = mode === "edit";

  const handleBack = () => {
    if (onBack) {
      onBack();
      return;
    }

    router.back();
  };

  // Editing a profile field from the Profile hub should feel like part
  // of the dashboard app (sidebar + panel cards), not like re-entering
  // the registration wizard — only the first-time registration flow
  // uses the full-screen wizard shell below.
  if (isEdit) {
    return (
      <div className="astrologer-dashboard-shell">
        <DashboardSidebar active="Profile" />

        <main className="astrologer-dashboard-main">
          <div className="astrologer-dashboard-topbar">
            <div className="d-flex align-items-center gap-3">
              <button
                type="button"
                className="astrologer-wizard-back"
                onClick={handleBack}
                aria-label="Back"
              >
                &#8592;
              </button>

              <div className="astrologer-dashboard-name">{title}</div>
            </div>
          </div>

          <div className="astrologer-panel card-bg-primary">
            {children}

            <div className="astrologer-wizard-footer mt-2">
              <button
                type="button"
                className="btn btn-primary py-3"
                onClick={onSave}
                disabled={loading}
              >
                {loading ? "Saving..." : "Update Profile"}
              </button>
            </div>
          </div>
        </main>
      </div>
    );
  }

  return (
    <section className="astrologer-wizard-page" style={{ paddingTop: "120px", paddingBottom: "120px" }}>
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-6">
            <div className="astrologer-wizard-header">
              <button
                type="button"
                className="astrologer-wizard-back"
                onClick={handleBack}
                aria-label="Back"
              >
                &#8592;
              </button>

              <h5 className="text-white mb-0">
                {isEdit ? "Update your profile" : "Complete your profile"}
              </h5>
            </div>

            <div className="card card-bg-primary border-0 rounded-4">
              <div className="card-body p-4 p-md-5 text-white">
                <h4 className="mb-1">{title}</h4>

                {!isEdit && (
                  <>
                    <p className="terms-text-color mb-2">
                      Step {step} of {TOTAL_STEPS}
                    </p>

                    <div className="astrologer-wizard-progress">
                      {Array.from({ length: TOTAL_STEPS }).map(
                        (_, index) => (
                          <span
                            key={index}
                            className={
                              index < step ? "active" : ""
                            }
                          />
                        )
                      )}
                    </div>
                  </>
                )}

                <div className="mt-4">{children}</div>

                <div className="astrologer-wizard-footer">
                  {!isEdit && (
                    <button
                      type="button"
                      className="btn btn-outline-light py-3"
                      onClick={handleBack}
                      disabled={loading}
                    >
                      Back
                    </button>
                  )}

                  <button
                    type="button"
                    className="btn btn-primary py-3"
                    onClick={onSave}
                    disabled={loading}
                  >
                    {loading
                      ? "Saving..."
                      : isEdit
                      ? "Update Profile"
                      : "Save & continue"}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}