"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import ImageUploader from "@/components/image-uploader";
import { fromEatInputValue } from "@/lib/format";
import type { CategoryRow } from "@/lib/types";

export default function NewEventForm({ categories }: { categories: CategoryRow[] }) {
  const router = useRouter();
  const [form, setForm] = useState({
    title: "",
    description: "",
    venue: "",
    starts_at: "",
    ends_at: "",
    cover_image_url: "",
    category_id: "",
    organizer_phone: "",
    organizer_email: "",
  });
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);

    // Times are entered on the venue's clock (Kenya time), whatever timezone
    // this device is set to -- see fromEatInputValue.
    const startsAt = fromEatInputValue(form.starts_at);
    const endsAt = form.ends_at ? fromEatInputValue(form.ends_at) : null;
    if (!startsAt) return setError("Pick a start date and time.");
    if (form.ends_at && !endsAt) return setError("The end date and time isn't valid.");
    if (endsAt && endsAt <= startsAt) return setError("The event has to end after it starts.");

    setLoading(true);
    const res = await fetch("/api/dashboard/events", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title: form.title,
        description: form.description || undefined,
        venue: form.venue || undefined,
        startsAt,
        endsAt: endsAt ?? undefined,
        coverImageUrl: form.cover_image_url || undefined,
        categoryId: form.category_id || undefined,
        organizerPhone: form.organizer_phone || undefined,
        organizerEmail: form.organizer_email || undefined,
      }),
    });
    const data = await res.json();

    if (!res.ok) {
      setError(data.error ?? "Could not create event");
      setLoading(false);
      return;
    }

    router.push(`/dashboard/events/${data.id}`);
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <Field label="Title">
        <input
          required
          value={form.title}
          onChange={(e) => setForm({ ...form, title: e.target.value })}
          className="input"
        />
      </Field>
      <Field label="Description">
        <textarea
          value={form.description}
          onChange={(e) => setForm({ ...form, description: e.target.value })}
          className="input"
          rows={3}
        />
      </Field>
      <div className="grid grid-cols-2 gap-4">
        <Field label="Venue">
          <input
            value={form.venue}
            onChange={(e) => setForm({ ...form, venue: e.target.value })}
            className="input"
          />
        </Field>
        <Field label="Category">
          <select
            value={form.category_id}
            onChange={(e) => setForm({ ...form, category_id: e.target.value })}
            className="input"
          >
            <option value="">— None —</option>
            {categories.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
        </Field>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <Field label="Organizer phone number">
          <input
            type="tel"
            required
            minLength={9}
            placeholder="07XX XXX XXX"
            value={form.organizer_phone}
            onChange={(e) => setForm({ ...form, organizer_phone: e.target.value })}
            className="input"
          />
        </Field>
        <Field label="Organizer contact email">
          <input
            type="email"
            placeholder="you@example.com"
            value={form.organizer_email}
            onChange={(e) => setForm({ ...form, organizer_email: e.target.value })}
            className="input"
          />
        </Field>
      </div>
      <ImageUploader
        value={form.cover_image_url}
        onChange={(url) => setForm({ ...form, cover_image_url: url })}
        folder="events"
        label="Cover image"
      />
      <div className="grid grid-cols-2 gap-4">
        <Field label="Starts at (Kenya time)">
          <input
            required
            type="datetime-local"
            value={form.starts_at}
            onChange={(e) => setForm({ ...form, starts_at: e.target.value })}
            className="input"
          />
        </Field>
        <Field label="Ends at (Kenya time)">
          <input
            type="datetime-local"
            value={form.ends_at}
            onChange={(e) => setForm({ ...form, ends_at: e.target.value })}
            className="input"
          />
        </Field>
      </div>

      {error && <p className="text-sm text-red-600">{error}</p>}

      <button
        type="submit"
        disabled={loading}
        className="rounded-md bg-brand-green text-white px-4 py-2 text-sm font-medium hover:bg-brand-green-deep disabled:opacity-50"
      >
        {loading ? "Creating…" : "Create event"}
      </button>
    </form>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="block text-sm font-medium mb-1">{label}</label>
      {children}
    </div>
  );
}