"use client";

import { useState, useTransition } from "react";
import { Users, Package, Edit2, XCircle, CheckCircle, ExternalLink, ChevronDown } from "lucide-react";
import { updatePackage, cancelSubscription } from "./actions";

type PlanData = {
  id: string;
  name: string;
  slug: string;
  module: string;
  description: string;
  priceUsd: number;
  priceNgn: number;
  features: string[];
  isActive: boolean;
  stripePriceIdUsdLive: string;
  stripePriceIdNgnLive: string;
  stripePriceIdUsdSandbox: string;
  stripePriceIdNgnSandbox: string;
};

type SubData = {
  id: string;
  userId: string;
  userName: string;
  userEmail: string;
  packageName: string;
  packageModule: string;
  currency: string;
  status: string;
  currentPeriodEnd: string | null;
  stripeSubscriptionId: string | null;
  createdAt: string;
};

export default function AdminSubscriptionsClient({
  packages,
  subscriptions,
}: {
  packages: PlanData[];
  subscriptions: SubData[];
}) {
  const [tab, setTab] = useState<"subscribers" | "packages">("subscribers");
  const [editingPkg, setEditingPkg] = useState<PlanData | null>(null);
  const [isPending, startTransition] = useTransition();
  const [msg, setMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);

  function showMsg(type: "ok" | "err", text: string) {
    setMsg({ type, text });
    setTimeout(() => setMsg(null), 4000);
  }

  // ── Package edit submit ──────────────────────────────────────────────────────
  function handlePackageSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    startTransition(async () => {
      try {
        await updatePackage(fd);
        setEditingPkg(null);
        showMsg("ok", "Package updated successfully.");
      } catch {
        showMsg("err", "Failed to update package.");
      }
    });
  }

  // ── Cancel subscription ──────────────────────────────────────────────────────
  function handleCancel(id: string) {
    if (!confirm("Cancel this subscription? This cannot be undone in the DB (Stripe subscription stays active unless cancelled there too).")) return;
    startTransition(async () => {
      try {
        await cancelSubscription(id);
        showMsg("ok", "Subscription marked as cancelled.");
      } catch {
        showMsg("err", "Failed to cancel subscription.");
      }
    });
  }

  const statusBadge = (status: string) => {
    const map: Record<string, string> = {
      active: "bg-emerald-100 text-emerald-700",
      cancelled: "bg-red-100 text-red-600",
      past_due: "bg-amber-100 text-amber-700",
    };
    return (
      <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold ${map[status] ?? "bg-neutral-100 text-neutral-500"}`}>
        {status}
      </span>
    );
  };

  return (
    <div className="p-8">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-neutral-900">Subscriptions</h1>
        <p className="text-neutral-500 text-sm mt-0.5">Manage subscribers and subscription packages.</p>
      </div>

      {/* Toast */}
      {msg && (
        <div
          className={`mb-4 px-4 py-3 rounded-xl text-sm font-medium flex items-center gap-2 ${
            msg.type === "ok" ? "bg-emerald-50 text-emerald-700 border border-emerald-200" : "bg-red-50 text-red-700 border border-red-200"
          }`}
        >
          {msg.type === "ok" ? <CheckCircle size={15} /> : <XCircle size={15} />}
          {msg.text}
        </div>
      )}

      {/* Tabs */}
      <div className="flex gap-1 mb-6 bg-neutral-100 rounded-xl p-1 w-fit">
        {(["subscribers", "packages"] as const).map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
              tab === t ? "bg-white text-navy-800 shadow-sm" : "text-neutral-500 hover:text-navy-700"
            }`}
          >
            {t === "subscribers" ? <Users size={15} /> : <Package size={15} />}
            {t === "subscribers" ? `Subscribers (${subscriptions.length})` : `Packages (${packages.length})`}
          </button>
        ))}
      </div>

      {/* ── Subscribers Tab ── */}
      {tab === "subscribers" && (
        <div className="bg-white rounded-2xl border border-neutral-200 overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-neutral-50 border-b border-neutral-200">
              <tr>
                {["User", "Plan", "Currency", "Status", "Renews", "Stripe Sub", ""].map((h) => (
                  <th key={h} className="text-left px-4 py-3 font-semibold text-neutral-600 text-xs uppercase tracking-wide">
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-neutral-100">
              {subscriptions.length === 0 ? (
                <tr>
                  <td colSpan={7} className="text-center py-10 text-neutral-400">No subscribers yet.</td>
                </tr>
              ) : (
                subscriptions.map((s) => (
                  <tr key={s.id} className="hover:bg-neutral-50">
                    <td className="px-4 py-3">
                      <div className="font-medium text-neutral-800">{s.userName}</div>
                      <div className="text-xs text-neutral-400">{s.userEmail}</div>
                    </td>
                    <td className="px-4 py-3 text-neutral-700">{s.packageName}</td>
                    <td className="px-4 py-3 text-neutral-500 uppercase text-xs font-semibold">{s.currency}</td>
                    <td className="px-4 py-3">{statusBadge(s.status)}</td>
                    <td className="px-4 py-3 text-neutral-500 text-xs">
                      {s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : "–"}
                    </td>
                    <td className="px-4 py-3">
                      {s.stripeSubscriptionId ? (
                        <a
                          href={`https://dashboard.stripe.com/subscriptions/${s.stripeSubscriptionId}`}
                          target="_blank"
                          rel="noreferrer"
                          className="text-xs text-blue-600 hover:underline flex items-center gap-1"
                        >
                          {s.stripeSubscriptionId.slice(0, 14)}… <ExternalLink size={11} />
                        </a>
                      ) : "–"}
                    </td>
                    <td className="px-4 py-3">
                      {s.status === "active" && (
                        <button
                          onClick={() => handleCancel(s.id)}
                          disabled={isPending}
                          className="text-xs text-red-500 hover:text-red-700 font-medium"
                        >
                          Cancel
                        </button>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      )}

      {/* ── Packages Tab ── */}
      {tab === "packages" && (
        <div className="space-y-4">
          {packages.map((pkg) => (
            <div key={pkg.id} className="bg-white rounded-2xl border border-neutral-200 p-6">
              <div className="flex items-start justify-between">
                <div>
                  <div className="flex items-center gap-3 mb-1">
                    <h3 className="text-lg font-bold text-neutral-800">{pkg.name}</h3>
                    <span className={`text-xs px-2 py-0.5 rounded-full font-semibold ${pkg.isActive ? "bg-emerald-100 text-emerald-700" : "bg-neutral-100 text-neutral-500"}`}>
                      {pkg.isActive ? "Active" : "Inactive"}
                    </span>
                  </div>
                  <div className="text-sm text-neutral-500 mb-2">{pkg.description}</div>
                  <div className="flex gap-4 text-sm">
                    <span className="font-semibold text-navy-700">${pkg.priceUsd}/mo USD</span>
                    <span className="font-semibold text-navy-700">₦{pkg.priceNgn.toLocaleString()}/mo NGN</span>
                  </div>
                </div>
                <button
                  onClick={() => setEditingPkg(editingPkg?.id === pkg.id ? null : pkg)}
                  className="flex items-center gap-2 px-4 py-2 border border-neutral-200 text-sm font-medium text-neutral-700 hover:bg-neutral-50 rounded-lg transition-colors"
                >
                  <Edit2 size={14} /> Edit <ChevronDown size={14} className={`transition-transform ${editingPkg?.id === pkg.id ? "rotate-180" : ""}`} />
                </button>
              </div>

              {editingPkg?.id === pkg.id && (
                <form onSubmit={handlePackageSubmit} className="mt-6 pt-6 border-t border-neutral-100 grid grid-cols-1 md:grid-cols-2 gap-4">
                  <input type="hidden" name="id" value={pkg.id} />

                  <div className="md:col-span-2">
                    <label className="block text-xs font-semibold text-neutral-500 uppercase tracking-wide mb-1">Package Name</label>
                    <input name="name" defaultValue={pkg.name} required className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" />
                  </div>

                  <div className="md:col-span-2">
                    <label className="block text-xs font-semibold text-neutral-500 uppercase tracking-wide mb-1">Description</label>
                    <textarea name="description" defaultValue={pkg.description} rows={2} className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500 resize-none" />
                  </div>

                  <div>
                    <label className="block text-xs font-semibold text-neutral-500 uppercase tracking-wide mb-1">Price USD ($/mo)</label>
                    <input name="priceUsd" type="number" step="0.01" min="0" defaultValue={pkg.priceUsd} required className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" />
                  </div>

                  <div>
                    <label className="block text-xs font-semibold text-neutral-500 uppercase tracking-wide mb-1">Price NGN (₦/mo)</label>
                    <input name="priceNgn" type="number" step="1" min="0" defaultValue={pkg.priceNgn} required className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" />
                  </div>

                  <div className="md:col-span-2">
                    <label className="block text-xs font-semibold text-neutral-500 uppercase tracking-wide mb-1">Features (one per line)</label>
                    <textarea name="features" defaultValue={pkg.features.join("\n")} rows={4} className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500 resize-none font-mono" />
                    <p className="text-xs text-neutral-400 mt-1">One feature per line. Will be saved as a JSON array.</p>
                  </div>

                  <div className="md:col-span-2 bg-blue-50 rounded-xl p-4 space-y-3">
                    <p className="text-xs font-bold text-blue-700 uppercase tracking-wide">Stripe Price IDs — Live Mode</p>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      <div>
                        <label className="block text-xs text-neutral-500 mb-1">Live USD Price ID</label>
                        <input name="stripePriceIdUsdLive" defaultValue={pkg.stripePriceIdUsdLive} placeholder="price_live_..." className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-navy-500" />
                      </div>
                      <div>
                        <label className="block text-xs text-neutral-500 mb-1">Live NGN Price ID</label>
                        <input name="stripePriceIdNgnLive" defaultValue={pkg.stripePriceIdNgnLive} placeholder="price_live_..." className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-navy-500" />
                      </div>
                    </div>
                  </div>

                  <div className="md:col-span-2 bg-amber-50 rounded-xl p-4 space-y-3">
                    <p className="text-xs font-bold text-amber-700 uppercase tracking-wide">Stripe Price IDs — Sandbox / Test Mode</p>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      <div>
                        <label className="block text-xs text-neutral-500 mb-1">Test USD Price ID</label>
                        <input name="stripePriceIdUsdSandbox" defaultValue={pkg.stripePriceIdUsdSandbox} placeholder="price_test_..." className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-navy-500" />
                      </div>
                      <div>
                        <label className="block text-xs text-neutral-500 mb-1">Test NGN Price ID</label>
                        <input name="stripePriceIdNgnSandbox" defaultValue={pkg.stripePriceIdNgnSandbox} placeholder="price_test_..." className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-navy-500" />
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center gap-3">
                    <label className="text-sm font-medium text-neutral-700">Active</label>
                    <select name="isActive" defaultValue={pkg.isActive ? "1" : "0"} className="border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none">
                      <option value="1">Yes</option>
                      <option value="0">No</option>
                    </select>
                  </div>

                  <div className="md:col-span-2 flex items-center gap-3 pt-2">
                    <button type="submit" disabled={isPending} className="px-5 py-2.5 bg-navy-700 text-white text-sm font-semibold rounded-lg hover:bg-navy-800 transition-colors disabled:opacity-60">
                      {isPending ? "Saving…" : "Save Changes"}
                    </button>
                    <button type="button" onClick={() => setEditingPkg(null)} className="px-5 py-2.5 border border-neutral-200 text-sm font-medium text-neutral-600 rounded-lg hover:bg-neutral-50 transition-colors">
                      Cancel
                    </button>
                  </div>
                </form>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}