"use client";

import { FormEvent, useState } from "react";

const CONTACT_EMAIL = "nexus@ninjakernen.info";

export function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [type, setType] = useState("Testfeedback");
  const [message, setMessage] = useState("");

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const body = [
      `Type: ${type}`,
      `Navn: ${name}`,
      `Email: ${email}`,
      "",
      message,
    ].join("\n");
    const mailto = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(
      `[Nexus ${type}] ${subject}`,
    )}&body=${encodeURIComponent(body)}`;
    window.location.href = mailto;
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <p className="text-sm text-nexus-muted">
        Formularen åbner din e-mailklient (mailto) — der er ingen backend endnu.
      </p>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="name" className="block text-sm font-medium text-nexus-navy">
            Navn
          </label>
          <input
            id="name"
            name="name"
            required
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="mt-1 w-full rounded-xl border border-nexus-border bg-white/80 px-3 py-2 text-sm"
          />
        </div>
        <div>
          <label htmlFor="email" className="block text-sm font-medium text-nexus-navy">
            Email
          </label>
          <input
            id="email"
            name="email"
            type="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="mt-1 w-full rounded-xl border border-nexus-border bg-white/80 px-3 py-2 text-sm"
          />
        </div>
      </div>
      <div>
        <label htmlFor="type" className="block text-sm font-medium text-nexus-navy">
          Type
        </label>
        <select
          id="type"
          name="type"
          value={type}
          onChange={(e) => setType(e.target.value)}
          className="mt-1 w-full rounded-xl border border-nexus-border bg-white/80 px-3 py-2 text-sm"
        >
          <option>Testfeedback</option>
          <option>Support</option>
          <option>Samarbejde</option>
          <option>Bug report</option>
        </select>
      </div>
      <div>
        <label htmlFor="subject" className="block text-sm font-medium text-nexus-navy">
          Emne
        </label>
        <input
          id="subject"
          name="subject"
          required
          value={subject}
          onChange={(e) => setSubject(e.target.value)}
          className="mt-1 w-full rounded-xl border border-nexus-border bg-white/80 px-3 py-2 text-sm"
        />
      </div>
      <div>
        <label htmlFor="message" className="block text-sm font-medium text-nexus-navy">
          Besked
        </label>
        <textarea
          id="message"
          name="message"
          required
          rows={5}
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          className="mt-1 w-full rounded-xl border border-nexus-border bg-white/80 px-3 py-2 text-sm"
        />
      </div>
      <button
        type="submit"
        className="btn-brand rounded-xl px-5 py-3 text-sm"
      >
        Åbn e-mailklient
      </button>
    </form>
  );
}
