"use client";

import { useState, useEffect } from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { 
  Download, 
  ExternalLink, 
  Search, 
  Loader2, 
  Eye, 
  ArrowUpDown, 
  Building2, 
  User, 
  Mail, 
  MapPin, 
  Package, 
  FileText, 
  Calendar,
  Layers,
  Sparkles,
  XCircle,
  CheckCircle,
  Edit3
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { updateOrderStatus, rejectOrder, updateOrderPayload } from "@/lib/actions/orders";

interface OrdersTableProps {
  initialOrders: any[];
}

const statusLabel: Record<string, string> = {
  pending: 'Eingegangen',
  pending_approval: 'Wartet auf Freigabe',
  in_review: 'In Prüfung',
  approved: 'Freigegeben',
  active: 'Aktiviert',
  completed: 'Abgeschlossen',
  cancelled: 'Storniert',
  rejected: 'Abgelehnt',
};

const statusClass: Record<string, string> = {
  pending: 'bg-amber-500/20 text-amber-400 border border-amber-500/30',
  pending_approval: 'bg-amber-600/20 text-amber-300 border border-amber-500/40',
  in_review: 'bg-purple-500/20 text-purple-400 border border-purple-500/30',
  approved: 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30',
  active: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
  completed: 'bg-green-500/20 text-green-400 border border-green-500/30',
  cancelled: 'bg-slate-500/20 text-slate-400 border border-slate-500/30',
  rejected: 'bg-red-500/20 text-red-400 border border-red-500/30',
};

type SortField = 'date_desc' | 'date_asc' | 'price_desc' | 'price_asc' | 'order_num';

export function OrdersTable({ initialOrders }: OrdersTableProps) {
  const [orders, setOrders] = useState(initialOrders);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [sortBy, setSortBy] = useState<SortField>("date_desc");
  const [updatingId, setUpdatingId] = useState<string | null>(null);
  const [selectedOrder, setSelectedOrder] = useState<any | null>(null);
  
  // Rejection Dialog State
  const [rejectingOrder, setRejectingOrder] = useState<any | null>(null);
  const [rejectionReason, setRejectionReason] = useState("");
  const [isSubmittingReject, setIsSubmittingReject] = useState(false);

  // Preiskorrektur States
  const [isEditingSnapshot, setIsEditingSnapshot] = useState(false);
  const [editedSnapshot, setEditedSnapshot] = useState<any | null>(null);
  const [isSavingSnapshot, setIsSavingSnapshot] = useState(false);

  // Initialize editedSnapshot when selectedOrder changes
  useEffect(() => {
    if (selectedOrder) {
      setEditedSnapshot(JSON.parse(JSON.stringify(selectedOrder.order_data || {})));
      setIsEditingSnapshot(false);
    } else {
      setEditedSnapshot(null);
      setIsEditingSnapshot(false);
    }
  }, [selectedOrder]);

  const updateItemBasePrice = (itemIdx: number, newPrice: number) => {
    if (!editedSnapshot) return;
    const updatedItems = [...editedSnapshot.items];
    const item = { ...updatedItems[itemIdx] };
    item.base_price = newPrice;
    
    const moduleTotal = (item.selected_modules || []).reduce((acc: number, m: any) => acc + (m.total_price ?? (m.price * (m.quantity || 1))), 0);
    item.item_total = newPrice + moduleTotal;
    
    updatedItems[itemIdx] = item;
    recalculateSnapshot(updatedItems);
  };

  const updateModulePriceOrQty = (itemIdx: number, modIdx: number, field: 'price' | 'quantity', value: number) => {
    if (!editedSnapshot) return;
    const updatedItems = [...editedSnapshot.items];
    const item = { ...updatedItems[itemIdx] };
    const updatedModules = [...(item.selected_modules || [])];
    const mod = { ...updatedModules[modIdx] };
    
    if (field === 'price') {
      mod.price = value;
    } else {
      mod.quantity = value;
    }
    mod.total_price = mod.price * (mod.quantity || 1);
    updatedModules[modIdx] = mod;
    
    item.selected_modules = updatedModules;
    const moduleTotal = updatedModules.reduce((acc: number, m: any) => acc + (m.total_price ?? (m.price * (m.quantity || 1))), 0);
    item.item_total = (item.base_price || 0) + moduleTotal;
    
    updatedItems[itemIdx] = item;
    recalculateSnapshot(updatedItems);
  };

  const recalculateSnapshot = (updatedItems: any[]) => {
    if (!editedSnapshot) return;
    const taxRate = editedSnapshot.tax_rate ?? 19;
    const subtotal = updatedItems.reduce((acc: number, item: any) => acc + (item.item_total || 0), 0);
    const taxAmount = Math.round(subtotal * (taxRate / 100) * 100) / 100;
    const total = Math.round((subtotal + taxAmount) * 100) / 100;
    
    setEditedSnapshot({
      ...editedSnapshot,
      items: updatedItems,
      subtotal,
      tax_amount: taxAmount,
      total
    });
  };

  const handleSaveSnapshot = async () => {
    if (!editedSnapshot || !selectedOrder) return;
    setIsSavingSnapshot(true);
    try {
      const updated = await updateOrderPayload(selectedOrder.id, {
        orderSnapshot: editedSnapshot
      });
      setOrders(prev => prev.map(o => o.id === selectedOrder.id ? { ...o, order_data: editedSnapshot, total_price: editedSnapshot.total } : o));
      setSelectedOrder({ ...selectedOrder, order_data: editedSnapshot, total_price: editedSnapshot.total });
      setIsEditingSnapshot(false);
    } catch (error: any) {
      console.error(error);
      alert("Fehler beim Speichern der Änderungen: " + error.message);
    } finally {
      setIsSavingSnapshot(false);
    }
  };

  // Badge-Counter berechnen
  const countAll = orders.length;
  const countOffen = orders.filter(o => ["pending", "pending_approval", "in_review"].includes(o.status)).length;
  const countApproved = orders.filter(o => o.status === "approved").length;
  const countActive = orders.filter(o => ["active", "completed"].includes(o.status)).length;
  const countRejected = orders.filter(o => ["rejected", "cancelled"].includes(o.status)).length;

  const displaySnapshot = editedSnapshot || selectedOrder?.order_data || {};
  const displayItems = displaySnapshot.items || [];

  useEffect(() => {
    setOrders(initialOrders);
  }, [initialOrders]);

  const handleStatusChange = async (orderId: string, newStatus: 'pending' | 'pending_approval' | 'in_review' | 'approved' | 'active' | 'completed' | 'cancelled' | 'rejected') => {
    if (newStatus === 'rejected') {
      const target = orders.find(o => o.id === orderId);
      if (target) {
        setRejectingOrder(target);
        setRejectionReason("");
        return;
      }
    }

    setUpdatingId(orderId);
    try {
      await updateOrderStatus(orderId, newStatus);
      setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
      if (selectedOrder?.id === orderId) {
        setSelectedOrder((prev: any) => prev ? { ...prev, status: newStatus } : null);
      }
    } catch (error) {
      console.error(error);
      alert("Fehler beim Ändern des Status.");
    } finally {
      setUpdatingId(null);
    }
  };

  const handleConfirmReject = async () => {
    if (!rejectingOrder) return;
    setIsSubmittingReject(true);
    try {
      await rejectOrder(rejectingOrder.id, rejectionReason || "Vom Administrator abgelehnt.");
      setOrders(prev => prev.map(o => o.id === rejectingOrder.id ? { ...o, status: 'rejected' } : o));
      if (selectedOrder?.id === rejectingOrder.id) {
        setSelectedOrder((prev: any) => prev ? { ...prev, status: 'rejected' } : null);
      }
      setRejectingOrder(null);
      setRejectionReason("");
    } catch (error) {
      console.error(error);
      alert("Fehler beim Ablehnen der Anfrage.");
    } finally {
      setIsSubmittingReject(false);
    }
  };

  const filteredAndSortedOrders = orders
    .filter((order) => {
      const orderNum = (order.order_number || "").toLowerCase();
      const company = (order.customer_data?.company_name || "").toLowerCase();
      const contact = `${order.customer_data?.first_name || ""} ${order.customer_data?.last_name || ""}`.toLowerCase();
      
      const matchesSearch = 
        orderNum.includes(search.toLowerCase()) ||
        company.includes(search.toLowerCase()) ||
        contact.includes(search.toLowerCase());

      let matchesStatus = false;
      if (statusFilter === "all") matchesStatus = true;
      else if (statusFilter === "offen") matchesStatus = ["pending", "pending_approval", "in_review"].includes(order.status);
      else if (statusFilter === "approved") matchesStatus = order.status === "approved";
      else if (statusFilter === "active") matchesStatus = ["active", "completed"].includes(order.status);
      else if (statusFilter === "rejected") matchesStatus = ["rejected", "cancelled"].includes(order.status);

      return matchesSearch && matchesStatus;
    })
    .sort((a, b) => {
      if (sortBy === 'date_desc') return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
      if (sortBy === 'date_asc') return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
      if (sortBy === 'price_desc') return (b.total_price || 0) - (a.total_price || 0);
      if (sortBy === 'price_asc') return (a.total_price || 0) - (b.total_price || 0);
      if (sortBy === 'order_num') return (a.order_number || a.id).localeCompare(b.order_number || b.id);
      return 0;
    });

  return (
    <div className="space-y-4">
      {/* Filter- & Sortierleiste */}
      <div className="flex flex-col lg:flex-row gap-4 justify-between items-start lg:items-center bg-white/5 p-4 rounded-xl border border-white/5">
        <div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
          <div className="relative w-full sm:w-80">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <Input
              placeholder="Anfragenr., Firma oder Name..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-10 bg-slate-950/40 border-white/10 text-white placeholder:text-slate-500"
            />
          </div>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="sm" className="border-white/10 bg-slate-950/40 text-slate-200 gap-2 shrink-0">
                <ArrowUpDown className="w-3.5 h-3.5 text-primary" />
                <span>
                  {sortBy === 'date_desc' && 'Datum (Neueste zuerst)'}
                  {sortBy === 'date_asc' && 'Datum (Älteste zuerst)'}
                  {sortBy === 'price_desc' && 'Betrag (Höchster zuerst)'}
                  {sortBy === 'price_asc' && 'Betrag (Niedrigster zuerst)'}
                  {sortBy === 'order_num' && 'Anfragenr.'}
                </span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white">
              <DropdownMenuItem onClick={() => setSortBy('date_desc')} className="text-xs cursor-pointer">
                Datum (Neueste zuerst)
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy('date_asc')} className="text-xs cursor-pointer">
                Datum (Älteste zuerst)
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy('price_desc')} className="text-xs cursor-pointer">
                Betrag (Höchster zuerst)
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy('price_asc')} className="text-xs cursor-pointer">
                Betrag (Niedrigster zuerst)
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy('order_num')} className="text-xs cursor-pointer">
                Anfragenr.
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

        <div className="flex flex-wrap gap-1.5">
          <Button
            variant={statusFilter === "all" ? "default" : "outline"}
            size="sm"
            onClick={() => setStatusFilter("all")}
            className="text-xs gap-1.5"
          >
            Alle <Badge variant="secondary" className="bg-white/10 text-white border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countAll}</Badge>
          </Button>
          <Button
            variant={statusFilter === "offen" ? "default" : "outline"}
            size="sm"
            onClick={() => setStatusFilter("offen")}
            className="text-xs border-amber-500/20 hover:bg-amber-500/10 text-amber-400 gap-1.5"
          >
            Offen / in_review <Badge variant="secondary" className="bg-amber-500/20 text-amber-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countOffen}</Badge>
          </Button>
          <Button
            variant={statusFilter === "approved" ? "default" : "outline"}
            size="sm"
            onClick={() => setStatusFilter("approved")}
            className="text-xs border-emerald-500/20 hover:bg-emerald-500/10 text-emerald-400 gap-1.5"
          >
            Genehmigt <Badge variant="secondary" className="bg-emerald-500/20 text-emerald-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countApproved}</Badge>
          </Button>
          <Button
            variant={statusFilter === "active" ? "default" : "outline"}
            size="sm"
            onClick={() => setStatusFilter("active")}
            className="text-xs border-blue-500/20 hover:bg-blue-500/10 text-blue-400 gap-1.5"
          >
            Aktiv <Badge variant="secondary" className="bg-blue-500/20 text-blue-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countActive}</Badge>
          </Button>
          <Button
            variant={statusFilter === "rejected" ? "default" : "outline"}
            size="sm"
            onClick={() => setStatusFilter("rejected")}
            className="text-xs border-red-500/20 hover:bg-red-500/10 text-red-400 gap-1.5"
          >
            Abgelehnt <Badge variant="secondary" className="bg-red-500/20 text-red-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countRejected}</Badge>
          </Button>
        </div>
      </div>

      {/* Tabelle */}
      <div className="rounded-xl border border-white/5 bg-black/20 overflow-hidden backdrop-blur-xl">
        <Table>
          <TableHeader>
            <TableRow className="border-white/10 bg-white/5 hover:bg-transparent">
              <TableHead className="w-[140px] text-slate-200 font-bold">Anfragenr.</TableHead>
              <TableHead className="text-slate-200 font-bold">Datum</TableHead>
              <TableHead className="text-slate-200 font-bold">Kunde / Firma</TableHead>
              <TableHead className="text-slate-200 font-bold">Auswahl / Produkte</TableHead>
              <TableHead className="text-slate-200 font-bold">Gesamtbetrag</TableHead>
              <TableHead className="text-slate-200 font-bold">Status</TableHead>
              <TableHead className="text-right text-slate-200 font-bold">Aktionen</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredAndSortedOrders.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-16 text-slate-500 italic">
                  Keine Anfragen gefunden.
                </TableCell>
              </TableRow>
            ) : (
              filteredAndSortedOrders.map((order) => {
                const items = order.order_data?.items || [];
                return (
                  <TableRow key={order.id} className="border-white/5 hover:bg-white/5 transition-colors group">
                    <TableCell className="font-mono text-xs text-primary font-bold">
                      #{order.order_number || order.id.slice(0, 8)}
                    </TableCell>
                    <TableCell className="text-slate-300 text-sm whitespace-nowrap">
                      {new Date(order.created_at).toLocaleDateString('de-DE', {
                        day: '2-digit', month: '2-digit', year: 'numeric'
                      })}
                    </TableCell>
                    <TableCell>
                      <div className="font-semibold text-white text-sm">
                        {order.customer_data?.company_name || 'Privatkunde'}
                      </div>
                      <div className="text-xs text-slate-400 flex items-center gap-1 mt-0.5">
                        <User className="w-3 h-3 text-slate-500" />
                        {order.customer_data?.first_name} {order.customer_data?.last_name}
                      </div>
                    </TableCell>
                    <TableCell className="max-w-[240px]">
                      <div className="flex flex-col gap-1.5">
                        {items.slice(0, 2).map((item: any, idx: number) => (
                          <div
                            key={idx}
                            className="text-[11px] text-slate-300 leading-tight"
                          >
                            <span className="font-semibold text-white block truncate">
                              {item.device_name || 'Kasse'}: {item.product_name}
                            </span>
                            {item.selected_modules?.length > 0 && (
                              <span className="text-slate-500 block text-[10px] truncate">
                                + {item.selected_modules.map((m: any) => m.module_name || m.name).join(', ')}
                              </span>
                            )}
                          </div>
                        ))}
                        {items.length > 2 && (
                          <span className="text-[10px] text-primary font-semibold">
                            + {items.length - 2} weitere Kassen
                          </span>
                        )}
                      </div>
                    </TableCell>
                    <TableCell className="font-bold text-white text-sm whitespace-nowrap">
                      {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price || 0)}
                    </TableCell>
                    <TableCell>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild disabled={updatingId === order.id}>
                          <button className="focus:outline-none focus:ring-0 active:scale-95 disabled:pointer-events-none transition-transform duration-100">
                            <Badge className={`text-xs px-2.5 py-1 rounded cursor-pointer transition-all duration-200 hover:opacity-85 flex items-center gap-1.5 ${statusClass[order.status] ?? 'bg-slate-500/20 text-slate-300'}`}>
                              {updatingId === order.id ? (
                                <Loader2 className="w-3 h-3 animate-spin mr-1" />
                              ) : null}
                              {statusLabel[order.status] ?? order.status}
                              <span className="text-[9px] opacity-70">▼</span>
                            </Badge>
                          </button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white min-w-[170px]">
                          {Object.entries(statusLabel).map(([key, label]) => (
                            <DropdownMenuItem
                              key={key}
                              disabled={updatingId === order.id}
                              onClick={() => handleStatusChange(order.id, key as any)}
                              className={`text-xs cursor-pointer hover:bg-white/10 transition-colors focus:bg-white/10 focus:text-white ${order.status === key ? 'font-bold text-primary' : ''}`}
                            >
                              {label}
                            </DropdownMenuItem>
                          ))}
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-1.5">
                        <Button 
                          variant="outline" 
                          size="sm" 
                          onClick={() => setSelectedOrder(order)}
                          className="h-8 border-white/10 hover:bg-white/10 text-slate-200 text-xs gap-1"
                        >
                          <Eye className="w-3.5 h-3.5 text-primary" /> Details
                        </Button>
                        <Button variant="outline" size="sm" asChild className="h-8 border-amber-500/20 hover:bg-amber-500/10 text-amber-400 text-xs gap-1">
                          <a href={`/order?mode=admin_edit&orderId=${order.id}`}>
                            <Edit3 className="w-3 h-3" /> Im Wizard öffnen
                          </a>
                        </Button>
                        <Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
                          <a href={`/api/admin/orders/${order.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
                            <ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF
                          </a>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                );
              })
            )}
          </TableBody>
        </Table>
      </div>

      {/* Detail-Modal für vollständige Anfragenübersicht & Freigabe-Workflow */}
      {selectedOrder && (
        <Dialog open={!!selectedOrder} onOpenChange={(open) => !open && setSelectedOrder(null)}>
          <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto bg-slate-950 border-white/10 text-white p-6 space-y-6">
            <DialogHeader className="border-b border-white/10 pb-4">
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                      <div>
                        <div className="flex items-center gap-3">
                          <DialogTitle className="text-xl font-bold text-white flex items-center gap-2">
                            <FileText className="w-5 h-5 text-primary" />
                            Anfragenr. #{selectedOrder.order_number || selectedOrder.id.slice(0, 8)}
                          </DialogTitle>
                          <Badge className={`text-xs px-2.5 py-0.5 rounded ${statusClass[selectedOrder.status]}`}>
                            {statusLabel[selectedOrder.status] ?? selectedOrder.status}
                          </Badge>
                        </div>
                        <DialogDescription className="text-xs text-slate-400 mt-1 flex items-center gap-2">
                          <Calendar className="w-3.5 h-3.5 text-slate-500" />
                          Erstellt am {new Date(selectedOrder.created_at).toLocaleString('de-DE')}
                        </DialogDescription>
                      </div>
                      <div className="text-right">
                        <div className="text-xs text-slate-400 uppercase tracking-wider font-semibold">
                          {isEditingSnapshot ? "Vorschau Summe" : "Gesamtsumme"}
                        </div>
                        <div className="text-2xl font-extrabold text-primary">
                          {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(
                            isEditingSnapshot ? (editedSnapshot?.total || 0) : (selectedOrder.total_price || 0)
                          )}
                        </div>
                      </div>
                    </div>
                  </DialogHeader>

            {/* Kunden & Stammdaten */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="p-4 rounded-xl bg-slate-900/80 border border-white/5 space-y-2">
                <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 border-b border-white/5 pb-2">
                  <Building2 className="w-4 h-4 text-primary" />
                  Kunden- & Firmendaten
                </div>
                <div className="text-sm font-semibold text-white">
                  {selectedOrder.customer_data?.company_name || 'Keine Firma angegeben'}
                </div>
                <div className="text-xs text-slate-300 flex items-center gap-1.5">
                  <User className="w-3.5 h-3.5 text-slate-500" />
                  {selectedOrder.customer_data?.first_name} {selectedOrder.customer_data?.last_name}
                </div>
                {selectedOrder.customer_data?.email && (
                  <div className="text-xs text-slate-300 flex items-center gap-1.5">
                    <Mail className="w-3.5 h-3.5 text-slate-500" />
                    {selectedOrder.customer_data.email}
                  </div>
                )}
              </div>

              <div className="p-4 rounded-xl bg-slate-900/80 border border-white/5 space-y-2">
                <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 border-b border-white/5 pb-2">
                  <MapPin className="w-4 h-4 text-primary" />
                  Adresse & Standort
                </div>
                <div className="text-xs text-slate-300 space-y-1">
                  <div>{selectedOrder.customer_data?.street || 'Keine Straße'}</div>
                  <div>
                    {selectedOrder.customer_data?.zip} {selectedOrder.customer_data?.city}
                  </div>
                </div>
              </div>
            </div>

                  {/* Geräte & Produktauswahl (Snapshot Aufteilung) */}
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
                        <Package className="w-4 h-4 text-primary" />
                        Konfigurierte Kassen & Module ({displayItems.length})
                      </div>
                      {selectedOrder.status === 'in_review' && !isEditingSnapshot && (
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => setIsEditingSnapshot(true)}
                          className="h-7 border-primary/30 text-primary hover:bg-primary/10 text-xs font-bold gap-1 rounded-md"
                        >
                          <Edit3 className="w-3 h-3" /> Preise anpassen
                        </Button>
                      )}
                    </div>

                    {isEditingSnapshot && (
                      <div className="flex flex-col sm:flex-row sm:items-center justify-between bg-amber-500/10 border border-amber-500/20 p-3 rounded-xl gap-4 animate-pulse">
                        <span className="text-xs text-amber-400 font-semibold">Sie befinden sich im Preiskorrektur-Modus.</span>
                        <div className="flex items-center gap-2">
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => {
                              setEditedSnapshot(JSON.parse(JSON.stringify(selectedOrder.order_data || {})));
                              setIsEditingSnapshot(false);
                            }}
                            className="h-7 text-xs text-slate-300 hover:text-white"
                          >
                            Abbrechen
                          </Button>
                          <Button
                            size="sm"
                            onClick={handleSaveSnapshot}
                            disabled={isSavingSnapshot}
                            className="h-7 text-xs bg-amber-600 hover:bg-amber-500 text-white font-bold"
                          >
                            {isSavingSnapshot ? <Loader2 className="w-3 h-3 animate-spin mr-1" /> : null}
                            Änderungen speichern
                          </Button>
                        </div>
                      </div>
                    )}

                    <div className="space-y-3">
                      {displayItems.map((item: any, idx: number) => (
                        <div key={idx} className="p-4 rounded-xl bg-slate-900/90 border border-white/10 space-y-3">
                          <div className="flex items-center justify-between border-b border-white/5 pb-2">
                            <div className="flex items-center gap-2">
                              <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-primary/20 text-primary border border-primary/30">
                                {item.device_name || `Kasse #${idx + 1}`}
                              </span>
                              <span className="font-bold text-sm text-white">{item.product_name}</span>
                            </div>
                            
                            {isEditingSnapshot ? (
                              <div className="flex items-center gap-2">
                                <Label htmlFor={`price-${idx}`} className="text-[10px] text-slate-400">Preis (€):</Label>
                                <Input
                                  id={`price-${idx}`}
                                  type="number"
                                  value={item.base_price || 0}
                                  onChange={(e) => updateItemBasePrice(idx, parseFloat(e.target.value) || 0)}
                                  className="w-20 h-7 bg-slate-950 border-white/10 text-white text-xs px-2"
                                />
                              </div>
                            ) : (
                              <span className="text-xs font-bold text-slate-200">
                                {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.base_price || 0)}
                              </span>
                            )}
                          </div>

                          {/* Ausgewählte Module & Lizenzen */}
                          {item.selected_modules?.length > 0 && (
                            <div className="space-y-1.5">
                              <div className="text-[11px] font-semibold text-slate-400 flex items-center gap-1">
                                <Layers className="w-3 h-3 text-slate-500" />
                                Zusatzmodule ({item.selected_modules.length}):
                              </div>
                              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                {item.selected_modules.map((mod: any, mIdx: number) => (
                                  <div key={mIdx} className="p-2 rounded-lg bg-slate-950/60 border border-white/5 text-xs flex items-center justify-between gap-3">
                                    <span className="text-slate-300 font-medium truncate">
                                      {mod.module_name || mod.name}
                                    </span>
                                    
                                    {isEditingSnapshot ? (
                                      <div className="flex items-center gap-1.5 shrink-0">
                                        <Input
                                          type="number"
                                          title="Einzelpreis"
                                          value={mod.price || 0}
                                          onChange={(e) => updateModulePriceOrQty(idx, mIdx, 'price', parseFloat(e.target.value) || 0)}
                                          className="w-14 h-6 bg-slate-900 border-white/10 text-white text-[10px] px-1"
                                        />
                                        <span className="text-[10px] text-slate-500">x</span>
                                        <Input
                                          type="number"
                                          title="Menge"
                                          value={mod.quantity || 1}
                                          onChange={(e) => updateModulePriceOrQty(idx, mIdx, 'quantity', parseInt(e.target.value) || 1)}
                                          className="w-10 h-6 bg-slate-900 border-white/10 text-white text-[10px] px-1"
                                        />
                                      </div>
                                    ) : (
                                      <span className="text-slate-400 font-mono text-[11px] shrink-0">
                                        +{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price * (mod.quantity || 1))}
                                      </span>
                                    )}
                                  </div>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>

            {/* Workflow Freigabe & Aktionen */}
            <div className="p-4 rounded-xl bg-slate-900/90 border border-white/10 space-y-3">
              <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
                <Sparkles className="w-4 h-4 text-amber-400" />
                Freigabe-Workflow & Verwalter-Aktionen
              </div>
              <div className="flex flex-wrap items-center gap-2">
                <Button 
                  size="sm" 
                  onClick={() => handleStatusChange(selectedOrder.id, 'in_review')}
                  disabled={updatingId === selectedOrder.id}
                  className="bg-purple-600 hover:bg-purple-500 text-white text-xs gap-1.5"
                >
                  In Prüfung versetzen
                </Button>
                <Button 
                  size="sm" 
                  onClick={() => handleStatusChange(selectedOrder.id, 'approved')}
                  disabled={updatingId === selectedOrder.id}
                  className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs gap-1.5 font-bold"
                >
                  <CheckCircle className="w-3.5 h-3.5" /> Anfrage Freigeben
                </Button>
                <Button 
                  size="sm" 
                  onClick={() => handleStatusChange(selectedOrder.id, 'active')}
                  disabled={updatingId === selectedOrder.id}
                  className="bg-blue-600 hover:bg-blue-500 text-white text-xs gap-1.5 font-bold"
                >
                  Sofort Aktivieren
                </Button>
                <Button 
                  size="sm" 
                  variant="destructive"
                  onClick={() => handleStatusChange(selectedOrder.id, 'rejected')}
                  disabled={updatingId === selectedOrder.id}
                  className="text-xs gap-1.5"
                >
                  <XCircle className="w-3.5 h-3.5" /> Ablehnen
                </Button>
              </div>
            </div>

                  <DialogFooter className="border-t border-white/10 pt-4 flex flex-col sm:flex-row justify-between items-center gap-3">
                    <Button 
                      variant="ghost" 
                      size="sm" 
                      onClick={() => setSelectedOrder(null)} 
                      className="text-slate-400 hover:text-white text-xs"
                    >
                      Schließen
                    </Button>

                    <div className="flex items-center gap-2">
                      <Button variant="outline" size="sm" asChild className="h-8 border-amber-500/20 hover:bg-amber-500/10 text-amber-400 text-xs gap-1">
                        <a href={`/order?mode=admin_edit&orderId=${selectedOrder.id}`}>
                          <Edit3 className="w-3 h-3" /> Im Wizard öffnen
                        </a>
                      </Button>
                      <Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
                        <a href={`/api/admin/orders/${selectedOrder.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
                          <ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF Vorschau
                        </a>
                      </Button>
                      <Button variant="secondary" size="sm" asChild className="h-8 text-xs">
                        <a href={`/api/admin/orders/${selectedOrder.id}/download`}>
                          <Download className="w-3.5 h-3.5 mr-1" /> PDF Download
                        </a>
                      </Button>
                    </div>
                  </DialogFooter>
          </DialogContent>
        </Dialog>
      )}

      {/* Dialog für Ablehnungsbegründung */}
      {rejectingOrder && (
        <Dialog open={!!rejectingOrder} onOpenChange={(open) => !open && setRejectingOrder(null)}>
          <DialogContent className="max-w-md bg-slate-950 border-white/10 text-white p-6 space-y-4">
            <DialogHeader>
              <DialogTitle className="text-lg font-bold text-red-400 flex items-center gap-2">
                <XCircle className="w-5 h-5" />
                Anfrage Ablehnen
              </DialogTitle>
              <DialogDescription className="text-xs text-slate-400">
                Bitte geben Sie einen Grund für die Ablehnung der Anfrage #{rejectingOrder.order_number || rejectingOrder.id.slice(0, 8)} an.
              </DialogDescription>
            </DialogHeader>

            <div className="space-y-2">
              <Label className="text-xs text-slate-300">Begründung für den Partner</Label>
              <Input
                placeholder="z.B. Ungültiges Kundenprofil / Modul-Konflikt..."
                value={rejectionReason}
                onChange={(e) => setRejectionReason(e.target.value)}
                className="bg-slate-900 border-white/10 text-white text-xs"
              />
            </div>

            <DialogFooter className="gap-2">
              <Button 
                variant="ghost" 
                size="sm" 
                onClick={() => setRejectingOrder(null)} 
                disabled={isSubmittingReject}
                className="text-xs text-slate-400"
              >
                Abbrechen
              </Button>
              <Button 
                variant="destructive" 
                size="sm" 
                onClick={handleConfirmReject} 
                disabled={isSubmittingReject}
                className="text-xs gap-1 font-bold"
              >
                {isSubmittingReject ? <Loader2 className="w-3 h-3 animate-spin" /> : null}
                Anfrage definitiv ablehnen
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
    </div>
  );
}