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

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

export default function CustomerPhoneNumberContent({customer, handleOpenDialog}: Readonly<Props>) {
    const [expandedPhones, setExpandedPhones] = useState<number[]>([]);

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

    const copyToClipboard = async (text: string) => {
        await navigator.clipboard.writeText(text);
    };

    const handleAddPhone = () => {
        handleOpenDialog(
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Neue Telefonnummer</DialogTitle>
                    <DialogDescription>
                        Füge eine neue Telefonnummer für <strong>{customer.companyName}</strong> hinzu.
                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                    <div className="space-y-2">
                        <Label htmlFor="phone">Telefonnummer</Label>
                        <Input id="phone" placeholder="+49 123 456789"/>
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="note">Notiz</Label>
                        <Textarea id="note" placeholder="Optionale Notiz zur Telefonnummer" className="h-20"/>
                    </div>
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
                        Abbrechen
                    </Button>
                    <Button type="submit">Speichern</Button>
                </DialogFooter>
            </DialogContent>
        );
    };

    const handleEditPhone = (phone: CustomerPhoneNumber) => {
        handleOpenDialog(
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Telefonnummer bearbeiten</DialogTitle>
                    <DialogDescription>
                        Bearbeite die Telefonnummer für <strong>{customer.companyName}</strong>.
                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                    <div className="space-y-2">
                        <Label htmlFor="phone">Telefonnummer</Label>
                        <Input id="phone" defaultValue={phone.number} placeholder="+49 123 456789"/>
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="note">Notiz</Label>
                        <Textarea
                            id="note"
                            defaultValue={phone.note}
                            placeholder="Optionale Notiz zur Telefonnummer"
                            className="h-20"
                        />
                    </div>
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
                        Abbrechen
                    </Button>
                    <Button type="submit">Speichern</Button>
                </DialogFooter>
            </DialogContent>
        );
    };

    const handleDeletePhone = (phone: CustomerPhoneNumber) => {
        handleOpenDialog(
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Telefonnummer löschen</DialogTitle>
                    <DialogDescription>
                        Willst du die Telefonnummer <strong>{phone.number}</strong> von der
                        Firma <strong>{customer.companyName}</strong> löschen?
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                    <Button variant="outline" onClick={() => handleOpenDialog(null)}>
                        Abbrechen
                    </Button>
                    <Button variant="destructive" onClick={() => {
                        // Add your delete logic here
                        handleOpenDialog(null);
                    }}>
                        Löschen
                    </Button>
                </DialogFooter>
            </DialogContent>
        );
    };

    return (
        <Card className="p-4">
            <div className="flex justify-between items-start">
                <div className="flex items-center gap-2">
                    <Phone className="w-4 h-4 text-muted-foreground"/>
                    <h2 className="text-lg font-semibold">Telefonnummern</h2>
                </div>
                <Button
                    size="icon"
                    variant="ghost"
                    onClick={handleAddPhone}
                >
                    <Plus className="w-4 h-4"/>
                </Button>
            </div>
            <div className="space-y-1 mt-2">
                {customer.phoneNumbers.map((phone, 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-center justify-between">
                                <button
                                    type="button"
                                    className="flex items-center gap-2 flex-1 text-left"
                                    onClick={() => togglePhone(index)}
                                >
                                    <div className="text-muted-foreground">
                                        {expandedPhones.includes(index) ?
                                            <ChevronDown className="w-4 h-4"/> :
                                            <ChevronRight className="w-4 h-4"/>
                                        }
                                    </div>
                                    <span className="font-medium">{phone.number}</span>
                                </button>
                                <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                size="icon"
                                                variant="ghost"
                                                onClick={() => copyToClipboard(phone.number)}
                                            >
                                                <Copy className="w-4 h-4"/>
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>Kopieren</TooltipContent>
                                    </Tooltip>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                size="icon"
                                                variant="ghost"
                                                onClick={() => handleEditPhone(phone)}
                                            >
                                                <Pencil className="w-4 h-4"/>
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>Bearbeiten</TooltipContent>
                                    </Tooltip>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <Button
                                                size="icon"
                                                variant="ghost"
                                                onClick={() => handleDeletePhone(phone)}
                                            >
                                                <Trash2 className="w-4 h-4 text-destructive"/>
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>Löschen</TooltipContent>
                                    </Tooltip>
                                </div>
                            </div>
                            <AnimatePresence>
                                {expandedPhones.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 pl-6 text-sm space-y-1">
                                            {phone.note && (
                                                <p className="text-muted-foreground">
                                                    {phone.note}
                                                </p>
                                            )}
                                            <p className="text-xs text-muted-foreground">
                                                Erstellt von {phone.creator} am {" "}
                                                {new Date(phone.createdAt).toLocaleDateString()}
                                            </p>
                                        </div>
                                    </motion.div>
                                )}
                            </AnimatePresence>
                        </div>
                    </motion.div>
                ))}
            </div>
        </Card>
    );
}