components/FloatingConcierge.tsx

import React, { useState } from 'react';
import { Phone, MessageCircle, X, ChevronLeft } from 'lucide-react';
import { Language, AdminConfig } from '../types';
import { TRANSLATIONS } from '../constants/translations';

interface FloatingConciergeProps {
  language: Language;
  config: AdminConfig;
}

export const FloatingConcierge: React.FC<FloatingConciergeProps> = ({ language, config }) => {
  const [isOpen, setIsOpen] = useState(false);
  const t = TRANSLATIONS[language];

  const handleContact = (type: 'phone' | 'wechat') => {
    if (type === 'phone' && config.contactPhone) {
      window.location.href = `tel:${config.contactPhone}`;
    }
    // WeChat logic usually involves showing a QR code, handled by the UI expansion
  };

  if (!isOpen) {
    return (
      <button 
        onClick={() => setIsOpen(true)}
        className="fixed right-0 top-1/2 -translate-y-1/2 z-40 bg-rose-600 text-white p-3 rounded-l-xl shadow-lg hover:bg-rose-700 transition-all flex flex-col items-center gap-1 group"
        aria-label="Open Concierge"
      >
        <MessageCircle className="w-5 h-5 animate-pulse" />
        <span className="text-[10px] font-bold writing-vertical-lr hidden sm:block pt-1">咨询</span>
        <ChevronLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
      </button>
    );
  }

  return (
    <div className="fixed right-4 top-1/2 -translate-y-1/2 z-50 animate-fade-in">
      <div className="bg-white rounded-2xl shadow-2xl p-5 border border-rose-100 w-64 relative">
        <button 
          onClick={() => setIsOpen(false)}
          className="absolute -top-3 -right-3 bg-gray-900 text-white p-1.5 rounded-full hover:bg-black transition-colors shadow-md"
        >
          <X className="w-4 h-4" />
        </button>

        <div className="text-center mb-4">
           <h3 className="font-bold text-gray-800 text-lg">金牌管家</h3>
           <p className="text-xs text-gray-500">1对1 专属服务</p>
        </div>

        <div className="space-y-4">
           {/* Phone */}
           <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl hover:bg-rose-50 transition-colors cursor-pointer" onClick={() => handleContact('phone')}>
              <div className="w-10 h-10 bg-rose-100 rounded-full flex items-center justify-center text-rose-600">
                 <Phone className="w-5 h-5" />
              </div>
              <div className="text-left">
                 <p className="text-xs font-bold text-gray-500">电话咨询</p>
                 <p className="text-sm font-bold text-gray-800">{config.contactPhone || '0592-8888888'}</p>
              </div>
           </div>

           {/* WeChat / QR */}
           <div className="flex flex-col items-center gap-2 p-3 bg-gray-50 rounded-xl border-2 border-dashed border-gray-200">
              <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-1">
                 <MessageCircle className="w-5 h-5" />
              </div>
              <p className="text-xs font-bold text-gray-500 mb-1">添加微信客服</p>
              <div className="w-32 h-32 bg-white p-1 rounded-lg shadow-sm">
                 <img 
                   src={config.qrCodeUrl || "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://romantic-life.com"} 
                   alt="WeChat QR" 
                   className="w-full h-full object-cover rounded"
                 />
              </div>
              <p className="text-[10px] text-gray-400">扫一扫，获取最新报价</p>
           </div>
        </div>
      </div>
    </div>
  );
};