import React from 'react';

interface WhatsAppMockupProps {
    body: string;
    variables: string[];
}

const highlightVariables = (text: string): React.ReactNode => {
    const parts = text.split(/({{[^}]+}})/g);
    return parts.map((part, index) => {
        if (/^{{[^}]+}}$/.test(part)) {
            return (
                <span key={index} className="bg-[#c6e8b0] px-1 rounded font-semibold text-[#1a6b00]">
                    {part}
                </span>
            );
        }
        return part;
    });
};

export const WhatsAppMockup = ({ body }: WhatsAppMockupProps) => {
    const lines = body.split('\n');
    // Extract CTA line — last non-empty line that looks like a URL or "Book here"
    const ctaLine = lines.find((l) => l.includes('{{booking_link}}') || l.toLowerCase().includes('book '));

    return (
        <div className="w-[260px] rounded-2xl overflow-hidden shadow-lg">
            {/* WA Header */}
            <div className="bg-[#075e54] px-3.5 py-2.5 flex items-center gap-2.5">
                <div className="w-7 h-7 rounded-full bg-[#128c7e] flex items-center justify-center flex-shrink-0">
                    <span className="text-white text-xs font-bold">R</span>
                </div>
                <span className="text-white text-xs font-semibold">Global Hospital</span>
            </div>

            {/* WA Body */}
            <div className="bg-[#e5ddd5] p-3.5 min-h-[200px]">
                <div className="bg-[#dcf8c6] rounded-lg rounded-br-none p-3 max-w-[220px] ml-auto text-xs text-[#303030] leading-relaxed shadow-xs">
                    <p className="whitespace-pre-wrap">{highlightVariables(body)}</p>
                    {ctaLine && (
                        <span className="block mt-2 p-2 bg-white rounded-md text-center text-[#075e54] font-semibold text-xs cursor-pointer">
                            Book Now →
                        </span>
                    )}
                    <p className="text-[10px] text-right text-[#667781] mt-1">2:30 PM ✓✓</p>
                </div>
            </div>
        </div>
    );
};
