"use client";

import { useState } from "react";
import Link from "next/link";
import { clientExecute } from "@/lib/api/client";
import { ApiError } from "@/lib/api/shared";
import { Spinner } from "@/components/Loading";

export default function ContactPage() {
  const [form, setForm] = useState({ name: "", email: "", subject: "General enquiry", message: "" });
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");

  function set(k: string, v: string) { setForm((f) => ({ ...f, [k]: v })); }
  const isValid = form.name.trim() && form.email.trim() && form.message.trim();

  async function handleSend() {
    if (!isValid || sending) return;
    setSending(true);
    setError("");
    try {
      await clientExecute("contact.submit", {
        name: form.name.trim(),
        email: form.email.trim(),
        subject: form.subject,
        message: form.message.trim(),
      });
      setSubmitted(true);
    } catch (e) {
      setError(e instanceof ApiError ? e.message : "Something went wrong. Please try again.");
    } finally {
      setSending(false);
    }
  }

  if (submitted) {
    return (
      <div className="max-w-xl mx-auto px-6 py-24 text-center">
        <div className="w-16 h-16 rounded-full bg-[#E8F2EC] flex items-center justify-center mx-auto mb-6">
          <svg viewBox="0 0 24 24" fill="none" stroke="#1E4A3D" strokeWidth="2" className="w-8 h-8">
            <path d="M5 12l5 5 9-11" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <h1 className="font-display font-semibold text-2xl text-forest-deep mb-3">Message sent</h1>
        <p className="text-ink-soft mb-8">
          Thanks for reaching out, {form.name.split(" ")[0]}. We&apos;ll get back to you at{" "}
          <strong>{form.email}</strong> within one business day.
        </p>
        <Link href="/"
          className="inline-flex items-center justify-center font-semibold text-sm px-7 py-3.5 rounded-pill bg-forest text-white hover:bg-forest-deep transition-colors">
          Back to home
        </Link>
      </div>
    );
  }

  const fieldCls = "w-full border border-mist rounded-sm px-4 py-3 text-sm bg-white text-ink focus:outline-2 focus:outline-gold focus:border-forest";

  return (
    <div className="max-w-3xl mx-auto px-6 py-16">
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-12 items-start">
        <div>
          <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-3">Get in touch</div>
          <h1 className="font-display font-semibold text-4xl text-forest-deep mb-2">Contact us</h1>
          <p className="text-ink-soft mb-8">Questions about Villa, landlord verification, or anything else — we&apos;re happy to help.</p>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <div className="flex flex-col gap-2">
              <label className="font-mono text-xs uppercase tracking-widest text-ink-soft">Full name</label>
              <input value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="e.g. Ama Owusu" className={fieldCls} />
            </div>
            <div className="flex flex-col gap-2">
              <label className="font-mono text-xs uppercase tracking-widest text-ink-soft">Email address</label>
              <input type="email" value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="you@example.com" className={fieldCls} />
            </div>
            <div className="flex flex-col gap-2 sm:col-span-2">
              <label className="font-mono text-xs uppercase tracking-widest text-ink-soft">Subject</label>
              <select value={form.subject} onChange={(e) => set("subject", e.target.value)} className={fieldCls}>
                <option>General enquiry</option>
                <option>Landlord verification</option>
                <option>Report a listing</option>
                <option>Technical issue</option>
                <option>Partnership</option>
                <option>Other</option>
              </select>
            </div>
            <div className="flex flex-col gap-2 sm:col-span-2">
              <label className="font-mono text-xs uppercase tracking-widest text-ink-soft">Message</label>
              <textarea value={form.message} onChange={(e) => set("message", e.target.value)}
                placeholder="Tell us what you need help with…" rows={5}
                className={`${fieldCls} resize-none`} />
            </div>
          </div>

          {error && <p className="mt-4 text-sm text-red-600">{error}</p>}

          <button
            disabled={!isValid || sending}
            onClick={handleSend}
            className="mt-6 inline-flex items-center justify-center gap-2 font-semibold text-sm px-7 py-3.5 rounded-pill bg-forest text-white hover:bg-forest-deep transition-colors disabled:opacity-40"
          >
            {sending ? <><Spinner size="sm" />Sending…</> : "Send message"}
          </button>
        </div>

        <div className="flex flex-col gap-5">
          <div className="bg-white border border-mist rounded-md p-5">
            <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">Location</div>
            <div className="text-sm text-ink-soft">Akim Oda, Eastern Region, Ghana</div>
          </div>
          <div className="bg-white border border-mist rounded-md p-5">
            <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">Email</div>
            <div className="text-sm text-ink-soft">info.brewintel@gmail.com</div>
          </div>
          <div className="bg-white border border-mist rounded-md p-5">
            <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">Response time</div>
            <div className="text-sm text-ink-soft">Usually within one business day</div>
          </div>
          <div className="bg-white border border-mist rounded-md p-5">
            <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">For landlords</div>
            <div className="text-sm text-ink-soft mb-3">Want to list a property? Create a landlord account and submit your listing for review.</div>
            <Link href="/landlord/dashboard" className="text-sm font-semibold text-forest hover:underline">
              Get started →
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}