rheinsw-mono-repo/internal_frontend/components/customers/details/sub/CustomerNotesContent.tsx

import React, {useState} from 'react';
import {motion, AnimatePresence} from "framer-motion";
import {Card} from "@/components/ui/card";
import {Button} from "@/components/ui/button";
import {ChevronDown, ChevronRight, Pencil, Plus, Trash2, Notebook} from "lucide-react";
import {Customer, CustomerNote} from "@/services/customers/entities/customer";
import {
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import {Label} from "@/components/ui/label";
import {Textarea} from "@/components/ui/textarea";
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";

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

export default function CustomerNotesContent({customer, handleOpenDialog}: Readonly<Props>) {
    const [expandedNotes, setExpandedNotes] = useState<number[]>([]);

    const toggleNote = (index: number) => {
        setExpandedNotes(prev =>
            prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
        );
    };

    const handleAddNote = () => {
        handleOpenDialog(
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Neue Notiz hinzufügen</DialogTitle>
                    <DialogDescription>
                        Füge eine neue Notiz für {customer.name} hinzu.
                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                    <div className="space-y-2">
                        <Label htmlFor="note">Notiz</Label>
                        <Textarea
                            id="note"
                            placeholder="Schreib hier deine Notiz..."
                            className="min-h-[150px]"
                        />
                    </div>
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
                        Abbrechen
                    </Button>
                    <Button type="submit">
                        Speichern
                    </Button>
                </DialogFooter>
            </DialogContent>
        );
    };

    const handleEditNote = (note: CustomerNote) => {
        handleOpenDialog(
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Notiz bearbeiten</DialogTitle>
                    <DialogDescription>
                        Bearbeite deine Notiz hier.
                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                    <div className="space-y-2">
                        <Label htmlFor="note">Notiz</Label>
                        <Textarea
                            id="note"
                            defaultValue={note.text}
                            className="min-h-[150px]"
                        />
                    </div>
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
                        Abbrechen
                    </Button>
                    <Button type="submit">
                        Speichern
                    </Button>
                </DialogFooter>
            </DialogContent>
        );
    };

    const handleDeleteNote = (note: CustomerNote) => {
        handleOpenDialog(
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Notiz löschen</DialogTitle>
                    <DialogDescription>
                        Willst du diese Notiz von der Firma <strong>{customer.companyName}</strong> wirklich löschen?
                    </DialogDescription>
                </DialogHeader>
                <div className="py-4 text-sm text-muted-foreground">
                    {note.text}
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
                        Abbrechen
                    </Button>
                    <Button variant="destructive" onClick={() => {
                        // Handle delete
                        handleOpenDialog(null);
                    }}>
                        Löschen
                    </Button>
                </DialogFooter>
            </DialogContent>
        );
    };

    return (
        <Card className="p-4 pb-2 md:col-span-2">
            <div className="flex justify-between items-start">
                <div className="flex items-center gap-2">
                    <Notebook className="w-4 h-4 text-muted-foreground"/>
                    <h2 className="text-lg font-semibold">Notizen</h2>
                </div>
                <Button
                    size="icon"
                    variant="ghost"
                    onClick={handleAddNote}
                >
                    <Plus className="w-4 h-4"/>
                </Button>
            </div>
            <div className="space-y-1 mt-2">
                {customer.notes.map((note, index) => (
                    <motion.div
                        key={index}
                        initial={false}
                        className="group rounded-md hover:bg-muted/50 transition-colors"
                    >
                        <div className="px-2 py-1.5">
                            <div className="flex items-start gap-2">
                                <button
                                    type="button"
                                    className="text-muted-foreground mt-1"
                                    onClick={() => toggleNote(index)}
                                >
                                    {expandedNotes.includes(index) ?
                                        <ChevronDown className="w-4 h-4"/> :
                                        <ChevronRight className="w-4 h-4"/>
                                    }
                                </button>
                                <div className="flex-1">
                                    <div className="flex justify-between items-start gap-2">
                                        <div
                                            className="flex-1 font-medium cursor-pointer"
                                            onClick={() => toggleNote(index)}
                                        >
                                            {note.text}
                                        </div>
                                        <div
                                            className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
                                            <Tooltip>
                                                <TooltipTrigger asChild>
                                                    <Button
                                                        size="icon"
                                                        variant="ghost"
                                                        onClick={() => handleEditNote(note)}
                                                    >
                                                        <Pencil className="w-4 h-4"/>
                                                    </Button>
                                                </TooltipTrigger>
                                                <TooltipContent>Bearbeiten</TooltipContent>
                                            </Tooltip>
                                            <Tooltip>
                                                <TooltipTrigger asChild>
                                                    <Button
                                                        size="icon"
                                                        variant="ghost"
                                                        onClick={() => handleDeleteNote(note)}
                                                    >
                                                        <Trash2 className="w-4 h-4 text-destructive"/>
                                                    </Button>
                                                </TooltipTrigger>
                                                <TooltipContent>Löschen</TooltipContent>
                                            </Tooltip>
                                        </div>
                                    </div>
                                    <AnimatePresence>
                                        {expandedNotes.includes(index) && (
                                            <motion.div
                                                initial={{height: 0, opacity: 0}}
                                                animate={{height: "auto", opacity: 1}}
                                                exit={{height: 0, opacity: 0}}
                                                transition={{duration: 0.2}}
                                                className="overflow-hidden"
                                            >
                                                <div className="pt-2 text-sm">
                                                    <p className="text-xs text-muted-foreground">
                                                        Erstellt von {note.creator} am {" "}
                                                        {new Date(note.createdAt).toLocaleString()}
                                                    </p>
                                                </div>
                                            </motion.div>
                                        )}
                                    </AnimatePresence>
                                </div>
                            </div>
                        </div>
                    </motion.div>
                ))}
            </div>
        </Card>
    );
}