"use client";

import { useChatStore } from "@/store/useChatStore";
import { Avatar } from "@radix-ui/react-avatar";
import { AvatarFallback, AvatarImage } from "./ui/avatar";
import { Button } from "./ui/button";
import { ArrowLeft, Edit2, Loader2 } from "lucide-react";
import ContactEdit from "./contact-edit";


interface ContactWindowProps {
    onBack?: () => void;
}

export default function ContactWindow({ onBack }: ContactWindowProps) {
    const { contact } = useChatStore();
    
    return (
        <div className="flex-1 flex flex-col h-full bg-[#efeae2] dark:bg-[#0b141a] relative">
              {/* Header */}
              <div className="h-16 px-4 flex items-center justify-between bg-[#f0f2f5] dark:bg-[#202c33] shrink-0 z-10 border-l border-gray-200 dark:border-gray-800">
                <div className="flex items-center gap-3 cursor-pointer">
                    {onBack && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="text-gray-500 dark:text-gray-400 md:hidden"
                            onClick={onBack}
                        >
                            <ArrowLeft className="h-5 w-5" />
                        </Button>
                    )}
                    <div>
                        <h3 className="font-medium text-gray-900 dark:text-gray-100">Kontak Info</h3>
                    </div>
                </div>
                <div className="flex items-center gap-1">
                   <ContactEdit/>
                </div>
            </div>
            <div className="flex flex-col items-center justify-center mt-10 gap-1">
                <Avatar  className="h-24 w-24 mb-3">
                    <AvatarImage src={contact?.profile_pic_url || ''} />
                    <AvatarFallback>{contact?.name[0]?.toUpperCase() || 'U'}</AvatarFallback>
                </Avatar>   
                <span className="font-semibold">{contact?.name} {contact?.last_name}</span>
                <span className="font-normal text-sm">{contact?.phone_number}</span>
                <span className="font-normal text-sm">Cabang {contact?.branch_name}</span>
                <span className="font-normal text-sm">{contact?.address} {contact?.city?.name}{contact?.city?.name && contact?.province?.name ? ', ' : ''} {contact?.province?.name}</span>
            </div>
        </div>
    )
}