"use client";

import { useState } from "react";

export default function ContactForm() {
  // =====================================================
  // CONTACT FORM SEMENTARA DIBEKUKAN
  // =====================================================
  const FORM_FROZEN = true;

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState("");
  const [error, setError] = useState("");

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

    // Jangan izinkan submit ketika form dibekukan
    if (FORM_FROZEN) {
      return;
    }

    setLoading(true);
    setSuccess("");
    setError("");

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name,
          email,
          subject,
          message,
        }),
      });

      const result = await response.json();

      if (!response.ok || !result.success) {
        throw new Error(
          result.message || "Gagal mengirim pesan."
        );
      }

      setSuccess("Pesan berhasil dikirim. Terima kasih!");

      setName("");
      setEmail("");
      setSubject("");
      setMessage("");
    } catch (error) {
      console.error("CONTACT FORM ERROR:", error);

      setError(
        error instanceof Error
          ? error.message
          : "Gagal mengirim pesan."
      );
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="card border-0 shadow-sm h-100">
      <div className="card-body p-4 p-lg-5">

        {/* Header */}
        <h3 className="fw-bold mb-2">
          Send Me a Message
        </h3>

        <p className="text-muted mb-4">
          Silakan isi form berikut untuk mengirimkan
          pertanyaan atau pesan kepada saya.
        </p>

        {/* =================================================
            INFORMASI FORM DIBEKUKAN
        ================================================== */}
        {FORM_FROZEN && (
          <div
            className="alert alert-warning d-flex align-items-start mb-4"
            role="alert"
          >
            <i className="bi bi-lock-fill me-2 mt-1"></i>

            <div>
              <strong>Contact Form Sementara Dinonaktifkan</strong>

              <div className="small mt-1">
                Form ini sedang dalam tahap pengembangan
                dan untuk sementara belum dapat digunakan.
              </div>
            </div>
          </div>
        )}

        {/* Success */}
        {success && (
          <div className="alert alert-success">
            <i className="bi bi-check-circle me-2"></i>
            {success}
          </div>
        )}

        {/* Error */}
        {error && (
          <div className="alert alert-danger">
            <i className="bi bi-exclamation-circle me-2"></i>
            {error}
          </div>
        )}

        {/* =================================================
            FORM
        ================================================== */}
        <form onSubmit={handleSubmit}>

          {/* FIELDSET MEMBEKUKAN SELURUH FORM */}
          <fieldset
            disabled={FORM_FROZEN || loading}
            style={{
              border: "none",
              padding: 0,
              margin: 0,
              minWidth: 0,
            }}
          >

            {/* Nama */}
            <div className="mb-3">
              <label className="form-label fw-semibold">
                Nama{" "}
                <span className="text-danger">*</span>
              </label>

              <input
                type="text"
                className="form-control"
                placeholder="Masukkan nama Anda"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
              />
            </div>

            {/* Email */}
            <div className="mb-3">
              <label className="form-label fw-semibold">
                Email{" "}
                <span className="text-danger">*</span>
              </label>

              <input
                type="email"
                className="form-control"
                placeholder="nama@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>

            {/* Subject */}
            <div className="mb-3">
              <label className="form-label fw-semibold">
                Subject
              </label>

              <input
                type="text"
                className="form-control"
                placeholder="Subject pesan"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
              />
            </div>

            {/* Pesan */}
            <div className="mb-4">
              <label className="form-label fw-semibold">
                Pesan{" "}
                <span className="text-danger">*</span>
              </label>

              <textarea
                className="form-control"
                rows={7}
                placeholder="Tuliskan pesan Anda..."
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                required
              />
            </div>

            {/* Tombol */}
            <button
              type="submit"
              className="btn btn-success"
            >
              {loading ? (
                <>
                  <span className="spinner-border spinner-border-sm me-2"></span>
                  Mengirim...
                </>
              ) : (
                <>
                  <i className="bi bi-lock-fill me-2"></i>
                  Form Disabled
                </>
              )}
            </button>

          </fieldset>

        </form>
      </div>
    </div>
  );
}