"use client";

import { useEffect, useState, type FormEvent } from "react";
import { SectionIcon } from "./icons";
import type { ContactFormData } from "./ContactForm.schema";

function chunk<T>(arr: T[], size: number): T[][] {
  const out: T[][] = [];
  for (let i = 0; i < arr.length; i += size) {
    out.push(arr.slice(i, i + size));
  }
  return out;
}

export function ContactForm({ data }: { data: ContactFormData }) {
  const [submitted, setSubmitted] = useState(false);
  const [forwardArrow, setForwardArrow] = useState<"arrow-left" | "arrow-right">("arrow-left");

  useEffect(() => {
    setForwardArrow(document.documentElement.lang === "en" ? "arrow-right" : "arrow-left");
  }, []);

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitted(true);
  };

  return (
    <section className="sec" id="contact-form" data-screen-label="Form" style={{ paddingTop: 48 }}>
      <div className="wrap" style={{ maxWidth: 720 }}>
        <div className="form-card">
          <div className="head">
            {data.eyebrow ? (
              <span className="eyebrow">
                <span className="pip" />
                {data.eyebrow}
              </span>
            ) : null}
            {data.title ? <h2>{data.title}</h2> : null}
            {data.subtitle ? <p>{data.subtitle}</p> : null}
          </div>
          <form onSubmit={onSubmit}>
            {chunk(data.fields, 2).map((row, rowIndex) => (
              <div key={rowIndex} className={row.length === 2 ? "field-row" : ""}>
                {row.map((field) => (
                  <label key={field.key} className="field">
                    <span>
                      {field.required ? <span className="req">*</span> : null}
                      {field.label}
                    </span>
                    {field.type === "textarea" ? (
                      <textarea name={field.key} placeholder={field.placeholder} required={field.required} />
                    ) : field.type === "select" ? (
                      <select name={field.key} defaultValue="" required={field.required}>
                        <option value="" disabled>
                          {field.placeholder}
                        </option>
                        {(field.options ?? []).map((opt) => (
                          <option key={opt.value} value={opt.value}>
                            {opt.label}
                          </option>
                        ))}
                      </select>
                    ) : (
                      <input
                        type={field.type}
                        name={field.key}
                        placeholder={field.placeholder}
                        required={field.required}
                      />
                    )}
                  </label>
                ))}
              </div>
            ))}
            <div className="field-actions">
              <button
                type="submit"
                className="submit"
                style={submitted ? { background: "var(--green-600)" } : undefined}
              >
                {submitted ? data.success_message : data.submit_label}{" "}
                {submitted ? null : <SectionIcon name={forwardArrow} size={16} />}
              </button>
              {data.whatsapp_alt_label ? (
                <a href="https://wa.me/" className="wa-alt" target="_blank" rel="noopener noreferrer">
                  <SectionIcon name="message-circle" size={16} />
                  {data.whatsapp_alt_label}
                </a>
              ) : null}
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

// Registration moved to ContactForm.register.ts — see that file for why.