'use client'

import React from 'react'
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Pencil, Trash2, UserPlus, ChevronRight, AlertCircle, Check } from 'lucide-react'
import { Category, Product, CategorySelection } from '@/lib/types'

interface SummarySidebarProps {
  visibleCategories: Category[]
  selections: Record<string, CategorySelection>
  products: Product[]
  moduleQuantities: Record<string, number>
  billingLabel: (interval: string) => string
  oneTimeTotal: number
  monthlyTotal: number
  oneTimeNet: number
  oneTimeTax: number
  oneTimeGross: number
  monthlyNet: number
  monthlyTax: number
  monthlyGross: number
  updatePriceModifier: { label?: string }
  allCategoriesFilled: boolean
  productValidationErrors: string[]
  basketItems: any[]
  editingIdx: number | null
  editBasketItem: (idx: number) => void
  deleteBasketItem: (idx: number) => void
  deviceName: string
  setDeviceName: (name: string) => void
  addToBasket: () => void
  isNextStepDisabled: boolean
  hasActiveSelection: boolean
  nextStep: () => void
  prevStep: () => void
}

export function SummarySidebar({
  visibleCategories,
  selections,
  products,
  moduleQuantities,
  billingLabel,
  oneTimeTotal,
  monthlyTotal,
  oneTimeNet,
  oneTimeTax,
  oneTimeGross,
  monthlyNet,
  monthlyTax,
  monthlyGross,
  updatePriceModifier,
  allCategoriesFilled,
  productValidationErrors,
  basketItems,
  editingIdx,
  editBasketItem,
  deleteBasketItem,
  deviceName,
  setDeviceName,
  addToBasket,
  isNextStepDisabled,
  hasActiveSelection,
  nextStep,
  prevStep,
}: SummarySidebarProps) {
  return (
    <Card className="glass-dark border-primary/20 backdrop-blur-lg bg-slate-950/75 flex flex-col max-h-[80vh]">
      <CardHeader className="shrink-0">
        <CardTitle className="text-white">Zusammenfassung</CardTitle>
      </CardHeader>
        <CardContent className="space-y-4 flex-1 overflow-y-auto subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
          {visibleCategories.map(cat => {
            const sel = selections[cat.id]
            const selectedProds: Product[] = []
            if (cat.allow_multiselect && sel?.productIds) {
              sel.productIds.forEach(pId => {
                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 (
              <div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1">
                {cat.is_required ? (
                  <AlertCircle className="w-3 h-3 text-destructive" />
                ) : (
                  <span className="w-3 h-3 inline-block" />
                )}
                {cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}
              </div>
            )

            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="space-y-1">
                <div className="flex justify-between text-sm">
                  <span className="text-slate-400 font-medium">{cat.name}</span>
                </div>
                {sortedProds.map((prod, idx) => {
                  const isFree = idx < freeLimit
                  const actualPrice = isFree ? 0 : prod.base_price
                  return (
                    <div key={prod.id} className="space-y-0.5 pl-2">
                      <div className="flex justify-between text-sm">
                        <span className="text-white">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Frei)</span>}</span>
                        <span className="text-white">
                          {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(actualPrice)}
                          {' '}<span className="text-slate-400 text-xs">{billingLabel(prod.billing_interval)}</span>
                        </span>
                      </div>
                      {sel.moduleIds.map(mId => {
                        const mod = prod.modules?.find(m => m.id === mId)
                        const qty = moduleQuantities[mId] || 1
                        return mod ? (
                          <div key={mId} className="flex justify-between text-xs pl-2">
                            <span className="text-slate-300">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
                            <span className="text-slate-300">
                              {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price * qty)}
                            </span>
                          </div>
                        ) : null
                      })}
                    </div>
                  )
                })}
              </div>
            )
          })}
          <Separator className="bg-white/10" />
          {oneTimeTotal > 0 && monthlyTotal > 0 ? (
            <div className="space-y-3">
              <div className="space-y-1">
                <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmalig:</p>
                <div className="flex justify-between text-xs text-slate-400">
                  <span>Netto:</span>
                  <span>{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>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
                </div>
                <div className="flex justify-between text-sm font-bold text-white">
                  <span>Gesamt (brutto):</span>
                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
                </div>
              </div>
              <div className="space-y-1 pt-2 border-t border-white/10">
                <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlich:</p>
                <div className="flex justify-between text-xs text-slate-400">
                  <span>Netto:</span>
                  <span>{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>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
                </div>
                <div className="flex justify-between text-sm font-bold text-white">
                  <span>Gesamt (brutto):</span>
                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
                </div>
              </div>
            </div>
          ) : oneTimeTotal > 0 ? (
            <div className="space-y-1">
              <div className="flex justify-between text-xs text-slate-400">
                <span>Netto-Gesamtbetrag:</span>
                <span>{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>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
              </div>
              <div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
                <span>Gesamtbetrag (brutto):</span>
                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
              </div>
            </div>
          ) : (
            <div className="space-y-1">
              <div className="flex justify-between text-xs text-slate-400">
                <span>Netto-Gesamtbetrag:</span>
                <span>{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>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
              </div>
              <div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
                <span>Gesamtbetrag (brutto):</span>
                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
              </div>
            </div>
          )}
          {updatePriceModifier.label && (
            <div className="text-xs text-green-400 bg-green-500/10 p-2.5 rounded-lg border border-green-500/20 space-y-1">
              <p className="font-semibold flex items-center gap-1">
                <Check className="w-3.5 h-3.5" />
                Update-Rabatt aktiv
              </p>
              <p>{updatePriceModifier.label}</p>
            </div>
          )}
          {!allCategoriesFilled && (
            <p className="text-xs text-destructive flex items-center gap-1">
              <AlertCircle className="w-3 h-3" />
              Bitte aus jeder Pflichtkategorie einen Artikel wählen.
            </p>
          )}
          {productValidationErrors.map((err, errIdx) => (
            <p key={errIdx} className="text-xs text-destructive flex items-center gap-1">
              <AlertCircle className="w-3 h-3 text-destructive" />
              {err}
            </p>
          ))}
          {basketItems.length > 0 && (
            <div className="pt-4 border-t border-white/10 space-y-2">
              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Warenkorb ({basketItems.length}):</p>
              <div className="space-y-1.5">
                {basketItems.map((item, idx) => (
                  <div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-blue-500/50 shadow-[0_0_10px_rgba(59,130,246,0.3)]' : 'border-white/10'}`}>
                    <div className="flex flex-col">
                      <span className="text-white font-medium">{item.deviceName}</span>
                      <span className="text-[10px] text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
                        onClick={() => editBasketItem(idx)}
                        title="Kasse bearbeiten"
                      >
                        <Pencil className="w-3.5 h-3.5" />
                      </Button>
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
                        onClick={() => deleteBasketItem(idx)}
                        title="Kasse löschen"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </CardContent>
        <CardFooter className="flex flex-col gap-3 shrink-0">
          <div className="w-full space-y-2">
            <Label htmlFor="device-name" className="text-xs text-slate-400">Kassenname (optional)</Label>
            <Input
              id="device-name"
              placeholder="z.B. Hauptkasse, Theke"
              value={deviceName}
              onChange={e => setDeviceName(e.target.value)}
              className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
            />
          </div>
          <Button
            type="button"
            variant="outline"
            className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
            onClick={addToBasket}
            disabled={isNextStepDisabled}
          >
            <UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Änderungen an Kasse speichern' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
          </Button>
          <Separator className="bg-white/10 my-1" />
          <Button
            className="w-full h-12 text-lg"
            onClick={nextStep}
            disabled={basketItems.length === 0 && isNextStepDisabled}
          >
            Weiter <ChevronRight className="ml-2 w-5 h-5" />
          </Button>
          <Button variant="ghost" className="w-full text-white" onClick={prevStep}>
            Zurück zum Abrechnungsmodell
          </Button>
        </CardFooter>
    </Card>
  )
}