"use client";

import { useRef, useState } from "react";

export default function ComposePage() {
  const [recipients, setRecipients] = useState("");
  const [subject, setSubject] = useState("");
  const [body, setBody] = useState("");
  const [file, setFile] = useState<File | null>(null);
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
  const [message, setMessage] = useState<string | null>(null);
  const fileRef = useRef<HTMLInputElement>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("sending");
    setMessage(null);

    const formData = new FormData();
    formData.set("recipients", recipients);
    formData.set("subject", subject);
    formData.set("body", body);
    if (file) formData.set("attachment", file);

    try {
      const res = await fetch("/api/compose", {
        method: "POST",
        headers: { "X-Midhub-Crm": "1" },
        body: formData,
      });
      const data = await res.json();
      if (!res.ok && res.status !== 207) throw new Error(data.error || "Send failed");

      if (data.allSent) {
        setStatus("sent");
        setMessage("Sent to everyone.");
      } else {
        const failed = data.results.filter((r: { sent: boolean }) => !r.sent);
        setStatus("error");
        setMessage(`Some sends failed: ${failed.map((f: { email: string }) => f.email).join(", ")}`);
      }

      setRecipients("");
      setSubject("");
      setBody("");
      setFile(null);
      if (fileRef.current) fileRef.current.value = "";
    } catch (err) {
      setStatus("error");
      setMessage(err instanceof Error ? err.message : "Send failed");
    }
  }

  const recipientCount = recipients
    .split(/[,;\n]/)
    .map((s) => s.trim())
    .filter(Boolean).length;

  return (
    <div className="max-w-2xl">
      <h1 className="font-heading font-600 text-2xl mb-1">Compose</h1>
      <p className="text-slate text-sm mb-6">
        Sends from info@midhubsolutions.com. Each recipient gets matched to their existing
        contact record (or a new one is created), and this message gets added to their thread.
      </p>

      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-1">
            Recipients{" "}
            <span className="text-slate font-normal">
              (comma or new-line separated{recipientCount > 0 ? ` — ${recipientCount}` : ""})
            </span>
          </label>
          <textarea
            required
            value={recipients}
            onChange={(e) => setRecipients(e.target.value)}
            rows={3}
            className="w-full border border-black/15 rounded-md px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-hub-orange"
            placeholder="grace@coastalcare.example, samuel@riversbright.example"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">Subject</label>
          <input
            required
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
            className="w-full border border-black/15 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-hub-orange"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">Message</label>
          <textarea
            required
            value={body}
            onChange={(e) => setBody(e.target.value)}
            rows={10}
            className="w-full border border-black/15 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-hub-orange"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">
            Attachment <span className="text-slate font-normal">(optional, up to 10MB)</span>
          </label>
          <input
            ref={fileRef}
            type="file"
            onChange={(e) => setFile(e.target.files?.[0] || null)}
            className="w-full text-sm file:mr-3 file:px-3 file:py-1.5 file:rounded-md file:border-0 file:bg-black/[.05] file:text-sm file:font-medium hover:file:bg-black/[.08]"
          />
        </div>

        {message && (
          <p className={`text-sm ${status === "error" ? "text-red-600" : "text-hub-green"}`}>{message}</p>
        )}

        <button
          type="submit"
          disabled={status === "sending"}
          className="bg-hub-green text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50"
        >
          {status === "sending" ? "Sending..." : "Send"}
        </button>
      </form>
    </div>
  );
}