'use client';

import { useEffect, useState } from 'react';
import useSWR from 'swr';
import {
  Plus,
  Pencil,
  Trash2,
  KeyRound,
  Loader2,
  ShieldCheck,
  Crown,
} from 'lucide-react';
import { AdminHeader } from '@/components/admin/AdminHeader';
import { PaginationTable, type Column } from '@/components/admin/PaginationTable';
import { TableToolbar } from '@/components/admin/TableToolbar';
import { Avatar } from '@/components/admin/Avatar';
import { ImageUpload } from '@/components/admin/ImageUpload';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { adminApi } from '@/lib/admin-services';
import { useAdminStore } from '@/store/adminStore';
import { formatDate } from '@/lib/utils';
import type { AdminRole, AdminUser } from '@/lib/types';

interface CreateForm {
  username: string;
  password: string;
  nickname: string;
  avatar: string;
  role: AdminRole;
}

interface EditForm {
  nickname: string;
  avatar: string;
  role: AdminRole;
}

const CREATE_DEFAULT: CreateForm = {
  username: '',
  password: '',
  nickname: '',
  avatar: '',
  role: 'normal',
};

const ROLE_LABEL: Record<AdminRole, string> = {
  super_admin: '超级管理员',
  normal: '普通管理员',
};

export default function AdminUserPage() {
  const [hydrated, setHydrated] = useState(false);
  const [page, setPage] = useState(1);
  const [keyword, setKeyword] = useState('');
  const [searchKw, setSearchKw] = useState('');

  // 创建/编辑
  const [open, setOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [createForm, setCreateForm] = useState<CreateForm>(CREATE_DEFAULT);
  const [editForm, setEditForm] = useState<EditForm>({
    nickname: '',
    avatar: '',
    role: 'normal',
  });
  const [saving, setSaving] = useState(false);

  // 重置密码
  const [pwdOpen, setPwdOpen] = useState(false);
  const [pwdId, setPwdId] = useState<number | null>(null);
  const [newPassword, setNewPassword] = useState('');
  const [pwdConfirm, setPwdConfirm] = useState('');
  const [pwdSaving, setPwdSaving] = useState(false);

  const currentAdminId = useAdminStore((s) => s.admin?.id);
  const currentAdminRole = useAdminStore((s) => s.admin?.role);
  const isSuperAdmin = currentAdminRole === 'super_admin';

  useEffect(() => setHydrated(true), []);

  const { data, isLoading, mutate } = useSWR(
    hydrated ? ['/admin/admin-user', page, searchKw] : null,
    () =>
      adminApi.adminUserPaginate({
        page,
        pageSize: 10,
        keyword: searchKw || undefined,
      }),
  );

  const openCreate = () => {
    setEditId(null);
    setCreateForm(CREATE_DEFAULT);
    setOpen(true);
  };

  const openEdit = async (id: number) => {
    const detail = await adminApi.adminUserDetail(id);
    setEditId(id);
    setEditForm({
      nickname: detail.nickname,
      avatar: detail.avatar ?? '',
      role: detail.role ?? 'normal',
    });
    setOpen(true);
  };

  const onSave = async () => {
    if (editId) {
      if (!editForm.nickname.trim()) {
        alert('请填写名称');
        return;
      }
      setSaving(true);
      try {
        await adminApi.adminUserUpdate(editId, {
          nickname: editForm.nickname.trim(),
          avatar: editForm.avatar,
          role: editForm.role,
        });
        setOpen(false);
        await mutate();
      } catch (e) {
        alert((e as Error).message);
      } finally {
        setSaving(false);
      }
      return;
    }
    // create
    if (!createForm.username.trim() || !createForm.password || !createForm.nickname.trim()) {
      alert('请填写登录账号、初始密码和名称');
      return;
    }
    setSaving(true);
    try {
      await adminApi.adminUserCreate({
        username: createForm.username.trim(),
        password: createForm.password,
        nickname: createForm.nickname.trim(),
        avatar: createForm.avatar,
        role: createForm.role,
      });
      setOpen(false);
      await mutate();
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const onDelete = async (id: number) => {
    if (!confirm('确认删除该管理员账号？此操作不可恢复。')) return;
    try {
      await adminApi.adminUserDelete(id);
      await mutate();
    } catch (e) {
      alert((e as Error).message);
    }
  };

  const openResetPassword = (id: number) => {
    setPwdId(id);
    setNewPassword('');
    setPwdConfirm('');
    setPwdOpen(true);
  };

  const onResetPassword = async () => {
    if (!pwdId) return;
    if (newPassword.length < 6) {
      alert('新密码至少 6 位');
      return;
    }
    if (newPassword !== pwdConfirm) {
      alert('两次输入的密码不一致');
      return;
    }
    setPwdSaving(true);
    try {
      await adminApi.adminUserResetPassword(pwdId, newPassword);
      setPwdOpen(false);
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setPwdSaving(false);
    }
  };

  const columns: Column<AdminUser>[] = [
    { key: 'id', title: 'ID', width: 60 },
    {
      key: 'avatar',
      title: '头像',
      width: 80,
      render: (r) => <Avatar src={r.avatar} name={r.nickname} size={36} />,
    },
    {
      key: 'username',
      title: '登录账号',
      width: 200,
      render: (r) => (
        <div className="flex items-center gap-2">
          <span className="font-medium text-gray-900">{r.username}</span>
          {r.id === currentAdminId && (
            <Badge variant="success">
              <ShieldCheck className="h-3 w-3" /> 当前
            </Badge>
          )}
        </div>
      ),
    },
    { key: 'nickname', title: '名称', width: 140 },
    {
      key: 'role',
      title: '角色',
      width: 130,
      render: (r) =>
        r.role === 'super_admin' ? (
          <Badge variant="warning">
            <Crown className="h-3 w-3" /> {ROLE_LABEL[r.role]}
          </Badge>
        ) : (
          <Badge variant="secondary">{ROLE_LABEL[r.role]}</Badge>
        ),
    },
    {
      key: 'createdAt',
      title: '创建时间',
      width: 160,
      render: (r) => formatDate(r.createdAt, 'YYYY-MM-DD HH:mm'),
    },
    {
      key: '_op',
      title: '操作',
      width: 240,
      render: (r) =>
        isSuperAdmin ? (
          <div className="flex items-center gap-1.5 whitespace-nowrap">
            <Button size="sm" variant="outline" onClick={() => openEdit(r.id)}>
              <Pencil className="h-3 w-3" /> 编辑
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => openResetPassword(r.id)}
            >
              <KeyRound className="h-3 w-3" /> 重置密码
            </Button>
            {r.id !== currentAdminId && (
              <Button
                size="sm"
                variant="destructive"
                onClick={() => onDelete(r.id)}
              >
                <Trash2 className="h-3 w-3" /> 删除
              </Button>
            )}
          </div>
        ) : (
          <span className="text-xs text-gray-400">无操作权限</span>
        ),
    },
  ];

  return (
    <div>
      <AdminHeader
        title="管理员账号"
        description="维护可登录后台的员工账号（支持手机号/邮箱/自定义账号）"
      />

      <TableToolbar
        left={
          <>
            <Input
              placeholder="搜索 登录账号/名称"
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  setSearchKw(keyword);
                  setPage(1);
                }
              }}
              className="max-w-xs"
            />
            <Button
              variant="outline"
              onClick={() => {
                setSearchKw(keyword);
                setPage(1);
              }}
            >
              搜索
            </Button>
          </>
        }
        right={
          isSuperAdmin ? (
            <Button onClick={openCreate}>
              <Plus className="h-4 w-4" /> 新增账号
            </Button>
          ) : null
        }
      />

      <PaginationTable<AdminUser>
        columns={columns}
        rows={data?.list ?? []}
        total={data?.total ?? 0}
        page={page}
        pageSize={10}
        loading={isLoading}
        onPageChange={setPage}
        rowKey={(r) => String(r.id)}
      />

      {/* 创建 / 编辑弹窗 */}
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>
              {editId ? '编辑管理员账号' : '新增管理员账号'}
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            {editId ? (
              <>
                <div className="space-y-1.5">
                  <Label>登录账号（不可修改）</Label>
                  <Input
                    value={
                      data?.list.find((x) => x.id === editId)?.username ?? ''
                    }
                    disabled
                  />
                  <p className="text-xs text-gray-500">
                    登录账号创建后不可修改，如需修改请删除后重建
                  </p>
                </div>
                <div className="space-y-1.5">
                  <Label>名称 *</Label>
                  <Input
                    value={editForm.nickname}
                    onChange={(e) =>
                      setEditForm({ ...editForm, nickname: e.target.value })
                    }
                  />
                </div>
                <div className="space-y-1.5">
                  <Label>头像</Label>
                  <ImageUpload
                    value={editForm.avatar}
                    onChange={(url) =>
                      setEditForm({ ...editForm, avatar: url })
                    }
                    hint="建议正方形头像，单图 ≤ 2M"
                  />
                </div>
                <div className="space-y-1.5">
                  <Label>角色 *</Label>
                  <div className="flex items-center gap-4">
                    <label className="flex items-center gap-2 text-sm">
                      <input
                        type="radio"
                        name="edit-role"
                        value="normal"
                        checked={editForm.role === 'normal'}
                        onChange={() =>
                          setEditForm({ ...editForm, role: 'normal' })
                        }
                      />
                      普通管理员
                    </label>
                    <label className="flex items-center gap-2 text-sm">
                      <input
                        type="radio"
                        name="edit-role"
                        value="super_admin"
                        checked={editForm.role === 'super_admin'}
                        onChange={() =>
                          setEditForm({ ...editForm, role: 'super_admin' })
                        }
                      />
                      超级管理员
                    </label>
                  </div>
                  {editId === currentAdminId && (
                    <p className="text-xs text-amber-600">
                      不能将自己降级为普通管理员
                    </p>
                  )}
                </div>
              </>
            ) : (
              <>
                <div className="space-y-1.5">
                  <Label>登录账号 *</Label>
                  <Input
                    placeholder="可使用手机号、邮箱或自定义账号"
                    value={createForm.username}
                    maxLength={50}
                    onChange={(e) =>
                      setCreateForm({
                        ...createForm,
                        username: e.target.value,
                      })
                    }
                  />
                  <p className="text-xs text-gray-500">
                    2-50 个字符，创建后不可修改
                  </p>
                </div>
                <div className="space-y-1.5">
                  <Label>初始密码 *</Label>
                  <Input
                    type="password"
                    placeholder="至少 6 位"
                    value={createForm.password}
                    onChange={(e) =>
                      setCreateForm({
                        ...createForm,
                        password: e.target.value,
                      })
                    }
                  />
                  <p className="text-xs text-gray-500">
                    创建后请通过安全渠道告知该员工
                  </p>
                </div>
                <div className="space-y-1.5">
                  <Label>名称 *</Label>
                  <Input
                    placeholder="员工姓名或别名"
                    value={createForm.nickname}
                    maxLength={50}
                    onChange={(e) =>
                      setCreateForm({
                        ...createForm,
                        nickname: e.target.value,
                      })
                    }
                  />
                </div>
                <div className="space-y-1.5">
                  <Label>头像</Label>
                  <ImageUpload
                    value={createForm.avatar}
                    onChange={(url) =>
                      setCreateForm({ ...createForm, avatar: url })
                    }
                    hint="可选，建议正方形头像，单图 ≤ 2M"
                  />
                </div>
                <div className="space-y-1.5">
                  <Label>角色 *</Label>
                  <div className="flex items-center gap-4">
                    <label className="flex items-center gap-2 text-sm">
                      <input
                        type="radio"
                        name="create-role"
                        value="normal"
                        checked={createForm.role === 'normal'}
                        onChange={() =>
                          setCreateForm({ ...createForm, role: 'normal' })
                        }
                      />
                      普通管理员
                    </label>
                    <label className="flex items-center gap-2 text-sm">
                      <input
                        type="radio"
                        name="create-role"
                        value="super_admin"
                        checked={createForm.role === 'super_admin'}
                        onChange={() =>
                          setCreateForm({ ...createForm, role: 'super_admin' })
                        }
                      />
                      超级管理员
                    </label>
                  </div>
                  <p className="text-xs text-gray-500">
                    超级管理员可管理所有账号及删除内容
                  </p>
                </div>
              </>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              取消
            </Button>
            <Button onClick={onSave} disabled={saving}>
              {saving ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  保存中…
                </>
              ) : (
                '保存'
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 重置密码弹窗 */}
      <Dialog open={pwdOpen} onOpenChange={setPwdOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>重置密码</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-1.5">
              <Label>新密码 *</Label>
              <Input
                type="password"
                placeholder="至少 6 位"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
              />
            </div>
            <div className="space-y-1.5">
              <Label>确认新密码 *</Label>
              <Input
                type="password"
                placeholder="再次输入新密码"
                value={pwdConfirm}
                onChange={(e) => setPwdConfirm(e.target.value)}
              />
            </div>
            <p className="text-xs text-gray-500">
              重置后请通过安全渠道告知该员工
            </p>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setPwdOpen(false)}>
              取消
            </Button>
            <Button onClick={onResetPassword} disabled={pwdSaving}>
              {pwdSaving ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" /> 重置中…
                </>
              ) : (
                '确认重置'
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}