"use client";

import { useEffect, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AlertCircle, CreditCard, Loader2, Settings as SettingsIcon, X } from "lucide-react";
import { adminApi } from "@/lib/api/client";
import { useTranslation } from "@/lib/hooks/use-translation";
import { tToast } from "@/lib/utils/translated-toast";

/**
 * Rupees on screen, paise on the wire.
 *
 * The likeliest incident this screen could cause is someone typing 700 meaning
 * ₹700 and charging ₹7, so the editor never sees paise at all — and the
 * confirmation step below shows the total including GST, in words they recognise,
 * before anything is saved.
 */
function toPaise(rupees: string): number | null {
  const trimmed = rupees.trim();
  if (!/^\d+(\.\d{1,2})?$/.test(trimmed)) return null;
  return Math.round(parseFloat(trimmed) * 100);
}

function formatRupees(paise: number): string {
  return (paise / 100).toLocaleString("en-IN", {
    style: "currency",
    currency: "INR",
    minimumFractionDigits: 2,
  });
}

export default function AdminSettings() {
  const queryClient = useQueryClient();
  const { t: cms } = useTranslation(["ADMIN", "COMMON"]);

  const { data, isLoading } = useQuery({
    queryKey: ["admin", "settings"],
    queryFn: async () => (await adminApi.settings()).data,
  });

  const [paymentsEnabled, setPaymentsEnabled] = useState(false);
  const [feeRupees, setFeeRupees] = useState("");
  const [confirming, setConfirming] = useState(false);

  // Seeded from the server once it answers, not on every render, so an editor
  // part-way through typing does not have the field pulled out from under them.
  useEffect(() => {
    if (!data) return;
    setPaymentsEnabled(data.paymentsEnabled);
    setFeeRupees((data.reviewFeePaise / 100).toFixed(2));
  }, [data]);

  const feePaise = toPaise(feeRupees);
  const gstPercent = data?.gstPercent ?? 18;
  const gstPaise = feePaise === null ? 0 : Math.floor((feePaise * gstPercent) / 100);
  const totalPaise = feePaise === null ? 0 : feePaise + gstPaise;

  const feeInvalid = feePaise === null;
  const zeroFeeWhileOn = paymentsEnabled && feePaise === 0;
  const unchanged =
    !!data && data.paymentsEnabled === paymentsEnabled && data.reviewFeePaise === feePaise;

  const save = useMutation({
    mutationFn: () => adminApi.updateSettings({ paymentsEnabled, reviewFeePaise: feePaise ?? 0 }),
    onSuccess: (res) => {
      const { papersReleased, claimsLeftOpen } = res.data;
      setConfirming(false);
      queryClient.invalidateQueries({ queryKey: ["admin", "settings"] });
      queryClient.invalidateQueries({ queryKey: ["public", "settings"] });
      queryClient.invalidateQueries({ queryKey: ["admin", "payments", "summary"] });

      if (papersReleased > 0) {
        tToast(
          "success",
          "admin_settings.saved_with_release",
          `Saved. ${papersReleased} paper${papersReleased === 1 ? "" : "s"} released into review` +
            (claimsLeftOpen > 0
              ? `, and ${claimsLeftOpen} declared payment${claimsLeftOpen === 1 ? " still needs" : "s still need"} your decision.`
              : "."),
        );
      } else {
        tToast("success", "admin_settings.saved", "Settings saved");
      }
    },
    onError: () => tToast("error", "admin_settings.save_failed", "Could not save settings"),
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-20 text-gray-500">
        <Loader2 className="h-5 w-5 animate-spin" />
      </div>
    );
  }

  const switchingOff = !!data && data.paymentsEnabled && !paymentsEnabled;

  return (
    <div className="max-w-3xl space-y-6">
      <div className="flex items-center gap-3">
        <SettingsIcon className="h-6 w-6 text-indigo-600" />
        <div>
          <h1 className="text-xl font-semibold text-gray-900">
            {cms("ADMIN.settings.title", "सेटिंग्स / Settings")}
          </h1>
          <p className="text-sm text-gray-500">
            {cms(
              "ADMIN.settings.subtitle",
              "इन्हें बदलने पर तुरंत प्रभाव पड़ता है / These take effect immediately",
            )}
          </p>
        </div>
      </div>

      <section className="rounded-xl border border-gray-200 bg-white p-6">
        <div className="mb-5 flex items-center gap-2 border-b border-gray-100 pb-4">
          <CreditCard className="h-4 w-4 text-gray-400" />
          <h2 className="text-sm font-semibold text-gray-900">
            {cms("ADMIN.settings.payments", "भुगतान / Payments")}
          </h2>
        </div>

        <label className="flex cursor-pointer items-start gap-3">
          <input
            type="checkbox"
            checked={paymentsEnabled}
            onChange={(e) => setPaymentsEnabled(e.target.checked)}
            className="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600"
          />
          <span>
            <span className="block text-sm font-medium text-gray-900">
              {cms("ADMIN.settings.payments_on", "समीक्षा शुल्क लें / Charge a review fee")}
            </span>
            <span className="mt-0.5 block text-xs text-gray-500">
              {cms(
                "ADMIN.settings.payments_help",
                "बंद करने पर नए शोधपत्र सीधे समीक्षा में जाएँगे / When off, new papers go straight into review",
              )}
            </span>
          </span>
        </label>

        <div className="mt-6">
          <label className="block text-sm font-medium text-gray-700">
            {cms("ADMIN.settings.fee", "समीक्षा शुल्क / Review fee")}
          </label>
          <div className="mt-1.5 flex items-center gap-2">
            <span className="text-gray-500">₹</span>
            <input
              type="text"
              inputMode="decimal"
              value={feeRupees}
              onChange={(e) => setFeeRupees(e.target.value)}
              disabled={!paymentsEnabled}
              className="w-40 rounded-lg border border-gray-300 px-3 py-2 text-sm disabled:bg-gray-50 disabled:text-gray-400"
              placeholder="700.00"
            />
            <span className="text-xs text-gray-500">
              {cms("ADMIN.settings.fee_unit", "रुपये में / in rupees")}
            </span>
          </div>

          {feeInvalid ? (
            <p className="mt-2 text-xs text-red-600">
              {cms(
                "ADMIN.settings.fee_invalid",
                "कृपया एक राशि दर्ज करें, जैसे 700.00 / Please enter an amount, e.g. 700.00",
              )}
            </p>
          ) : (
            <p className="mt-2 text-xs text-gray-500">
              {formatRupees(feePaise)} + {gstPercent}% GST {formatRupees(gstPaise)} ={" "}
              <strong className="text-gray-900">{formatRupees(totalPaise)}</strong>{" "}
              {cms("ADMIN.settings.fee_total", "कुल देय / total payable")}
            </p>
          )}

          {zeroFeeWhileOn && (
            <p className="mt-2 text-xs text-amber-700">
              {cms(
                "ADMIN.settings.zero_fee",
                "शून्य शुल्क के साथ भुगतान चालू नहीं रह सकता — ऊपर का विकल्प हटाएँ / Payments cannot be on with a zero fee — untick the box above",
              )}
            </p>
          )}
        </div>

        {switchingOff && (
          <div className="mt-6 flex gap-3 rounded-lg bg-amber-50 p-4">
            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
            <div className="text-xs text-amber-900">
              <p className="font-medium">
                {cms(
                  "ADMIN.settings.off_warning_title",
                  "शुल्क के लिए रुके शोधपत्र समीक्षा में भेज दिए जाएँगे / Papers held for a fee will be released into review",
                )}
              </p>
              <p className="mt-1">
                {cms(
                  "ADMIN.settings.off_warning_body",
                  "जिन लेखकों ने भुगतान विवरण दे दिया है, उनके दावे आपकी सूची में बने रहेंगे — आप उन्हें अब भी स्वीकार या अस्वीकार कर सकते हैं। / Claims from authors who have already given a payment reference stay in your Payments queue — you can still confirm or reject them.",
                )}
              </p>
            </div>
          </div>
        )}

        <div className="mt-6 flex justify-end border-t border-gray-100 pt-4">
          <button
            onClick={() => setConfirming(true)}
            disabled={feeInvalid || zeroFeeWhileOn || unchanged || save.isPending}
            className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
          >
            {cms("COMMON.buttons.save", "सहेजें / Save")}
          </button>
        </div>
      </section>

      {confirming && data && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
          <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
            <div className="mb-4 flex items-start justify-between">
              <h3 className="text-base font-semibold text-gray-900">
                {cms("ADMIN.settings.confirm_title", "परिवर्तन की पुष्टि करें / Confirm the change")}
              </h3>
              <button onClick={() => setConfirming(false)} className="text-gray-400 hover:text-gray-600">
                <X className="h-4 w-4" />
              </button>
            </div>

            <dl className="space-y-3 text-sm">
              <div className="flex justify-between">
                <dt className="text-gray-500">{cms("ADMIN.settings.payments", "भुगतान / Payments")}</dt>
                <dd className="font-medium text-gray-900">
                  {data.paymentsEnabled ? "On" : "Off"} → {paymentsEnabled ? "On" : "Off"}
                </dd>
              </div>
              {paymentsEnabled && (
                <div className="flex justify-between">
                  <dt className="text-gray-500">
                    {cms("ADMIN.settings.total_payable", "कुल देय / Total payable")}
                  </dt>
                  <dd className="font-medium text-gray-900">
                    {formatRupees(
                      data.reviewFeePaise + Math.floor((data.reviewFeePaise * gstPercent) / 100),
                    )}{" "}
                    → {formatRupees(totalPaise)}
                  </dd>
                </div>
              )}
            </dl>

            {switchingOff && (
              <p className="mt-4 rounded-lg bg-amber-50 p-3 text-xs text-amber-900">
                {cms(
                  "ADMIN.settings.confirm_release",
                  "शुल्क के लिए रुके सभी शोधपत्र समीक्षा में भेज दिए जाएँगे। घोषित भुगतान आपकी सूची में बने रहेंगे। / Every paper held for a fee will be released into review. Declared payments stay in your queue.",
                )}
              </p>
            )}

            <div className="mt-6 flex justify-end gap-2">
              <button
                onClick={() => setConfirming(false)}
                className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
              >
                {cms("COMMON.buttons.cancel", "रद्द करें / Cancel")}
              </button>
              <button
                onClick={() => save.mutate()}
                disabled={save.isPending}
                className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
              >
                {save.isPending && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
                {cms("ADMIN.settings.confirm_save", "हाँ, सहेजें / Yes, save")}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}