"use client";

import { useState, type FormEvent } from "react";

export function ContactPrototype({ propertySlug }: { propertySlug?: string }) {
  const [demonstrated, setDemonstrated] = useState(false);

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setDemonstrated(true);
  }

  if (demonstrated) {
    return (
      <div className="form-success" role="status">
        <p className="eyebrow">Local demonstration complete</p>
        <h2>No information was sent or stored.</h2>
        <p>
          The production confirmation will appear only after governed CORE
          intake accepts the enquiry and returns a safe public receipt.
        </p>
        <button
          className="button button--ghost"
          onClick={() => setDemonstrated(false)}
        >
          Return to form
        </button>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={handleSubmit}>
      <div className="field-grid">
        <label>
          Name
          <input name="name" autoComplete="name" required />
        </label>
        <label>
          Email
          <input name="email" type="email" autoComplete="email" required />
        </label>
        <label>
          I am interested in
          <select
            name="interest"
            defaultValue={propertySlug ? "specific" : "buy"}
          >
            <option value="buy">Buying a ready property</option>
            <option value="off-plan">Exploring off-plan property</option>
            <option value="specific">A specific property</option>
            <option value="general">General guidance</option>
          </select>
        </label>
        <label>
          Preferred contact
          <select name="preferredContact" defaultValue="email">
            <option value="email">Email</option>
            <option value="phone">Phone</option>
          </select>
        </label>
      </div>
      {propertySlug ? (
        <label>
          Property reference
          <input name="propertyReference" value={propertySlug} readOnly />
        </label>
      ) : null}
      <label>
        How can NYSA help?
        <textarea name="message" rows={6} required />
      </label>
      <label className="consent-field">
        <input name="consent" type="checkbox" required />
        <span>
          I agree that NYSA may use these details to respond to this enquiry.
          This local prototype does not transmit or store them.
        </span>
      </label>
      <button className="button button--primary" type="submit">
        Demonstrate submission
      </button>
      <p className="form-note">
        Development mode: submitting only changes this screen. It does not call
        CORE, send email, or retain personal data.
      </p>
    </form>
  );
}