'use client'

import React, { useState, useMemo, useEffect } 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 {
  User,
  Building2,
  UserPlus,
  Search,
  Check,
  Loader2,
  ChevronRight,
  ChevronLeft,
  ChevronsLeft,
  ChevronsRight,
} 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) {
  const [pageSize, setPageSize] = useState<number>(10)
  const [currentPage, setCurrentPage] = useState<number>(1)

  const [partnerSearchTerm, setPartnerSearchTerm] = useState('')

  // Filter partner companies by partnerSearchTerm
  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])

  // Reset page to 1 when search or company filter or pageSize changes
  useEffect(() => {
    setCurrentPage(1)
  }, [searchTerm, selectedCompanyId, pageSize])

  // Filter customers by selected company (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])

  // 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 totalCount = filteredCustomers.length
  const totalPages = Math.ceil(totalCount / pageSize) || 1

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

  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 einen Endkunden aus oder legen Sie einen neuen an.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Admin Partner Dropdown with Search */}
        {isAdmin && (
          <div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-3">
            <Label htmlFor="order-company" className="text-white font-medium flex items-center gap-2">
              <Building2 className="w-4 h-4 text-primary" />
              Partner-Auswahl (Admin-Funktion)
            </Label>
            <div className="space-y-2">
              <div className="relative">
                <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-slate-900 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
                />
              </div>
              <select
                id="order-company"
                value={selectedCompanyId || 'all'}
                onChange={(e) => setSelectedCompanyId(e.target.value)}
                className="flex h-10 w-full rounded-md border border-white/10 bg-slate-900 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary text-white"
              >
                <option value="all">Alle Partner (Firmenübergreifend)</option>
                {filteredCompanies.map((c: any) => (
                  <option key={c.id} value={c.id}>
                    {c.name}
                  </option>
                ))}
              </select>
            </div>
          </div>
        )}

        {/* Modus-Toggle */}
        <div className="flex gap-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>

        {/* Modus A: Bestandskunde wählen */}
        {customerMode === 'select' && (
          <div className="space-y-4">
            {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">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">
                {/* Search & Page Size Header */}
                <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"
                    />
                  </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">Einträge 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-6 rounded-xl bg-white/5 border border-white/10 text-center">
                    <p className="text-slate-400">Keine passenden Kunden gefunden.</p>
                  </div>
                ) : (
                  <>
                    {/* Kundenliste */}
                    <div className="space-y-2 max-h-80 overflow-y-auto pr-1">
                      {paginatedCustomers.map((customer) => (
                        <label
                          key={customer.id}
                          className={`flex items-start p-4 rounded-xl border-2 cursor-pointer transition-all ${
                            selectedEndCustomerId === customer.id
                              ? 'border-primary bg-primary/5'
                              : 'border-white/5 bg-white/5 hover:bg-white/10'
                          }`}
                        >
                          <input
                            type="radio"
                            name="end_customer"
                            value={customer.id}
                            checked={selectedEndCustomerId === customer.id}
                            onChange={() => setSelectedEndCustomerId(customer.id)}
                            className="sr-only"
                          />
                          <div className="flex-1">
                            <p className="font-semibold text-white">{customer.company_name}</p>
                            <p className="text-sm text-slate-400">
                              {[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>
                          {selectedEndCustomerId === customer.id && (
                            <Check className="w-5 h-5 text-primary mt-0.5 shrink-0" />
                          )}
                        </label>
                      ))}
                    </div>

                    {/* 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 {(currentPage - 1) * pageSize + 1} bis{' '}
                        {Math.min(currentPage * pageSize, totalCount)} von {totalCount} 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" /> Vorherige
                        </Button>

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

                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                          disabled={currentPage === totalPages}
                          className="h-8 px-2.5 border-white/10 text-white"
                        >
                          Nächste <ChevronRight className="w-3.5 h-3.5 ml-1" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setCurrentPage(totalPages)}
                          disabled={currentPage === totalPages}
                          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>
        )}

        {/* Modus B: Neuen Kunden anlegen */}
        {customerMode === 'create' && (
          <div className="grid md:grid-cols-2 gap-4 p-4 rounded-xl bg-white/5 border border-white/10">
            {(
              [
                { 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>
          </div>
        )}
      </CardContent>
      <CardFooter className="flex justify-end border-t border-white/10 pt-6">
        <Button
          onClick={nextStep}
          disabled={
            customerMode === 'create' ||
            (customerMode === 'select' &&
              customersByCompany.length > 0 &&
              !selectedEndCustomerId)
          }
        >
          Weiter zum Abrechnungsmodell <ChevronRight className="ml-2 w-4 h-4" />
        </Button>
      </CardFooter>
    </Card>
  )
}