'use client'

import React, { useState, useMemo, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
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 {
  User,
  Building2,
  UserPlus,
  Search,
  Check,
  Loader2,
  ChevronRight,
  ChevronLeft,
  ChevronsLeft,
  ChevronsRight,
  Users,
  ChevronDown,
  ChevronUp,
  X,
  CreditCard,
  Mail,
  MapPin,
  CheckCircle2,
  Building,
} 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)

  // Drawer / Sheet state for customer creation
  const [showBankDetails, setShowBankDetails] = useState(false)

  // Drawer visibility is mapped to customerMode === 'create'
  const isDrawerOpen = customerMode === 'create'

  const openDrawer = () => setCustomerMode('create')
  const closeDrawer = () => {
    setCustomerMode('select')
    setShowBankDetails(false)
  }

  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) ||
        c.email?.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])

  // Selected customer object for summary chip / info
  const activeCustomer = useMemo(() => {
    return endCustomers.find((c) => c.id === selectedEndCustomerId) || null
  }, [endCustomers, selectedEndCustomerId])

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

  // Handle form submission with enter or button
  const onSubmitCustomerForm = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!newCustomerForm.company_name?.trim()) return
    await handleCreateCustomer()
  }

  return (
    <>
      <Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col 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 flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
              <CardTitle className="text-xl font-bold flex items-center gap-2 text-white">
                <User className="w-5 h-5 text-primary" />
                Für wen bestellen Sie?
              </CardTitle>
              <CardDescription className="text-xs text-slate-300 mt-0.5">
                Wählen Sie den Endkunden für die Lizenzierung aus oder legen Sie schnell einen neuen Datensatz an.
              </CardDescription>
            </div>
            <Button
              onClick={openDrawer}
              size="sm"
              className="gap-2 shrink-0 bg-primary hover:bg-primary/90 text-white font-medium shadow-md shadow-primary/20 h-8 text-xs"
            >
              <UserPlus className="w-4 h-4" /> Kunde anlegen
            </Button>
          </div>
        </CardHeader>

        {/* ─── 2. SCROLLABLE MIDDLE CONTENT (flex-1 min-h-0 overflow-hidden) ─── */}
        <div className="flex-1 min-h-0 overflow-hidden p-6">
          <div className={`h-full ${isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch' : 'flex flex-col'}`}>
            {/* ─── 2A. ADMIN PARTNER SELECTION ─── */}
            {isAdmin && (
              <div className="p-4 rounded-2xl bg-white/5 border border-white/10 flex flex-col h-full overflow-hidden justify-between space-y-3">
                <div className="flex items-center justify-between gap-4 flex-wrap shrink-0">
                  <div>
                    <Label className="text-white font-bold text-sm flex items-center gap-2">
                      <Building2 className="w-4 h-4 text-primary" />
                      Partner-Auswahl (Admin)
                    </Label>
                    <p className="text-[11px] text-slate-400 mt-0.5">
                      Filtert die Kundenliste nach Partner
                    </p>
                  </div>
                  <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-[10px]">
                    Admin Modus
                  </Badge>
                </div>

                {/* Partner Search & Page Size */}
                <div className="flex gap-2 items-center shrink-0">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
                    <Input
                      placeholder="Partner suchen..."
                      value={partnerSearchTerm}
                      onChange={(e) => setPartnerSearchTerm(e.target.value)}
                      className="pl-8 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                    />
                  </div>
                  <select
                    value={partnerPageSize}
                    onChange={(e) => setPartnerPageSize(Number(e.target.value))}
                    className="h-8 rounded-md border border-white/10 bg-slate-900 px-2 text-[11px] text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary shrink-0"
                  >
                    <option value={10}>10</option>
                    <option value={20}>20</option>
                    <option value={50}>50</option>
                  </select>
                </div>

                {/* Partner Card List (Scrollable) */}
                <div className="space-y-1.5 flex-1 min-h-0 overflow-y-auto pr-1 py-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                  {/* Reserved Fixed Card: Alle Partner */}
                  <div
                    onClick={() => {
                      setSelectedCompanyId('all')
                      setSelectedEndCustomerId(null)
                    }}
                    className={`flex items-center justify-between p-2.5 rounded-xl border cursor-pointer transition-all select-none ${
                      selectedCompanyId === 'all' || !selectedCompanyId
                        ? 'border-primary bg-primary/10 shadow-sm shadow-primary/10'
                        : 'border-white/5 bg-white/5 hover:bg-white/10'
                    }`}
                  >
                    <div className="flex items-center gap-2.5">
                      <div className="w-7 h-7 rounded-lg bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
                        <Users className="w-3.5 h-3.5" />
                      </div>
                      <div>
                        <p className="font-semibold text-white text-xs">
                          Alle Partner (Firmenübergreifend)
                        </p>
                        <p className="text-[11px] text-slate-400">
                          {endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
                        </p>
                      </div>
                    </div>
                    {(selectedCompanyId === 'all' || !selectedCompanyId) && (
                      <Check className="w-4 h-4 text-primary shrink-0" />
                    )}
                  </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-2.5 rounded-xl border cursor-pointer transition-all select-none ${
                          isSelected
                            ? 'border-primary bg-primary/10 shadow-sm shadow-primary/10'
                            : 'border-white/5 bg-white/5 hover:bg-white/10'
                        }`}
                      >
                        <div className="flex items-center gap-2.5 min-w-0">
                          <div className="w-7 h-7 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
                            <Building2 className="w-3.5 h-3.5 text-slate-400" />
                          </div>
                          <div className="min-w-0">
                            <p className="font-semibold text-white text-xs truncate">{c.name}</p>
                            {(c.street || c.zip || c.city) && (
                              <p className="text-[11px] text-slate-400 truncate">
                                {[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
                              </p>
                            )}
                          </div>
                        </div>

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

                  {filteredCompanies.length === 0 && (
                    <div className="p-3 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5 my-auto">
                      Keine Partner gefunden.
                    </div>
                  )}
                </div>

                {/* Partner Pagination Footer */}
                <div className="flex items-center justify-between border-t border-white/10 pt-2 text-[11px] text-slate-400 shrink-0">
                  <div>
                    {Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} / {totalPartnerCount} Partner
                  </div>
                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setPartnerCurrentPage(1)}
                      disabled={partnerCurrentPage === 1}
                      className="h-6 px-1.5 text-slate-400 hover:text-white"
                    >
                      <ChevronsLeft className="w-3.5 h-3.5" />
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
                      disabled={partnerCurrentPage === 1}
                      className="h-6 px-2 border-white/10 text-white text-[11px]"
                    >
                      <ChevronLeft className="w-3 h-3 mr-0.5" /> Zurück
                    </Button>
                    <span className="px-1.5 text-slate-300">
                      {partnerCurrentPage} / {totalPartnerPages}
                    </span>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
                      disabled={partnerCurrentPage === totalPartnerPages}
                      className="h-6 px-2 border-white/10 text-white text-[11px]"
                    >
                      Vor <ChevronRight className="w-3 h-3 ml-0.5" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setPartnerCurrentPage(totalPartnerPages)}
                      disabled={partnerCurrentPage === totalPartnerPages}
                      className="h-6 px-1.5 text-slate-400 hover:text-white"
                    >
                      <ChevronsRight className="w-3.5 h-3.5" />
                    </Button>
                  </div>
                </div>
              </div>
            )}

            {/* ─── 2B. CUSTOMER SELECTION LIST (Scrollable Panel) ─── */}
            <div className="p-4 rounded-2xl bg-white/5 border border-white/10 flex flex-col h-full overflow-hidden justify-between space-y-3">
              <div className="flex items-center justify-between gap-3 shrink-0">
                <div className="min-w-0">
                  <Label className="text-white font-bold text-sm flex items-center gap-2">
                    <User className="w-4 h-4 text-primary" />
                    Kunden-Auswahl
                  </Label>
                  <p className="text-[11px] text-slate-400 mt-0.5 truncate">
                    {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
                      ? `Partner: "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"`
                      : 'Alle Endkunden'}
                  </p>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={openDrawer}
                  className="border-primary/40 text-primary hover:bg-primary/10 h-7 text-xs gap-1.5 shrink-0"
                >
                  <UserPlus className="w-3 h-3" /> Neuer Kunde
                </Button>
              </div>

              {/* Customer Search */}
              <div className="relative shrink-0">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
                <Input
                  placeholder="Kunden suchen nach Name, Ort, PLZ, E-Mail..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-8 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-xs h-8"
                />
              </div>

              {/* Customer Card List (Isolated Scrollable Area) */}
              <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 pb-2 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                {customersByCompany.length === 0 ? (
                  <div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center space-y-3 my-auto">
                    <Building2 className="w-8 h-8 text-slate-600 mx-auto" />
                    <p className="text-slate-400 text-xs">
                      {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
                        ? 'Keine Endkunden für den ausgewählten Partner vorhanden.'
                        : 'Noch keine Endkunden vorhanden.'}
                    </p>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={openDrawer}
                      className="border-white/10 text-white text-xs h-8"
                    >
                      <UserPlus className="w-3.5 h-3.5 mr-1.5" /> Ersten Kunden anlegen
                    </Button>
                  </div>
                ) : filteredCustomers.length === 0 ? (
                  <div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5 my-auto">
                    Keine passenden Kunden für &quot;{searchTerm}&quot; gefunden.
                  </div>
                ) : (
                  paginatedCustomers.map((customer) => {
                    const isSelected = selectedEndCustomerId === customer.id

                    return (
                      <div
                        key={customer.id}
                        onClick={() => handleSelectCustomer(customer)}
                        className={`flex items-start p-3 rounded-xl border-2 cursor-pointer transition-all select-none ${
                          isSelected
                            ? 'border-primary bg-primary/10 shadow-md 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 min-w-0 pr-2">
                          <div className="flex items-center gap-2 flex-wrap">
                            <p className="font-semibold text-white text-xs truncate">{customer.company_name}</p>
                            {isAdmin && customer.partner_id && (
                              <Badge
                                variant="outline"
                                className="text-[9px] px-1.5 py-0 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-[11px] text-slate-400 mt-0.5 truncate">
                            {[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>
                          {customer.email && (
                            <p className="text-[10px] text-slate-500 mt-0.5 flex items-center gap-1 truncate">
                              <Mail className="w-3 h-3 shrink-0" /> {customer.email}
                            </p>
                          )}
                        </div>
                        {isSelected && <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />}
                      </div>
                    )
                  })
                )}
              </div>

              {/* Customer Pagination */}
              {totalCustomerCount > 0 && (
                <div className="flex items-center justify-between border-t border-white/10 pt-2 text-[11px] text-slate-400 shrink-0 flex-wrap gap-2">
                  <div className="flex items-center gap-2">
                    <span>
                      {Math.min(currentPage * pageSize, totalCustomerCount)} / {totalCustomerCount} Kunden
                    </span>
                    <select
                      value={pageSize}
                      onChange={(e) => setPageSize(Number(e.target.value))}
                      className="h-6 rounded border border-white/10 bg-slate-900 px-1 text-[11px] text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
                    >
                      <option value={10}>10 pro Seite</option>
                      <option value={20}>20 pro Seite</option>
                      <option value={50}>50 pro Seite</option>
                    </select>
                  </div>

                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setCurrentPage(1)}
                      disabled={currentPage === 1}
                      className="h-6 px-1.5 text-slate-400 hover:text-white"
                    >
                      <ChevronsLeft className="w-3.5 h-3.5" />
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                      disabled={currentPage === 1}
                      className="h-6 px-2 border-white/10 text-white text-[11px]"
                    >
                      <ChevronLeft className="w-3 h-3 mr-0.5" /> Zurück
                    </Button>
                    <span className="px-1.5 text-slate-300">
                      {currentPage} / {totalCustomerPages}
                    </span>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
                      disabled={currentPage === totalCustomerPages}
                      className="h-6 px-2 border-white/10 text-white text-[11px]"
                    >
                      Vor <ChevronRight className="w-3 h-3 ml-0.5" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setCurrentPage(totalCustomerPages)}
                      disabled={currentPage === totalCustomerPages}
                      className="h-8 px-1.5 text-slate-400 hover:text-white"
                    >
                      <ChevronsRight className="w-3.5 h-3.5" />
                    </Button>
                  </div>
                </div>
              )}
            </div>
          </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">
          {/* Selected Customer Summary Chip */}
          <div className="flex items-center gap-2.5 min-w-0">
            {activeCustomer ? (
              <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-primary/10 border border-primary/30 text-white min-w-0">
                <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
                <div className="text-xs truncate">
                  <span className="text-slate-400">Ausgewählt:</span>{' '}
                  <strong className="text-white font-semibold">{activeCustomer.company_name}</strong>
                  {(activeCustomer.city || activeCustomer.zip) && (
                    <span className="text-slate-400 ml-1.5">
                      ({[activeCustomer.zip, activeCustomer.city].filter(Boolean).join(' ')})
                    </span>
                  )}
                </div>
              </div>
            ) : (
              <div className="text-xs text-slate-400 flex items-center gap-1.5">
                <User className="w-4 h-4 text-slate-500" />
                <span>Bitte wählen Sie einen Kunden aus, um fortzufahren.</span>
              </div>
            )}
          </div>

          {/* Next Button */}
          <Button
            onClick={nextStep}
            disabled={!selectedEndCustomerId}
            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 2 <ChevronRight className="w-4 h-4" />
          </Button>
        </div>
      </Card>

      {/* ─── 4. SLIDE-OVER DRAWER FOR CUSTOMER CREATION ─── */}
      <AnimatePresence>
        {isDrawerOpen && (
          <div className="fixed inset-0 z-50 overflow-hidden">
            {/* Backdrop */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
              onClick={closeDrawer}
              className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            />

            <div className="fixed inset-y-0 right-0 max-w-full flex pl-10">
              <motion.div
                initial={{ x: '100%' }}
                animate={{ x: 0 }}
                exit={{ x: '100%' }}
                transition={{ type: 'spring', damping: 25, stiffness: 200 }}
                className="w-screen max-w-xl bg-slate-900 border-l border-white/10 shadow-2xl flex flex-col justify-between"
              >
                {/* Drawer Header */}
                <div className="p-5 border-b border-white/10 flex items-center justify-between bg-slate-950/60 shrink-0">
                  <div className="flex items-center gap-3">
                    <div className="w-9 h-9 rounded-xl bg-primary/20 border border-primary/30 flex items-center justify-center text-primary">
                      <UserPlus className="w-4 h-4" />
                    </div>
                    <div>
                      <h3 className="text-base font-bold text-white">Neuen Kunden anlegen</h3>
                      <p className="text-xs text-slate-400">
                        {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
                          ? `Für Partner: ${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}`
                          : 'Erstellen und direkt für die Bestellung auswählen'}
                      </p>
                    </div>
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={closeDrawer}
                    className="text-slate-400 hover:text-white rounded-full h-8 w-8"
                  >
                    <X className="w-4 h-4" />
                  </Button>
                </div>

                {/* Drawer Body / Form */}
                <form id="new-customer-form" onSubmit={onSubmitCustomerForm} className="p-5 overflow-y-auto flex-1 space-y-5 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                  {/* Basic Info Section */}
                  <div className="space-y-3.5">
                    <div className="flex items-center gap-2 pb-1 border-b border-white/5">
                      <Building className="w-3.5 h-3.5 text-primary" />
                      <span className="text-xs font-bold uppercase tracking-wider text-slate-300">
                        Stammdaten & Anschrift
                      </span>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3.5">
                      <div className="md:col-span-2 space-y-1">
                        <Label className="text-slate-300 text-xs font-semibold">Firmenname *</Label>
                        <Input
                          required
                          value={newCustomerForm.company_name || ''}
                          onChange={(e) =>
                            setNewCustomerForm((prev: any) => ({ ...prev, company_name: e.target.value }))
                          }
                          placeholder="z. B. Musterfirma GmbH & Co. KG"
                          className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                        />
                      </div>

                      <div className="space-y-1">
                        <Label className="text-slate-300 text-xs font-semibold">USt-IdNr.</Label>
                        <Input
                          value={newCustomerForm.vat_id || ''}
                          onChange={(e) =>
                            setNewCustomerForm((prev: any) => ({ ...prev, vat_id: e.target.value }))
                          }
                          placeholder="z. B. DE123456789"
                          className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                        />
                      </div>

                      <div className="space-y-1">
                        <Label className="text-slate-300 text-xs font-semibold">E-Mail</Label>
                        <Input
                          type="email"
                          value={newCustomerForm.email || ''}
                          onChange={(e) =>
                            setNewCustomerForm((prev: any) => ({ ...prev, email: e.target.value }))
                          }
                          placeholder="buchhaltung@muster.de"
                          className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                        />
                      </div>

                      <div className="space-y-1">
                        <Label className="text-slate-300 text-xs font-semibold">Vorname</Label>
                        <Input
                          value={newCustomerForm.first_name || ''}
                          onChange={(e) =>
                            setNewCustomerForm((prev: any) => ({ ...prev, first_name: e.target.value }))
                          }
                          placeholder="Max"
                          className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                        />
                      </div>

                      <div className="space-y-1">
                        <Label className="text-slate-300 text-xs font-semibold">Nachname</Label>
                        <Input
                          value={newCustomerForm.last_name || ''}
                          onChange={(e) =>
                            setNewCustomerForm((prev: any) => ({ ...prev, last_name: e.target.value }))
                          }
                          placeholder="Mustermann"
                          className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                        />
                      </div>

                      <div className="md:col-span-2 space-y-1">
                        <Label className="text-slate-300 text-xs font-semibold">Straße & Hausnummer</Label>
                        <Input
                          value={newCustomerForm.street || ''}
                          onChange={(e) =>
                            setNewCustomerForm((prev: any) => ({ ...prev, street: e.target.value }))
                          }
                          placeholder="Hauptstraße 12"
                          className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                        />
                      </div>

                      <div className="space-y-1">
                        <Label className="text-slate-300 text-xs font-semibold">PLZ</Label>
                        <Input
                          value={newCustomerForm.zip || ''}
                          onChange={(e) =>
                            setNewCustomerForm((prev: any) => ({ ...prev, zip: e.target.value }))
                          }
                          placeholder="10115"
                          className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                        />
                      </div>

                      <div className="space-y-1">
                        <Label className="text-slate-300 text-xs font-semibold">Ort</Label>
                        <Input
                          value={newCustomerForm.city || ''}
                          onChange={(e) =>
                            setNewCustomerForm((prev: any) => ({ ...prev, city: e.target.value }))
                          }
                          placeholder="Berlin"
                          className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Collapsible Bank Details Section */}
                  <div className="rounded-xl border border-white/10 bg-slate-950/40 overflow-hidden">
                    <button
                      type="button"
                      onClick={() => setShowBankDetails((prev) => !prev)}
                      className="w-full flex items-center justify-between p-3 text-left hover:bg-white/5 transition-colors"
                    >
                      <div className="flex items-center gap-2">
                        <CreditCard className="w-3.5 h-3.5 text-slate-400" />
                        <div>
                          <p className="text-xs font-bold text-white">Optionale Zahlungs-/Bankdaten</p>
                          <p className="text-[10px] text-slate-400">SEPA-Lastschrift, IBAN & BIC hinterlegen</p>
                        </div>
                      </div>
                      {showBankDetails ? (
                        <ChevronUp className="w-3.5 h-3.5 text-slate-400" />
                      ) : (
                        <ChevronDown className="w-3.5 h-3.5 text-slate-400" />
                      )}
                    </button>

                    <AnimatePresence>
                      {showBankDetails && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: 'auto', opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          transition={{ duration: 0.2 }}
                          className="p-3.5 border-t border-white/10 space-y-3 bg-white/[0.02]"
                        >
                          <div className="space-y-1">
                            <Label className="text-slate-300 text-xs">Kontoinhaber</Label>
                            <Input
                              value={newCustomerForm.bank_owner || ''}
                              onChange={(e) =>
                                setNewCustomerForm((prev: any) => ({ ...prev, bank_owner: e.target.value }))
                              }
                              placeholder="Max Mustermann"
                              className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                            />
                          </div>

                          <div className="space-y-1">
                            <Label className="text-slate-300 text-xs">IBAN</Label>
                            <Input
                              value={newCustomerForm.bank_iban || ''}
                              onChange={(e) =>
                                setNewCustomerForm((prev: any) => ({ ...prev, bank_iban: e.target.value }))
                              }
                              placeholder="DE89370400440532013000"
                              className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8 font-mono"
                            />
                          </div>

                          <div className="grid grid-cols-2 gap-2.5">
                            <div className="space-y-1">
                              <Label className="text-slate-300 text-xs">BIC</Label>
                              <Input
                                value={newCustomerForm.bank_bic || ''}
                                onChange={(e) =>
                                  setNewCustomerForm((prev: any) => ({ ...prev, bank_bic: e.target.value }))
                                }
                                placeholder="SOLADE21XXX"
                                className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8 font-mono"
                              />
                            </div>

                            <div className="space-y-1">
                              <Label className="text-slate-300 text-xs">Bankname</Label>
                              <Input
                                value={newCustomerForm.bank_name || ''}
                                onChange={(e) =>
                                  setNewCustomerForm((prev: any) => ({ ...prev, bank_name: e.target.value }))
                                }
                                placeholder="Musterbank"
                                className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
                              />
                            </div>
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                </form>

                {/* Drawer Footer */}
                <div className="p-4 border-t border-white/10 bg-slate-950/60 flex items-center justify-end gap-2.5 shrink-0">
                  <Button
                    type="button"
                    variant="ghost"
                    onClick={closeDrawer}
                    disabled={isCreatingCustomer}
                    className="text-slate-300 hover:text-white h-8 text-xs"
                  >
                    Abbrechen
                  </Button>
                  <Button
                    type="submit"
                    form="new-customer-form"
                    disabled={isCreatingCustomer || !newCustomerForm.company_name?.trim()}
                    className="gap-2 bg-primary hover:bg-primary/90 text-white font-semibold px-4 h-8 text-xs"
                  >
                    {isCreatingCustomer ? (
                      <>
                        <Loader2 className="w-3.5 h-3.5 animate-spin" />
                        Speichere Kunde...
                      </>
                    ) : (
                      <>
                        <UserPlus className="w-3.5 h-3.5" />
                        Kunden anlegen & auswählen
                      </>
                    )}
                  </Button>
                </div>
              </motion.div>
            </div>
          </div>
        )}
      </AnimatePresence>
    </>
  )
}