import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { ArrowLeft, LayoutDashboard, Settings } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Spinner } from '@/components/ui/spinner';
import { notify } from '@/lib/notify';
import { useAuth } from '../hooks/useAuth';
import { api } from '../api/client';
import { useForumLimits } from '../hooks/useForumLimits';

const nickSchema = z.object({
  nickname: z.string().min(1, '请输入昵称').max(64),
});

const pwdSchema = (minLen: number) => z.object({
  old_password: z.string().min(1, '请输入当前密码'),
  new_password: z.string().min(minLen, `新密码至少 ${minLen} 位`),
  confirm_password: z.string().min(1, '请确认新密码'),
}).refine(d => d.new_password === d.confirm_password, {
  message: '两次输入的新密码不一致',
  path: ['confirm_password'],
});

type NickValues = z.infer<typeof nickSchema>;
type PwdValues = z.infer<ReturnType<typeof pwdSchema>>;

export default function ProfilePage() {
  const nav = useNavigate();
  const { user, loading: authLoading, refresh } = useAuth();
  const [nickLoading, setNickLoading] = useState(false);
  const [pwdLoading, setPwdLoading] = useState(false);
  const [avatarLoading, setAvatarLoading] = useState(false);
  const fileRef = useRef<HTMLInputElement>(null);

  const { limits } = useForumLimits();

  const nickForm = useForm<NickValues>({
    resolver: zodResolver(nickSchema),
    values: { nickname: user?.nickname ?? '' },
  });

  const pwdForm = useForm<PwdValues>({
    resolver: zodResolver(pwdSchema(limits.password_min_len)),
    defaultValues: { old_password: '', new_password: '', confirm_password: '' },
  });

  useEffect(() => {
    if (!authLoading && !user) {
      nav('/login');
    }
  }, [authLoading, user, nav]);

  if (authLoading) {
    return <div className="flex justify-center py-16"><Spinner size="lg" /></div>;
  }

  if (!user) return null;

  const onUpdateNick = async (values: NickValues) => {
    setNickLoading(true);
    try {
      await api.updateNickname(values.nickname);
      await refresh();
      notify.success('昵称已更新');
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '更新失败');
    } finally {
      setNickLoading(false);
    }
  };

  const onUpdatePwd = async (values: PwdValues) => {
    setPwdLoading(true);
    try {
      await api.updatePassword(values.old_password, values.new_password);
      notify.success('密码已修改，请重新登录');
      pwdForm.reset();
      await api.logout();
      nav('/login');
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '修改失败');
    } finally {
      setPwdLoading(false);
    }
  };

  const onAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > limits.avatar_max_mb * 1024 * 1024) {
      notify.error(`头像不能超过 ${limits.avatar_max_mb}MB`);
      return;
    }
    setAvatarLoading(true);
    try {
      await api.uploadAvatar(file);
      await refresh();
      notify.success('头像已更新');
    } catch (err: unknown) {
      notify.error(err instanceof Error ? err.message : '上传失败');
    } finally {
      setAvatarLoading(false);
      if (fileRef.current) fileRef.current.value = '';
    }
  };

  return (
    <div className="page-wrap">
      <div className="page-inner-wide" style={{ maxWidth: 640 }}>
        <Button variant="ghost" className="mb-3" onClick={() => nav(-1)}>
          <ArrowLeft />
          返回
        </Button>

        <div className="profile-header">
          <div className="profile-avatar-lg">
            {user.avatar ? <img src={user.avatar} alt="" /> : user.nickname[0]}
          </div>
          <div>
            <h1 className="page-title" style={{ marginBottom: 4 }}>{user.nickname}</h1>
            <div style={{ fontSize: 13, color: 'var(--color-text-3)' }}>@{user.username}</div>
            {user.role === 'admin' && <Badge variant="green" className="mt-1.5">管理员</Badge>}
          </div>
        </div>

        {user.role === 'admin' && (
          <div className="section-card admin-entry-card">
            <div className="section-card-title">管理员入口</div>
            <p style={{ fontSize: 13, color: 'var(--color-text-3)', margin: '0 0 12px' }}>
              管理板块、用户、帖子及系统设置
            </p>
            <div className="flex flex-wrap gap-2">
              <Button variant="outline" onClick={() => nav('/admin/boards')}>
                <Settings />
                管理板块
              </Button>
              <Button onClick={() => nav('/admin/dashboard')}>
                <LayoutDashboard />
                进入系统后台
              </Button>
            </div>
          </div>
        )}

        <div className="section-card">
          <div className="section-card-title">基本资料</div>
          <Form {...nickForm}>
            <form onSubmit={nickForm.handleSubmit(onUpdateNick)} className="space-y-4">
              <FormItem>
                <FormLabel>用户名</FormLabel>
                <FormControl>
                  <Input value={user.username} disabled />
                </FormControl>
              </FormItem>
              <FormField
                control={nickForm.control}
                name="nickname"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>昵称</FormLabel>
                    <FormControl>
                      <Input maxLength={64} placeholder="显示名称" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" loading={nickLoading}>保存昵称</Button>
            </form>
          </Form>
        </div>

        <div className="section-card">
          <div className="section-card-title">头像</div>
          <p style={{ fontSize: 13, color: 'var(--color-text-3)', margin: '0 0 12px' }}>
            支持 JPG、PNG、GIF、WebP，不超过 2MB
          </p>
          <input
            ref={fileRef}
            type="file"
            accept="image/jpeg,image/png,image/gif,image/webp"
            style={{ display: 'none' }}
            onChange={onAvatarChange}
          />
          <Button variant="outline" loading={avatarLoading} onClick={() => fileRef.current?.click()}>
            选择图片上传
          </Button>
        </div>

        <div className="section-card">
          <div className="section-card-title">修改密码</div>
          <Form {...pwdForm}>
            <form onSubmit={pwdForm.handleSubmit(onUpdatePwd)} className="space-y-4">
              <FormField
                control={pwdForm.control}
                name="old_password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>当前密码</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="输入当前密码" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={pwdForm.control}
                name="new_password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>新密码</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="至少 6 位" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={pwdForm.control}
                name="confirm_password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>确认新密码</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="再次输入新密码" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" variant="destructive" loading={pwdLoading}>
                修改密码
              </Button>
            </form>
          </Form>
        </div>
      </div>
    </div>
  );
}