import {Button} from "@/components/ui/button";
import {Mail, Pencil, Building, MapPin, User, Copy} from "lucide-react";
import {Card} from "@/components/ui/card";
import React from "react";
import {
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
import {Customer} from "@/services/customers/entities/customer";

interface Props {
    customer: Customer,
    handleOpenDialog: (content: React.ReactNode) => void;
}

export default function ContactInformationContent({customer, handleOpenDialog}: Readonly<Props>) {
    const copyToClipboard = async (text: string) => {
        await navigator.clipboard.writeText(text);
    };

    const handleEditClick = () => {
        handleOpenDialog(
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>Kontaktinformationen bearbeiten</DialogTitle>
                    <DialogDescription>
                        Bearbeite hier die Kontaktinformationen für {customer.name}.
                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                    {/* Add your form fields here */}
                    <p className="text-sm text-muted-foreground italic">Form fields will go here.</p>
                    <div className="rounded-lg border bg-muted/40 p-4 space-y-2">
                        <p className="text-sm"><span className="text-muted-foreground">Name:</span> {customer.name}</p>
                        <p className="text-sm"><span className="text-muted-foreground">E-Mail:</span> {customer.email}
                        </p>
                        <p className="text-sm"><span
                            className="text-muted-foreground">Firma:</span> {customer.companyName}</p>
                        <p className="text-sm">
                            <span
                                className="text-muted-foreground">Adresse:</span> {customer.street}, {customer.zip} {customer.city}
                        </p>
                    </div>
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>Abbrechen</Button>
                    <Button type="submit">Speichern</Button>
                </DialogFooter>
            </DialogContent>
        );
    };

    return (
        <Card className="p-4">
            <div className="flex justify-between items-start">
                <div className="flex items-center gap-2">
                    <Mail className="w-4 h-4 text-muted-foreground"/>
                    <h2 className="text-lg font-semibold">Kontaktinformationen</h2>
                </div>
                <Button
                    size="icon"
                    variant="ghost"
                    onClick={handleEditClick}
                >
                    <Pencil className="w-4 h-4"/>
                </Button>
            </div>
            <div className="space-y-3 mt-2">
                {[
                    {icon: User, label: "Name", value: customer.name},
                    {icon: Mail, label: "E-Mail", value: customer.email, copyable: true},
                    {icon: Building, label: "Firma", value: customer.companyName},
                    {icon: MapPin, label: "Adresse", value: `${customer.street}, ${customer.zip} ${customer.city}`}
                ].map((item, index) => (
                    <div key={index}
                         className="group flex items-start gap-3 rounded-md p-1.5 hover:bg-muted/50 transition-colors">
                        <item.icon className="h-4 w-4 text-muted-foreground mt-0.5"/>
                        <div className="flex-1">
                            <p className="text-xs text-muted-foreground">{item.label}</p>
                            <div className="flex items-center justify-between gap-2">
                                <p className="text-sm font-medium">{item.value}</p>
                                {item.copyable && (
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                size="icon"
                                                variant="ghost"
                                                className="opacity-0 group-hover:opacity-100 transition-opacity"
                                                onClick={() => copyToClipboard(item.value)}
                                            >
                                                <Copy className="h-4 w-4"/>
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>Kopieren</TooltipContent>
                                    </Tooltip>
                                )}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </Card>
    );
}