"use client";

import { useState } from "react";
import { whatsappUrl } from "@/lib/config";

const initial = {
  name: "",
  company: "",
  email: "",
  whatsapp: "",
  need: "Short Form",
  videos: "1–3",
  description: "",
  reference: "",
  deadline: "",
  budget: "Rp1.000.000 – Rp3.000.000",
};

export function ProjectBriefForm() {
  const [form, setForm] = useState(initial);
  const [sent, setSent] = useState(false);

  const update = (key: keyof typeof initial, value: string) =>
    setForm((current) => ({ ...current, [key]: value }));

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    const message = [
      "PROJECT BRIEF — 00S",
      "",
      `Name: ${form.name}`,
      `Company / Brand: ${form.company}`,
      `Email: ${form.email}`,
      `WhatsApp: ${form.whatsapp}`,
      `What I need: ${form.need}`,
      `Number of videos: ${form.videos}`,
      `Deadline: ${form.deadline}`,
      `Budget: ${form.budget}`,
      `Reference: ${form.reference || "-"}`,
      "",
      "Project description:",
      form.description,
    ].join("\n");

    setSent(true);
    window.open(whatsappUrl(message), "_blank", "noopener,noreferrer");
  };

  const field = (label: string, key: keyof typeof initial, type = "text") => (
    <label className="brief-field">
      <span>{label}</span>
      <input
        required={["name", "email", "whatsapp", "description"].includes(key)}
        type={type}
        value={form[key]}
        onChange={(e) => update(key, e.target.value)}
        placeholder="Type here..."
      />
    </label>
  );

  return (
    <form className="brief-form" onSubmit={submit}>
      <div className="brief-form__grid">
        {field("NAME", "name")}
        {field("COMPANY / BRAND", "company")}
        {field("EMAIL", "email", "email")}
        {field("WHATSAPP", "whatsapp", "tel")}

        <label className="brief-field">
          <span>WHAT DO YOU NEED?</span>
          <select value={form.need} onChange={(e) => update("need", e.target.value)}>
            <option>Short Form</option>
            <option>YouTube</option>
            <option>Podcast</option>
            <option>Music Video</option>
            <option>Commercial</option>
            <option>Other</option>
          </select>
        </label>

        <label className="brief-field">
          <span>NUMBER OF VIDEOS</span>
          <select value={form.videos} onChange={(e) => update("videos", e.target.value)}>
            <option>1–3</option>
            <option>4–10</option>
            <option>11–20</option>
            <option>20+</option>
          </select>
        </label>

        <label className="brief-field">
          <span>DEADLINE</span>
          <input type="date" value={form.deadline} onChange={(e) => update("deadline", e.target.value)} />
        </label>

        <label className="brief-field">
          <span>BUDGET RANGE</span>
          <select value={form.budget} onChange={(e) => update("budget", e.target.value)}>
            <option>&lt; Rp1.000.000</option>
            <option>Rp1.000.000 – Rp3.000.000</option>
            <option>Rp3.000.000 – Rp5.000.000</option>
            <option>Rp5.000.000 – Rp10.000.000</option>
            <option>Rp10.000.000+</option>
          </select>
        </label>
      </div>

      <label className="brief-field brief-field--full">
        <span>PROJECT DESCRIPTION</span>
        <textarea
          required
          value={form.description}
          onChange={(e) => update("description", e.target.value)}
          placeholder="Tell us what you want to make..."
          rows={6}
        />
      </label>

      <label className="brief-field brief-field--full">
        <span>REFERENCE LINK</span>
        <input value={form.reference} onChange={(e) => update("reference", e.target.value)} placeholder="https://..." />
      </label>

      <div className="brief-form__bottom">
        <p>By submitting, your brief opens directly in WhatsApp for a faster reply.</p>
        <button type="submit" className="big-button">
          {sent ? "BRIEF OPENED ↗" : "SEND PROJECT BRIEF ↗"}
        </button>
      </div>
    </form>
  );
}