"use client";

import { useState } from "react";
import { AnimatedSection } from "@/shared/components/animated-section";
import { SectionHeading } from "@/shared/components/section-heading";
import {
  Send,
  Mail,
  User,
  MessageSquare,
  CheckCircle,
  Loader2,
  AlertCircle,
  MapPin,
  Clock,
  Sparkles,
  MessageCircle,
} from "lucide-react";
import { useTranslations } from "next-intl";
import { sendMessageAction } from "./actions";

export function ContactSection() {
  const t = useTranslations("Contact");
  const [formState, setFormState] = useState<
    "idle" | "loading" | "success" | "error"
  >("idle");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setFormState("loading");
    setErrorMessage(null);

    const fd = new FormData(e.currentTarget);
    const result = await sendMessageAction(null, fd);

    if (result.success) {
      setFormState("success");
      setFormData({ name: "", email: "", message: "" });
      setTimeout(() => setFormState("idle"), 4000);
    } else {
      setFormState("error");
      setErrorMessage(result.message || "Terjadi kesalahan.");
      setTimeout(() => setFormState("idle"), 5000);
    }
  };

  return (
    <section id="contact" className="section-padding relative bg-muted/30">
      <div className="absolute inset-0 grid-pattern opacity-20" />

      <div className="relative max-w-5xl mx-auto px-6">
        <AnimatedSection>
          <SectionHeading
            title={t("title")}
            subtitle={t("subtitle")}
          />
        </AnimatedSection>

        <AnimatedSection delay={0.2}>
          <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
            {/* Left — Contact Info */}
            <div className="lg:col-span-2 space-y-8">
              <div>
                <h3 className="text-lg font-bold mb-4">{t("info.title")}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  {t("info.subtitle")}
                </p>
              </div>

              <div className="space-y-5">
                <div className="flex items-start gap-4">
                  <div className="p-2.5 rounded-xl bg-accent/10 text-accent flex-shrink-0">
                    <Mail size={18} />
                  </div>
                  <div>
                    <p className="text-sm font-semibold mb-0.5">{t("info.email")}</p>
                    <p className="text-sm text-muted-foreground font-mono">
                      yolandomanullang@gmail.com
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="p-2.5 rounded-xl bg-emerald-500/10 text-emerald-500 flex-shrink-0">
                    <MapPin size={18} />
                  </div>
                  <div>
                    <p className="text-sm font-semibold mb-0.5">{t("info.location")}</p>
                    <p className="text-sm text-muted-foreground">
                      {t("info.locationValue")}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="p-2.5 rounded-xl bg-violet-500/10 text-violet-500 flex-shrink-0">
                    <Clock size={18} />
                  </div>
                  <div>
                    <p className="text-sm font-semibold mb-0.5">{t("info.responseTime")}</p>
                    <p className="text-sm text-muted-foreground">
                      {t("info.responseTimeValue")}
                    </p>
                  </div>
                </div>
                {/* WhatsApp */}
                <div className="flex items-start gap-4">
                  <div className="p-2.5 rounded-xl bg-green-500/10 text-green-500 flex-shrink-0">
                    <MessageCircle size={18} />
                  </div>
                  <div>
                    <p className="text-sm font-semibold mb-0.5 flex items-center gap-2">
                      WhatsApp 
                      <span className="px-2 py-0.5 rounded-md bg-green-500/10 text-green-500 text-[10px] uppercase font-bold tracking-wider">
                        {t("info.fastResponse", { fallback: "Fast Response" })}
                      </span>
                    </p>
                    <a 
                      href={`https://wa.me/6282267852521?text=${encodeURIComponent(t("info.whatsappTemplate", { fallback: "Halo Yolando," }))}`}
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-sm text-muted-foreground font-mono hover:text-green-500 transition-colors"
                    >
                      +62 822-6785-2521
                    </a>
                  </div>
                </div>
              </div>

              {/* Decorative card */}
              <div className="hidden lg:block p-5 rounded-2xl border border-border/50 bg-card/50">
                <div className="flex items-center gap-2 mb-2">
                  <Sparkles size={16} className="text-accent" />
                  <span className="text-xs font-mono font-bold text-accent uppercase tracking-wider">
                    {t("info.openToWork")}
                  </span>
                </div>
                <p className="text-xs text-muted-foreground leading-relaxed">
                  {t("info.openToWorkDesc")}
                </p>
              </div>
            </div>

            {/* Right — Form */}
            <div className="lg:col-span-3 relative p-6 md:p-8 rounded-2xl bg-card border border-border/50 shadow-lg">
              {/* Success overlay */}
              {formState === "success" && (
                <div className="absolute inset-0 flex items-center justify-center bg-card/95 rounded-2xl z-10">
                  <div className="text-center">
                    <div className="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-4">
                      <CheckCircle size={32} className="text-success" />
                    </div>
                    <h3 className="text-xl font-bold mb-2">
                      {t("form.successTitle")}
                    </h3>
                    <p className="text-muted-foreground text-sm">
                      {t("form.successDesc")}
                    </p>
                  </div>
                </div>
              )}

              {/* Error notification */}
              {formState === "error" && errorMessage && (
                <div className="mb-4 flex items-center gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-500 text-sm font-medium">
                  <AlertCircle size={16} className="flex-shrink-0" />
                  {errorMessage}
                </div>
              )}

              <div className="mb-6">
                <h3 className="text-xl md:text-2xl font-bold mb-2">{t("form.heading")}</h3>
                <p className="text-sm text-muted-foreground">
                  {t("form.subheading")}
                </p>
              </div>

              <form onSubmit={handleSubmit} className="space-y-5">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                  {/* Name */}
                  <div className="space-y-2">
                    <label
                      htmlFor="contact-name"
                      className="flex items-center gap-2 text-sm font-medium"
                    >
                      <User size={14} className="text-accent" />
                      {t("form.nameLabel")}
                    </label>
                    <input
                      id="contact-name"
                      name="name"
                      type="text"
                      required
                      value={formData.name}
                      onChange={(e) =>
                        setFormData((prev) => ({
                          ...prev,
                          name: e.target.value,
                        }))
                      }
                      placeholder={t("form.namePlaceholder")}
                      className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300"
                    />
                  </div>

                  {/* Email */}
                  <div className="space-y-2">
                    <label
                      htmlFor="contact-email"
                      className="flex items-center gap-2 text-sm font-medium"
                    >
                      <Mail size={14} className="text-accent" />
                      {t("form.emailLabel")}
                    </label>
                    <input
                      id="contact-email"
                      name="email"
                      type="email"
                      required
                      value={formData.email}
                      onChange={(e) =>
                        setFormData((prev) => ({
                          ...prev,
                          email: e.target.value,
                        }))
                      }
                      placeholder={t("form.emailPlaceholder")}
                      className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300"
                    />
                  </div>
                </div>

                {/* Message */}
                <div className="space-y-2">
                  <label
                    htmlFor="contact-message"
                    className="flex items-center gap-2 text-sm font-medium"
                  >
                    <MessageSquare size={14} className="text-accent" />
                    {t("form.messageLabel")}
                  </label>
                  <textarea
                    id="contact-message"
                    name="message"
                    required
                    rows={5}
                    value={formData.message}
                    onChange={(e) =>
                      setFormData((prev) => ({
                        ...prev,
                        message: e.target.value,
                      }))
                    }
                    placeholder={t("form.messagePlaceholder")}
                    className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300 resize-none"
                  />
                </div>

                {/* Submit */}
                <button
                  type="submit"
                  disabled={formState === "loading"}
                  className="w-full inline-flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl bg-gradient-to-r from-accent to-purple-500 text-white font-semibold text-sm shadow-lg shadow-accent/25 hover:shadow-accent/40 hover:scale-[1.02] transition-all duration-300 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100"
                >
                  {formState === "loading" ? (
                    <>
                      <Loader2 size={16} className="animate-spin" />
                      {t("form.submitting")}
                    </>
                  ) : (
                    <>
                      <Send size={16} />
                      {t("form.submit")}
                    </>
                  )}
                </button>
              </form>
            </div>
          </div>
        </AnimatedSection>
      </div>
    </section>
  );
}