import React, { useCallback, useEffect, useRef, useState } from "react"
import PayPalTabs from "../_components/Tabs"
import SectionCard from "../_components/SectionCard"
import FieldRow from "../_components/FieldRow"
import Toast, { ToastState } from "../_components/Toast"
import { adminFetch } from "../_utils/adminFetch"

type PaymentAction = "capture" | "authorize"
type LandingPage = "no_preference" | "login" | "billing"

type AdditionalSettingsForm = {
  paymentAction: PaymentAction
  brandName: string
  landingPage: LandingPage
  requireInstantPayment: boolean
  sendItemDetails: boolean
  invoicePrefix: string
  creditCardStatementName: string
}

const DEFAULT_FORM: AdditionalSettingsForm = {
  paymentAction: "capture",
  brandName: "PayPal",
  landingPage: "no_preference",
  requireInstantPayment: false,
  sendItemDetails: true,
  invoicePrefix: "PP-",
  creditCardStatementName: "PayPal",
}

/** Overlay saved values on the defaults, ignoring `undefined` entries. */
function mergeWithDefaults(saved?: Partial<AdditionalSettingsForm> | null) {
  if (!saved) return { ...DEFAULT_FORM }
  const entries = Object.entries(saved).filter(
    ([, value]) => value !== undefined
  )
  return {
    ...DEFAULT_FORM,
    ...(Object.fromEntries(entries) as Partial<AdditionalSettingsForm>),
  }
}

/** Settings → PayPal → Additional Settings (checkout behaviour + invoice options). */
export default function AdditionalSettingsTab() {
  const [form, setForm] = useState<AdditionalSettingsForm>(() => ({
    ...DEFAULT_FORM,
  }))
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [toast, setToast] = useState<ToastState>(null)
  const didInit = useRef(false)

  const dismissToast = useCallback(() => setToast(null), [])

  useEffect(() => {
    if (didInit.current) return
    didInit.current = true
    ;(async () => {
      try {
        setLoading(true)
        const json = await adminFetch<any>("/admin/paypal/settings")
        const payload = json?.data ?? json
        const saved = payload?.additional_settings
        if (saved && typeof saved === "object")
          setForm(mergeWithDefaults(saved))
      } catch {
        // Keep the defaults if settings can't be loaded; saving still works.
      } finally {
        setLoading(false)
      }
    })()
  }, [])

  async function onSave() {
    try {
      setSaving(true)
      setToast(null)
      const json = await adminFetch<any>("/admin/paypal/settings", {
        method: "POST",
        body: {
          additional_settings: form as unknown as Record<string, unknown>,
        },
      })
      const payload = json?.data ?? json
      const saved = payload?.additional_settings
      if (saved && typeof saved === "object") setForm(mergeWithDefaults(saved))
      setToast({ kind: "success", message: "Settings saved" })
    } catch (e: unknown) {
      setToast({
        kind: "error",
        message: e instanceof Error ? e.message : "Failed to save settings",
      })
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="p-6">
      <div className="flex flex-col gap-6">
        <div className="flex items-start justify-between gap-4">
          <div>
            <h1 className="text-xl font-semibold text-ui-fg-base">
              PayPal Gateway By Easy Payment
            </h1>
          </div>
        </div>
        <PayPalTabs />
        <Toast toast={toast} onClose={dismissToast} />
        <SectionCard
          title="Additional Settings"
          description="These settings control checkout behavior and PayPal experience."
          right={
            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={onSave}
                disabled={saving || loading}
                className="transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:transition-fg after:absolute after:inset-0 after:content-[''] after:button-neutral-gradient hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient focus-visible:shadow-buttons-neutral-focus disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden txt-compact-small-plus px-3 py-1.5"
              >
                {saving ? "Saving..." : "Save settings"}
              </button>
              {loading ? (
                <span className="text-sm text-ui-fg-subtle">Loading…</span>
              ) : null}
            </div>
          }
        >
          <div className="divide-y divide-ui-border-base">
            <FieldRow label="Payment action" htmlFor="as-payment-action">
              <select
                id="as-payment-action"
                value={form.paymentAction}
                onChange={(e) =>
                  setForm((p) => ({
                    ...p,
                    paymentAction: e.target.value as PaymentAction,
                  }))
                }
                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
              >
                <option value="capture">Capture</option>
                <option value="authorize">Authorize</option>
              </select>
            </FieldRow>
            <FieldRow label="Brand Name" htmlFor="as-brand-name">
              <input
                id="as-brand-name"
                value={form.brandName}
                onChange={(e) =>
                  setForm((p) => ({ ...p, brandName: e.target.value }))
                }
                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
                placeholder="PayPal"
              />
            </FieldRow>
            <FieldRow label="Landing Page" htmlFor="as-landing-page">
              <select
                id="as-landing-page"
                value={form.landingPage}
                onChange={(e) =>
                  setForm((p) => ({
                    ...p,
                    landingPage: e.target.value as LandingPage,
                  }))
                }
                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
              >
                <option value="no_preference">No Preference</option>
                <option value="login">Login</option>
                <option value="billing">Billing</option>
              </select>
            </FieldRow>
            <FieldRow label="Instant Payments">
              <label className="inline-flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={form.requireInstantPayment}
                  onChange={(e) =>
                    setForm((p) => ({
                      ...p,
                      requireInstantPayment: e.target.checked,
                    }))
                  }
                  className="h-4 w-4 rounded border-ui-border-base"
                />
                <span className="text-sm text-ui-fg-base">
                  Require Instant Payment
                </span>
              </label>
            </FieldRow>
            <FieldRow
              label="Send Item Details"
              hint="Include all line item details in the payment request to PayPal so that they can be seen from the PayPal transaction details page."
            >
              <label className="inline-flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={form.sendItemDetails}
                  onChange={(e) =>
                    setForm((p) => ({
                      ...p,
                      sendItemDetails: e.target.checked,
                    }))
                  }
                  className="h-4 w-4 rounded border-ui-border-base"
                />
                <span className="text-sm text-ui-fg-base">
                  Send line item details to PayPal
                </span>
              </label>
            </FieldRow>
            <FieldRow label="Invoice prefix" htmlFor="as-invoice-prefix">
              <input
                id="as-invoice-prefix"
                value={form.invoicePrefix}
                onChange={(e) =>
                  setForm((p) => ({ ...p, invoicePrefix: e.target.value }))
                }
                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
                placeholder="PP-"
              />
            </FieldRow>
            <FieldRow
              label="Credit Card Statement Name"
              htmlFor="as-cc-statement"
            >
              <input
                id="as-cc-statement"
                value={form.creditCardStatementName}
                onChange={(e) =>
                  setForm((p) => ({
                    ...p,
                    creditCardStatementName: e.target.value,
                  }))
                }
                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
                placeholder="PayPal"
              />
            </FieldRow>
          </div>
        </SectionCard>
      </div>
    </div>
  )
}