"use client";

import { useState, type FormEvent } from "react";

const inputStyles =
  "mt-2 w-full rounded-lg border border-[#D7DEE5] bg-white px-4 py-3 text-[#111B35] outline-none transition placeholder:text-gray-400 focus:border-[#309FC3] focus:ring-2 focus:ring-[#309FC3]/20";

type CreatePreviewResponse = {
  previewId?: string;
  publicUrl?: string;
  error?: string;
};

export default function CreatePreviewForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [publicUrl, setPublicUrl] = useState("");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const form = event.currentTarget;
    const formData = new FormData(form);

    setIsSubmitting(true);
    setError("");
    setPublicUrl("");

    try {
      const response = await fetch("/api/previews", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          clientName: String(formData.get("clientName") ?? ""),
          campaignName: String(formData.get("campaignName") ?? ""),
          creativeName: String(formData.get("creativeName") ?? ""),
          vendor: String(formData.get("vendor") ?? ""),
          vendorUrl: String(formData.get("vendorUrl") ?? ""),
        }),
      });

      const result = (await response.json()) as CreatePreviewResponse;

      if (!response.ok || !result.publicUrl) {
        throw new Error(result.error ?? "The preview could not be created.");
      }

      setPublicUrl(result.publicUrl);
      form.reset();
    } catch (caughtError) {
      setError(
        caughtError instanceof Error
          ? caughtError.message
          : "Something went wrong.",
      );
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <form
      className="rounded-2xl border border-gray-200 bg-white p-8 shadow-sm"
      onSubmit={handleSubmit}
    >
      <div className="grid gap-6 md:grid-cols-2">
        <label className="font-semibold">
          Client name
          <input
            className={inputStyles}
            id="clientName"
            name="clientName"
            placeholder="Example: Nike"
            required
            type="text"
          />
        </label>

        <label className="font-semibold">
          Campaign name
          <input
            className={inputStyles}
            id="campaignName"
            name="campaignName"
            placeholder="Example: Summer Campaign"
            required
            type="text"
          />
        </label>
      </div>

      <div className="mt-6 grid gap-6 md:grid-cols-2">
        <label className="font-semibold">
          Creative name
          <input
            className={inputStyles}
            id="creativeName"
            name="creativeName"
            placeholder="Example: Homepage Banner"
            required
            type="text"
          />
        </label>

        <label className="font-semibold">
          Vendor
          <select
            className={inputStyles}
            defaultValue=""
            id="vendor"
            name="vendor"
            required
          >
            <option disabled value="">
              Select a vendor
            </option>
            <option value="flashtalking">Flashtalking</option>
            <option value="nexd">NEXD</option>
          </select>
        </label>
      </div>

      <label className="mt-6 block font-semibold">
        Vendor preview URL
        <input
          className={inputStyles}
          id="vendorUrl"
          name="vendorUrl"
          placeholder="https://..."
          required
          type="url"
        />
      </label>

      <button
        className="mt-8 rounded-lg bg-[#309FC3] px-6 py-3 font-bold text-white transition hover:bg-[#2788A8] disabled:cursor-not-allowed disabled:opacity-60"
        disabled={isSubmitting}
        type="submit"
      >
        {isSubmitting ? "Creating..." : "Create Preview"}
      </button>

      {error && (
        <p className="mt-5 rounded-lg bg-red-50 p-4 text-sm font-semibold text-red-700">
          {error}
        </p>
      )}

      {publicUrl && (
        <div
          className="mt-5 rounded-lg border border-[#309FC3]/30 bg-[#309FC3]/10 p-4"
          aria-live="polite"
        >
          <p className="font-semibold">Preview created successfully</p>
          <a
            className="mt-2 block break-all text-sm font-semibold text-[#2788A8] underline"
            href={publicUrl}
            rel="noreferrer"
            target="_blank"
          >
            {publicUrl}
          </a>
        </div>
      )}
    </form>
  );
}