'use client'

import React, { useState, useMemo, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
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 { Badge } from '@/components/ui/badge'
import {
  User,
  Building2,
  UserPlus,
  Search,
  Check,
  Loader2,
  ChevronRight,
  ChevronLeft,
  ChevronsLeft,
  ChevronsRight,
  Users,
} from 'lucide-react'
import { EndCustomer } from '@/lib/types'

interface StepCustomerProps {
  isAdmin: boolean
  companies: any[]
  selectedCompanyId: string | null
  setSelectedCompanyId: (id: string | null) => void
  customerMode: 'select' | 'create'
  setCustomerMode: (mode: 'select' | 'create') => void
  endCustomers: EndCustomer[]
  searchTerm: string
  setSearchTerm: (term: string) => void
  filteredEndCustomers: EndCustomer[]
  selectedEndCustomerId: string | null
  setSelectedEndCustomerId: (id: string | null) => void
  newCustomerForm: any
  setNewCustomerForm: React.Dispatch<React.SetStateAction<any>>
  handleCreateCustomer: () => Promise<void>
  isCreatingCustomer: boolean
  nextStep: () => void
}

export function StepCustomer({
  isAdmin,
  companies,
  selectedCompanyId,
  setSelectedCompanyId,
  customerMode,
  setCustomerMode,
  endCustomers,
  searchTerm,
  setSearchTerm,
  selectedEndCustomerId,
  setSelectedEndCustomerId,
  newCustomerForm,
  setNewCustomerForm,
  handleCreateCustomer,
  isCreatingCustomer,
  nextStep,
}: StepCustomerProps) {
  // ─── PARTNER SELECTION STATE & PAGINATION (Admins only) ──────────────────────
  const [partnerSearchTerm, setPartnerSearchTerm] = useState('')
  const [partnerPageSize, setPartnerPageSize] = useState<number>(10)
  const [partnerCurrentPage, setPartnerCurrentPage] = useState<number>(1)

  useEffect(() => {
    setPartnerCurrentPage(1)
  }, [partnerSearchTerm, partnerPageSize])

  // Count non-anonymized customers per partner company
  const customerCountMap = useMemo(() => {
    const counts: Record<string, number> = {}
    endCustomers.forEach((c) => {
      if (!c.is_anonymized && c.partner_id) {
        counts[c.partner_id] = (counts[c.partner_id] || 0) + 1
      }
    })
    return counts
  }, [endCustomers])

  const filteredCompanies = useMemo(() => {
    const term = partnerSearchTerm.toLowerCase().trim()
    if (!term) return companies
    return companies.filter(
      (c: any) => c.name?.toLowerCase().includes(term) || c.id?.toLowerCase().includes(term)
    )
  }, [companies, partnerSearchTerm])

  const totalPartnerCount = filteredCompanies.length
  const totalPartnerPages = Math.ceil(totalPartnerCount / partnerPageSize) || 1

  const paginatedCompanies = useMemo(() => {
    const from = (partnerCurrentPage - 1) * partnerPageSize
    return filteredCompanies.slice(from, from + partnerPageSize)
  }, [filteredCompanies, partnerCurrentPage, partnerPageSize])

  // ─── CUSTOMER SELECTION STATE & PAGINATION ──────────────────────────────────
  const [pageSize, setPageSize] = useState<number>(10)
  const [currentPage, setCurrentPage] = useState<number>(1)

  useEffect(() => {
    setCurrentPage(1)
  }, [searchTerm, selectedCompanyId, pageSize])

  // Filter customers by selected partner (if admin and selectedCompanyId != 'all')
  const customersByCompany = useMemo(() => {
    let list = endCustomers.filter((c) => !c.is_anonymized)
    if (isAdmin && selectedCompanyId && selectedCompanyId !== 'all') {
      list = list.filter((c) => c.partner_id === selectedCompanyId)
    }
    return list
  }, [endCustomers, isAdmin, selectedCompanyId])

  // Customer search filter
  const filteredCustomers = useMemo(() => {
    const term = searchTerm.toLowerCase().trim()
    if (!term) return customersByCompany
    return customersByCompany.filter(
      (c) =>
        c.company_name?.toLowerCase().includes(term) ||
        c.first_name?.toLowerCase().includes(term) ||
        c.last_name?.toLowerCase().includes(term) ||
        c.city?.toLowerCase().includes(term) ||
        c.zip?.toLowerCase().includes(term)
    )
  }, [customersByCompany, searchTerm])

  const totalCustomerCount = filteredCustomers.length
  const totalCustomerPages = Math.ceil(totalCustomerCount / pageSize) || 1

  const paginatedCustomers = useMemo(() => {
    const from = (currentPage - 1) * pageSize
    return filteredCustomers.slice(from, from + pageSize)
  }, [filteredCustomers, currentPage, pageSize])

  // Click handler for customer selection
  const handleSelectCustomer = (customer: EndCustomer) => {
    setSelectedEndCustomerId(customer.id)
    if (isAdmin && customer.partner_id && (selectedCompanyId === 'all' || !selectedCompanyId)) {
      setSelectedCompanyId(customer.partner_id)
    }
  }

  return (
    <Card className="glass-dark border-white/10">
      <CardHeader>
        <CardTitle className="text-2xl flex items-center gap-2 text-white">
          <User className="w-6 h-6 text-primary" />
          Für wen bestellen Sie?
        </CardTitle>
        <CardDescription className="text-slate-300">
          Wählen Sie den Partner (für Admins) und den Endkunden aus oder legen Sie einen neuen an.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */}
        <div className="flex gap-2 pb-2">
          <Button
            variant={customerMode === 'select' ? 'default' : 'ghost'}
            size="sm"
            onClick={() => setCustomerMode('select')}
            className={`gap-2 ${customerMode === 'select' ? '' : 'text-white'}`}
          >
            <Building2 className="w-4 h-4" /> Bestandskunde wählen
          </Button>
          <Button
            variant={customerMode === 'create' ? 'default' : 'ghost'}
            size="sm"
            onClick={() => setCustomerMode('create')}
            className={`gap-2 ${customerMode === 'create' ? '' : 'text-white'}`}
          >
            <UserPlus className="w-4 h-4" /> Neuen Kunden anlegen
          </Button>
        </div>

        <div className={isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch' : 'space-y-6'}>
          {/* ─── 1. ADMIN PARTNER SELECTION ─── */}
          {isAdmin && (
            <div className="p-5 rounded-2xl bg-white/5 border border-white/10 flex flex-col h-[34rem] overflow-hidden justify-between space-y-4">
              <div className="flex items-center justify-between gap-4 flex-wrap">
                <div>
                  <Label className="text-white font-bold text-base flex items-center gap-2">
                    <Building2 className="w-5 h-5 text-primary" />
                    Partner-Auswahl (Admin-Funktion)
                  </Label>
                  <p className="text-xs text-slate-400 mt-0.5">
                    Wählen Sie einen Partner aus, um dessen Kunden anzuzeigen, oder &quot;Alle Partner&quot;.
                  </p>
                </div>
                <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
                  Admin Modus
                </Badge>
              </div>

              {/* Partner Header Controls: Search & Page Size */}
              <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                  <Input
                    placeholder="Partner suchen..."
                    value={partnerSearchTerm}
                    onChange={(e) => setPartnerSearchTerm(e.target.value)}
                    className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
                  />
                </div>

                <div className="flex items-center gap-2 self-end sm:self-auto">
                  <span className="text-xs text-slate-400 whitespace-nowrap">Partner pro Seite:</span>
                  <select
                    value={partnerPageSize}
                    onChange={(e) => setPartnerPageSize(Number(e.target.value))}
                    className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
                  >
                    <option value={10}>10</option>
                    <option value={20}>20</option>
                    <option value={50}>50</option>
                  </select>
                </div>
              </div>

              {/* Partner Card List */}
              <div className="space-y-2 flex-1 overflow-y-auto pr-1 min-h-0 py-1">
                {/* Reserved Fixed Card: Alle Partner */}
                <div
                  onClick={() => {
                    setSelectedCompanyId('all')
                    setSelectedEndCustomerId(null)
                  }}
                  className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
                    selectedCompanyId === 'all' || !selectedCompanyId
                      ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
                      : 'border-white/5 bg-white/5 hover:bg-white/10'
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
                      <Users className="w-4 h-4" />
                    </div>
                    <div>
                      <p className="font-semibold text-white text-sm">
                        Alle Partner (Firmenübergreifend)
                      </p>
                      <p className="text-xs text-slate-400">
                        Zeigt Kunden aller registrierten Partnerunternehmen an
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant="outline" className="border-white/10 text-slate-300 text-xs bg-white/5">
                      {endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
                    </Badge>
                    {(selectedCompanyId === 'all' || !selectedCompanyId) && (
                      <Check className="w-5 h-5 text-primary shrink-0" />
                    )}
                  </div>
                </div>

                {/* Dynamic Partner Cards */}
                {paginatedCompanies.map((c: any) => {
                  const isSelected = selectedCompanyId === c.id
                  const customerCount = customerCountMap[c.id] || 0

                  return (
                    <div
                      key={c.id}
                      onClick={() => {
                        setSelectedCompanyId(c.id)
                        setSelectedEndCustomerId(null)
                      }}
                      className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
                        isSelected
                          ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
                          : 'border-white/5 bg-white/5 hover:bg-white/10'
                      }`}
                    >
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
                          <Building2 className="w-4 h-4 text-slate-400" />
                        </div>
                        <div>
                          <p className="font-semibold text-white text-sm">{c.name}</p>
                          {(c.street || c.zip || c.city) && (
                            <p className="text-xs text-slate-400 mt-0.5">
                              {[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
                            </p>
                          )}
                        </div>
                      </div>

                      <div className="flex items-center gap-2">
                        <Badge
                          variant="outline"
                          className={`text-xs ${
                            customerCount > 0
                              ? 'border-green-500/30 text-green-400 bg-green-500/10'
                              : 'border-white/10 text-slate-500 bg-white/5'
                          }`}
                        >
                          {customerCount} {customerCount === 1 ? 'Kunde' : 'Kunden'}
                        </Badge>
                        {isSelected && <Check className="w-5 h-5 text-primary shrink-0" />}
                      </div>
                    </div>
                  )
                })}

                {filteredCompanies.length === 0 && (
                  <div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
                    Keine Partner mit dem Suchbegriff &quot;{partnerSearchTerm}&quot; gefunden.
                  </div>
                )}
              </div>

              {/* Partner Pagination Controls */}
              <div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
                <div>
                  Zeige {totalPartnerCount === 0 ? 0 : (partnerCurrentPage - 1) * partnerPageSize + 1} bis{' '}
                  {Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} von {totalPartnerCount} Partnern
                </div>

                <div className="flex items-center gap-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setPartnerCurrentPage(1)}
                    disabled={partnerCurrentPage === 1}
                    className="h-8 px-2 text-slate-400 hover:text-white"
                    title="Erste Seite"
                  >
                    <ChevronsLeft className="w-4 h-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
                    disabled={partnerCurrentPage === 1}
                    className="h-8 px-2.5 border-white/10 text-white"
                  >
                    <ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
                  </Button>

                  <span className="px-2 font-medium text-slate-300">
                    Seite {partnerCurrentPage} von {totalPartnerPages}
                  </span>

                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
                    disabled={partnerCurrentPage === totalPartnerPages}
                    className="h-8 px-2.5 border-white/10 text-white"
                  >
                    Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setPartnerCurrentPage(totalPartnerPages)}
                    disabled={partnerCurrentPage === totalPartnerPages}
                    className="h-8 px-2 text-slate-400 hover:text-white"
                    title="Letzte Seite"
                  >
                    <ChevronsRight className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </div>
          )}

          <AnimatePresence mode="wait">
            {/* ─── 2. CUSTOMER SELECTION ─── */}
            {customerMode === 'select' && (
              <motion.div
                key="select"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
                className="p-5 rounded-2xl bg-white/5 border border-white/10 flex flex-col h-[34rem] overflow-hidden justify-between space-y-4"
              >
                <div className="flex items-center justify-between gap-4 flex-wrap">
                  <div>
                    <Label className="text-white font-bold text-base flex items-center gap-2">
                      <User className="w-5 h-5 text-primary" />
                      Kunden-Auswahl
                    </Label>
                    <p className="text-xs text-slate-400 mt-0.5">
                      {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
                        ? `Endkunden für den Partner "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"`
                        : 'Alle verfügbaren Endkunden'}
                    </p>
                  </div>
                </div>

                {customersByCompany.length === 0 ? (
                  <div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center space-y-3">
                    <Building2 className="w-10 h-10 text-slate-600 mx-auto" />
                    <p className="text-slate-400">
                      {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
                        ? 'Keine Endkunden für den ausgewählten Partner vorhanden.'
                        : 'Noch keine Endkunden vorhanden.'}
                    </p>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCustomerMode('create')}
                      className="border-white/10 text-white"
                    >
                      <UserPlus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen
                    </Button>
                  </div>
                ) : (
                  <div className="space-y-4 flex-1 flex flex-col min-h-0 overflow-hidden justify-between">
                    {/* Customer Header Controls: Search & Page Size */}
                    <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
                      <div className="relative flex-1">
                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                        <Input
                          placeholder="Kunden suchen nach Name, Ort, PLZ..."
                          value={searchTerm}
                          onChange={(e) => setSearchTerm(e.target.value)}
                          className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9"
                        />
                      </div>

                      {/* Page Size Selector */}
                      <div className="flex items-center gap-2 self-end sm:self-auto">
                        <span className="text-xs text-slate-400 whitespace-nowrap">Kunden pro Seite:</span>
                        <select
                          value={pageSize}
                          onChange={(e) => setPageSize(Number(e.target.value))}
                          className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
                        >
                          <option value={10}>10</option>
                          <option value={20}>20</option>
                          <option value={50}>50</option>
                        </select>
                      </div>
                    </div>

                    {filteredCustomers.length === 0 ? (
                      <div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
                        Keine passenden Kunden gefunden.
                      </div>
                    ) : (
                      <div className="flex-1 flex flex-col min-h-0 justify-between">
                        {/* Customer Card List */}
                        <div className="space-y-2 flex-1 overflow-y-auto pr-1 min-h-0 py-1">
                          {paginatedCustomers.map((customer) => {
                            const isSelected = selectedEndCustomerId === customer.id

                            return (
                              <div
                                key={customer.id}
                                onClick={() => handleSelectCustomer(customer)}
                                className={`flex items-start p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
                                  isSelected
                                    ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
                                    : 'border-white/5 bg-white/5 hover:bg-white/10'
                                }`}
                              >
                                <input
                                  type="radio"
                                  name="end_customer"
                                  value={customer.id}
                                  checked={isSelected}
                                  onChange={() => handleSelectCustomer(customer)}
                                  className="sr-only"
                                />
                                <div className="flex-1">
                                  <div className="flex items-center gap-2 flex-wrap">
                                    <p className="font-semibold text-white text-sm">{customer.company_name}</p>
                                    {isAdmin && customer.partner_id && (
                                      <Badge
                                        variant="outline"
                                        className="text-[10px] border-white/10 text-slate-400 bg-white/5"
                                      >
                                        Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id}
                                      </Badge>
                                    )}
                                  </div>
                                  <p className="text-xs text-slate-400 mt-0.5">
                                    {[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
                                    {customer.first_name || customer.last_name ? ' · ' : ''}
                                    {[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')}
                                  </p>
                                </div>
                                {isSelected && <Check className="w-5 h-5 text-primary mt-0.5 shrink-0" />}
                              </div>
                            );
                          })}
                        </div>

                        {/* Customer Pagination Footer */}
                        <div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
                          <div>
                            Zeige {totalCustomerCount === 0 ? 0 : (currentPage - 1) * pageSize + 1} bis{' '}
                            {Math.min(currentPage * pageSize, totalCustomerCount)} von {totalCustomerCount} Kunden
                          </div>

                          <div className="flex items-center gap-1">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => setCurrentPage(1)}
                              disabled={currentPage === 1}
                              className="h-8 px-2 text-slate-400 hover:text-white"
                              title="Erste Seite"
                            >
                              <ChevronsLeft className="w-4 h-4" />
                            </Button>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                              disabled={currentPage === 1}
                              className="h-8 px-2.5 border-white/10 text-white"
                            >
                              <ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
                            </Button>

                            <span className="px-2 font-medium text-slate-300">
                              Seite {currentPage} von {totalCustomerPages}
                            </span>

                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
                              disabled={currentPage === totalCustomerPages}
                              className="h-8 px-2.5 border-white/10 text-white"
                            >
                              Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => setCurrentPage(totalCustomerPages)}
                              disabled={currentPage === totalCustomerPages}
                              className="h-8 px-2 text-slate-400 hover:text-white"
                              title="Letzte Seite"
                            >
                              <ChevronsRight className="w-4 h-4" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </motion.div>
            )}

            {/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */}
            {customerMode === 'create' && (
              <motion.div
                key="create"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
                className="grid grid-cols-1 md:grid-cols-2 gap-4 p-5 rounded-2xl bg-white/5 border border-white/10 h-[34rem] overflow-y-auto content-start"
              >
                {(
                  [
                    { label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / Einzelunternehmen' },
                    { label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
                    { label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
                    { label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
                    { label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: '' },
                    { label: 'PLZ', key: 'zip', span: false, placeholder: '' },
                    { label: 'Ort', key: 'city', span: false, placeholder: '' },
                    { label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' },
                    { label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' },
                    { label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' },
                    { label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' },
                  ] as const
                ).map(({ label, key, span, placeholder }) => (
                  <div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
                    <Label className="text-slate-300 text-sm">{label}</Label>
                    <Input
                      value={newCustomerForm[key] || ''}
                      onChange={(e) =>
                        setNewCustomerForm((prev: any) => ({ ...prev, [key]: e.target.value }))
                      }
                      placeholder={placeholder}
                      className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
                    />
                  </div>
                ))}
                <div className="md:col-span-2 flex gap-2">
                  <Button
                    onClick={handleCreateCustomer}
                    disabled={isCreatingCustomer || !newCustomerForm.company_name?.trim()}
                    className="gap-2"
                  >
                    {isCreatingCustomer ? (
                      <Loader2 className="w-4 h-4 animate-spin" />
                    ) : (
                      <UserPlus className="w-4 h-4" />
                    )}
                    Kunden speichern & auswählen
                  </Button>
                  <Button
                    variant="ghost"
                    className="text-white"
                    onClick={() => setCustomerMode('select')}
                  >
                    Abbrechen
                  </Button>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </CardContent>
      <CardFooter className="flex justify-end border-t border-white/10 pt-6">
        <Button
          onClick={nextStep}
          disabled={
            customerMode === 'create' ||
            !selectedEndCustomerId
          }
        >
          Weiter zum Abrechnungsmodell <ChevronRight className="ml-2 w-4 h-4" />
        </Button>
      </CardFooter>
    </Card>
  )
}