'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import {
  Heart, Coffee, ArrowLeft, Loader2, Shield, Sparkles,
  Check, ChevronRight, Lightbulb,
} from 'lucide-react'
import { Logo } from '@/components/ui/logo'

const tiers = [
  { value: 10, label: 'Pizza', emoji: '\uD83C\uDF55', desc: 'Eine Pizza für die nächste Coding-Session' },
  { value: 20, label: 'Server', emoji: '\uD83D\uDDA5\uFE0F', desc: 'Hilft die monatlichen Serverkosten zu decken' },
  { value: 50, label: 'Feature', emoji: '\uD83D\uDE80', desc: 'Finanziert die Entwicklung eines neuen Features' },
]

export default function SpendenPage() {
  const [amount, setAmount] = useState(20)
  const [customAmount, setCustomAmount] = useState('')
  const [isCustom, setIsCustom] = useState(false)
  const [name, setName] = useState('')
  const [message, setMessage] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [stripeConfigured, setStripeConfigured] = useState<boolean | null>(null)
  const [error, setError] = useState('')

  useEffect(() => {
    fetch('/api/donate/config')
      .then(r => r.json())
      .then(data => setStripeConfigured(data.configured))
      .catch(() => setStripeConfigured(false))
  }, [])

  const activeTier = tiers.reduce((prev, curr) =>
    amount >= curr.value ? curr : prev
  , tiers[0])

  const handleDonate = async () => {
    setIsLoading(true)
    setError('')
    try {
      const res = await fetch('/api/donate/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amount, name: name.trim() || undefined, message: message.trim() || undefined }),
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error || 'Fehler beim Erstellen der Zahlung')
      if (data.url) {
        window.location.href = data.url
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
      setIsLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="border-b border-gray-100 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="flex items-center gap-2">
              <Logo size={36} />
              <span className="font-bold text-xl text-gray-900">Lageplan</span>
            </Link>
            <Link href="/">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="w-4 h-4 mr-1" />
                Zurück
              </Button>
            </Link>
          </div>
        </div>
      </nav>

      <div className="max-w-3xl mx-auto px-4 py-12">
        {/* Header */}
        <div className="text-center mb-12">
          <div className="w-20 h-20 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center mx-auto mb-6 shadow-xl">
            <Heart className="w-10 h-10 text-white" />
          </div>
          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Lageplan unterstützen</h1>
          <p className="text-lg text-gray-500 max-w-xl mx-auto">
            Lageplan ist ein kostenloses Herzensprojekt von einem Feuerwehrmann für Feuerwehrleute.
            Mit deiner Spende hilfst du, die Weiterentwicklung und den Betrieb zu finanzieren.
          </p>
        </div>

        {/* Why donate */}
        <div className="bg-gradient-to-r from-red-50 to-orange-50 rounded-2xl p-6 md:p-8 border border-red-100 mb-10">
          <div className="flex items-start gap-4">
            <Lightbulb className="w-7 h-7 text-red-500 shrink-0 mt-0.5" />
            <div>
              <h3 className="font-bold text-gray-900 mb-2">Wohin fliesst deine Spende?</h3>
              <ul className="space-y-2 text-sm text-gray-600">
                <li className="flex items-center gap-2"><Shield className="w-4 h-4 text-red-500 shrink-0" /> Server-Hosting in der Schweiz (monatliche Kosten)</li>
                <li className="flex items-center gap-2"><Sparkles className="w-4 h-4 text-red-500 shrink-0" /> Entwicklung neuer Features (PWA, Vorlagen, Einsatzpläne)</li>
                <li className="flex items-center gap-2"><Coffee className="w-4 h-4 text-red-500 shrink-0" /> Domain, SSL-Zertifikate und Infrastruktur</li>
              </ul>
            </div>
          </div>
        </div>

        {/* Donation form */}
        <div className="bg-white rounded-2xl border border-gray-200 shadow-lg p-6 md:p-8">
          <h2 className="text-xl font-bold text-gray-900 mb-6">Betrag wählen</h2>

          {/* Quick amounts */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
            {tiers.map(tier => (
              <button
                key={tier.value}
                onClick={() => { setAmount(tier.value); setIsCustom(false); setCustomAmount('') }}
                className={`rounded-xl p-4 text-center transition-all border-2 ${
                  !isCustom && amount === tier.value
                    ? 'border-red-500 bg-red-50 shadow-md'
                    : 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
                }`}
              >
                <span className="text-2xl block mb-1">{tier.emoji}</span>
                <span className="text-lg font-bold text-gray-900">CHF {tier.value}</span>
                <span className="text-xs text-gray-500 block mt-0.5">{tier.label}</span>
              </button>
            ))}
            <button
              onClick={() => setIsCustom(true)}
              className={`rounded-xl p-4 text-center transition-all border-2 ${
                isCustom
                  ? 'border-red-500 bg-red-50 shadow-md'
                  : 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
              }`}
            >
              <span className="text-2xl block mb-1">{"\u2764\uFE0F"}</span>
              <span className="text-lg font-bold text-gray-900">Frei</span>
              <span className="text-xs text-gray-500 block mt-0.5">Eigener Betrag</span>
            </button>
          </div>

          {/* Custom amount input */}
          {isCustom && (
            <div className="mb-8">
              <label className="block text-sm font-medium text-gray-700 mb-2">Eigener Betrag in CHF</label>
              <div className="relative">
                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">CHF</span>
                <input
                  type="number"
                  min="1"
                  max="1000"
                  step="1"
                  value={customAmount}
                  onChange={e => {
                    setCustomAmount(e.target.value)
                    const val = parseInt(e.target.value)
                    if (val > 0) setAmount(val)
                  }}
                  placeholder="Betrag eingeben..."
                  className="w-full rounded-lg border border-gray-300 pl-14 pr-4 py-3 text-lg font-bold focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
                  autoFocus
                />
              </div>
            </div>
          )}

          {/* Current tier description */}
          {!isCustom && (
            <div className="bg-gray-50 rounded-xl p-4 mb-6 text-center">
              <span className="text-3xl">{activeTier.emoji}</span>
              <p className="text-sm text-gray-600 mt-2">{activeTier.desc}</p>
            </div>
          )}

          {/* Optional name & message */}
          <div className="space-y-4 mb-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Dein Name (optional)</label>
              <input
                type="text"
                value={name}
                onChange={e => setName(e.target.value)}
                placeholder="Anonym"
                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Nachricht (optional)</label>
              <textarea
                value={message}
                onChange={e => setMessage(e.target.value)}
                placeholder="z.B. Weiter so! Tolles Projekt."
                rows={2}
                className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none"
              />
            </div>
          </div>

          {/* Error */}
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-3 mb-4 text-sm">
              {error}
            </div>
          )}

          {/* CTA */}
          {stripeConfigured === false ? (
            <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg p-4 text-sm text-center">
              Spenden sind aktuell nicht möglich. Die Zahlungsabwicklung wird gerade eingerichtet.
            </div>
          ) : (
            <Button
              onClick={handleDonate}
              disabled={isLoading || stripeConfigured === null}
              className="w-full bg-red-600 hover:bg-red-700 h-12 text-base"
            >
              {isLoading ? (
                <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Weiterleitung zu Stripe...</>
              ) : (
                <><Heart className="w-4 h-4 mr-2" /> CHF {amount} spenden</>
              )}
            </Button>
          )}

          <div className="mt-4 flex flex-wrap items-center justify-center gap-3 text-xs text-gray-400">
            <span className="flex items-center gap-1"><Shield className="w-3.5 h-3.5" /> Sichere Zahlung via Stripe</span>
            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Kreditkarte</span>
            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Twint</span>
            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Apple Pay</span>
            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Google Pay</span>
          </div>
        </div>

        {/* Story */}
        <div className="mt-10 bg-gray-50 rounded-2xl p-6 md:p-8 border border-gray-100">
          <h3 className="font-bold text-gray-900 mb-3">Die Geschichte hinter Lageplan</h3>
          <p className="text-sm text-gray-600 leading-relaxed">
            Lageplan wird seit über 2 Jahren von einem aktiven Feuerwehrmann in seiner Freizeit entwickelt.
            Die App ist und bleibt <strong>kostenlos</strong> — weil jede Feuerwehr Zugang zu guten Werkzeugen haben soll,
            unabhängig vom Budget. Es gibt zwar kommerzielle Alternativen, aber die Idee war immer:
            Ein Werkzeug <em>von der Feuerwehr, für die Feuerwehr</em>.
          </p>
          <p className="text-sm text-gray-600 leading-relaxed mt-3">
            Mit deiner Spende hilfst du, dass das so bleibt. Jeder Franken fliesst direkt in
            Serverkosten und Weiterentwicklung. Danke für deine Unterstützung!
          </p>
        </div>

        {/* Trust */}
        <div className="mt-8 text-center">
          <p className="text-sm text-gray-500">
            100% deiner Spende fliesst direkt in Serverkosten und Weiterentwicklung.
            <br />Kein Unternehmen, keine Investoren — nur ein Feuerwehrmann mit einer Idee.
          </p>
          <div className="mt-6">
            <Link href="/">
              <Button variant="outline" size="sm">
                <ArrowLeft className="w-4 h-4 mr-1" />
                Zurück zur Startseite
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}