import { submitUserVideoAction } from "@/lib/actions";
import { requireApprovedUser } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { UserShell } from "@/components/user/UserShell";
import Link from "next/link";

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

const errorMessages: Record<string, string> = {
  required: "Please enter a valid YouTube URL and required details.",
  youtube: "Please enter a valid YouTube video URL."
};

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

  return (
    <UserShell session={session}>
      <form action={submitUserVideoAction} className="contact-form-pro">
        <input name="kind" type="hidden" value="VIDEO" />
        <span className="pill">Long-form video</span>
        <h1 className="section-title">Submit a video</h1>
        <p className="muted">Paste a standard YouTube video link. For vertical Shorts, use the dedicated Shorts upload page.</p>
        {params.error ? (
          <p className="admin-error-message">{errorMessages[params.error] ?? errorMessages.required}</p>
        ) : null}
        <Link className="btn btn-secondary" href="/dashboard/shorts/new" style={{ marginBottom: "1rem" }}>
          Upload a YouTube Short instead →
        </Link>
        <label className="field">
          Title
          <input name="title" required />
        </label>
        <label className="field">
          YouTube URL
          <input name="youtubeUrl" placeholder="https://www.youtube.com/watch?v=..." required type="url" />
        </label>
        <label className="field">
          Description
          <textarea
            className="large-textarea"
            name="description"
            placeholder="Write full video description. You can include long text, line breaks, and #hashtags."
            required
          />
        </label>
        <div className="panel-header">SEO settings</div>
        <label className="field">
          SEO title
          <input name="seoTitle" placeholder="Optional search title. Defaults to video title." />
        </label>
        <label className="field">
          SEO description
          <textarea name="seoDescription" placeholder="Optional search description. Defaults to video description." />
        </label>
        <label className="field">
          SEO keywords
          <input name="seoKeywords" placeholder="Nepal video, travel, vlog, culture" />
        </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">
          Thumbnail
          <input name="thumbnailFile" type="file" />
        </label>
        <button className="btn contact-submit" type="submit">
          Submit for approval
        </button>
      </form>
    </UserShell>
  );
}