"use client";

import React from "react";
import { SupportAgent } from "@/types/tracking.types";
import { Phone, MessageCircle, CheckCircle } from "lucide-react";
import { useTranslations } from "next-intl";

interface CustomerSupportCardProps {
    agent: SupportAgent;
}

/**
 * Customer support card — displays agent photo, name, and contact buttons.
 * Uses Lucide icons for phone, WhatsApp, and support actions.
 */
export default function CustomerSupportCard({ agent }: CustomerSupportCardProps) {
    const t = useTranslations("track-order");
    const handleWhatsAppClick = () => {
        window.open(`https://wa.me/${agent.whatsappNumber.replace(/\+/g, '')}`, '_blank');
    };

    const handlePhoneClick = () => {
        window.location.href = `tel:${agent.phoneNumber}`;
    };

    const handleSupportClick = () => {
        console.log("Support clicked");
    };

    return (
        <div className="bg-white dark:bg-surface-dark border border-gray-200 dark:border-border-dark rounded-2xl sm:rounded-3xl flex flex-col sm:flex-row items-center h-full relative overflow-visible p-4 sm:p-0">
            {/* Right Side - Text and Buttons */}
            <div className="flex-1 flex flex-col items-center justify-center text-center sm:text-right p-2 sm:p-4 md:p-6 order-2 sm:order-1">
                <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-[280px] mb-3 sm:mb-4">
                    {t("support-message")}
                </p>
                <div className="flex gap-2 items-center justify-center">
                    <button
                        onClick={handlePhoneClick}
                        className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[#2E8B57] text-white flex items-center justify-center hover:opacity-90 transition"
                        aria-label="Phone"
                    >
                        <Phone className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                    </button>
                    <button
                        onClick={handleWhatsAppClick}
                        className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[#2E8B57] text-white flex items-center justify-center hover:opacity-90 transition"
                        aria-label="WhatsApp"
                    >
                        <MessageCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                    </button>
                    <button
                        onClick={handleSupportClick}
                        className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[#2E8B57] text-white flex items-center justify-center hover:opacity-90 transition"
                        aria-label="Support"
                    >
                        <CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                    </button>
                </div>
            </div>

            {/* Vertical Divider - Hidden on mobile */}
            <div className="hidden sm:block h-16 md:h-24 w-[1px] bg-black dark:bg-white self-center order-2" />

            {/* Horizontal Divider - Visible on mobile only */}
            <div className="sm:hidden w-full border-t border-gray-200 dark:border-gray-700 my-3 order-3" />

            {/* Left Side - Agent Photo and Info */}
            <div className="flex-1 flex flex-row-reverse sm:flex-row items-center justify-center gap-3 sm:gap-5 p-2 sm:p-4 md:p-6 order-1 sm:order-3">
                <div className="flex flex-col items-center text-center min-w-[80px] sm:min-w-[100px] md:min-w-[120px]">
                    <h3 className="font-bold text-sm sm:text-base text-gray-800 dark:text-gray-100 whitespace-nowrap">
                        {agent.name}
                    </h3>
                    <p className="text-gray-500 dark:text-gray-400 text-xs sm:text-sm mt-1">
                        {agent.title}
                    </p>
                </div>

                <div className="relative">
                    {/* Profile picture with online indicator */}
                    <img
                        alt={agent.name}
                        className="w-16 h-16 sm:w-20 sm:h-20 md:w-28 md:h-28 rounded-full object-cover border-2 sm:border-4 border-white dark:border-gray-700 shadow-lg"
                        src={agent.image}
                        onError={(e) => {
                            const target = e.currentTarget;
                            target.onerror = null;
                            target.src = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="%232E8B57"/><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="80" fill="white" font-family="Arial">👤</text></svg>`)}`;
                        }}
                    />
                    {agent.isOnline && (
                        <span className="absolute bottom-0 right-0 w-3 h-3 sm:w-4 sm:h-4 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full" />
                    )}
                </div>
            </div>
        </div>
    );
}