'use client';

import { useState, useEffect, useMemo, useCallback } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { toast } from '@/lib/toast';
import { Loader2 } from 'lucide-react';
import { updateUser, type User } from '@/services/api/organization';
import { useTranslation } from '@/hooks/useTranslation';
import { handleApiError } from '@/lib/error-handler';

interface EditUserDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  user: User | null;
  onSuccess?: () => void;
}

interface EditFormData {
  displayName: string;
  email: string;
  phone: string;
  employeeId: string;
}

export function EditUserDialog({ open, onOpenChange, user, onSuccess }: EditUserDialogProps) {
  const { t, locale } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState<EditFormData>({
    displayName: '',
    email: '',
    phone: '',
    employeeId: '',
  });

  // 初始化表单数据 - 只在对话框打开且user变化时初始化
  useEffect(() => {
    if (open && user) {
      setFormData({
        displayName: user.displayName || '',
        email: user.email || '',
        phone: user.phone || '',
        employeeId: user.employeeId || '',
      });
    }
  }, [open, user]);

  const handleSubmit = useCallback(async (e: React.FormEvent) => {
    e.preventDefault();

    if (!user) return;

    // 基本验证
    if (!formData.displayName.trim()) {
      toast.error('请输入显示名');
      return;
    }

    if (!formData.email.trim()) {
      toast.error('请输入邮箱');
      return;
    }

    // 邮箱格式验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.email)) {
      toast.error('邮箱格式不正确');
      return;
    }

    try {
      setLoading(true);
      await updateUser(user.id, {
        displayName: formData.displayName.trim(),
        email: formData.email.trim(),
        phone: formData.phone.trim() || undefined,
        employeeId: formData.employeeId.trim() || undefined,
      });
      
      toast.success('用户信息更新成功');
      onOpenChange(false);
      onSuccess?.();
    } catch (error) {
      console.error('Failed to update user:', error);
      handleApiError(error, locale);
    } finally {
      setLoading(false);
    }
  }, [user, formData, onOpenChange, onSuccess, t]);

  const handleCancel = useCallback(() => {
    // 重置表单
    if (user) {
      setFormData({
        displayName: user.displayName || '',
        email: user.email || '',
        phone: user.phone || '',
        employeeId: user.employeeId || '',
      });
    }
    onOpenChange(false);
  }, [user, onOpenChange]);

  // LDAP/Entra 用户提示
  const isExternalUser = useMemo(() => 
    user?.source === 'LDAP' || user?.source === 'ENTRA', 
    [user?.source]
  );

  // 不渲染Dialog内容直到打开
  if (!open) {
    return (
      <Dialog open={false} onOpenChange={onOpenChange}>
        <DialogContent />
      </Dialog>
    );
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>{'编辑用户'}</DialogTitle>
          <DialogDescription>
            {isExternalUser && (
              <span className="text-orange-600">
                ⚠️ {('该用户来源于 {source}，部分信息可能在下次同步时被覆盖').replace('{source}', user?.source || '')}
              </span>
            )}
            {!isExternalUser && ('修改用户基本信息')}
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* 用户名（只读） */}
          <div className="space-y-2">
            <Label>{'用户名'}</Label>
            <Input
              value={user?.username || ''}
              disabled
              className="bg-gray-50"
            />
            <p className="text-xs text-gray-500">{'用户名不可修改'}</p>
          </div>

          {/* 显示名 */}
          <div className="space-y-2">
            <Label htmlFor="displayName">
              {'显示名'} <span className="text-red-500">*</span>
            </Label>
            <Input
              id="displayName"
              value={formData.displayName}
              onChange={(e) => setFormData({ ...formData, displayName: e.target.value })}
              placeholder={'请输入显示名'}
              disabled={loading}
            />
          </div>

          {/* 邮箱 */}
          <div className="space-y-2">
            <Label htmlFor="email">
              {'邮箱'} <span className="text-red-500">*</span>
            </Label>
            <Input
              id="email"
              type="email"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              placeholder={'请输入邮箱'}
              disabled={loading}
            />
          </div>

          {/* 手机号 */}
          <div className="space-y-2">
            <Label htmlFor="phone">{'手机号'}</Label>
            <Input
              id="phone"
              value={formData.phone}
              onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
              placeholder={'请输入手机号'}
              disabled={loading}
            />
          </div>

          {/* 员工编号 */}
          <div className="space-y-2">
            <Label htmlFor="employeeId">{'员工编号'}</Label>
            <Input
              id="employeeId"
              value={formData.employeeId}
              onChange={(e) => setFormData({ ...formData, employeeId: e.target.value })}
              placeholder={'请输入员工编号'}
              disabled={loading}
            />
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={handleCancel}
              disabled={loading}
            >
              {'取消'}
            </Button>
            <Button type="submit" disabled={loading}>
              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              {'保存'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}