'use client'

import React from 'react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { CreditCard, Calendar, Check, ChevronLeft, ChevronRight } from 'lucide-react'

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) {
  return (
    <Card className="glass-dark border-white/10">
      <CardHeader>
        <CardTitle className="text-2xl flex items-center gap-2 text-white">
          <CreditCard className="w-6 h-6 text-primary" />
          Abrechnungsmodell wählen
        </CardTitle>
        <CardDescription className="text-slate-300">
          Möchten Sie Lizenzen dauerhaft kaufen oder monatlich mieten?
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid md:grid-cols-2 gap-6 py-4">
          {/* Option 1: Kauf */}
          <div
            onClick={() => handleBillingIntervalChange('one_time')}
            className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between h-48 hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${
              selectedBillingInterval === 'one_time'
                ? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]'
                : 'border-white/5 bg-white/5 hover:border-white/20'
            }`}
          >
            <div>
              <div className="flex items-center gap-3 mb-3">
                <div className={`p-3 rounded-xl ${selectedBillingInterval === 'one_time' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}>
                  <CreditCard className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-white">Einmaliger Kauf</h3>
              </div>
              <p className="text-slate-400 text-sm">
                Einmalige Anschaffungskosten für die Softwarelizenz. Keine monatlichen Mietgebühren.
              </p>
            </div>
            {selectedBillingInterval === 'one_time' && (
              <div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
                <Check className="w-4 h-4" />
              </div>
            )}
          </div>

          {/* Option 2: Abo */}
          <div
            onClick={() => handleBillingIntervalChange('monthly')}
            className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between h-48 hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${
              selectedBillingInterval === 'monthly'
                ? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]'
                : 'border-white/5 bg-white/5 hover:border-white/20'
            }`}
          >
            <div>
              <div className="flex items-center gap-3 mb-3">
                <div className={`p-3 rounded-xl ${selectedBillingInterval === 'monthly' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}>
                  <Calendar className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-white">Monatliches Abo (Miete)</h3>
              </div>
              <p className="text-slate-400 text-sm">
                Laufende monatliche Gebühren. Inklusive aller Updates und flexibler Laufzeit.
              </p>
            </div>
            {selectedBillingInterval === 'monthly' && (
              <div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
                <Check className="w-4 h-4" />
              </div>
            )}
          </div>
        </div>
        {selectedBillingInterval === 'one_time' && customerMode === 'select' && selectedEndCustomerId && (
          <div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-3 mt-6 max-w-md animate-in fade-in slide-in-from-top-2 duration-300">
            <Label htmlFor="last-license-date" className="text-white font-medium flex items-center gap-2">
              <Calendar className="w-4 h-4 text-primary" />
              Datum der letzten CAS-Lizenz (falls vorhanden)
            </Label>
            <Input
              id="last-license-date"
              type="date"
              value={lastLicenseDate}
              onChange={e => setLastLicenseDate(e.target.value)}
              className="bg-[#0b1329] border-white/10 text-white focus:border-primary"
            />
            <p className="text-xs text-slate-400">
              Falls dieser Kunde bereits Lizenzen besitzt, tragen Sie das Datum der letzten Lizenzierung ein. Damit werden die korrekten Update-Gebühren ermittelt.
            </p>
          </div>
        )}
      </CardContent>
      <CardFooter className="flex justify-between border-t border-white/10 pt-6">
        <Button variant="ghost" className="text-white" onClick={prevStep}>
          <ChevronLeft className="mr-2 w-4 h-4" /> Zurück
        </Button>
        <Button onClick={nextStep}>
          Weiter zur Software <ChevronRight className="ml-2 w-4 h-4" />
        </Button>
      </CardFooter>
    </Card>
  )
}