'use client';

import { useState } from 'react';
import { User, Edit, Upload, Camera } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Card, CardContent } from '@/components/ui/card';
import type { PersonalInfo } from '../types';

interface PersonalInfoHeaderProps {
  personalInfo: PersonalInfo | null;
  onEdit: () => void;
  onAvatarChange: (file: File) => void;
}

export function PersonalInfoHeader({ personalInfo, onEdit, onAvatarChange }: PersonalInfoHeaderProps) {
  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);

  const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setAvatarPreview(reader.result as string);
      };
      reader.readAsDataURL(file);
      onAvatarChange(file);
    }
  };

  return (
    <Card>
      <CardContent className="p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-6">
            <div className="relative">
              <Avatar className="h-20 w-20">
                <AvatarImage src={avatarPreview || personalInfo?.avatar} alt="头像" />
                <AvatarFallback>
                  <User className="h-10 w-10" />
                </AvatarFallback>
              </Avatar>
              <label className="absolute bottom-0 right-0 cursor-pointer">
                <div className="bg-blue-500 text-white rounded-full p-1 hover:bg-blue-600 transition-colors">
                  <Camera className="h-4 w-4" />
                </div>
                <input
                  type="file"
                  accept="image/*"
                  onChange={handleAvatarChange}
                  className="hidden"
                />
              </label>
            </div>

            <div>
              <h1 className="text-2xl font-bold text-gray-900">
                {personalInfo?.realName || '未设置姓名'}
              </h1>
              <p className="text-gray-600">
                @{personalInfo?.username || '未设置用户名'}
              </p>
              <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
                <span>{personalInfo?.department || '未设置部门'}</span>
                <span>•</span>
                <span>{personalInfo?.position || '未设置职位'}</span>
              </div>
            </div>
          </div>

          <Button onClick={onEdit} className="flex items-center space-x-2">
            <Edit className="h-4 w-4" />
            <span>编辑信息</span>
          </Button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
          <div className="text-center">
            <div className="text-2xl font-bold text-blue-600">
              {personalInfo?.email || '未设置邮箱'}
            </div>
            <div className="text-sm text-gray-500">邮箱地址</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-green-600">
              {personalInfo?.phone || '未设置手机号'}
            </div>
            <div className="text-sm text-gray-500">手机号码</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-purple-600">
              {personalInfo?.gender === 'male' ? '男' :
               personalInfo?.gender === 'female' ? '女' :
               personalInfo?.gender === 'other' ? '其他' : '未设置'}
            </div>
            <div className="text-sm text-gray-500">性别</div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}