"use client";

import { useEffect, useState } from "react";
import { Crown, Upload, CheckCircle2, Clock } from "lucide-react";
import { useAuthContext } from "@/components/FirebaseProvider";
import { subscribeMembershipSettings, submitUpgradeRequest, type MembershipSettings } from "@/lib/firestore/membership";
import { Skeleton } from "@/components/Skeleton";

export default function MembershipPage() {
  const { profile, loading: authLoading } = useAuthContext();
  const [settings, setSettings] = useState<MembershipSettings | null>(null);
  const [note, setNote] = useState("");
  const [file, setFile] = useState<File | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [done, setDone] = useState(false);

  useEffect(() => {
    const unsub = subscribeMembershipSettings(setSettings);
    return unsub;
  }, []);

  const status = profile?.membershipStatus || "non_member";

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!profile) return;
    setSubmitting(true);
    setError("");
    try {
      await submitUpgradeRequest({
        uid: profile.uid,
        employeeName: profile.name,
        company: profile.company,
        note,
        proofFile: file || undefined,
      });
      setDone(true);
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : "Gagal mengirim pengajuan");
    } finally {
      setSubmitting(false);
    }
  }

  if (authLoading || !settings) {
    return (
      <div className="min-h-screen bg-background px-4 py-10 sm:px-8 lg:pl-72">
        <Skeleton className="h-40 w-full max-w-2xl rounded-2xl" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background px-4 py-10 pb-24 sm:px-8 lg:pl-72 lg:pb-10">
      <div className="mx-auto max-w-2xl space-y-6">
        <div className="flex items-center gap-3">
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-accent/15 text-accent">
            <Crown size={22} />
          </div>
          <div>
            <h1 className="font-display text-2xl font-bold text-ink">Membership</h1>
            <p className="text-sm text-ink-soft">Upgrade untuk akses lengkap ke fitur Mindfulness Indonesia</p>
          </div>
        </div>

        {status === "member" && (
          <div className="flex items-center gap-3 rounded-2xl border border-success/30 bg-success/10 p-5">
            <CheckCircle2 className="shrink-0 text-success" size={22} />
            <div>
              <p className="font-semibold text-ink">Kamu sudah Member</p>
              <p className="text-sm text-ink-soft">Semua fitur premium (assessment lengkap, link psikolog langsung, webinar & konten eksklusif) sudah aktif untuk akunmu.</p>
            </div>
          </div>
        )}

        {status === "pending_verification" && (
          <div className="flex items-center gap-3 rounded-2xl border border-accent/40 bg-accent/10 p-5">
            <Clock className="shrink-0 text-accent" size={22} />
            <div>
              <p className="font-semibold text-ink">Pengajuan Sedang Diverifikasi</p>
              <p className="text-sm text-ink-soft">Tim kami sedang mengecek pembayaranmu. Ini biasanya diproses dalam 1x24 jam kerja.</p>
            </div>
          </div>
        )}

        {status === "non_member" && !done && (
          <>
            <div className="rounded-2xl border border-border bg-surface p-6">
              <h2 className="font-display text-base font-semibold text-ink">Yang kamu dapat sebagai Member</h2>
              <ul className="mt-3 space-y-1.5 text-sm text-ink-soft">
                <li>• Assessment versi lengkap (bukan versi ringkas)</li>
                <li>• Akses WhatsApp langsung ke psikolog (bukan cuma CS umum)</li>
                <li>• Link webinar & konten YouTube eksklusif</li>
              </ul>
              {settings.priceLabel && (
                <p className="mt-4 text-lg font-bold text-ink">{settings.priceLabel}</p>
              )}
              {settings.bankInfo && (
                <div className="mt-2 rounded-lg bg-surface-sunk px-3.5 py-2.5 text-sm text-ink">
                  <span className="font-medium">Transfer ke: </span>{settings.bankInfo}
                </div>
              )}
            </div>

            <form onSubmit={handleSubmit} className="space-y-4 rounded-2xl border border-border bg-surface p-6">
              <h2 className="font-display text-base font-semibold text-ink">Ajukan Upgrade ke Member</h2>
              <p className="text-sm text-ink-soft">
                Transfer sesuai info di atas, lalu ajukan di sini. Upload bukti transfer opsional tapi
                mempercepat proses verifikasi.
              </p>
              <div>
                <label className="mb-1.5 block text-sm font-medium text-ink">Catatan (opsional)</label>
                <textarea
                  value={note}
                  onChange={(e) => setNote(e.target.value)}
                  rows={2}
                  placeholder="mis. transfer dari BCA a.n. Budi, 25 Juli 2026"
                  className="w-full rounded-lg border border-border bg-background px-3.5 py-2.5 text-sm text-ink outline-none focus:border-primary"
                />
              </div>
              <div>
                <label className="mb-1.5 block text-sm font-medium text-ink">Bukti Transfer (opsional)</label>
                <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-dashed border-border bg-background px-3.5 py-3 text-sm text-ink-soft hover:border-primary/50">
                  <Upload size={16} />
                  {file ? file.name : "Pilih gambar screenshot transfer"}
                  <input
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={(e) => setFile(e.target.files?.[0] || null)}
                  />
                </label>
              </div>
              {error && <p className="text-sm text-danger">{error}</p>}
              <button
                type="submit"
                disabled={submitting}
                className="w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-primary-foreground hover:bg-primary-soft disabled:opacity-50"
              >
                {submitting ? "Mengirim..." : "Ajukan Upgrade"}
              </button>
            </form>
          </>
        )}

        {done && (
          <div className="flex items-center gap-3 rounded-2xl border border-accent/40 bg-accent/10 p-5">
            <Clock className="shrink-0 text-accent" size={22} />
            <div>
              <p className="font-semibold text-ink">Pengajuan Terkirim</p>
              <p className="text-sm text-ink-soft">Tunggu verifikasi dari tim kami ya, statusnya bisa kamu cek lagi di halaman ini.</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}