import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Loader2 } from 'lucide-react'
import { useAuthStore } from '@/store/authStore'
import { onboardingApi, type PrimaryPsa } from '@/api/onboarding'
import { cn } from '@/lib/utils'

const PSA_OPTIONS: { value: PrimaryPsa; label: string; description: string }[] = [
  { value: 'connectwise', label: 'ConnectWise', description: 'Manage / PSA' },
  { value: 'autotask', label: 'Autotask', description: 'Datto Autotask PSA' },
  { value: 'halopsa', label: 'HaloPSA', description: 'Halo Service Solutions' },
  { value: 'none', label: 'No PSA yet', description: "We'll add one later" },
]

/**
 * `/welcome/step-2` — second step of the welcome wizard. Captures the PSA the
 * shop primarily uses. Selecting a non-`none` tile splits the primary CTA
 * into "Connect <PSA> now" (routes to `/account/integrations` after saving)
 * and "Connect later" (continues to step 3). Both paths persist the
 * `primary_psa` choice before navigating.
 */
export function WelcomeStep2() {
  const navigate = useNavigate()
  const fetchUser = useAuthStore((s) => s.fetchUser)

  const [primaryPsa, setPrimaryPsa] = useState<PrimaryPsa | null>(null)
  const [submitting, setSubmitting] = useState<
    'continue' | 'connect-now' | 'skip' | 'dismiss' | null
  >(null)
  const [error, setError] = useState<string | null>(null)

  const isBusy = submitting !== null
  const showConnectNow = primaryPsa !== null && primaryPsa !== 'none'
  const selectedPsaLabel = PSA_OPTIONS.find((o) => o.value === primaryPsa)?.label

  const handleContinue = async () => {
    if (isBusy) return
    setError(null)
    setSubmitting('continue')
    try {
      await onboardingApi.updateStep({
        step: 2,
        action: 'complete',
        data: primaryPsa ? { primary_psa: primaryPsa } : undefined,
      })
      await fetchUser()
      navigate('/welcome/step-3')
    } catch {
      setError('Could not save. Please try again.')
      setSubmitting(null)
    }
  }

  const handleConnectNow = async () => {
    if (isBusy || !showConnectNow) return
    setError(null)
    setSubmitting('connect-now')
    try {
      await onboardingApi.updateStep({
        step: 2,
        action: 'complete',
        data: { primary_psa: primaryPsa! },
      })
      await fetchUser()
      navigate('/account/integrations')
    } catch {
      setError('Could not save. Please try again.')
      setSubmitting(null)
    }
  }

  const handleSkipStep = async () => {
    if (isBusy) return
    setError(null)
    setSubmitting('skip')
    try {
      await onboardingApi.updateStep({ step: 2, action: 'skip' })
      await fetchUser()
      navigate('/welcome/step-3')
    } catch {
      setError('Could not save. Please try again.')
      setSubmitting(null)
    }
  }

  const handleDismissRest = async () => {
    if (isBusy) return
    setError(null)
    setSubmitting('dismiss')
    try {
      await onboardingApi.dismissRest()
      await fetchUser()
      navigate('/home')
    } catch {
      setError('Could not save. Please try again.')
      setSubmitting(null)
    }
  }

  return (
    <div className="mx-auto w-full max-w-2xl px-4 py-10">
      <header className="mb-8">
        <p className="text-xs uppercase tracking-wider text-muted-foreground">
          Step 2 of 3
        </p>
        <h1 className="mt-2 text-2xl font-heading font-bold text-text-heading">
          Your PSA
        </h1>
        <p className="mt-2 text-sm text-muted-foreground">
          Pick the PSA your team uses today. We'll wire it up later — no
          credentials needed yet.
        </p>
      </header>

      <div
        className="rounded-2xl border border-border bg-card p-6 space-y-5"
        data-testid="welcome-step-2-form"
      >
        <div
          role="radiogroup"
          aria-label="Primary PSA"
          className="grid grid-cols-1 gap-3 sm:grid-cols-2"
        >
          {PSA_OPTIONS.map((opt) => {
            const selected = primaryPsa === opt.value
            return (
              <button
                key={opt.value}
                type="button"
                role="radio"
                aria-checked={selected}
                onClick={() => setPrimaryPsa(opt.value)}
                disabled={isBusy}
                data-testid={`welcome-step-2-tile-${opt.value}`}
                className={cn(
                  'rounded-xl border px-4 py-3 text-left transition-colors btn-press',
                  'focus:outline-hidden focus:ring-2 focus:ring-primary/30',
                  'disabled:opacity-60',
                  selected
                    ? 'border-primary bg-primary/5'
                    : 'border-border bg-card hover:border-primary/40 hover:bg-foreground/5',
                )}
              >
                <div className="text-sm font-semibold text-foreground">
                  {opt.label}
                </div>
                <div className="text-xs text-muted-foreground">
                  {opt.description}
                </div>
              </button>
            )
          })}
        </div>

        {error && (
          <p className="text-xs text-red-400" data-testid="welcome-step-2-error">
            {error}
          </p>
        )}

        <div className="flex flex-wrap items-center gap-3 pt-2">
          {showConnectNow ? (
            <>
              <button
                type="button"
                onClick={handleConnectNow}
                disabled={isBusy}
                data-testid="welcome-step-2-connect-now"
                className={cn(
                  'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
                  'bg-primary text-primary-foreground hover:bg-primary/90',
                  'focus:outline-hidden focus:ring-2 focus:ring-primary/30',
                  'disabled:opacity-60',
                )}
              >
                {submitting === 'connect-now' && (
                  <Loader2 className="h-4 w-4 animate-spin" />
                )}
                Connect {selectedPsaLabel} now
              </button>
              <button
                type="button"
                onClick={handleContinue}
                disabled={isBusy}
                data-testid="welcome-step-2-continue"
                className={cn(
                  'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium btn-press',
                  'bg-card border border-border text-foreground hover:bg-foreground/5',
                  'focus:outline-hidden focus:ring-2 focus:ring-primary/20',
                  'disabled:opacity-60',
                )}
              >
                {submitting === 'continue' && (
                  <Loader2 className="h-4 w-4 animate-spin" />
                )}
                Connect later
              </button>
            </>
          ) : (
            <button
              type="button"
              onClick={handleContinue}
              disabled={isBusy}
              data-testid="welcome-step-2-continue"
              className={cn(
                'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
                'bg-primary text-primary-foreground hover:bg-primary/90',
                'focus:outline-hidden focus:ring-2 focus:ring-primary/30',
                'disabled:opacity-60',
              )}
            >
              {submitting === 'continue' && (
                <Loader2 className="h-4 w-4 animate-spin" />
              )}
              Continue
            </button>
          )}
          <button
            type="button"
            onClick={handleSkipStep}
            disabled={isBusy}
            data-testid="welcome-step-2-skip"
            className={cn(
              'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium btn-press',
              'bg-card border border-border text-foreground hover:bg-foreground/5',
              'focus:outline-hidden focus:ring-2 focus:ring-primary/20',
              'disabled:opacity-60',
            )}
          >
            {submitting === 'skip' && (
              <Loader2 className="h-4 w-4 animate-spin" />
            )}
            Skip this step
          </button>
        </div>
      </div>

      <div className="mt-6 text-center">
        <button
          type="button"
          onClick={handleDismissRest}
          disabled={isBusy}
          data-testid="welcome-step-2-dismiss-rest"
          className={cn(
            'text-xs text-muted-foreground hover:underline',
            'disabled:opacity-60',
          )}
        >
          {submitting === 'dismiss' ? 'Saving…' : 'Skip the rest'}
        </button>
      </div>
    </div>
  )
}

export default WelcomeStep2