'use client'

import React from 'react'
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  ChevronRight,
  ChevronLeft,
  AlertCircle,
  Check,
  ShoppingCart,
  Save,
  Plus,
} 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[]
  editingIdx: number | null
  deviceName: string
  setDeviceName: (name: string) => void
  licenseNumber: string
  setLicenseNumber: (num: string) => void
  onSaveAndProceed: () => void
  isNextStepDisabled: boolean
  hasActiveSelection: boolean
  showValidationWarning?: boolean
  prevStep: () => void
}

export function SummarySidebar({
  visibleCategories,
  selections,
  products,
  moduleQuantities,
  billingLabel,
  oneTimeTotal,
  monthlyTotal,
  oneTimeNet,
  oneTimeTax,
  oneTimeGross,
  monthlyNet,
  monthlyTax,
  monthlyGross,
  updatePriceModifier,
  allCategoriesFilled,
  productValidationErrors,
  editingIdx,
  deviceName,
  setDeviceName,
  licenseNumber,
  setLicenseNumber,
  onSaveAndProceed,
  isNextStepDisabled,
  prevStep,
}: SummarySidebarProps) {
  const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)

  const isEditing = editingIdx !== null
  const currentDeviceTitle = isEditing
    ? `Kasse ${editingIdx + 1}`
    : (deviceName.trim() || 'Neue Kasse')

  const isSaveDisabled = !allCategoriesFilled || productValidationErrors.length > 0

  return (
    <Card className="glass-dark border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full bg-slate-900/90 backdrop-blur-xl">
      {/* ─── 1. TOP HEADER (shrink-0) ─── */}
      <CardHeader className="shrink-0 py-2.5 px-4 border-b border-white/10 bg-slate-950/60">
        <div className="flex items-center justify-between gap-2">
          <CardTitle className="text-white text-sm font-bold flex items-center gap-2">
            <ShoppingCart className="w-4 h-4 text-primary" />
            <span>Kassen-Konfiguration</span>
          </CardTitle>
          <Badge
            variant="outline"
            className={`text-[10px] px-2 py-0.5 font-semibold ${
              isEditing
                ? 'border-amber-500/40 bg-amber-500/10 text-amber-400'
                : 'border-primary/40 bg-primary/10 text-primary'
            }`}
          >
            {isEditing ? `Bearbeite #${editingIdx + 1}` : 'Neuer Eintrag'}
          </Badge>
        </div>
      </CardHeader>

      {/* ─── 2. SCROLLABLE MIDDLE (flex-1 min-h-0 overflow-y-auto) ─── */}
      <CardContent className="p-4 flex-1 min-h-0 overflow-y-auto space-y-4 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
        {/* Aktuelle Kassen-Auswahl */}
        <div className="space-y-3">
          <div className="flex items-center justify-between text-xs font-bold text-slate-300 uppercase tracking-wider">
            <span>Gewählte Positionen</span>
          </div>

          {/* Selected Categories List */}
          <div className="space-y-2">
            {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-[11px] 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 (Pflicht)' : '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-0.5 text-xs">
                  <p className="text-[10px] font-semibold text-slate-400 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="pl-1.5 space-y-0.5">
                        <div className="flex justify-between text-white text-xs">
                          <span className="truncate pr-2">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Inkl.)</span>}</span>
                          <span className="tabular-nums shrink-0 font-medium">
                            {fmt(actualPrice)}
                          </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-[11px] text-slate-400 pl-2">
                              <span className="truncate pr-2">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
                              <span className="tabular-nums shrink-0 font-medium text-slate-300">
                                {fmt(mod.price * qty)}
                              </span>
                            </div>
                          ) : null
                        })}
                      </div>
                    )
                  })}
                </div>
              )
            })}
          </div>

          {/* Pricing Box */}
          <div className="p-3 rounded-xl bg-slate-950/80 border border-white/10 space-y-2 text-xs">
            {oneTimeTotal > 0 && (
              <div className="space-y-1">
                <div className="flex justify-between text-slate-400">
                  <span>Kaufpreis Kasse (netto):</span>
                  <span className="tabular-nums font-mono">{fmt(oneTimeNet)}</span>
                </div>
                <div className="flex justify-between font-bold text-white">
                  <span>Kaufpreis Kasse (brutto):</span>
                  <span className="tabular-nums font-mono text-primary">{fmt(oneTimeGross)}</span>
                </div>
              </div>
            )}
            {monthlyTotal > 0 && (
              <div className={`space-y-1 ${oneTimeTotal > 0 ? 'pt-2 border-t border-white/10' : ''}`}>
                <div className="flex justify-between text-slate-400">
                  <span>Mietpreis Kasse (netto):</span>
                  <span className="tabular-nums font-mono">{fmt(monthlyNet)} / mtl.</span>
                </div>
                <div className="flex justify-between font-bold text-white">
                  <span>Mietpreis Kasse (brutto):</span>
                  <span className="tabular-nums font-mono text-primary">{fmt(monthlyGross)} / mtl.</span>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Gerätename & Lizenznummer Eingabe */}
        <div className="pt-2 border-t border-white/10 space-y-2.5">
          <p className="text-xs font-bold text-white uppercase tracking-wider">
            {isEditing ? `Kasse anpassen` : `Kassenbezeichnung`}
          </p>
          <div className="space-y-1">
            <Label htmlFor="device-name-sidebar" className="text-[11px] text-slate-400">Kassenname (optional)</Label>
            <Input
              id="device-name-sidebar"
              placeholder="z. B. Kasse 1, Hauptkasse, Theke"
              value={deviceName}
              onChange={e => setDeviceName(e.target.value)}
              className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg"
            />
          </div>
          <div className="space-y-1">
            <Label htmlFor="license-number-sidebar" className="text-[11px] text-slate-400">Lizenznummer (optional)</Label>
            <Input
              id="license-number-sidebar"
              placeholder="z. B. LIZ-12345"
              value={licenseNumber}
              onChange={e => setLicenseNumber(e.target.value)}
              className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg font-mono uppercase"
            />
          </div>
        </div>
      </CardContent>

      {/* ─── 3. FIXED BOTTOM ACTIONS (shrink-0) ─── */}
      <CardFooter className="flex flex-col gap-2 shrink-0 p-4 border-t border-white/10 bg-slate-950/90">
        {/* Primary Action Button: Save & Proceed immediately to Step 4 */}
        <Button
          className="w-full h-11 text-xs font-bold bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/20 gap-2"
          onClick={onSaveAndProceed}
          disabled={isSaveDisabled}
        >
          {isEditing ? (
            <>
              <Save className="w-4 h-4" /> Änderungen speichern & zur Übersicht <ChevronRight className="w-4 h-4 ml-0.5" />
            </>
          ) : (
            <>
              <Plus className="w-4 h-4" /> Kasse zum Auftrag hinzufügen <ChevronRight className="w-4 h-4 ml-0.5" />
            </>
          )}
        </Button>

        {/* Back Button */}
        <Button
          variant="ghost"
          className="w-full text-slate-400 hover:text-white h-7 text-xs"
          onClick={prevStep}
        >
          <ChevronLeft className="w-3 h-3 mr-1" /> Zurück zum Abrechnungsmodell
        </Button>
      </CardFooter>
    </Card>
  )
}