'use client'

import React from 'react'
import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import {
  CreditCard,
  Calendar,
  Check,
  ChevronLeft,
  ChevronRight,
  RefreshCw,
  ShoppingBag,
  ShieldCheck,
  CheckCircle2,
  Info,
} from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'

interface StepBillingProps {
  selectedBillingInterval: 'one_time' | 'monthly'
  handleBillingIntervalChange: (val: 'one_time' | 'monthly') => void
  customerMode: 'select' | 'create'
  selectedEndCustomerId: string | null
  lastLicenseDate: string
  setLastLicenseDate: (date: string) => void
  prevStep: () => void
  nextStep: () => void
}

export function StepBilling({
  selectedBillingInterval,
  handleBillingIntervalChange,
  customerMode,
  selectedEndCustomerId,
  lastLicenseDate,
  setLastLicenseDate,
  prevStep,
  nextStep,
}: StepBillingProps) {
  // Optionale Validierung falls Datum bei Kauf Pflicht wäre, oder prüfen ob Modell gewählt ist
  const isOneTime = selectedBillingInterval === 'one_time'
  const isMonthly = selectedBillingInterval === 'monthly'

  return (
    <Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative">
      {/* ─── 1. FIXED HEADER (shrink-0) ─── */}
      <CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
        <div className="flex items-center justify-between gap-3">
          <div>
            <CardTitle className="text-xl font-bold flex items-center gap-2 text-white">
              <CreditCard className="w-5 h-5 text-primary" />
              Abrechnungsmodell wählen
            </CardTitle>
            <CardDescription className="text-xs text-slate-300 mt-0.5">
              Wählen Sie zwischen monatlicher Miete (Abonnement) oder einmaligem Softwarekauf.
            </CardDescription>
          </div>
          <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-3 py-1">
            Schritt 2 von 4
          </Badge>
        </div>
      </CardHeader>

      {/* ─── 2. SCROLLABLE MIDDLE CONTENT (flex-1 min-h-0 overflow-y-auto) ─── */}
      <div className="flex-1 min-h-0 overflow-y-auto p-6 flex flex-col justify-center max-w-4xl mx-auto w-full scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
        <div className="space-y-6 my-auto">
          {/* Abrechnungsmodell Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            {/* Option 1: Miete / Abo */}
            <div
              onClick={() => handleBillingIntervalChange('monthly')}
              className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[14rem] select-none ${
                isMonthly
                  ? 'border-primary bg-primary/10 shadow-[0_0_20px_rgba(59,130,246,0.2)] ring-1 ring-primary/50'
                  : 'border-white/5 bg-white/5 hover:border-white/20 hover:bg-white/[0.07]'
              }`}
            >
              <div>
                <div className="flex items-center justify-between gap-3 mb-4">
                  <div className={`p-3.5 rounded-xl ${isMonthly ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
                    <RefreshCw className={`w-6 h-6 ${isMonthly ? 'animate-spin-slow' : ''}`} />
                  </div>
                  {isMonthly && (
                    <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
                      <Check className="w-3.5 h-3.5" />
                    </div>
                  )}
                </div>

                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <h3 className="text-lg font-bold text-white">Miete / Abo</h3>
                    <Badge variant="outline" className="text-[10px] bg-blue-500/10 border-blue-500/30 text-blue-400">
                      Empfohlen
                    </Badge>
                  </div>
                  <p className="text-xs font-medium text-slate-300">
                    Fortlaufende monatliche Abrechnung
                  </p>
                </div>

                <p className="text-slate-400 text-xs mt-3 leading-relaxed">
                  Maximale Flexibilität: Inklusive sämtlicher Software-Updates, Cloud-Dienste und technischem Support. Jederzeit kündbar oder anpassbar.
                </p>
              </div>

              <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs">
                <span className="text-slate-400">Zahlungsintervall:</span>
                <span className="text-primary font-semibold">monatlich</span>
              </div>
            </div>

            {/* Option 2: Kauf / Einmalkauf */}
            <div
              onClick={() => handleBillingIntervalChange('one_time')}
              className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[14rem] select-none ${
                isOneTime
                  ? 'border-primary bg-primary/10 shadow-[0_0_20px_rgba(59,130,246,0.2)] ring-1 ring-primary/50'
                  : 'border-white/5 bg-white/5 hover:border-white/20 hover:bg-white/[0.07]'
              }`}
            >
              <div>
                <div className="flex items-center justify-between gap-3 mb-4">
                  <div className={`p-3.5 rounded-xl ${isOneTime ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
                    <ShoppingBag className="w-6 h-6" />
                  </div>
                  {isOneTime && (
                    <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
                      <Check className="w-3.5 h-3.5" />
                    </div>
                  )}
                </div>

                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <h3 className="text-lg font-bold text-white">Kauf / Einmalkauf</h3>
                    <Badge variant="outline" className="text-[10px] bg-slate-500/10 border-slate-500/30 text-slate-300">
                      Klassisch
                    </Badge>
                  </div>
                  <p className="text-xs font-medium text-slate-300">
                    Einmalige Lizenzgebühr
                  </p>
                </div>

                <p className="text-slate-400 text-xs mt-3 leading-relaxed">
                  Dauerhafte Lizenzrechte für die gekaufte Version inklusive 12 Monate kostenfreier Updates. Keine laufenden monatlichen Mietgebühren.
                </p>
              </div>

              <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs">
                <span className="text-slate-400">Zahlungsintervall:</span>
                <span className="text-slate-200 font-semibold">einmalig</span>
              </div>
            </div>
          </div>

          {/* Dynamische Stichtagsabfrage bei Kauf */}
          <AnimatePresence>
            {isOneTime && (
              <motion.div
                initial={{ opacity: 0, y: 10, height: 0 }}
                animate={{ opacity: 1, y: 0, height: 'auto' }}
                exit={{ opacity: 0, y: -10, height: 0 }}
                transition={{ duration: 0.25 }}
                className="overflow-hidden"
              >
                <div className="p-5 rounded-2xl bg-gradient-to-r from-slate-900/90 to-slate-900/60 border border-white/10 space-y-3 shadow-lg">
                  <div className="flex items-start gap-3">
                    <div className="p-2.5 rounded-xl bg-primary/20 text-primary border border-primary/30 shrink-0 mt-0.5">
                      <Calendar className="w-4 h-4" />
                    </div>
                    <div className="space-y-1 flex-1">
                      <Label htmlFor="last-license-date" className="text-white text-xs font-bold flex items-center gap-2">
                        Datum des letzten CASPOS-Kaufs (Stichtag)
                      </Label>
                      <p className="text-[11px] text-slate-400 leading-normal">
                        Datum des letzten Kaufs zur automatischen Berechnung der Update-Staffel (z. B. 15% innerhalb 1 Jahr, 30% bis 2 Jahre, 50% bis 3 Jahre).
                      </p>
                    </div>
                  </div>

                  <div className="pt-2 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                    <div className="relative flex-1 max-w-sm">
                      <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                      <Input
                        id="last-license-date"
                        type="date"
                        value={lastLicenseDate}
                        onChange={(e) => setLastLicenseDate(e.target.value)}
                        className="pl-9 bg-slate-950/80 border-white/10 text-white text-xs h-9 focus:border-primary"
                      />
                    </div>
                    {lastLicenseDate && (
                      <Badge variant="outline" className="bg-emerald-500/10 border-emerald-500/30 text-emerald-400 text-xs px-2.5 py-1 flex items-center gap-1.5 self-start sm:self-auto">
                        <CheckCircle2 className="w-3.5 h-3.5" /> Stichtag gesetzt
                      </Badge>
                    )}
                  </div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>

      {/* ─── 3. FIXED BOTTOM ACTION BAR (shrink-0) ─── */}
      <div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-6 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3 z-10">
        {/* Back Button */}
        <Button
          variant="outline"
          onClick={prevStep}
          className="w-full sm:w-auto border-white/10 text-white hover:bg-white/10 h-9 text-xs gap-1.5"
        >
          <ChevronLeft className="w-4 h-4" /> Zurück zu Schritt 1
        </Button>

        {/* Selected Model Status Chip */}
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-white text-xs">
          <span className="text-slate-400">Gewähltes Modell:</span>
          <Badge
            variant="outline"
            className={`text-xs px-2 py-0.5 ${
              isMonthly
                ? 'border-blue-500/30 text-blue-400 bg-blue-500/10'
                : 'border-slate-500/30 text-slate-300 bg-slate-500/10'
            }`}
          >
            {isMonthly ? 'Monatliches Abo' : 'Einmaliger Kauf'}
          </Badge>
        </div>

        {/* Next Button */}
        <Button
          onClick={nextStep}
          className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-semibold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-1.5"
        >
          Weiter zu Schritt 3 <ChevronRight className="w-4 h-4" />
        </Button>
      </div>
    </Card>
  )
}