'use client'

import React from 'react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { ShieldCheck, Building2, Calendar, Loader2, CheckCircle2 } from 'lucide-react'
import * as Icons from 'lucide-react'
import { Category, Product, EndCustomer, Profile } from '@/lib/types'

interface StepSummaryProps {
  finalItemsToShow: any[]
  visibleCategories: Category[]
  products: Product[]
  oneTimeTotal: number
  monthlyTotal: number
  oneTimeNet: number
  oneTimeTax: number
  oneTimeGross: number
  monthlyNet: number
  monthlyTax: number
  monthlyGross: number
  updatePriceModifier: { label?: string }
  selectedEndCustomer: EndCustomer | null
  customerData: Partial<Profile>
  lastLicenseDate: string
  handleSubmit: () => Promise<void>
  isSubmitting: boolean
  initialOrder: any
  prevStep: () => void
  linkedFeeProducts?: Product[]
  orderNotes: string
  setOrderNotes: (notes: string) => void
}

function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
  const LucideIcon = icon ? (Icons as any)[icon] : null
  if (!LucideIcon) return <Icons.HelpCircle className={className} />
  return <LucideIcon className={className} />
}

export function StepSummary({
  finalItemsToShow,
  visibleCategories,
  products,
  oneTimeTotal,
  monthlyTotal,
  oneTimeNet,
  oneTimeTax,
  oneTimeGross,
  monthlyNet,
  monthlyTax,
  monthlyGross,
  updatePriceModifier,
  selectedEndCustomer,
  customerData,
  lastLicenseDate,
  handleSubmit,
  isSubmitting,
  initialOrder,
  prevStep,
  linkedFeeProducts = [],
  orderNotes,
  setOrderNotes,
}: StepSummaryProps) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full items-stretch text-left">
      {/* LINKER BEREICH: Scrollbares Bedienfeld */}
      <div className="lg:col-span-5 flex flex-col h-full overflow-hidden pr-4 space-y-6">
        <div className="flex-1 overflow-y-auto pr-1 space-y-6 pb-4 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
          
          {/* Header & Status Stepper */}
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
                <ShieldCheck className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h2 className="text-2xl font-extrabold text-white tracking-tight">
                  Anfrage prüfen
                </h2>
                <p className="text-slate-400 text-xs mt-0.5">
                  Fast fertig! Bitte überprüfen Sie Ihre ausgewählte Konfiguration.
                </p>
              </div>
            </div>


          </div>

          {/* Kunden-Info Card */}
          {selectedEndCustomer && (
            <div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-2">
              <div className="flex items-center gap-2 text-primary font-bold text-xs uppercase tracking-wider">
                <Building2 className="w-4 h-4" />
                <span>Ausgewählter Endkunde</span>
              </div>
              <p className="text-white font-bold text-sm">{selectedEndCustomer.company_name}</p>
              <p className="text-slate-400 text-xs">Ansprechpartner: {[selectedEndCustomer.first_name, selectedEndCustomer.last_name].filter(Boolean).join(' ')}</p>
              <p className="text-slate-400 text-xs">Adresse: {[selectedEndCustomer.street, [selectedEndCustomer.zip, selectedEndCustomer.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}</p>
            </div>
          )}

          {/* Anmerkungen / Notizfeld */}
          <div className="space-y-2 pt-2">
            <label htmlFor="order-notes" className="block text-xs font-bold text-white uppercase tracking-wider">
              Anmerkungen / Hinweise (optional)
            </label>
            <textarea
              id="order-notes"
              rows={4}
              value={orderNotes}
              onChange={e => setOrderNotes(e.target.value)}
              placeholder="Besondere Hinweise, Ansprechpartner oder Terminwünsche hier eintragen..."
              className="w-full p-3 rounded-xl bg-white/5 border border-white/10 text-xs text-white placeholder-slate-500 focus:border-primary focus:outline-none transition-colors duration-200 resize-none shadow-inner"
            />
          </div>

          <p className="text-[10px] text-slate-500 leading-relaxed">
            Mit dem Klick auf „{initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'}“ akzeptieren Sie unsere AGB und die{' '}
            <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">
              Datenschutzerklärung
            </a>.
          </p>

          {/* Aktions-Buttons */}
          <div className="space-y-3 pt-2">
            <Button
              className="w-full h-12 text-sm font-bold bg-primary hover:bg-primary/90 shadow-[0_0_15px_rgba(59,130,246,0.2)] rounded-xl"
              onClick={handleSubmit}
              disabled={isSubmitting}
            >
              {isSubmitting ? (
                initialOrder ? (
                  <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Anfrage wird aktualisiert...</>
                ) : (
                  <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Anfrage wird versendet...</>
                )
              ) : (
                initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'
              )}
            </Button>
            <Button variant="ghost" className="w-full text-slate-400 hover:text-white text-xs h-10" onClick={prevStep}>
              Noch etwas ändern
            </Button>
          </div>
        </div>
      </div>

      {/* RECHTER BEREICH: Eigenständig scrollbare Zusammenfassung der Anfrage */}
      <div className="lg:col-span-7 flex flex-col h-full overflow-hidden pl-4">
        <Card className="glass-dark border-white/10 shadow-2xl overflow-hidden rounded-2xl flex flex-col h-full">
          <CardHeader className="shrink-0 border-b border-white/5 pb-4">
            <CardTitle className="text-lg text-white flex items-center justify-between font-bold">
              <span>Zusammenfassung der Positionen</span>
              <Badge className="bg-primary/20 text-primary border border-primary/30 text-xs rounded-full">
                {finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'}
              </Badge>
            </CardTitle>
          </CardHeader>

          {/* Scrollbarer Content der Aufschlüsselung */}
          <CardContent className="space-y-6 text-left flex-1 overflow-y-auto pt-6 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent pr-2">
            <div className="space-y-6">
              {finalItemsToShow.map((item, itemIdx) => (
                <div key={itemIdx} className="space-y-3 border-b border-white/5 pb-5 last:border-0 last:pb-0">
                  <div className="flex justify-between items-center bg-white/5 p-3 rounded-xl border border-white/10">
                    <span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
                    <span className={`text-[10px] px-2 py-0.5 rounded border ${item.billingInterval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
                      {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
                    </span>
                  </div>

                  {visibleCategories.map(cat => {
                    const sel = item.selections[cat.id]
                    const selectedProds: Product[] = []
                    if (cat.allow_multiselect && sel?.productIds) {
                      sel.productIds.forEach((pId: string) => {
                        const p = products.find(prod => prod.id === pId)
                        if (p) selectedProds.push(p)
                      })
                    } else if (sel?.productId) {
                      const p = products.find(prod => prod.id === sel.productId)
                      if (p) selectedProds.push(p)
                    }

                    if (selectedProds.length === 0) return null

                    const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
                    const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0

                    return (
                      <div key={cat.id} className="text-sm space-y-2 pl-2">
                        <span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">{cat.name}:</span>
                        {sortedProds.map((prod, idx) => {
                          const isFree = idx < freeLimit
                          const isAbo = item.billingInterval === 'monthly'
                          const displayPrice = isFree ? 0 : (isAbo ? ((prod as any).monthly_price ?? prod.base_price) : prod.base_price)
                          return (
                            <div key={prod.id} className="flex justify-between text-slate-200">
                              <span className="flex items-center gap-1.5">
                                <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" />
                                {prod.name}
                                {isFree && <span className="text-[9px] bg-green-500/20 text-green-400 px-1.5 py-0.5 rounded border border-green-500/30 font-bold uppercase">Inklusive</span>}
                              </span>
                              <span className="font-bold text-xs text-white">
                                {isFree ? '0,00 €' : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(displayPrice)}
                              </span>
                            </div>
                          )
                        })}

                        {/* Selected Modules */}
                        {sel?.moduleIds && sel.moduleIds.length > 0 && (
                          <div className="pl-4 space-y-1.5 pt-1">
                            {sel.moduleIds.map((mId: string) => {
                              let modObj: any = null
                              products.forEach(p => {
                                const found = p.modules?.find(m => m.id === mId)
                                if (found) modObj = found
                              })
                              if (!modObj) return null

                              const isAbo = item.billingInterval === 'monthly'
                              const qty = item.moduleQuantities?.[mId] || 1
                              const unitPrice = isAbo ? (modObj.monthly_price ?? modObj.price) : modObj.price
                              const totalPrice = unitPrice * qty

                              return (
                                <div key={mId} className="flex justify-between text-slate-400 text-xs">
                                  <span>+ {modObj.name} {qty > 1 ? `(${qty}x)` : ''}</span>
                                  <span className="font-semibold text-slate-300">
                                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)}
                                  </span>
                                </div>
                              )
                            })}
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              ))}

              {/* Gebühren & Zusatz-Positionen */}
              {linkedFeeProducts.length > 0 && (
                <div className="border-t border-white/5 pt-4 space-y-2">
                  <span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">Service & Gebühren:</span>
                  {linkedFeeProducts.map(fp => (
                    <div key={fp.id} className="flex justify-between text-xs text-slate-300">
                      <span>{fp.name}</span>
                      <span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(fp.base_price)}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Summen-Berechnung */}
            {oneTimeTotal > 0 ? (
              <div className="space-y-2 border-t border-white/10 pt-5">
                <div className="flex justify-between text-xs text-slate-400">
                  <span>Netto-Gesamtbetrag:</span>
                  <span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
                </div>
                <div className="flex justify-between text-xs text-slate-400">
                  <span>zzgl. 19% MwSt.:</span>
                  <span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
                </div>
                {updatePriceModifier.label && (
                  <div className="text-xs text-green-400 font-semibold bg-green-500/10 p-2.5 rounded-xl border border-green-500/20 my-1">
                    {updatePriceModifier.label}
                  </div>
                )}
                <div className="flex justify-between text-base font-bold text-primary pt-3 border-t border-white/5">
                  <span>Gesamtbetrag (brutto):</span>
                  <span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
                </div>
              </div>
            ) : (
              <div className="space-y-2 border-t border-white/10 pt-5">
                <div className="flex justify-between text-xs text-slate-400">
                  <span>Netto-Gesamtbetrag:</span>
                  <span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
                </div>
                <div className="flex justify-between text-xs text-slate-400">
                  <span>zzgl. 19% MwSt.:</span>
                  <span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
                </div>
                <div className="flex justify-between text-base font-bold text-primary pt-3 border-t border-white/5">
                  <span>Gesamtbetrag (brutto):</span>
                  <span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}