import { submitUserGalleryAction } from "@/lib/actions";
import { requireApprovedUser } from "@/lib/auth";
import { UserShell } from "@/components/user/UserShell";

type NewUserGalleryPageProps = {
  searchParams: Promise<{ error?: string }>;
};

export default async function NewUserGalleryPage({ searchParams }: NewUserGalleryPageProps) {
  const session = await requireApprovedUser();
  const params = await searchParams;

  return (
    <UserShell session={session}>
      <form action={submitUserGalleryAction} className="contact-form-pro">
        <span className="pill">Submit Gallery</span>
        <h1 className="section-title">New Image Submission</h1>
        <p className="muted">Upload an image. It will be public only after admin approval.</p>
        {params.error ? <p className="admin-error-message">Please enter a title and upload an image.</p> : null}
        <label className="field">
          Title
          <input name="title" required />
        </label>
        <label className="field">
          Description
          <textarea name="description" />
        </label>
        <div className="panel-header">SEO Settings</div>
        <label className="field">
          SEO Title
          <input name="seoTitle" placeholder="Optional search title. Defaults to image title." />
        </label>
        <label className="field">
          SEO Description
          <textarea name="seoDescription" placeholder="Optional search description. Defaults to image description." />
        </label>
        <label className="field">
          SEO Keywords
          <input name="seoKeywords" placeholder="Nepal photo, gallery, culture" />
        </label>
        <label className="field">
          Image
          <input name="imageFile" required type="file" />
        </label>
        <button className="btn contact-submit" type="submit">Submit For Approval</button>
      </form>
    </UserShell>
  );
}