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";
import { User } from "lucide-react";

export interface UserDetailProps {
  data: {
    id: string;
    firstName: string;
    lastName: string;
    email: string;
    role: "user" | "admin";
    created_at?: string;
    updated_at?: string;
    last_login?: string;
  };
  context?: "sheet" | "panel";
  onEditClick?: () => void;
  onDeleteClick?: () => void;
}

export function UserDetail({ 
  data, 
  context = "sheet", 
  onEditClick, 
  onDeleteClick 
}: UserDetailProps) {
  const initials = `${data.firstName?.[0] || ""}${data.lastName?.[0] || ""}`.toUpperCase();
  const fullName = `${data.firstName} ${data.lastName}`.trim();

  const roleColors = {
    admin: "default" as const,
    user: "secondary" as const
  };

  const roleLabels = {
    admin: "Administrator",
    user: "Benutzer"
  };

  return (
    <div className="space-y-6">
      <EntityDetailHeader
        title={fullName}
        subtitle={data.email}
        avatar={{
          initials: initials || undefined,
          fallback: <User className="h-8 w-8" />
        }}
        editUrl={onEditClick ? undefined : `/dashboard/users/${data.id}`}
        onDeleteClick={onDeleteClick}
        context={context}
      />

      <div className="space-y-4">
        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Benutzerdaten</h3>
        <div className="grid grid-cols-1 gap-3">
          <div className="flex items-center justify-between p-3 rounded-md border border-border">
            <div className="flex items-center gap-3">
              <div className="h-8 w-8 rounded-full bg-background flex items-center justify-center border text-muted-foreground">
                <User className="h-4 w-4" />
              </div>
              <span className="font-medium">Rolle</span>
            </div>
            <Badge variant={roleColors[data.role]}>
              {roleLabels[data.role]}
            </Badge>
          </div>
          
          <div className="flex items-center justify-between p-3 rounded-md border border-border">
            <span className="font-medium">E-Mail</span>
            <a href={`mailto:${data.email}`} className="text-blue-500 hover:underline">
              {data.email}
            </a>
          </div>
        </div>
      </div>

      {data.created_at && (
        <ActivityTimeline
          createdAt={data.created_at}
          updatedAt={data.updated_at}
          additionalEvents={
            data.last_login ? [{
              title: "Letzte Anmeldung",
              date: data.last_login
            }] : undefined
          }
        />
      )}
    </div>
  );
}