"use client";

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { ExternalLink, CreditCard, Box, User, Package, Edit, MapPin, Percent } from "lucide-react";
import { 
  TaxClassDetail,
  ProductDetail,
  OrderDetail,
  ShipmentDetail,
  SupplierDetail,
  ManufacturerDetail,
  CustomerDetail,
  UserDetail,
  EuResponsiblePersonDetail,
  BrandDetail,
  AttributeDetail,
  ActivityTimeline,
  EntityDetailHeader,
  DetailSection,
  DetailStatCard,
  ContactInfo,
  StatusBadges,
  DetailView,
  DetailInfoList,
  DetailInfoItem
} from "@/components/shared/components/detail";
import {
  SupplierForm,
  TaxClassForm,
  ManufacturerForm,
  BrandForm,
  AttributeForm,
  CustomerForm,
  UserForm,
  EuResponsiblePersonForm,
  ShipmentForm
} from "../entity-detail";

// Enhanced type definitions with proper typing
type EntityTypeType = 
  | "order" 
  | "customer" 
  | "product" 
  | "user" 
  | "supplier" 
  | "eu-responsible-person" 
  | "shipment" 
  | "tax-class" 
  | "manufacturer" 
  | "brand" 
  | "attribute" 
  | "generic";

interface EntityDetailSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  data: any;
  type: EntityTypeType;
}

interface EntityDetailPanelProps {
  data: any;
  type: EntityTypeType;
  mode?: "panel" | "sidebar"; // panel = always visible with empty fields, sidebar = conditional
  onDataChange?: () => void; // Callback to refresh data in parent component
  onCancel?: () => void; // Callback to cancel editing and return to create mode
}


// Main EntityDetailSheet component
export function EntityDetailSheet({
  open,
  onOpenChange,
  data,
  type,
}: EntityDetailSheetProps) {
  if (!data) return null;

  const renderContent = () => {
    switch (type) {
      case "order":
        return <OrderDetail data={data} context="sheet" />;
      case "product":
        return <ProductDetail data={data} context="sheet" />;
      case "customer":
        return <CustomerDetail data={data} context="sheet" />;
      case "user":
        return <UserDetail data={data} context="sheet" />;
      case "supplier":
        return <SupplierDetail data={data} context="sheet" />;
      case "eu-responsible-person":
        return <EuResponsiblePersonDetail data={data} context="sheet" />;
      case "shipment":
        return <ShipmentDetail data={data} context="sheet" />;
      case "tax-class":
        return <TaxClassDetail data={data} context="sheet" />;
      case "manufacturer":
        return <ManufacturerDetail data={data} context="sheet" />;
      case "brand":
        return <BrandDetail data={data} context="sheet" />;
      case "attribute":
        return <AttributeDetail data={data} context="sheet" />;
      default:
        return <GenericDetailContent data={data} context="sheet" />;
    }
  };

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="w-full !max-w-none sm:w-[540px] md:w-[600px] lg:w-[33vw] overflow-hidden flex flex-col p-0">
        <div className="h-full overflow-y-auto">
            <div className="p-6">
                {renderContent()}
            </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}

// Main EntityDetailPanel component
export function EntityDetailPanel({
  data,
  type,
  mode = "sidebar",
  onDataChange,
  onCancel,
}: EntityDetailPanelProps) {
  // For panel mode (always visible), show empty form fields
  // For sidebar mode (conditional), show placeholder when no data
  if (mode === "panel") {
    return (
      <div className="bg-card border border-border rounded-lg overflow-hidden">
        <div className="overflow-y-auto">
          <div className="p-6">
            {(() => {
              const commonProps = {
                initialData: data as any,
                onDataChange,
                onCancel,
                onSave: onDataChange
              };

              switch (type) {
                case "tax-class":
                  return <TaxClassForm {...commonProps} />;
                case "supplier":
                  return <SupplierForm {...commonProps} />;
                case "manufacturer":
                  return <ManufacturerForm {...commonProps} />;
                case "customer":
                  return <CustomerForm {...commonProps} />;
                case "user":
                  return <UserForm {...commonProps} />;
                case "eu-responsible-person":
                  return <EuResponsiblePersonForm {...commonProps} />;
                case "brand":
                  return <BrandForm {...commonProps} />;
                case "attribute":
                  return <AttributeForm {...commonProps} />;
                case "shipment":
                  return <ShipmentForm {...commonProps} />;
                default:
                  return <div className="text-muted-foreground">Panel content not implemented for {type}</div>;
              }
            })()}
          </div>
        </div>
      </div>
    );
  }

  // For sidebar mode, show placeholder when no data
  if (!data) {
    return (
      <div className="h-full flex items-center justify-center text-muted-foreground">
        <div className="text-center">
          <div className="text-4xl mb-2">📋</div>
          <p>Wählen Sie einen Eintrag aus der Tabelle aus</p>
        </div>
      </div>
    );
  }

  const renderContent = () => {
    switch (type) {
      case "order":
        return <OrderDetail data={data} context="panel" />;
      case "product":
        return <ProductDetail data={data} context="panel" />;
      case "customer":
        return <CustomerDetail data={data} context="panel" />;
      case "user":
        return <UserDetail data={data} context="panel" />;
      case "supplier":
        return <SupplierDetail data={data} context="panel" />;
      case "eu-responsible-person":
        return <EuResponsiblePersonDetail data={data} context="panel" />;
      case "shipment":
        return <ShipmentDetail data={data} context="panel" />;
      case "tax-class":
        return <TaxClassDetail data={data} context="panel" />;
      case "manufacturer":
        return <ManufacturerDetail data={data} context="panel" />;
      case "brand":
        return <BrandDetail data={data} context="panel" />;
      case "attribute":
        return <AttributeDetail data={data} context="panel" />;
      default:
        return <GenericDetailContent data={data} context="panel" />;
    }
  };

  return (
    <div className="h-full bg-card border border-border rounded-lg overflow-hidden">
      <div className="h-full overflow-y-auto">
        <div className="p-6">
          {renderContent()}
        </div>
      </div>
    </div>
  );
}



function GenericDetailContent({ data, context = "sheet" }: { data: Record<string, unknown>; context?: "sheet" | "panel" }) {
  return (
    <DetailView context={context}>
      <DetailSection title="Details">
        <DetailInfoList>
          {Object.entries(data).map(([key, value]) => (
            <DetailInfoItem
              key={key}
              label={key.replace(/_/g, ' ')}
              value={String(value)}
            />
          ))}
        </DetailInfoList>
      </DetailSection>
    </DetailView>
  );
}