import React from "react";
import { EntityDetailHeader } from "@/components/shared/components/detail/EntityDetailHeader";
import { ContactInfo } from "@/components/shared/components/detail/ContactInfo";
import { AddressDisplay } from "@/components/shared/components/detail/AddressDisplay";
import { ActivityTimeline } from "@/components/shared/components/detail/ActivityTimeline";

export interface CustomerDetailProps {
  data: {
    id: string;
    name: string;
    email?: string;
    phone_number?: string;
    address?: {
      street?: string;
      house_number?: string;
      zip_code?: string;
      city?: string;
      country?: string;
    };
    created_at?: string;
    updated_at?: string;
    last_order_at?: string;
    total_orders?: number;
    total_spent?: number;
  };
  context?: "sheet" | "panel";
  onEditClick?: () => void;
  onDeleteClick?: () => void;
}

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

      <div className="grid grid-cols-1 gap-4">
        <ContactInfo
          email={data.email}
          phone={data.phone_number}
        />
        
        {data.address && (
          <AddressDisplay
            address={data.address}
            title="Adresse"
          />
        )}
      </div>

      <div className="space-y-4">
        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Aktivität</h3>
        <div className="space-y-3">
          <div className="flex items-center justify-between p-3 rounded-md border border-border">
            <span className="text-muted-foreground">Erstellt am</span>
            <span className="font-medium">{data.created_at}</span>
          </div>
          {data.last_order_at && (
            <div className="flex items-center justify-between p-3 rounded-md border border-border">
              <span className="text-muted-foreground">Letzte Bestellung</span>
              <span className="font-medium">{data.last_order_at}</span>
            </div>
          )}
          {data.total_orders !== undefined && (
            <div className="flex items-center justify-between p-3 rounded-md border border-border">
              <span className="text-muted-foreground">Gesamte Bestellungen</span>
              <span className="font-medium">{data.total_orders}</span>
            </div>
          )}
          {data.total_spent !== undefined && (
            <div className="flex items-center justify-between p-3 rounded-md border border-border">
              <span className="text-muted-foreground">Gesamtausgaben</span>
              <span className="font-medium">{data.total_spent} €</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}