"use client";

import { useParams } from "next/navigation";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { BarcodeDesignerToolbar } from "@/components/barcode/designer/BarcodeDesignerToolbar";
import { BarcodeDesignerLeftPanel } from "@/components/barcode/designer/BarcodeDesignerLeftPanel";
import { BarcodeDesignerCanvas } from "@/components/barcode/designer/BarcodeDesignerCanvas";
import { BarcodeDesignerRightPanel } from "@/components/barcode/designer/BarcodeDesignerRightPanel";
import { BarcodeDesignerProvider } from "@/contexts/BarcodeDesignerContext";

export default function BarcodeLabelDesignerPage() {
  const params = useParams();
  const labelId = (params.labelId as string) || "new";

  return (
    <DndProvider backend={HTML5Backend}>
      <BarcodeDesignerProvider labelId={labelId}>
        <div className="flex h-screen flex-col overflow-hidden bg-muted">
          <BarcodeDesignerToolbar />
          <div className="flex flex-1 overflow-hidden">
            <BarcodeDesignerLeftPanel />
            <BarcodeDesignerCanvas />
            <BarcodeDesignerRightPanel />
          </div>
        </div>
      </BarcodeDesignerProvider>
    </DndProvider>
  );
}
