setrip/features/trip/components/create-trip-form.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { createTripAction } from "@/features/trip/actions";
import { ImageUrlInput } from "@/features/trip/components/image-url-input";
import { formatLocalCalendarYmd } from "@/lib/trip-dates";
import {
  ACTIVITY_CATEGORIES,
  categoryMeta,
} from "@/lib/activity-category";
import { VIBES, vibeMeta } from "@/lib/vibe";
import type { ActivityCategory, Vibe } from "@/app/generated/prisma/enums";

function formatRupiahInput(value: string): string {
  const num = value.replace(/\D/g, "");
  return num.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

function parseRupiahInput(value: string): string {
  return value.replace(/\./g, "");
}

interface CreateTripFormProps {
  isVerifiedOrganizer: boolean;
}

export function CreateTripForm({ isVerifiedOrganizer }: CreateTripFormProps) {
  const router = useRouter();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const [category, setCategory] = useState<ActivityCategory>("HIKING");
  const [vibe, setVibe] = useState<Vibe | null>(null);
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);
  const [priceDisplay, setPriceDisplay] = useState("");

  const meta = categoryMeta(category);
  const priceNumber = Number(parseRupiahInput(priceDisplay) || "0");
  const isPaidTrip = priceNumber > 0;
  const blockedByVerification = isPaidTrip && !isVerifiedOrganizer;

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError("");

    if (!startDate) {
      setError("Tanggal berangkat harus diisi");
      return;
    }

    setLoading(true);

    const formData = new FormData(e.currentTarget);
    formData.set("date", formatLocalCalendarYmd(startDate));
    if (endDate) {
      const startYmd = formatLocalCalendarYmd(startDate);
      const endYmd = formatLocalCalendarYmd(endDate);
      if (endYmd !== startYmd) {
        formData.set("endDate", endYmd);
      }
    }
    formData.set("price", parseRupiahInput(priceDisplay));
    if (vibe) formData.set("vibe", vibe);

    const result = await createTripAction(formData);

    setLoading(false);

    if (result.error) {
      setError(result.error);
    } else if (result.tripId) {
      router.push(`/trips/${result.tripId}`);
    }
  }

  function handleDateChange(dates: [Date | null, Date | null]) {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  }

  function handlePriceChange(e: React.ChangeEvent<HTMLInputElement>) {
    const raw = e.target.value.replace(/\D/g, "");
    setPriceDisplay(raw ? formatRupiahInput(raw) : "");
  }

  return (
    <div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm">
      {error && (
        <div className="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
          {error}
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-5">
        {/* Category Chips */}
        <div className="rounded-xl bg-primary-50 p-4">
          <label className="mb-2 block text-sm font-bold text-primary-800">
            Kategori Aktivitas
          </label>
          <div className="flex flex-wrap gap-2">
            {ACTIVITY_CATEGORIES.map((c) => {
              const m = categoryMeta(c);
              const active = c === category;
              return (
                <button
                  key={c}
                  type="button"
                  onClick={() => setCategory(c)}
                  aria-pressed={active}
                  className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
                    active
                      ? "border-primary-600 bg-primary-600 text-white"
                      : "border-primary-200 bg-white text-primary-800 hover:bg-primary-100"
                  }`}
                >
                  <span>{m.icon}</span>
                  <span>{m.label}</span>
                </button>
              );
            })}
          </div>
          <input type="hidden" name="category" value={category} />
        </div>

        {/* Vibe Chips */}
        <div className="rounded-xl bg-secondary-50 p-4">
          <label className="mb-1 block text-sm font-bold text-secondary-900">
            Vibe Trip{" "}
            <span className="text-xs font-normal text-secondary-700">(opsional)</span>
          </label>
          <p className="mb-2 text-[11px] text-secondary-700/80">
            Bantu calon peserta menilai apakah ritmenya cocok dengan mereka.
          </p>
          <div className="flex flex-wrap gap-2">
            <button
              type="button"
              onClick={() => setVibe(null)}
              aria-pressed={vibe === null}
              className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
                vibe === null
                  ? "border-neutral-700 bg-neutral-800 text-white"
                  : "border-secondary-200 bg-white text-secondary-800 hover:bg-secondary-100"
              }`}
            >
              Belum diisi
            </button>
            {VIBES.map((v) => {
              const m = vibeMeta(v);
              const active = v === vibe;
              return (
                <button
                  key={v}
                  type="button"
                  onClick={() => setVibe(v)}
                  aria-pressed={active}
                  title={m.description}
                  className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
                    active
                      ? "border-secondary-600 bg-secondary-600 text-white"
                      : "border-secondary-200 bg-white text-secondary-800 hover:bg-secondary-100"
                  }`}
                >
                  <span aria-hidden>{m.icon}</span>
                  <span>{m.label}</span>
                </button>
              );
            })}
          </div>
          {vibe && (
            <p className="mt-2 text-[11px] italic text-secondary-700/80">
              {vibeMeta(vibe).description}
            </p>
          )}
        </div>

        <div>
          <label htmlFor="title" className="mb-1.5 block text-sm font-semibold text-neutral-700">
            Judul Trip
          </label>
          <input
            id="title"
            name="title"
            type="text"
            required
            className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
            placeholder="contoh: Open Trip Papandayan Weekend"
          />
        </div>

        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label htmlFor="destination" className="mb-1.5 block text-sm font-semibold text-neutral-700">
              {meta.destinationLabel}
            </label>
            <input
              id="destination"
              name="destination"
              type="text"
              required
              className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
              placeholder={meta.destinationPlaceholder}
            />
          </div>
          <div>
            <label htmlFor="location" className="mb-1.5 block text-sm font-semibold text-neutral-700">
              Lokasi
            </label>
            <input
              id="location"
              name="location"
              type="text"
              required
              className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
              placeholder="Garut, Jawa Barat"
            />
          </div>
        </div>

        <div>
          <label htmlFor="description" className="mb-1.5 block text-sm font-semibold text-neutral-700">
            Deskripsi
          </label>
          <textarea
            id="description"
            name="description"
            rows={4}
            className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
            placeholder="Ringkasan trip, vibe, level kesulitan..."
          />
        </div>

        <div>
          <label htmlFor="meetingPoint" className="mb-1.5 block text-sm font-semibold text-neutral-700">
            Meeting point
          </label>
          <input
            id="meetingPoint"
            name="meetingPoint"
            type="text"
            className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
            placeholder="contoh: Alfamart Cicaheum, 05:00 WIB"
          />
        </div>

        <div>
          <label htmlFor="itinerary" className="mb-1 block text-sm font-semibold text-neutral-700">
            Itinerary
          </label>
          <p className="mb-1.5 text-[11px] text-neutral-500">
            Tulis per hari supaya peserta tahu alur — itinerary lengkap bikin
            trust naik drastis.
          </p>
          <textarea
            id="itinerary"
            name="itinerary"
            rows={6}
            className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
            placeholder={
              "Hari 1: 05:00 kumpul di meeting point\n07:00 berangkat\n12:00 ishoma di rest area\n16:00 sampai basecamp, briefing\n\nHari 2: 04:00 summit attack\n08:00 kembali ke basecamp\n..."
            }
          />
        </div>

        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label htmlFor="whatsIncluded" className="mb-1.5 block text-sm font-semibold text-neutral-700">
              Termasuk
            </label>
            <textarea
              id="whatsIncluded"
              name="whatsIncluded"
              rows={4}
              className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
              placeholder="Transport, konsumsi, tenda, …"
            />
          </div>
          <div>
            <label htmlFor="whatsExcluded" className="mb-1.5 block text-sm font-semibold text-neutral-700">
              Tidak termasuk
            </label>
            <textarea
              id="whatsExcluded"
              name="whatsExcluded"
              rows={4}
              className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
              placeholder="Tiket masuk TN, sleeping bag, …"
            />
          </div>
        </div>

        <ImageUrlInput />

        {/* Date Range & Participants & Price */}
        <div className="grid gap-4 sm:grid-cols-2">
          {/* Date Range Picker */}
          <div>
            <label className="mb-1.5 block text-sm font-semibold text-neutral-700">
              Tanggal berangkat — pulang
            </label>
            <div className="relative">
              <span className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-neutral-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  className="h-4 w-4"
                >
                  <path
                    fillRule="evenodd"
                    d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              <DatePicker
                selectsRange
                startDate={startDate}
                endDate={endDate}
                onChange={handleDateChange}
                minDate={new Date()}
                placeholderText="Pilih tanggal..."
                dateFormat="dd MMM yyyy"
                isClearable
                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-3 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
              />
            </div>
          </div>

          {/* Max Participants */}
          <div>
            <label htmlFor="maxParticipants" className="mb-1.5 block text-sm font-semibold text-neutral-700">
              Maks Peserta
            </label>
            <div className="relative">
              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  className="h-4 w-4"
                >
                  <path d="M7 8a3 3 0 100-6 3 3 0 000 6zM14.5 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM1.615 16.428a1.224 1.224 0 01-.569-1.175 6.002 6.002 0 0111.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 017 18a9.953 9.953 0 01-5.385-1.572zM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 00-1.588-3.755 4.502 4.502 0 015.874 2.636.818.818 0 01-.36.98A7.465 7.465 0 0114.5 16z" />
                </svg>
              </span>
              <input
                id="maxParticipants"
                name="maxParticipants"
                type="number"
                required
                min={1}
                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
                placeholder="10"
              />
            </div>
          </div>
        </div>

        {/* Price with Rp format */}
        <div>
          <label htmlFor="priceDisplay" className="mb-1.5 block text-sm font-semibold text-neutral-700">
            Harga per Orang
            {!isVerifiedOrganizer && (
              <span className="ml-2 text-xs font-normal text-neutral-500">
                (isi 0 untuk trip gratis)
              </span>
            )}
          </label>
          <div className="relative">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-neutral-500">
              Rp
            </span>
            <input
              id="priceDisplay"
              type="text"
              inputMode="numeric"
              required
              value={priceDisplay}
              onChange={handlePriceChange}
              className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-10 pr-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
              placeholder="150.000"
            />
            <input type="hidden" name="price" value={parseRupiahInput(priceDisplay)} />
          </div>
          {blockedByVerification && (
            <p className="mt-2 text-xs font-medium text-amber-700">
              ⚠️ Trip berbayar butuh verifikasi organizer terlebih dahulu.
            </p>
          )}
        </div>

        <button
          type="submit"
          disabled={loading || blockedByVerification}
          className="w-full rounded-xl bg-primary-600 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {loading
            ? "Membuat Trip..."
            : blockedByVerification
              ? "Verifikasi diperlukan untuk trip berbayar"
              : "Buat Trip"}
        </button>
      </form>
    </div>
  );
}