import { submitDashboardReviewAction, updateUserProfileAction } from "@/lib/actions";
import { isUserProfileComplete, requireUser } from "@/lib/auth";
import { UserShell } from "@/components/user/UserShell";

type UserProfilePageProps = {
  searchParams: Promise<{ profile?: string; review?: string; success?: string }>;
};

export default async function UserProfilePage({ searchParams }: UserProfilePageProps) {
  const [session, params] = await Promise.all([requireUser(), searchParams]);
  const profileComplete = isUserProfileComplete(session);

  return (
    <UserShell session={session}>
      <section className="section-head">
        <div>
          <span className="pill">My Profile</span>
          <h1 className="section-title">Complete Your Details</h1>
          <p className="muted">Name, age, sex, contact, and address are mandatory before uploading content.</p>
        </div>
      </section>

      {params.profile === "required" ? <p className="admin-error-message">Please complete all mandatory profile details first.</p> : null}
      {params.success === "profile" ? <p className="contact-success-message">Profile saved successfully.</p> : null}

      <form action={updateUserProfileAction} className="contact-form-pro">
        <span className="pill">{profileComplete ? "Profile Complete" : "Required"}</span>
        <label className="field">
          Full Name
          <input defaultValue={session.name} name="name" required />
        </label>
        <div className="contact-form-row">
          <label className="field">
            Age
            <input defaultValue={session.age ?? ""} min="1" name="age" required type="number" />
          </label>
          <label className="field">
            Sex
            <select defaultValue={session.sex ?? ""} name="sex" required>
              <option value="">Select</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
              <option value="Other">Other</option>
              <option value="Prefer not to say">Prefer not to say</option>
            </select>
          </label>
        </div>
        <label className="field">
          Contact Number
          <input defaultValue={session.phone ?? ""} name="phone" required />
        </label>
        <label className="field">
          Address
          <input defaultValue={session.address ?? ""} name="address" required />
        </label>
        <label className="field">
          Short Bio
          <textarea defaultValue={session.bio ?? ""} name="bio" />
        </label>
        <button className="btn contact-submit" type="submit">Save Profile</button>
      </form>

      {profileComplete && session.isApproved ? (
        <form action={submitDashboardReviewAction} className="contact-form-pro" style={{ marginTop: "2rem" }}>
          <span className="pill">Review</span>
          <h2>Give Your Review</h2>
          <p className="muted">Your name and address will be used automatically from your profile.</p>
          {params.review === "sent" ? <p className="contact-success-message">Review submitted. It will appear after admin approval.</p> : null}
          {params.review === "error" ? <p className="admin-error-message">Please enter a valid review message.</p> : null}
          <label className="field">
            Rating
            <input defaultValue="5" max="5" min="1" name="rating" type="number" />
          </label>
          <label className="field">
            Review Message
            <textarea name="message" required />
          </label>
          <button className="btn contact-submit" type="submit">Submit Review</button>
        </form>
      ) : null}
    </UserShell>
  );
}