import Link from "next/link";

type ShortUploadFormProps = {
  action: (formData: FormData) => void | Promise<void>;
  backHref: string;
  categories: Array<{ id: string; name: string }>;
  error?: string | null;
};

export function ShortUploadForm({ action, backHref, categories, error }: ShortUploadFormProps) {
  return (
    <div className="short-upload-shell">
      <div className="short-upload-phone">
        <div className="short-upload-phone__notch" />
        <div className="short-upload-phone__screen">
          <span className="short-upload-phone__label">Short preview</span>
          <p className="muted">9:16 vertical — like TikTok / YouTube Shorts</p>
          <div className="short-upload-phone__frame">
            <span>▶</span>
          </div>
        </div>
      </div>

      <form action={action} className="short-upload-form contact-form-pro">
        <input name="kind" type="hidden" value="SHORT" />
        <span className="pill">YouTube Short</span>
        <h1 className="section-title">Upload a Short</h1>
        <p className="muted">Paste a YouTube Shorts link. It goes live after admin approval.</p>
        {error ? <p className="admin-error-message">{error}</p> : null}

        <label className="field">
          Short title
          <input name="title" placeholder="Catchy short title" required />
        </label>
        <label className="field">
          YouTube Shorts URL
          <input
            name="youtubeUrl"
            placeholder="https://youtube.com/shorts/... or youtu.be/..."
            required
            type="url"
          />
        </label>
        <label className="field">
          Caption / description
          <textarea
            className="large-textarea"
            name="description"
            placeholder="Hashtags, context, and details for this short."
            required
          />
        </label>

        <div className="panel-header">Optional SEO</div>
        <label className="field">
          SEO title
          <input name="seoTitle" placeholder="Optional" />
        </label>
        <label className="field">
          SEO description
          <textarea name="seoDescription" placeholder="Optional" rows={3} />
        </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">
          Custom thumbnail
          <input accept="image/*" name="thumbnailFile" type="file" />
        </label>

        <div className="short-upload-form__actions">
          <button className="btn contact-submit" type="submit">
            Submit short for approval
          </button>
          <Link className="btn btn-secondary" href={backHref}>
            Back
          </Link>
        </div>
      </form>
    </div>
  );
}