"use client";

import React, { useState } from "react";
import { Send, CheckCircle2, MessageCircle, ArrowRight, RotateCcw } from "lucide-react";
import { makeWhatsAppUrl } from "@/lib/formatters/phone";
import { showToast } from "@/components/common/Toast";
import { submitContactMessage } from "@/services/contact.service";
import { ApiError } from "@/lib/api/errors";
import styles from "./ContactComponents.module.css";

interface ContactFormProps {
  whatsappNumber?: string | null;
}

const SUBJECT_OPTIONS = [
  "Pertanyaan Open Trip",
  "Pertanyaan Private Trip",
  "Saran & Masukan",
  "Kolaborasi & Kemitraan",
  "Bantuan Pemesanan / Lainnya",
];

export default function ContactForm({ whatsappNumber }: ContactFormProps) {
  const activeWhatsApp = whatsappNumber || "628123456789";
  const [fullName, setFullName] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  const validate = () => {
    const errs: Record<string, string> = {};
    if (!fullName.trim()) errs.fullName = "Nama lengkap wajib diisi";
    if (!email.trim()) {
      errs.email = "Email wajib diisi";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      errs.email = "Format email tidak valid";
    }
    if (!subject) errs.subject = "Pilih subjek pesan";
    if (!message.trim()) {
      errs.message = "Pesan wajib diisi";
    } else if (message.trim().length < 5) {
      errs.message = "Pesan minimal 5 karakter";
    }
    return errs;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length > 0) {
      setErrors(errs);
      return;
    }
    setErrors({});
    setIsSubmitting(true);

    try {
      await submitContactMessage({
        full_name: fullName.trim(),
        email: email.trim(),
        subject,
        message: message.trim(),
      });
      setIsSuccess(true);
      showToast("Pesan Anda telah kami terima! Tim kami akan segera menghubungi Anda.", "success");
    } catch (err) {
      if (err instanceof ApiError && err.isValidationError()) {
        const fieldErrors = err.getFieldErrors();
        setErrors({
          fullName: fieldErrors.full_name ?? "",
          email: fieldErrors.email ?? "",
          subject: fieldErrors.subject ?? "",
          message: fieldErrors.message ?? "",
        });
      }
      showToast(
        err instanceof Error ? err.message : "Gagal mengirim pesan. Silakan coba lagi.",
        "error"
      );
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleReset = () => {
    setFullName("");
    setEmail("");
    setSubject("");
    setMessage("");
    setErrors({});
    setIsSuccess(false);
  };

  const waPrefilledText = `Halo PPT Adventure! Saya ${fullName} (${email}).
Subjek: ${subject}
Pesan: ${message}`;

  const waUrl = makeWhatsAppUrl(activeWhatsApp, waPrefilledText);

  return (
    <div className={styles.formCard} id="kirim-pesan">
      {/* Header */}
      <div className={styles.panelHeader}>
        <div className={styles.panelIconWrapper}>
          <Send size={22} className={styles.panelIcon} />
        </div>
        <div>
          <h2 className={styles.panelTitle}>Kirim Pesan</h2>
          <p className={styles.panelSubtitle}>
            Isi form berikut dan kami akan segera merespons.
          </p>
        </div>
      </div>

      {isSuccess ? (
        <div className={styles.formSuccessState}>
          <div className={styles.successIconWrapper}>
            <CheckCircle2 size={44} className={styles.successIcon} />
          </div>
          <h3 className={styles.successTitle}>Pesan Anda Berhasil Terkirim!</h3>
          <p className={styles.successText}>
            Terima kasih, <strong>{fullName}</strong>. Tim PPT Adventure akan
            membalas pesan Anda melalui email <strong>{email}</strong> secepatnya.
          </p>

          <div className={styles.successActions}>
            <a
              href={waUrl}
              target="_blank"
              rel="noopener noreferrer"
              className={styles.successWaBtn}
            >
              <MessageCircle size={18} />
              <span>Lanjutkan Chat via WhatsApp</span>
              <ArrowRight size={16} />
            </a>

            <button
              type="button"
              onClick={handleReset}
              className={styles.successResetBtn}
            >
              <RotateCcw size={15} />
              <span>Kirim Pesan Lain</span>
            </button>
          </div>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className={styles.contactForm} noValidate>
          {/* Row 1: Nama Lengkap & Email */}
          <div className={styles.formRowTwo}>
            <div className={styles.formGroup}>
              <label htmlFor="fullName" className={styles.formLabel}>
                Nama Lengkap
              </label>
              <input
                id="fullName"
                type="text"
                value={fullName}
                onChange={(e) => {
                  setFullName(e.target.value);
                  if (errors.fullName) setErrors((prev) => ({ ...prev, fullName: "" }));
                }}
                placeholder="Nama Lengkap"
                className={`${styles.formInput} ${errors.fullName ? styles.inputError : ""}`}
                disabled={isSubmitting}
              />
              {errors.fullName && (
                <span className={styles.fieldErrorText}>{errors.fullName}</span>
              )}
            </div>

            <div className={styles.formGroup}>
              <label htmlFor="email" className={styles.formLabel}>
                Email
              </label>
              <input
                id="email"
                type="email"
                value={email}
                onChange={(e) => {
                  setEmail(e.target.value);
                  if (errors.email) setErrors((prev) => ({ ...prev, email: "" }));
                }}
                placeholder="Email"
                className={`${styles.formInput} ${errors.email ? styles.inputError : ""}`}
                disabled={isSubmitting}
              />
              {errors.email && (
                <span className={styles.fieldErrorText}>{errors.email}</span>
              )}
            </div>
          </div>

          {/* Row 2: Subjek */}
          <div className={styles.formGroup}>
            <label htmlFor="subject" className={styles.formLabel}>
              Subjek
            </label>
            <div className={styles.selectWrapper}>
              <select
                id="subject"
                value={subject}
                onChange={(e) => {
                  setSubject(e.target.value);
                  if (errors.subject) setErrors((prev) => ({ ...prev, subject: "" }));
                }}
                className={`${styles.formSelect} ${errors.subject ? styles.inputError : ""}`}
                disabled={isSubmitting}
              >
                <option value="">Pilih subjek pesan...</option>
                {SUBJECT_OPTIONS.map((opt) => (
                  <option key={opt} value={opt}>
                    {opt}
                  </option>
                ))}
              </select>
            </div>
            {errors.subject && (
              <span className={styles.fieldErrorText}>{errors.subject}</span>
            )}
          </div>

          {/* Row 3: Pesan */}
          <div className={styles.formGroup}>
            <div className={styles.textareaLabelRow}>
              <label htmlFor="message" className={styles.formLabel}>
                Pesan
              </label>
              <span className={styles.charCounter}>{message.length}/500</span>
            </div>
            <textarea
              id="message"
              value={message}
              onChange={(e) => {
                if (e.target.value.length <= 500) {
                  setMessage(e.target.value);
                  if (errors.message) setErrors((prev) => ({ ...prev, message: "" }));
                }
              }}
              placeholder="Tulis pesanmu di sini..."
              rows={4}
              className={`${styles.formTextarea} ${errors.message ? styles.inputError : ""}`}
              disabled={isSubmitting}
            />
            {errors.message && (
              <span className={styles.fieldErrorText}>{errors.message}</span>
            )}
          </div>

          {/* Submit Button */}
          <button
            type="submit"
            disabled={isSubmitting}
            className={styles.submitBtn}
          >
            <span>{isSubmitting ? "Mengirim Pesan..." : "Kirim Pesan"}</span>
            <ArrowRight size={18} className={styles.submitArrow} />
          </button>
        </form>
      )}
    </div>
  );
}