'use client'

import { Suspense, useEffect, useState } from 'react'
import { useSearchParams } from 'next/navigation'
import Link from 'next/link'

function SuccessContent() {
  const searchParams = useSearchParams()
  const sessionId = searchParams.get('session_id')
  const [countdown, setCountdown] = useState(5)

  useEffect(() => {
    // Auto-redirect to app after countdown
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer)
          window.location.href = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:8000'
        }
        return prev - 1
      })
    }, 1000)

    return () => clearInterval(timer)
  }, [])

  return (
    <main className="min-h-screen bg-gradient-to-b from-primary-50 to-white flex items-center justify-center px-4">
      <div className="max-w-md w-full text-center">
        {/* Success Icon */}
        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto">
          <svg
            className="w-10 h-10 text-green-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>

        {/* Message */}
        <h1 className="mt-6 text-3xl font-bold text-slate-900">
          Willkommen bei BreakPilot!
        </h1>
        <p className="mt-4 text-lg text-slate-600">
          Ihr 7-Tage-Trial wurde erfolgreich gestartet.
          Sie koennen jetzt alle Funktionen nutzen.
        </p>

        {/* Session Info */}
        {sessionId && (
          <p className="mt-2 text-sm text-slate-400">
            Session: {sessionId.substring(0, 20)}...
          </p>
        )}

        {/* Redirect Info */}
        <div className="mt-8 bg-white rounded-xl p-6 shadow-lg border border-slate-100">
          <p className="text-slate-600">
            Sie werden in <span className="font-bold text-primary-600">{countdown}</span> Sekunden
            zur App weitergeleitet...
          </p>
        </div>

        {/* Manual Link */}
        <Link
          href={process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:8000'}
          className="mt-6 inline-block bg-primary-600 text-white px-8 py-3 rounded-xl font-medium hover:bg-primary-700 transition-all btn-press"
        >
          Jetzt zur App
        </Link>

        {/* Help Text */}
        <p className="mt-8 text-sm text-slate-400">
          Fragen? Kontaktieren Sie uns unter{' '}
          <a href="mailto:support@breakpilot.de" className="text-primary-600 hover:underline">
            support@breakpilot.de
          </a>
        </p>
      </div>
    </main>
  )
}

function LoadingFallback() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-primary-50 to-white flex items-center justify-center px-4">
      <div className="text-center">
        <div className="w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin mx-auto"></div>
        <p className="mt-4 text-slate-600">Laden...</p>
      </div>
    </main>
  )
}

export default function SuccessPage() {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <SuccessContent />
    </Suspense>
  )
}