'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'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'

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
  licenseNumber: string
  setLicenseNumber: (num: 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,
  licenseNumber,
  setLicenseNumber,
  addToBasket,
  isNextStepDisabled,
  hasActiveSelection,
  nextStep,
  prevStep,
}: SummarySidebarProps) {
  const [isOpen, setIsOpen] = React.useState(false)
  const [selectedBasketIdx, setSelectedBasketIdx] = React.useState<number | null>(null)

  // When editing a basket item via pencil, open the modal for that item
  const handleEditBasketItem = (idx: number) => {
    editBasketItem(idx)
    setIsOpen(true)
  }

  const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)

  return (
    <div className="h-full flex flex-col">
      <Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
        <CardHeader className="shrink-0 pb-3">
          <CardTitle className="text-white text-lg">Zusammenfassung</CardTitle>
        </CardHeader>
        <CardContent className="p-5 pt-0 flex-1 flex flex-col overflow-hidden gap-3">
          
          {/* Active Selections & Price - scrollable */}
          <div className="space-y-3 flex-1 overflow-y-auto pr-1 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.5">
                  {cat.is_required ? (
                    <AlertCircle className="w-3 h-3 text-destructive shrink-0" />
                  ) : (
                    <span className="w-3 h-3 inline-block shrink-0" />
                  )}
                  <span>{cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}</span>
                </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">
                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{cat.name}</p>
                  {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 tabular-nums">
                            {fmt(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 tabular-nums">
                                {fmt(mod.price * qty)}
                              </span>
                            </div>
                          ) : null
                        })}
                      </div>
                    )
                  })}
                </div>
              )
            })}

            {/* Pricing block */}
            <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 className="tabular-nums">{fmt(oneTimeNet)}</span>
                  </div>
                  <div className="flex justify-between text-xs text-slate-400">
                    <span>zzgl. 19% MwSt.:</span>
                    <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                  </div>
                  <div className="flex justify-between text-sm font-bold text-white">
                    <span>Gesamt (brutto):</span>
                    <span className="tabular-nums">{fmt(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 className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
                  </div>
                  <div className="flex justify-between text-xs text-slate-400">
                    <span>zzgl. 19% MwSt.:</span>
                    <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                  </div>
                  <div className="flex justify-between text-sm font-bold text-white">
                    <span>Gesamt (brutto):</span>
                    <span className="tabular-nums">{fmt(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 className="tabular-nums">{fmt(oneTimeNet)}</span>
                </div>
                <div className="flex justify-between text-xs text-slate-400">
                  <span>zzgl. 19% MwSt.:</span>
                  <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                </div>
                <div className="flex justify-between text-base font-bold text-sky-400">
                  <span>Gesamtbetrag (brutto):</span>
                  <span className="tabular-nums">{fmt(oneTimeGross)}</span>
                </div>
              </div>
            ) : (
              <div className="space-y-1">
                <div className="flex justify-between text-xs text-slate-400">
                  <span>Netto-Gesamtbetrag:</span>
                  <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
                </div>
                <div className="flex justify-between text-xs text-slate-400">
                  <span>zzgl. 19% MwSt.:</span>
                  <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                </div>
                <div className="flex justify-between text-base font-bold text-sky-400">
                  <span>Gesamtbetrag (brutto):</span>
                  <span className="tabular-nums">{fmt(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>
            ))}
          </div>

          {/* Kassen-Liste unten (selectable) */}
          {basketItems.length > 0 && (
            <div className="shrink-0 pt-3 pb-2 mb-4 border-t border-white/10 space-y-3">
              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
              <div className="flex flex-wrap gap-2 max-h-36 overflow-y-auto pr-1 pb-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
                {basketItems.map((item, idx) => (
                  <button
                    key={idx}
                    onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
                    className={`flex items-center gap-2 text-xs px-3 py-2.5 rounded-lg border transition-all duration-200 text-left group ${
                      selectedBasketIdx === idx
                        ? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
                        : idx === editingIdx
                        ? 'bg-blue-500/10 border-blue-500/30 text-white'
                        : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-white'
                    }`}
                  >
                    <span className="font-medium truncate max-w-[120px]">{item.deviceName}</span>
                    {item.licenseNumber && (
                      <span className="text-[10px] text-slate-500 truncate max-w-[80px]">{item.licenseNumber}</span>
                    )}
                  </button>
                ))}
              </div>

              {/* Selected basket item actions */}
              {selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
                <div className="flex items-center gap-2 pt-2 border-t border-white/5">
                  <div className="flex-1 min-w-0">
                    <p className="text-xs text-white font-medium truncate">{basketItems[selectedBasketIdx].deviceName}</p>
                    <p className="text-[10px] text-slate-500 capitalize">
                      {basketItems[selectedBasketIdx].billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
                      {basketItems[selectedBasketIdx].licenseNumber ? ` · ${basketItems[selectedBasketIdx].licenseNumber}` : ''}
                    </p>
                  </div>
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="w-7 h-7 hover:bg-sky-500/20 text-sky-400 hover:text-sky-300"
                    onClick={() => handleEditBasketItem(selectedBasketIdx)}
                    title="Name / Lizenz bearbeiten"
                  >
                    <Pencil className="w-3.5 h-3.5" />
                  </Button>
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="w-7 h-7 hover:bg-red-500/20 text-red-400 hover:text-red-300"
                    onClick={() => {
                      deleteBasketItem(selectedBasketIdx)
                      setSelectedBasketIdx(null)
                    }}
                    title="Kasse löschen"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </Button>
                </div>
              )}
            </div>
          )}
        </CardContent>
        <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-0">
          <Button
            type="button"
            variant="outline"
            className="w-full border-sky-500/40 bg-sky-500/10 text-sky-200 hover:bg-sky-500/20 hover:text-white gap-2 h-9 text-xs font-semibold shadow-sm"
            onClick={() => setIsOpen(true)}
            disabled={!hasActiveSelection && isNextStepDisabled}
          >
            <UserPlus className="w-3.5 h-3.5" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : '+ Kasse anlegen')}
          </Button>
          <Button
            className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 to-sky-500 hover:from-blue-500 hover:to-sky-400"
            onClick={nextStep}
            disabled={basketItems.length === 0 && isNextStepDisabled}
          >
            Weiter <ChevronRight className="ml-1 w-4 h-4" />
          </Button>
          <Button variant="ghost" className="w-full text-slate-400 hover:text-white h-8 text-xs" onClick={prevStep}>
            Zurück zum Abrechnungsmodell
          </Button>
        </CardFooter>
      </Card>

      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent className="bg-slate-900 border border-slate-800 text-white rounded-2xl max-w-md p-6">
          <DialogHeader>
            <DialogTitle className="text-lg font-bold text-white">
              {editingIdx !== null ? 'Kasse bearbeiten' : 'Kasse anlegen'}
            </DialogTitle>
            <DialogDescription className="text-slate-400 text-xs mt-1">
              Geben Sie den Namen und die Lizenznummer für diese Kasse ein.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="device-name-modal" className="text-xs text-slate-400">Kassenname (optional)</Label>
              <Input
                id="device-name-modal"
                placeholder={`z.B. Kasse ${basketItems.length + 1}, 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>
            <div className="space-y-2">
              <Label htmlFor="license-number-modal" className="text-xs text-slate-400">Lizenznummer (optional)</Label>
              <Input
                id="license-number-modal"
                placeholder="z.B. LIZ-12345 (eindeutig)"
                value={licenseNumber}
                onChange={e => setLicenseNumber(e.target.value)}
                className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
              />
            </div>
          </div>
          <DialogFooter className="flex flex-row justify-end gap-2 mt-4">
            <Button
              type="button"
              variant="ghost"
              className="text-slate-400 hover:text-white"
              onClick={() => setIsOpen(false)}
            >
              Abbrechen
            </Button>
            <Button
              type="button"
              className="h-10"
              onClick={() => {
                addToBasket()
                setIsOpen(false)
              }}
            >
              Speichern
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}