'use client';

import { useState } from 'react';
import { Save, X, User, Mail, Phone, MapPin, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { PersonalInfoForm as PersonalInfoFormType } from '../types';

interface PersonalInfoFormProps {
  data: PersonalInfoFormType;
  editing: boolean;
  onSave: (data: PersonalInfoFormType) => void;
  onCancel: () => void;
  onChange: (data: PersonalInfoFormType) => void;
}

export function PersonalInfoForm({ data, editing, onSave, onCancel, onChange }: PersonalInfoFormProps) {
  const [errors, setErrors] = useState<Record<string, string>>({});

  const validateForm = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!data.realName.trim()) {
      newErrors.realName = '真实姓名不能为空';
    }

    if (!data.email.trim()) {
      newErrors.email = '邮箱不能为空';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
      newErrors.email = '请输入有效的邮箱地址';
    }

    if (!data.phone.trim()) {
      newErrors.phone = '手机号不能为空';
    } else if (!/^1[3-9]\d{9}$/.test(data.phone)) {
      newErrors.phone = '请输入有效的手机号码';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSave = () => {
    if (validateForm()) {
      onSave(data);
    }
  };

  const handleInputChange = (field: keyof PersonalInfoFormType, value: string) => {
    onChange({ ...data, [field]: value });
    if (errors[field]) {
      setErrors({ ...errors, [field]: '' });
    }
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>基本信息</CardTitle>
          {editing && (
            <div className="flex items-center space-x-2">
              <Button variant="outline" size="sm" onClick={onCancel}>
                <X className="h-4 w-4 mr-1" />
                取消
              </Button>
              <Button size="sm" onClick={handleSave}>
                <Save className="h-4 w-4 mr-1" />
                保存
              </Button>
            </div>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-2">
            <Label htmlFor="realName" className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <span>真实姓名 *</span>
            </Label>
            <Input
              id="realName"
              value={data.realName}
              onChange={(e) => handleInputChange('realName', e.target.value)}
              disabled={!editing}
              className={errors.realName ? 'border-red-500' : ''}
              placeholder="请输入真实姓名"
            />
            {errors.realName && (
              <p className="text-sm text-red-500">{errors.realName}</p>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="email" className="flex items-center space-x-2">
              <Mail className="h-4 w-4" />
              <span>邮箱地址 *</span>
            </Label>
            <Input
              id="email"
              type="email"
              value={data.email}
              onChange={(e) => handleInputChange('email', e.target.value)}
              disabled={!editing}
              className={errors.email ? 'border-red-500' : ''}
              placeholder="请输入邮箱地址"
            />
            {errors.email && (
              <p className="text-sm text-red-500">{errors.email}</p>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="phone" className="flex items-center space-x-2">
              <Phone className="h-4 w-4" />
              <span>手机号码 *</span>
            </Label>
            <Input
              id="phone"
              value={data.phone}
              onChange={(e) => handleInputChange('phone', e.target.value)}
              disabled={!editing}
              className={errors.phone ? 'border-red-500' : ''}
              placeholder="请输入手机号码"
            />
            {errors.phone && (
              <p className="text-sm text-red-500">{errors.phone}</p>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="gender">性别</Label>
            <Select
              value={data.gender || ''}
              onValueChange={(value) => handleInputChange('gender', value)}
              disabled={!editing}
            >
              <SelectTrigger>
                <SelectValue placeholder="请选择性别" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="male">男</SelectItem>
                <SelectItem value="female">女</SelectItem>
                <SelectItem value="other">其他</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="birthday">出生日期</Label>
            <Input
              id="birthday"
              type="date"
              value={data.birthday || ''}
              onChange={(e) => handleInputChange('birthday', e.target.value)}
              disabled={!editing}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="address" className="flex items-center space-x-2">
              <MapPin className="h-4 w-4" />
              <span>联系地址</span>
            </Label>
            <Input
              id="address"
              value={data.address || ''}
              onChange={(e) => handleInputChange('address', e.target.value)}
              disabled={!editing}
              placeholder="请输入联系地址"
            />
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="bio" className="flex items-center space-x-2">
            <FileText className="h-4 w-4" />
            <span>个人简介</span>
          </Label>
          <Textarea
            id="bio"
            value={data.bio || ''}
            onChange={(e) => handleInputChange('bio', e.target.value)}
            disabled={!editing}
            placeholder="请输入个人简介"
            rows={4}
            maxLength={200}
          />
          <p className="text-sm text-gray-500">
            {data.bio?.length || 0}/200 字符
          </p>
        </div>

        {!editing && (
          <div className="text-sm text-gray-500 bg-gray-50 p-3 rounded">
            💡 点击右上角的"编辑信息"按钮来修改个人信息
          </div>
        )}
      </CardContent>
    </Card>
  );
}