import React from "react";
import { EntityDetailHeader } from "@/components/shared/components/detail/EntityDetailHeader";
import { ActivityTimeline } from "@/components/shared/components/detail/ActivityTimeline";
import { Badge } from "@/components/ui/badge";

export interface AttributeDetailProps {
  data: {
    id: string;
    name: string;
    type: "text" | "number" | "boolean" | "select";
    description?: string;
    options?: string[]; // For select type
    created_at?: string;
    updated_at?: string;
  };
  context?: "sheet" | "panel";
  onEditClick?: () => void;
  onDeleteClick?: () => void;
}

export function AttributeDetail({ 
  data, 
  context = "sheet", 
  onEditClick, 
  onDeleteClick 
}: AttributeDetailProps) {
  const typeLabels = {
    text: "Text",
    number: "Zahl",
    boolean: "Ja/Nein",
    select: "Auswahl"
  };

  const typeColors = {
    text: "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800",
    number: "bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800",
    boolean: "bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800",
    select: "bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-800"
  };

  return (
    <div className="space-y-6">
      <EntityDetailHeader
        title={data.name}
        subtitle="Attribut"
        avatar={{
          initials: data.name.substring(0, 2).toUpperCase()
        }}
        editUrl={onEditClick ? undefined : `/dashboard/attributes/edit/${data.id}`}
        onDeleteClick={onDeleteClick}
        context={context}
      />

      <div className="grid grid-cols-1 gap-4">
        <div className="p-4 rounded-lg bg-muted/50 border border-border flex flex-col gap-3">
          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Details</h3>
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <span className="font-medium text-sm">Typ</span>
              <Badge className={typeColors[data.type]}>
                {typeLabels[data.type]}
              </Badge>
            </div>
            {data.description && (
              <div className="pt-2">
                <span className="font-medium text-sm block mb-1">Beschreibung</span>
                <p className="text-sm text-muted-foreground">{data.description}</p>
              </div>
            )}
            {data.type === "select" && data.options && data.options.length > 0 && (
              <div className="pt-2">
                <span className="font-medium text-sm block mb-2">Optionen</span>
                <div className="flex flex-wrap gap-1">
                  {data.options.map((option, index) => (
                    <Badge key={index} variant="outline" className="text-xs">
                      {option}
                    </Badge>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {data.created_at && (
        <ActivityTimeline
          createdAt={data.created_at}
          updatedAt={data.updated_at}
        />
      )}
    </div>
  );
}