"use client";

import { useState } from "react";

const steps = ["Basic Info", "Family Info", "Professional", "Interests", "Privacy", "Review"];

const fieldsByStep: Record<number, { label: string; type?: string; placeholder?: string; options?: string[]; full?: boolean }[]> = {
  0: [
    { label: "Full Name" },
    { label: "Email Address", type: "email" },
    { label: "Phone Number" },
    { label: "City" },
    { label: "State", type: "select", options: ["select state", "Texas", "Oklahoma", "Arkansas", "Louisiana"] },
  ],
  1: [
    { label: "Spouse Name" },
    { label: "Number of Family Members" },
    { label: "Children (ages)", full: true },
  ],
  2: [
    { label: "Profession" },
    { label: "Company" },
    { label: "LinkedIn / Website", full: true },
  ],
  3: [{ label: "Your Interests", full: true, placeholder: "Community Service, Technology, Cricket…" }],
  4: [
    { label: "Profile Visibility", type: "select", options: ["Members Only", "Public", "Circles Only"] },
    { label: "Contact Visibility", type: "select", options: ["Connections", "Hidden", "All Members"] },
  ],
  5: [{ label: "Anything else you'd like us to know?", full: true }],
};

export default function MembershipForm() {
  const [step, setStep] = useState(0);
  const fields = fieldsByStep[step];

  return (
    <div className="form">
      <div className="form__card">
        {/* Steps */}
        <div className="form__steps no-scrollbar">
          {steps.map((s, i) => (
            <button key={s} onClick={() => setStep(i)} className="form__step">
              <p className={`form__step-num ${i === step ? "form__step-num--active" : ""}`}>
                Step 0{i + 1}
              </p>
              <p className={`form__step-label ${i === step ? "form__step-label--active" : ""}`}>
                {s}
              </p>
              {i === step && <span className="form__step-underline" />}
            </button>
          ))}
        </div>

        {/* Fields */}
        <div className="form__fields-wrap">
          <h3 className="form__section-title">
            Step I <span>{steps[step]}</span>
          </h3>
          <div className="form__fields">
            {fields.map((f) => (
              <div key={f.label} className={f.full ? "form__field--full" : ""}>
                <label className="form__label">{f.label}</label>
                {f.type === "select" ? (
                  <select className="form__select">
                    {f.options?.map((o) => (
                      <option key={o}>{o}</option>
                    ))}
                  </select>
                ) : (
                  <input
                    type={f.type ?? "text"}
                    placeholder={f.placeholder}
                    className="form__input"
                  />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="form__actions">
        <button
          onClick={() => setStep((s) => Math.max(0, s - 1))}
          disabled={step === 0}
          className="btn-ghost"
        >
          Back
        </button>
        <button
          onClick={() => setStep((s) => Math.min(steps.length - 1, s + 1))}
          className="btn-primary"
        >
          {step === steps.length - 1 ? "Submit" : "Next"}
        </button>
      </div>
    </div>
  );
}