"use client";

import { ChangeEvent, FormEvent, useState } from "react";
import { submitContactFormWithAttachment } from "@/lib/api";
import { Button } from "@/components/ui/Button";

type Status = "idle" | "submitting" | "success" | "error";

const MAX_FILE_MB = 20;
const ACCEPTED_TYPES = [
  "application/pdf",
  "image/png",
  "image/jpeg",
  "application/msword",
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
];

export default function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
  const [fileError, setFileError] = useState<string | null>(null);

  function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
    const selected = e.target.files?.[0];
    if (!selected) {
      setFile(null);
      setFileError(null);
      return;
    }
    if (!ACCEPTED_TYPES.includes(selected.type)) {
      setFileError("Please upload a PDF, Word document, or image file.");
      setFile(null);
      return;
    }
    if (selected.size > MAX_FILE_MB * 1024 * 1024) {
      setFileError(`File must be smaller than ${MAX_FILE_MB}MB.`);
      setFile(null);
      return;
    }
    setFileError(null);
    setFile(selected);
  }

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("submitting");
    setError(null);

    const formEl = e.currentTarget;
    const form = new FormData(formEl);
    try {
      await submitContactFormWithAttachment(
        {
          firstName: String(form.get("firstName") || ""),
          lastName: String(form.get("lastName") || ""),
          email: String(form.get("email") || ""),
          phone: String(form.get("phone") || "") || undefined,
          message: String(form.get("message") || "")
        },
        file
      );
      setStatus("success");
      formEl.reset();
      setFile(null);
    } catch (err) {
      setStatus("error");
      setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
    }
  }

  if (status === "success") {
    return (
      <div className="rounded-xl2 border border-neutral-200 bg-neutral-100 p-8 text-center">
        <p className="text-neutral-900 font-medium">Thanks — your message is in.</p>
        <p className="text-sm text-neutral-600 mt-1">
          A member of the LarCare team will reach out shortly.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <Field label="First Name" name="firstName" required />
        <Field label="Last Name" name="lastName" required />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <Field label="Email" name="email" type="email" required />
        <Field label="Phone" name="phone" type="tel" />
      </div>
      <div>
        <label className="text-xs font-semibold uppercase tracking-wide text-neutral-600">
          Your Message
        </label>
        <textarea
          name="message"
          required
          rows={5}
          className="mt-2 w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
        />
      </div>

      <div>
        <label
          htmlFor="personalCareAgreement"
          className="text-xs font-semibold uppercase tracking-wide text-neutral-600"
        >
          Upload Personal Care Agreement (optional)
        </label>
        <input
          id="personalCareAgreement"
          type="file"
          accept=".pdf,.png,.jpg,.jpeg,.doc,.docx"
          onChange={handleFileChange}
          className="mt-2 w-full text-sm text-neutral-600 file:mr-4 file:rounded-full file:border-0 file:bg-neutral-100 file:px-4 file:py-2 file:text-xs file:font-semibold file:uppercase file:tracking-wide"
        />
        {file ? <p className="mt-1 text-xs text-neutral-500">Selected: {file.name}</p> : null}
        {fileError ? <p className="mt-1 text-xs text-red-600">{fileError}</p> : null}
      </div>

      {error ? <p className="text-sm text-red-600">{error}</p> : null}

      <Button type="submit" disabled={status === "submitting"}>
        {status === "submitting" ? "Sending…" : "Submit"}
      </Button>
    </form>
  );
}

function Field({
  label,
  name,
  type = "text",
  required
}: {
  label: string;
  name: string;
  type?: string;
  required?: boolean;
}) {
  return (
    <div>
      <label className="text-xs font-semibold uppercase tracking-wide text-neutral-600">
        {label}
      </label>
      <input
        name={name}
        type={type}
        required={required}
        className="mt-2 w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
      />
    </div>
  );
}