"use client"

import { useState, useEffect } from "react"
import { useParams, useSearchParams } from "next/navigation"
import { AmountStep } from "./steps/amount-step"
import { ScheduleStep } from "./steps/schedule-step"
import { PaymentStep } from "./steps/payment-step"
import { IdentityStep } from "./steps/identity-step"
import { ConfirmationStep } from "./steps/confirmation-step"
import { BankInstructionsStep } from "./steps/bank-instructions-step"
import { ExternalRedirectStep } from "./steps/external-redirect-step"
import { CardPaymentStep } from "./steps/card-payment-step"
import { DirectDebitStep } from "./steps/direct-debit-step"
import { Heart, ChevronLeft, ArrowRight } from "lucide-react"

export type Rail = "bank" | "gocardless" | "card"

export interface PledgeData {
  amountPence: number
  rail: Rail
  donorName: string
  donorEmail: string
  donorPhone: string
  donorAddressLine1: string
  donorPostcode: string
  giftAid: boolean
  isZakat: boolean
  emailOptIn: boolean
  whatsappOptIn: boolean
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  consentMeta?: any
  // Scheduling
  scheduleMode: "now" | "date" | "installments"
  dueDate?: string
  installmentCount?: number
  installmentDates?: string[]
  // Conditional / match funding
  isConditional: boolean
  conditionType?: "threshold" | "match" | "custom"
  conditionText?: string
  conditionThreshold?: number
}

interface EventInfo {
  id: string
  name: string
  organizationName: string
  qrSourceId: string | null
  qrSourceLabel: string | null
  paymentMode: "self" | "external"
  externalUrl: string | null
  externalPlatform: string | null
  zakatEligible: boolean
  hasStripe: boolean
  goalAmount: number | null
}

/*
  Flow:
  -1 = Mini widget (embed only — sleek card that starts the flow)
   0 = Amount
   1 = Schedule (When to pay?)
   2 = Payment method (if "now") or Identity (if deferred)
   3 = Identity (for bank transfer "now")
   4 = Bank instructions (now)
   5 = Confirmation (generic — card, DD, or deferred pledge)
   6 = Card payment
   7 = External redirect
   8 = Direct Debit
*/

export default function PledgePage() {
  const params = useParams()
  const searchParams = useSearchParams()
  const token = params.token as string

  // Detect embed: ?embed=1 query param OR inside an iframe
  const [isEmbed, setIsEmbed] = useState(false)
  useEffect(() => {
    const embedParam = searchParams.get("embed") === "1"
    const inIframe = typeof window !== "undefined" && window.self !== window.top
    setIsEmbed(embedParam || inIframe)
  }, [searchParams])

  const [step, setStep] = useState<number>(0)
  const [eventInfo, setEventInfo] = useState<EventInfo | null>(null)
  const [pledgeData, setPledgeData] = useState<PledgeData>({
    amountPence: 0,
    rail: "bank",
    donorName: "",
    donorEmail: "",
    donorPhone: "",
    donorAddressLine1: "",
    donorPostcode: "",
    giftAid: false,
    isZakat: false,
    emailOptIn: false,
    whatsappOptIn: false,
    scheduleMode: "now",
    isConditional: false,
  })
  const [pledgeResult, setPledgeResult] = useState<{
    id: string
    reference: string
    bankDetails?: { bankName: string; sortCode: string; accountNo: string; accountName: string }
  } | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")

  useEffect(() => {
    fetch(`/api/qr/${token}`)
      .then((r) => r.json())
      .then((data) => {
        if (data.error) setError(data.error)
        else setEventInfo(data)
        setLoading(false)
      })
      .catch(() => { setError("Unable to load pledge page"); setLoading(false) })
    fetch("/api/analytics", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ eventType: "pledge_start", metadata: { token } }),
    }).catch(() => {})
  }, [token])

  // Start at mini widget step for embeds once loaded
  useEffect(() => {
    if (!loading && isEmbed && step === 0) {
      setStep(-1)
    }
  }, [loading, isEmbed, step])

  // Notify parent frame of height changes when embedded
  useEffect(() => {
    if (!isEmbed) return
    const sendHeight = () => {
      const height = step === -1 ? 160 : 700
      window.parent.postMessage({ type: "pnpl-resize", height }, "*")
    }
    sendHeight()
  }, [isEmbed, step])

  const isExternal = eventInfo?.paymentMode === "external" && eventInfo?.externalUrl

  // Step 0: Amount selected
  const handleAmountSelected = (amountPence: number, conditional?: { isConditional: boolean; conditionType?: "threshold" | "match" | "custom"; conditionText?: string; conditionThreshold?: number }) => {
    const conditionalData = conditional || { isConditional: false }
    setPledgeData((d) => ({ ...d, amountPence, ...conditionalData }))
    if (isExternal) {
      setPledgeData((d) => ({ ...d, amountPence, rail: "bank", scheduleMode: "now", ...conditionalData }))
      setStep(3)
    } else {
      setStep(1)
    }
  }

  // Step 1: Schedule selected (self-payment events only)
  const handleScheduleSelected = (schedule: {
    mode: "now" | "date" | "installments"
    dueDate?: string
    installmentCount?: number
    installmentDates?: string[]
  }) => {
    setPledgeData((d) => ({
      ...d,
      scheduleMode: schedule.mode,
      dueDate: schedule.dueDate,
      installmentCount: schedule.installmentCount,
      installmentDates: schedule.installmentDates,
    }))

    if (schedule.mode === "now") {
      setStep(2) // → Payment method selection
    } else {
      // Deferred or installments: skip payment method, go to identity
      setPledgeData((d) => ({ ...d, rail: "bank" }))
      setStep(3) // → Identity
    }
  }

  // Step 2: Payment method selected (only for "now" self-payment mode)
  const handleRailSelected = (rail: Rail) => {
    setPledgeData((d) => ({ ...d, rail }))
    setStep(rail === "bank" ? 3 : rail === "card" ? 6 : 8)
  }

  // Submit pledge (from identity step, or card/DD steps)
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const submitPledge = async (identity: any) => {
    const finalData = { ...pledgeData, ...identity }
    setPledgeData(finalData)

    // Inject IP + user agent into consent metadata for audit trail
    const consentMeta = finalData.consentMeta ? {
      ...finalData.consentMeta,
      userAgent: navigator.userAgent,
    } : undefined

    try {
      const res = await fetch("/api/pledges", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...finalData,
          consentMeta,
          eventId: eventInfo?.id,
          qrSourceId: eventInfo?.qrSourceId,
          isZakat: finalData.isZakat || false,
        }),
      })
      const result = await res.json()
      if (result.error) { setError(result.error); return }
      setPledgeResult(result)

      // Where to go after pledge is created:
      if (isExternal) {
        setStep(7) // External redirect
      } else if (finalData.scheduleMode === "now" && finalData.rail === "bank") {
        setStep(4) // Bank instructions
      } else {
        setStep(5) // Confirmation
      }
    } catch {
      setError("Something went wrong. Please try again.")
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-paper gap-4">
        <div className="w-12 h-12 rounded-lg bg-midnight flex items-center justify-center animate-pulse">
          <span className="text-white text-xl">🤲</span>
        </div>
        <p className="text-trust-blue font-medium animate-pulse">Loading...</p>
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-paper p-4">
        <div className="text-center space-y-4 animate-fade-up">
          <div className="text-5xl">😔</div>
          <h1 className="text-xl font-bold text-gray-900">Something went wrong</h1>
          <p className="text-muted-foreground">{error}</p>
          <button onClick={() => window.location.reload()} className="text-trust-blue font-medium hover:underline">
            Try again →
          </button>
        </div>
      </div>
    )
  }

  const shareUrl = `${typeof window !== "undefined" ? window.location.origin : ""}/p/${token}`
  const isDeferred = pledgeData.scheduleMode !== "now"

  // Format due date for display
  const dueDateLabel = pledgeData.dueDate
    ? new Date(pledgeData.dueDate).toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" })
    : pledgeData.installmentCount
      ? `${pledgeData.installmentCount} monthly payments`
      : undefined

  const steps: Record<number, React.ReactNode> = {
    [-1]: <MiniWidget eventInfo={eventInfo} onStart={() => setStep(0)} />,
    0: <AmountStep onSelect={handleAmountSelected} eventName={eventInfo?.name || ""} eventId={eventInfo?.id} goalAmount={eventInfo?.goalAmount} />,
    1: <ScheduleStep amount={pledgeData.amountPence} onSelect={handleScheduleSelected} />,
    2: <PaymentStep onSelect={handleRailSelected} amount={pledgeData.amountPence} hasStripe={eventInfo?.hasStripe ?? false} />,
    3: <IdentityStep onSubmit={submitPledge} amount={pledgeData.amountPence} zakatEligible={eventInfo?.zakatEligible} orgName={eventInfo?.organizationName} />,
    4: pledgeResult && <BankInstructionsStep pledge={pledgeResult} amount={pledgeData.amountPence} eventName={eventInfo?.name || ""} donorPhone={pledgeData.donorPhone} />,
    5: pledgeResult && (
      <ConfirmationStep
        pledge={pledgeResult}
        amount={isDeferred && pledgeData.installmentCount ? Math.ceil(pledgeData.amountPence / pledgeData.installmentCount) * pledgeData.installmentCount : pledgeData.amountPence}
        rail={pledgeData.rail}
        eventName={eventInfo?.name || ""}
        shareUrl={shareUrl}
        donorPhone={pledgeData.donorPhone}
        isDeferred={isDeferred}
        dueDateLabel={dueDateLabel}
        installmentCount={pledgeData.installmentCount}
        installmentAmount={pledgeData.installmentCount ? Math.ceil(pledgeData.amountPence / pledgeData.installmentCount) : undefined}
        isConditional={pledgeData.isConditional}
        conditionText={pledgeData.conditionText}
      />
    ),
    6: <CardPaymentStep amount={pledgeData.amountPence} eventName={eventInfo?.name || ""} eventId={eventInfo?.id || ""} qrSourceId={eventInfo?.qrSourceId || null} onComplete={submitPledge} />,
    7: pledgeResult && <ExternalRedirectStep pledge={pledgeResult} amount={pledgeData.amountPence} eventName={eventInfo?.name || ""} externalUrl={eventInfo?.externalUrl || ""} externalPlatform={eventInfo?.externalPlatform} donorPhone={pledgeData.donorPhone} />,
    8: <DirectDebitStep amount={pledgeData.amountPence} eventName={eventInfo?.name || ""} organizationName={eventInfo?.organizationName || ""} eventId={eventInfo?.id || ""} qrSourceId={eventInfo?.qrSourceId || null} onComplete={submitPledge} />,
  }

  const backableSteps = new Set([1, 2, 3, 6, 8])
  const getBackStep = (s: number): number => {
    if (s === 0 && isEmbed) return -1       // amount → mini widget (embed only)
    if (s === 6 || s === 8) return 2        // card/DD → payment method
    if (s === 3 && pledgeData.scheduleMode !== "now") return 1 // deferred identity → schedule
    if (s === 3) return 2                   // bank identity → payment method
    return s - 1
  }

  // Can go back from step 0 only in embed mode
  const canGoBack = backableSteps.has(step) || (step === 0 && isEmbed)
  const isFinished = step === 4 || step === 5 || step === 7
  const stepLabels: Record<number, string> = {
    [-1]: "", 0: "Amount", 1: "Schedule", 2: "Payment method",
    3: "Your details", 4: "Complete", 5: "Complete", 6: "Card payment",
    7: "Redirecting", 8: "Direct Debit",
  }

  const progressMap: Record<number, number> = { [-1]: 0, 0: 8, 1: 25, 2: 40, 3: 60, 4: 100, 5: 100, 6: 60, 7: 100, 8: 60 }
  const progressPercent = progressMap[step] ?? 10

  // Mini widget mode — compact layout, no chrome
  if (step === -1) {
    return (
      <div className={isEmbed ? "bg-paper" : "min-h-screen bg-paper"}>
        <div className="px-4 py-4">{steps[-1]}</div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-paper">
      {/* ── Top bar: progress + back + step label ── */}
      <div className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
        {/* Progress bar */}
        <div className="h-1 bg-gray-100">
          <div
            className="h-full bg-promise-blue transition-all duration-700 ease-out"
            style={{ width: `${progressPercent}%` }}
          />
        </div>

        {/* Navigation row */}
        <div className="flex items-center h-12 px-3">
          {canGoBack ? (
            <button
              onClick={() => setStep(getBackStep(step))}
              className="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors -ml-1 px-2 py-1.5 rounded-lg hover:bg-gray-100 active:bg-gray-200"
            >
              <ChevronLeft className="h-4 w-4" />
              <span>Back</span>
            </button>
          ) : (
            <div className="w-16" /> /* Spacer */
          )}

          <div className="flex-1 text-center">
            <p className="text-xs font-medium text-muted-foreground">
              {eventInfo?.organizationName}
            </p>
          </div>

          {!isFinished && step >= 0 ? (
            <span className="text-[10px] font-medium text-muted-foreground/60 w-16 text-right">
              {stepLabels[step]}
            </span>
          ) : (
            <div className="w-16" />
          )}
        </div>
      </div>

      {/* QR source label */}
      {eventInfo?.qrSourceLabel && (
        <div className="pt-14 pb-0 px-4 text-center">
          <p className="text-[10px] text-muted-foreground/60">{eventInfo.qrSourceLabel}</p>
        </div>
      )}

      {/* Content — padded for fixed header */}
      <div className={`px-4 pb-8 ${eventInfo?.qrSourceLabel ? 'pt-2' : 'pt-16'}`}>
        {steps[step]}
      </div>
    </div>
  )
}


/* ── Mini Widget ─────────────────────────────────────────────────
   Compact card shown in embedded mode. Designed to be:
   - 80-120px tall at rest
   - Branded but not loud
   - Single CTA button that launches the full flow
   ────────────────────────────────────────────────────────────── */

function MiniWidget({
  eventInfo,
  onStart,
}: {
  eventInfo: EventInfo | null
  onStart: () => void
}) {
  const [hover, setHover] = useState(false)

  return (
    <div className="max-w-md mx-auto animate-fade-up">
      <button
        onClick={onStart}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        className="w-full text-left rounded-2xl border-2 border-gray-200 bg-white p-5 transition-all duration-300 hover:border-trust-blue hover:shadow-xl group cursor-pointer"
      >
        <div className="flex items-center gap-4">
          {/* Icon */}
          <div className={`shrink-0 w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 ${
            hover ? "bg-trust-blue scale-110" : "bg-midnight"
          }`}>
            <Heart className={`h-6 w-6 text-white transition-transform duration-300 ${hover ? "scale-110" : ""}`} />
          </div>

          {/* Text */}
          <div className="flex-1 min-w-0">
            <h2 className="text-lg font-black text-gray-900 tracking-tight leading-tight">
              Make a Pledge
            </h2>
            <p className="text-sm text-muted-foreground mt-0.5 truncate">
              {eventInfo?.name || "Support this cause"}
            </p>
          </div>

          {/* Arrow */}
          <div className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${
            hover ? "bg-trust-blue text-white translate-x-0.5" : "bg-gray-100 text-gray-400"
          }`}>
            <ArrowRight className="h-5 w-5" />
          </div>
        </div>

        {/* Sub-line */}
        <div className="flex items-center gap-3 mt-3 pt-3 border-t border-gray-100">
          <span className="text-xs text-muted-foreground">
            💳 Card, bank transfer, or Direct Debit
          </span>
          <span className="text-xs text-muted-foreground">•</span>
          <span className="text-xs text-success-green font-medium">
            🎁 +25% Gift Aid
          </span>
        </div>
      </button>

      {/* Powered by */}
      <p className="text-center text-[10px] text-muted-foreground/40 mt-2">
        Powered by <span className="font-medium">Pledge Now, Pay Later</span>
      </p>
    </div>
  )
}