import { motion } from 'framer-motion';
import { StaffDto } from "@nice/common";
import { Button, Tooltip, Badge } from 'antd';
import { BankFilled, SendOutlined, UserOutlined, MailOutlined, PhoneOutlined, HomeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

export interface SendCardProps {
  staff: StaffDto;
  termId?: string;
}

export function SendCard({ staff, termId }: SendCardProps) {
  const handleSendLetter = () => {
    window.open(`/editor?termId=${termId || ''}&receiverId=${staff.id}`, '_blank');
  };
  return (
    <div
      onClick={handleSendLetter}
      className="bg-slate-100 border hover:ring-1  ring-white       ease-in-out hover:-translate-y-0.5 border-white rounded-xl cursor-pointer  overflow-hidden   transition-all duration-300"
    >
      <div className="flex flex-col sm:flex-row">
        {/* Image Container */}
        <div className="sm:w-56 h-72 sm:h-auto flex-shrink-0  border-r flex items-center justify-center relative">
          {staff.meta?.photoUrl ? (
            <img
              src={staff.meta.photoUrl}
              alt={staff?.showname}
              className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
            />
          ) : (
            <div className="flex flex-col items-center justify-center text-gray-400">

              <span className="text-sm">暂未上传照片</span>
            </div>
          )}
        </div>

        {/* Content Container */}
        <div className="flex-1 p-8">
          <div className="flex flex-col h-full">
            <div className="mb-4">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                <div>
                  <div className="flex items-center gap-3 mb-2">
                    {/* 修改后的职级显示部分 */}
                    {staff.meta?.rank && (
                      <span className="text-2xl  font-bold text-primary tracking-wide  mr-2">
                        {staff.meta.rank}
                      </span>
                    )}
                    <h3 className="text-2xl font-semibold text-primary">
                      {staff?.showname || staff?.username}
                    </h3>
                  </div>
                </div>

              </div>

              {/* Contact Information */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600 mb-6">
                <div className="flex items-center bg-gray-50 rounded-lg p-3  transition-all duration-200 hover:shadow-sm">
                  <BankFilled className="w-4 h-4 mr-2 text-gray-500" rev={undefined} />
                  <span className="truncate">{staff.department?.name || '未设置部门'}</span>
                </div>
                <div className="flex items-center bg-gray-50 rounded-lg p-3  transition-all duration-200 hover:shadow-sm">
                  <MailOutlined className="w-4 h-4 mr-2 text-gray-500" rev={undefined} />
                  <span className="truncate">{staff.meta?.email || '未设置邮箱'}</span>
                </div>
                <div className="flex items-center bg-gray-50 rounded-lg p-3  transition-all duration-200 hover:shadow-sm">
                  <PhoneOutlined className="w-4 h-4 mr-2 text-gray-500" rev={undefined} />
                  <span className="truncate">{staff.phoneNumber || '未设置电话'}</span>
                </div>
                <div className="flex items-center bg-gray-50 rounded-lg p-3  transition-all duration-200 hover:shadow-sm">
                  <HomeOutlined className="w-4 h-4 mr-2 text-gray-500" rev={undefined} />
                  <span className="truncate">{staff.meta?.office || '未设置办公室'}</span>
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
    </div>
  );
}
