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

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

export default async function NewUserPostPage({ searchParams }: NewUserPostPageProps) {
  const session = await requireApprovedUser();
  const [params, categories] = await Promise.all([
    searchParams,
    prisma.category.findMany({ orderBy: { name: "asc" } })
  ]);

  return (
    <UserShell session={session}>
      <form action={submitUserPostAction} className="contact-form-pro">
        <span className="pill">Submit Blog</span>
        <h1 className="section-title">New Blog Submission</h1>
        <p className="muted">Your blog will be public only after admin approval.</p>
        {params.error ? <p className="admin-error-message">Please fill title, excerpt, and content correctly.</p> : null}
        <label className="field">
          Title
          <input name="title" required />
        </label>
        <label className="field">
          Excerpt
          <textarea name="excerpt" required />
        </label>
        <label className="field">
          Content
          <textarea name="content" required />
        </label>
        <div className="panel-header">SEO Settings</div>
        <label className="field">
          SEO Title
          <input name="seoTitle" placeholder="Optional search title. Defaults to blog title." />
        </label>
        <label className="field">
          SEO Description
          <textarea name="seoDescription" placeholder="Optional search description. Defaults to excerpt." />
        </label>
        <label className="field">
          SEO Keywords
          <input name="seoKeywords" placeholder="Nepal, travel, culture, blog" />
        </label>
        <label className="field">
          Category
          <select name="categoryId">
            <option value="">No category</option>
            {categories.map((category) => (
              <option key={category.id} value={category.id}>{category.name}</option>
            ))}
          </select>
        </label>
        <label className="field">
          Cover Image
          <input name="coverImageFile" type="file" />
        </label>
        <button className="btn contact-submit" type="submit">Submit For Approval</button>
      </form>
    </UserShell>
  );
}