"use client";

import { useState } from "react";
import Link from "next/link";
import { ArrowRight, CheckCircle2 } from "lucide-react";
import { submitAccountRequest } from "@/lib/firestore/accountRequests";

export default function MemberRequestPage() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", note: "" });
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!form.name || !form.email) {
      setError("Nama dan email wajib diisi.");
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      await submitAccountRequest({
        name: form.name,
        email: form.email,
        phone: form.phone || undefined,
        note: form.note || undefined,
        requestedRole: "member",
      });
      setSubmitted(true);
    } catch {
      setError("Gagal mengirim permintaan. Coba lagi sebentar lagi.");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="min-h-screen bg-background text-ink">
      <header className="border-b border-border px-4 py-4 sm:px-6">
        <div className="mx-auto flex max-w-2xl items-center justify-between">
          <Link href="/" className="text-sm font-semibold text-ink">
            Mindfulness Indonesia
          </Link>
          <Link href="/" className="text-sm text-ink-soft hover:text-ink">
            Kembali
          </Link>
        </div>
      </header>

      <main className="mx-auto max-w-2xl px-4 py-10 sm:px-6">
        {!submitted ? (
          <form onSubmit={handleSubmit} className="rounded-2xl border border-border bg-surface p-6 sm:p-8">
            <h1 className="text-2xl font-bold text-ink">Jadi Member Mindfulness EAP</h1>
            <p className="mt-2 text-ink-soft">
              Isi data di bawah, tim kami akan memverifikasi dan mengirim link aktivasi akun ke
              emailmu.
            </p>

            <div className="mt-5 space-y-4">
              <div>
                <label className="text-sm font-medium text-ink">Nama Lengkap</label>
                <input
                  type="text"
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
                  required
                />
              </div>
              <div>
                <label className="text-sm font-medium text-ink">Email</label>
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
                  required
                />
              </div>
              <div>
                <label className="text-sm font-medium text-ink">No. WhatsApp (opsional)</label>
                <input
                  type="text"
                  value={form.phone}
                  onChange={(e) => setForm({ ...form, phone: e.target.value })}
                  className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
                />
              </div>
              <div>
                <label className="text-sm font-medium text-ink">Catatan (opsional)</label>
                <textarea
                  value={form.note}
                  onChange={(e) => setForm({ ...form, note: e.target.value })}
                  rows={3}
                  className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
                />
              </div>
            </div>

            {error && <p className="mt-3 text-sm text-danger">{error}</p>}

            <button
              type="submit"
              disabled={submitting}
              className="mt-6 inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary-soft disabled:opacity-60"
            >
              {submitting ? "Mengirim..." : "Kirim Permintaan"} <ArrowRight className="h-4 w-4" />
            </button>
          </form>
        ) : (
          <div className="rounded-2xl border border-border bg-surface p-6 text-center sm:p-8">
            <CheckCircle2 className="mx-auto h-12 w-12 text-success" />
            <h2 className="mt-4 text-xl font-bold text-ink">Permintaan Terkirim</h2>
            <p className="mt-2 text-ink-soft">
              Tim kami akan meninjau permintaanmu. Setelah disetujui, link aktivasi akun akan
              dikirim ke email yang kamu daftarkan.
            </p>
            <Link
              href="/"
              className="mt-6 inline-flex items-center justify-center gap-2 rounded-full border border-border px-6 py-3 text-sm font-medium text-ink hover:bg-surface-sunk"
            >
              Kembali ke Beranda
            </Link>
          </div>
        )}
      </main>
    </div>
  );
}