"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";

type ContactData = {
  email?: string;
  linkedin?: string;
  github?: string;
};

export default function ContactComponent() {
  const pathname = usePathname();
  const onContactPage = pathname === "/contact";

  const [data, setData] = useState<ContactData | null>(null);

  useEffect(() => {
    if (!onContactPage) return;

    // Essaye avec BACKEND_URL, sinon fallback vers une route locale hypothétique
    const backend = (process.env.BACKEND_URL as string) || "http://127.0.0.1:5000/api";
    const url = backend ? `${backend}/contact` : "http://127.0.0.1:5000/api/contact";

    fetch(url, { cache: "no-store" })
      .then((res) => (res.ok ? res.json() : Promise.reject(new Error("fetch contact failed"))))
      .then((json) => setData(json))
      .catch(() => setData(null));
  }, [onContactPage]);

  // Si on n'est pas sur la page /contact => juste un lien
  if (!onContactPage) {
    return (
      <div className="block">
        <div className="btn-group">
          <Link href="/contact" className="btn btn--primary btn--pill">
            Me contacter
          </Link>
        </div>
      </div>
    );
  }

  // Page /contact => liens + formulaire
  return (
    <div className="block">
      <div className="stack">
        <div className="btn-group">
          {data?.linkedin ? (
            <a href={data.linkedin} target="_blank" rel="noopener noreferrer" className="link-button">
              LinkedIn
            </a>
          ) : null}
          {data?.github ? (
            <a href={data.github} target="_blank" rel="noopener noreferrer" className="link-button">
              GitHub
            </a>
          ) : null}
          {data?.email ? (
            <a href={`mailto:${data.email}`} className="link-button">
              Email direct
            </a>
          ) : null}
        </div>

        {data?.email ? (
          <form action={`mailto:${data.email}`} method="post" encType="text/plain" className="stack">
            <div>
              <label htmlFor="name">Votre nom</label>
              <input id="name" name="Nom" type="text" required />
            </div>

            <div>
              <label htmlFor="email">Votre email</label>
              <input id="email" name="Email" type="email" required />
            </div>

            <div>
              <label htmlFor="subject">Sujet</label>
              <input id="subject" name="Sujet" type="text" placeholder="Prise de contact" />
            </div>

            <div>
              <label htmlFor="message">Message</label>
              <textarea id="message" name="Message" required />
            </div>

            <div className="btn-group">
              <button type="submit" className="btn btn--primary btn--pill">
                Envoyer
              </button>
              <button type="reset" className="btn btn--ghost">
                Réinitialiser
              </button>
            </div>
          </form>
        ) : (
          <p className="u-muted">Une erreur est survenue. Vous pouvez tout de même me contacter directement par email : <a href="mailto:violet.anthony90@gmail.com">Me joindre par email</a></p>
        )}
      </div>
    </div>
  );
}