"use client";

import Link from "next/link";
import { useEffect, useState, type FormEvent } from "react";
import type { MemberPass } from "@/lib/passes";
import { pauseAllowanceForPackage } from "@/lib/site-data";
import { csrfFetch } from "@/lib/client-csrf";
import { AdminEditContact } from "@/components/admin-edit-contact";

const membershipPlans = [
  { name: "Monthly Membership", months: 1, credits: 22, amount: 5355, pauseClasses: 0 },
  { name: "Monthly Couple Membership (per person)", months: 1, credits: 22, amount: 4305, pauseClasses: 0 },
  { name: "2 Months Membership", months: 2, credits: 44, amount: 8768, pauseClasses: 5 },
  { name: "Quarterly Membership", months: 3, credits: 66, amount: 11550, pauseClasses: 10 },
  { name: "Quarterly Couple Membership (per person)", months: 3, credits: 66, amount: 10500, pauseClasses: 10 },
  { name: "6 Months Membership", months: 6, credits: 132, amount: 22050, pauseClasses: 0 },
  { name: "6 Months Couple Membership (per person)", months: 6, credits: 132, amount: 19950, pauseClasses: 0 },
  { name: "Annual Membership", months: 12, credits: 264, amount: 0, pauseClasses: 0 },
  { name: "Thrice-a-week Package", months: 1, credits: 12, amount: 3150, pauseClasses: 0 },
] as const;

function expiryAfterMonths(months: number) {
  const expiry = new Date();
  expiry.setMonth(expiry.getMonth() + months);
  return expiry.toISOString().slice(0, 10);
}

function todayIso() {
  return new Intl.DateTimeFormat("en-CA", { timeZone: "Asia/Kolkata" }).format(new Date());
}

function MembershipControls({
  pass,
  disabled,
  onChanged,
}: {
  pass: MemberPass;
  disabled: boolean;
  onChanged: () => Promise<void>;
}) {
  const allowance = pauseAllowanceForPackage(pass.packageName);
  const [remaining, setRemaining] = useState(String(pass.remainingCredits));
  const [pauseClasses, setPauseClasses] = useState(allowance > 0 ? String(allowance) : "1");
  const [packageName, setPackageName] = useState(pass.packageName);
  const [includedClasses, setIncludedClasses] = useState(String(pass.totalCredits));
  const [editRemaining, setEditRemaining] = useState(String(pass.remainingCredits));
  const [amount, setAmount] = useState(String(pass.amount));
  const [expiresAt, setExpiresAt] = useState(pass.expiresAt);
  const [paymentAmount, setPaymentAmount] = useState("");
  const [paidOn, setPaidOn] = useState(todayIso());
  const [mode, setMode] = useState("cash");
  const [reactivateDate, setReactivateDate] = useState(pass.expiresAt < todayIso() ? "" : pass.expiresAt);
  const [error, setError] = useState("");

  async function patch(body: Record<string, unknown>) {
    setError("");
    const response = await csrfFetch(`/api/passes/${pass.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
    const data = (await response.json().catch(() => ({}))) as { error?: string };
    if (!response.ok) {
      setError(data.error || "Could not update this membership.");
      return;
    }
    await onChanged();
  }

  const inputClass = "min-h-10 rounded-md border border-[#cfc4b2] bg-white px-2 text-sm text-[#274739]";
  const buttonClass =
    "inline-flex min-h-10 items-center justify-center rounded-md border border-[#cfc4b2] px-3 text-xs font-semibold text-[#274739] disabled:opacity-60";

  return (
    <div className="grid gap-4 border-t border-[#e4d9cb] bg-[#f7f3ea] px-4 py-4 text-sm text-[#274739] lg:grid-cols-2">
      <div>
        <p className="font-semibold">Classes left: {pass.remainingCredits} of {pass.totalCredits}</p>
        <div className="mt-2 flex flex-wrap items-center gap-2">
          <button type="button" className={buttonClass} disabled={disabled || pass.remainingCredits <= 0} onClick={() => void patch({ action: "set_remaining", remainingCredits: pass.remainingCredits - 1 })}>−1</button>
          <input aria-label={`Classes left for ${pass.memberName}`} className={`${inputClass} w-20`} type="number" min="0" value={remaining} onChange={(event) => setRemaining(event.target.value)} />
          <button type="button" className={buttonClass} disabled={disabled} onClick={() => void patch({ action: "set_remaining", remainingCredits: Number(remaining) })}>Save</button>
          <button type="button" className={buttonClass} disabled={disabled} onClick={() => void patch({ action: "set_remaining", remainingCredits: pass.remainingCredits + 1 })}>+1</button>
        </div>
      </div>
      <div>
        <p className="font-semibold">Pause</p>
        <p className="mt-1 text-xs leading-5 text-[#5e675f]">
          {allowance > 0
            ? `Carry up to ${allowance} classes into the next month.`
            : "Enter how many classes to carry forward. Expiry moves forward one month."}
        </p>
        <div className="mt-2 flex flex-wrap items-center gap-2">
          {allowance > 0 ? (
            <select aria-label={`Paused classes for ${pass.memberName}`} className={inputClass} value={pauseClasses} onChange={(event) => setPauseClasses(event.target.value)}>
              {Array.from({ length: allowance }, (_, index) => index + 1).map((count) => (
                <option key={count} value={count}>{count} classes</option>
              ))}
            </select>
          ) : (
            <input aria-label={`Classes to pause for ${pass.memberName}`} className={`${inputClass} w-24`} type="number" min="1" max="99" value={pauseClasses} onChange={(event) => setPauseClasses(event.target.value)} />
          )}
          <button type="button" className={buttonClass} disabled={disabled} onClick={() => void patch({ action: "extend_pause", pausedClasses: Number(pauseClasses) })}>Pause</button>
        </div>
      </div>
      <form
        className="grid gap-2"
        onSubmit={(event) => {
          event.preventDefault();
          void patch({ action: "add_payment", amount: Number(paymentAmount), paidOn, mode });
        }}
      >
        <p className="font-semibold">Add payment</p>
        <div className="flex flex-wrap items-center gap-2">
          <input aria-label="Payment amount" className={`${inputClass} w-28`} type="number" min="1" placeholder="Amount" value={paymentAmount} onChange={(event) => setPaymentAmount(event.target.value)} required />
          <input aria-label="Payment date" className={inputClass} type="date" value={paidOn} onChange={(event) => setPaidOn(event.target.value)} required />
          <select aria-label="Payment mode" className={inputClass} value={mode} onChange={(event) => setMode(event.target.value)}>
            <option value="cash">Cash</option>
            <option value="upi">UPI</option>
            <option value="card">Card</option>
          </select>
          <button type="submit" className={buttonClass} disabled={disabled}>Save payment</button>
        </div>
        {pass.payments.length > 0 ? (
          <ul className="text-xs leading-5 text-[#5e675f]">
            {pass.payments.map((payment) => (
              <li key={payment.id}>{payment.mode.toUpperCase()} · ₹{payment.amount.toLocaleString("en-IN")} · {payment.paidOn}</li>
            ))}
          </ul>
        ) : null}
      </form>
      <form
        className="grid gap-2"
        onSubmit={(event) => {
          event.preventDefault();
          void patch({
            action: "update_details",
            packageName,
            totalCredits: Number(includedClasses),
            remainingCredits: Number(editRemaining),
            amount: Number(amount),
            expiresAt,
          });
        }}
      >
        <p className="font-semibold">Edit membership</p>
        <select aria-label="Membership plan" className={inputClass} value={packageName} onChange={(event) => setPackageName(event.target.value)}>
          {membershipPlans.map((plan) => <option key={plan.name} value={plan.name}>{plan.name}</option>)}
          {membershipPlans.some((plan) => plan.name === packageName) ? null : <option value={packageName}>{packageName}</option>}
        </select>
        <div className="flex flex-wrap gap-2">
          <input aria-label="Included classes" className={`${inputClass} w-28`} type="number" min="1" value={includedClasses} onChange={(event) => setIncludedClasses(event.target.value)} />
          <input aria-label="Classes remaining" className={`${inputClass} w-28`} type="number" min="0" value={editRemaining} onChange={(event) => setEditRemaining(event.target.value)} />
          <input aria-label="Membership amount" className={`${inputClass} w-28`} type="number" min="0" value={amount} onChange={(event) => setAmount(event.target.value)} />
          <input aria-label="Expiry date" className={inputClass} type="date" value={expiresAt} onChange={(event) => setExpiresAt(event.target.value)} />
        </div>
        <button type="submit" className={buttonClass} disabled={disabled}>Save membership</button>
      </form>
      <div className="flex flex-wrap items-end gap-2 lg:col-span-2">
        {pass.status === "active" ? (
          <button type="button" className={`${buttonClass} text-[#7a2e36]`} disabled={disabled} onClick={() => void patch({ action: "expire" })}>Expire</button>
        ) : (
          <>
            {pass.remainingCredits <= 0 ? <p className="text-xs leading-5 text-[#5e675f]">Set classes left above 0, then reactivate.</p> : null}
            {pass.expiresAt < todayIso() ? (
              <input aria-label="New expiry date" className={inputClass} type="date" value={reactivateDate} onChange={(event) => setReactivateDate(event.target.value)} />
            ) : null}
            <button type="button" className={buttonClass} disabled={disabled} onClick={() => void patch({ action: "reactivate", expiresAt: pass.expiresAt < todayIso() ? reactivateDate : pass.expiresAt })}>Reactivate</button>
          </>
        )}
        <button
          type="button"
          disabled={disabled}
          onClick={() => {
            if (!window.confirm(`Delete ${pass.memberName}'s ${pass.packageName}?`)) return;
            void (async () => {
              await csrfFetch(`/api/passes/${pass.id}`, { method: "DELETE" });
              await onChanged();
            })();
          }}
          className="inline-flex min-h-10 items-center justify-center rounded-md bg-[#7a2e36] px-3 text-xs font-semibold text-white disabled:opacity-60"
        >
          Delete
        </button>
      </div>
      {error ? <p className="text-sm font-semibold text-[#7a2e36] lg:col-span-2">{error}</p> : null}
    </div>
  );
}

function formForPlan(planName: string) {
  const plan = membershipPlans.find((item) => item.name === planName) ?? membershipPlans[0];
  return {
    memberName: "",
    email: "",
    phone: "",
    packageName: plan.name,
    totalCredits: String(plan.credits),
    amount: String(plan.amount),
    expiresAt: expiryAfterMonths(plan.months),
  };
}

export function AdminMemberships() {
  const [passes, setPasses] = useState<MemberPass[]>([]);
  const [form, setForm] = useState(() => formForPlan(membershipPlans[0].name));
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [manageId, setManageId] = useState<string | null>(null);
  const [showIssueForm, setShowIssueForm] = useState(false);

  async function loadPasses() {
    setLoading(true);
    const response = await fetch("/api/passes", { cache: "no-store" });
    const data = (await response.json()) as { passes: MemberPass[] };
    setPasses(data.passes);
    setLoading(false);
  }

  useEffect(() => {
    let active = true;

    async function loadInitialPasses() {
      const response = await fetch("/api/passes", { cache: "no-store" });
      const data = (await response.json()) as { passes: MemberPass[] };

      if (active) {
        setPasses(data.passes);
        setLoading(false);
      }
    }

    void loadInitialPasses();

    return () => {
      active = false;
    };
  }, []);

  async function issuePass(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);

    const response = await csrfFetch("/api/passes", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(form),
    });

    if (response.ok) {
      setForm(formForPlan(membershipPlans[0].name));
      setShowIssueForm(false);
      await loadPasses();
    }

    setSaving(false);
  }

  const fieldClass =
    "mt-2 w-full rounded-lg border border-[#cfc4b2] bg-[#f7f3ea] px-4 py-3 text-[#17211c] outline-none transition focus:border-[#274739] focus:ring-2 focus:ring-[#274739]/15";
  const actionBtn =
    "inline-flex min-h-10 items-center justify-center rounded-md border border-[#cfc4b2] px-2.5 py-2 text-xs font-semibold text-[#274739] disabled:opacity-60 lg:min-h-8 lg:px-2 lg:py-1 lg:text-[11px] lg:leading-4";

  return (
    <div className="rounded-lg border border-[#d9d0bf] bg-white p-6 shadow-sm">
      <div className="flex flex-col justify-between gap-3 border-b border-[#d9d0bf] pb-5 sm:flex-row sm:items-center">
        <div>
          <h2 className="text-2xl font-semibold text-[#274739]">Membership register</h2>
          <p className="mt-1 text-sm text-[#5e675f]">Assign memberships, track classes left, validity and approved pauses.</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Link
            href="/api/passes/export"
            className="min-h-11 rounded-full border border-[#cfc4b2] px-4 py-2 text-[15px] font-semibold text-[#274739]"
          >
            Export CSV
          </Link>
          <button
            type="button"
            onClick={() => setShowIssueForm((value) => !value)}
            className="min-h-11 rounded-full border border-[#cfc4b2] px-4 py-2 text-[15px] font-semibold text-[#274739]"
          >
            {showIssueForm ? "Close form" : "Add membership"}
          </button>
          <button
            type="button"
            onClick={() => void loadPasses()}
            className="min-h-11 rounded-full bg-[#274739] px-4 py-2 text-[15px] font-semibold text-white"
          >
            {loading ? "Loading..." : "Refresh"}
          </button>
        </div>
      </div>

      {showIssueForm ? (
      <form onSubmit={issuePass} className="mt-6 grid gap-4 rounded-lg bg-[#eee6d7] p-5 md:grid-cols-3">
        {[
          ["memberName", "Member name", "Aparna Sharma"],
          ["email", "Email", "member@example.com"],
          ["phone", "Phone", "+91..."],
        ].map(([key, label, placeholder]) => (
          <label key={key} className="text-sm font-semibold text-[#274739]">
            {label}
            <input
              className={fieldClass}
              placeholder={placeholder}
              type={key === "amount" || key === "totalCredits" ? "number" : "text"}
              value={form[key as keyof typeof form]}
              onChange={(event) => setForm((current) => ({ ...current, [key]: event.target.value }))}
            />
          </label>
        ))}
        <label className="text-sm font-semibold text-[#274739]">
          Membership plan
          <select
            className={fieldClass}
            value={form.packageName}
            onChange={(event) => setForm((current) => ({ ...formForPlan(event.target.value), memberName: current.memberName, email: current.email, phone: current.phone }))}
          >
            {membershipPlans.map((plan) => <option key={plan.name} value={plan.name}>{plan.name}</option>)}
          </select>
        </label>
        <label className="text-sm font-semibold text-[#274739]">
          Included classes
          <input className={fieldClass} type="number" min="1" value={form.totalCredits} onChange={(event) => setForm((current) => ({ ...current, totalCredits: event.target.value }))} />
        </label>
        <label className="text-sm font-semibold text-[#274739]">
          Membership amount
          <input className={fieldClass} type="number" min="0" value={form.amount} onChange={(event) => setForm((current) => ({ ...current, amount: event.target.value }))} />
        </label>
        <label className="text-sm font-semibold text-[#274739]">
          Expiry date
          <input
            className={fieldClass}
            type="date"
            value={form.expiresAt}
            onChange={(event) => setForm((current) => ({ ...current, expiresAt: event.target.value }))}
          />
        </label>
        <div className="flex items-end">
          <button
            type="submit"
            disabled={saving}
            className="min-h-11 w-full rounded-full bg-[#274739] px-5 py-3 text-[15px] font-bold text-white disabled:opacity-60"
          >
            {saving ? "Saving..." : "Add membership"}
          </button>
        </div>
      </form>
      ) : null}

      {loading ? (
        <p className="py-6 text-sm text-[#5e675f]">Loading memberships...</p>
      ) : passes.length === 0 ? (
        <p className="py-6 text-sm text-[#5e675f]">No memberships registered yet.</p>
      ) : (
        <div className="admin-table-wrap">
          <div className="admin-table admin-table--passes" role="table">
            <div className="admin-table-head" role="row">
              <div role="columnheader" className="lg:text-center">
                Membership
              </div>
              <div role="columnheader" className="lg:text-center">
                Member
              </div>
              <div role="columnheader" className="lg:text-center">
                Classes left
              </div>
              <div role="columnheader" className="lg:text-center">
                Amount
              </div>
              <div role="columnheader" className="lg:text-center">
                Expires
              </div>
              <div role="columnheader" className="lg:text-center">
                Status
              </div>
              <div role="columnheader" className="lg:text-center">
                Actions
              </div>
            </div>
            <div className="admin-table-body">
              {passes.map((pass, index) => (
                <div key={pass.id}>
                <div
                  className={`admin-table-row ${index % 2 === 1 ? "admin-table-row--zebra" : ""} ${
                    pass.status === "active" ? "border-l-[#47734d]" : "border-l-[#d9d0bf]"
                  }`}
                  role="row"
                >
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="min-w-0 truncate text-sm font-semibold text-[#274739]" title={pass.packageName}>
                      {pass.packageName}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="min-w-0 truncate text-sm font-medium text-[#274739]" title={pass.memberName}>
                      <span className="admin-table-mobile-label">Member</span>
                      {pass.memberName}
                    </p>
                    <p className="min-w-0 truncate text-xs text-[#5e675f]" title={`${pass.phone} · ${pass.email}`}>
                      {pass.phone} · {pass.email}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="text-sm tabular-nums font-medium text-[#274739]">
                      <span className="admin-table-mobile-label">Classes left</span>
                      {pass.remainingCredits} of {pass.totalCredits}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="text-sm tabular-nums text-[#274739]">
                      <span className="admin-table-mobile-label">Amount</span>
                      ₹{pass.amount.toLocaleString("en-IN")}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="min-w-0 truncate text-sm text-[#5e675f]" title={pass.expiresAt}>
                      <span className="admin-table-mobile-label">Expires</span>
                      {pass.expiresAt}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="text-sm capitalize text-[#274739]">
                      <span className="admin-table-mobile-label">Status</span>
                      {pass.status}
                    </p>
                  </div>
                  <div className="admin-table-cell admin-table-cell--actions lg:justify-center" role="cell">
                    <button type="button" className={actionBtn} onClick={() => setManageId((current) => (current === pass.id ? null : pass.id))}>
                      {manageId === pass.id ? "Close" : "Manage"}
                    </button>
                    <AdminEditContact
                      phone={pass.phone}
                      name={pass.memberName}
                      email={pass.email}
                      compact
                      onSaved={() => void loadPasses()}
                    />
                  </div>
                </div>
                {manageId === pass.id ? (
                  <MembershipControls
                    key={`${pass.remainingCredits}-${pass.totalCredits}-${pass.expiresAt}-${pass.status}-${pass.amount}-${pass.packageName}-${pass.payments.length}`}
                    pass={pass}
                    disabled={false}
                    onChanged={loadPasses}
                  />
                ) : null}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}