import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { Table, Modal, Form, Input, Select, Switch, Space, Tag, Popconfirm } from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  KeyOutlined,
  IdcardOutlined,
  InboxOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import api from '../../api';
import PermissionButton from '../../components/PermissionButton';
import EditableCell from '../../components/EditableCell';
import { message } from '../../ui/app-message';
import { userProfileResponseToFormValues, type UserProfileResponse } from './user-profile-form';

const UsersPage: React.FC = () => {
  const [data, setData] = useState<any[]>([]);
  const [roles, setRoles] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [pwdModalOpen, setPwdModalOpen] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [resetTarget, setResetTarget] = useState<any>(null);
  const [profileModalOpen, setProfileModalOpen] = useState(false);
  const [profileUser, setProfileUser] = useState<any>(null);
  const [profileForm] = Form.useForm();
  const [form] = Form.useForm();
  const [pwdForm] = Form.useForm();
  const [saving, setSaving] = useState(false);
  const [showArchived, setShowArchived] = useState(false);

  const handleOpenProfile = async (record: any) => {
    setProfileUser(record);
    try {
      const res = await api.get<UserProfileResponse>(`/rbac/users/${record.id}/profile`);
      profileForm.setFieldsValue(userProfileResponseToFormValues(res));
    } catch {
      profileForm.setFieldsValue({});
    }
    setProfileModalOpen(true);
  };

  const handleProfileSubmit = async () => {
    setSaving(true);
    const values = await profileForm.validateFields();
    try {
      await api.put(`/rbac/users/${profileUser.id}/profile`, values);
      message.success('档案更新成功');
      setProfileModalOpen(false);
      fetchData();
    } catch (e: any) {
      message.error(e.message || '操作失败');
    } finally {
      setSaving(false);
    }
  };

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const [users, rolesRes] = await Promise.all([
        api.get(`/rbac/users?isArchived=${showArchived}`) as Promise<any[]>,
        api.get('/rbac/roles') as Promise<any[]>,
      ]);
      setData(users);
      setRoles(rolesRes);
    } catch (e: unknown) {
      const err = e as { message?: string };
      message.error(err?.message || '加载失败，请稍后重试');
    }
    setLoading(false);
  }, [showArchived]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handleAdd = () => {
    setEditing(null);
    form.resetFields();
    setModalOpen(true);
  };

  const handleEdit = (record: any) => {
    setEditing(record);
    form.setFieldsValue({
      username: record.username,
      name: record.name,
      isActive: record.isActive,
      roleIds: record.roles?.map((r: any) => r.id) || [],
    });
    setModalOpen(true);
  };

  const handleSubmit = async () => {
    setSaving(true);
    const values = await form.validateFields();
    try {
      if (editing) {
        await api.put(`/rbac/users/${editing.id}`, {
          username: values.username,
          name: values.name,
          isActive: values.isActive,
          roleIds: values.roleIds || [],
        });
        message.success('更新成功');
      } else {
        await api.post('/rbac/users', {
          username: values.username,
          password: values.password,
          name: values.name,
          roleIds: values.roleIds || [],
        });
        message.success('创建成功');
      }
      setModalOpen(false);
      fetchData();
    } catch (e: any) {
      message.error(e.message || '操作失败');
    } finally {
      setSaving(false);
    }
  };
  const handleArchive = async (id: number, archive: boolean) => {
    try {
      await api.put(`/rbac/users/${id}/${archive ? 'archive' : 'restore'}`);
      message.success(archive ? '已归档' : '已恢复');
      fetchData();
    } catch (e: unknown) {
      const err = e as { message?: string };
      message.error(err?.message || '操作失败');
    }
  };

  const handleResetPwd = (record: any) => {
    setResetTarget(record);
    pwdForm.resetFields();
    setPwdModalOpen(true);
  };

  const handlePwdSubmit = async () => {
    setSaving(true);
    const values = await pwdForm.validateFields();
    try {
      await api.put(`/rbac/users/${resetTarget.id}/password`, { password: values.password });
      message.success('密码已重置');
      setPwdModalOpen(false);
    } catch (e: unknown) {
      const err = e as { message?: string };
      message.error(err?.message || '操作失败');
    } finally {
      setSaving(false);
    }
  };

  const saveCell = useCallback(
    async (record: any, field: string, value: unknown) => {
      await api.put(`/rbac/users/${record.id}`, { [field]: value });
      message.success('已保存');
      await fetchData();
    },
    [fetchData],
  );

  const columns = useMemo(
    () => [
      { title: 'ID', dataIndex: 'id', width: 60 },
      {
        title: '用户名',
        dataIndex: 'username',
        width: 120,
        render: (v: string, r: any) => (
          <EditableCell
            value={v}
            required
            permission="user:edit"
            disabled={r.isArchived}
            onSave={(next) => saveCell(r, 'username', next)}
          >
            {v}
          </EditableCell>
        ),
      },
      {
        title: '姓名',
        dataIndex: 'name',
        width: 120,
        render: (v: string, r: any) => (
          <EditableCell
            value={v}
            required
            permission="user:edit"
            disabled={r.isArchived}
            onSave={(next) => saveCell(r, 'name', next)}
          >
            {v}
          </EditableCell>
        ),
      },
      {
        title: '角色',
        dataIndex: 'roles',
        width: 200,
        render: (v: any[], record: any) => (
          <EditableCell
            value={v?.map((item) => item.id) || []}
            editor="multi-select"
            options={roles.map((item) => ({ value: item.id, label: item.name }))}
            permission="user:edit"
            disabled={record.isArchived}
            onSave={(next) => saveCell(record, 'roleIds', next)}
          >
            {v && v.length > 0 ? (
              v.map((r: any) => (
                <Tag key={r.id} color="blue">
                  {r.name}
                </Tag>
              ))
            ) : (
              <Tag color="default">无角色</Tag>
            )}
          </EditableCell>
        ),
      },
      {
        title: '状态',
        dataIndex: 'isActive',
        width: 80,
        render: (v: boolean, r: any) => (
          <EditableCell
            value={String(v)}
            editor="select"
            options={[
              { value: 'true', label: '启用' },
              { value: 'false', label: '禁用' },
            ]}
            permission="user:edit"
            disabled={r.isArchived}
          onSave={(next) => saveCell(r, 'isActive', String(next) === 'true')}
          >
            <Tag color={v ? 'green' : 'default'}>{v ? '启用' : '禁用'}</Tag>
          </EditableCell>
        ),
      },
      {
        title: '最后登录',
        dataIndex: 'lastLoginAt',
        width: 170,
        render: (v: string) => (v ? dayjs(v).format('YYYY-MM-DD HH:mm:ss') : '-'),
      },
      {
        title: '创建时间',
        dataIndex: 'createdAt',
        width: 170,
        render: (v: string) => dayjs(v).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        title: '操作',
        width: 240,
        fixed: 'right' as const,
        render: (_: unknown, record: any) => (
          <Space>
            <PermissionButton
              permission="user:edit"
              type="link"
              size="small"
              icon={<IdcardOutlined />}
              onClick={() => handleOpenProfile(record)}
            >
              档案
            </PermissionButton>
            <PermissionButton
              permission="user:edit"
              type="link"
              size="small"
              icon={<EditOutlined />}
              onClick={() => handleEdit(record)}
            >
              编辑
            </PermissionButton>
            <PermissionButton
              permission="user:reset-password"
              type="link"
              size="small"
              icon={<KeyOutlined />}
              onClick={() => handleResetPwd(record)}
            >
              重置密码
            </PermissionButton>
            {record.isArchived ? (
              <Popconfirm title="确认恢复？" onConfirm={() => handleArchive(record.id, false)}>
                <PermissionButton permission="user:edit" type="link" size="small">
                  恢复
                </PermissionButton>
              </Popconfirm>
            ) : (
              <Popconfirm
                title="归档后可恢复，确认归档？"
                onConfirm={() => handleArchive(record.id, true)}
              >
                <PermissionButton permission="user:edit" type="link" size="small">
                  归档
                </PermissionButton>
              </Popconfirm>
            )}
          </Space>
        ),
      },
    ],
    [roles, saveCell],
  );

  return (
    <div>
      <div
        style={{
          marginBottom: 16,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 8,
        }}
      >
        <h2 style={{ margin: 0 }}>账号管理</h2>
        <Space wrap>
          <PermissionButton
            permission="user:create"
            type="primary"
            icon={<PlusOutlined />}
            onClick={handleAdd}
          >
            新增账号
          </PermissionButton>
          <span style={{ marginLeft: 8 }}>
            <InboxOutlined style={{ marginRight: 4 }} />
            归档
            <Switch
              size="small"
              style={{ marginLeft: 4 }}
              checked={showArchived}
              onChange={setShowArchived}
            />
          </span>
        </Space>
      </div>
      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        loading={loading}
        scroll={{ x: 1250 }}
        pagination={false}
      />

      <Modal
        title={editing ? '编辑账号' : '新增账号'}
        open={modalOpen}
        onOk={handleSubmit}
        onCancel={() => setModalOpen(false)}
        destroyOnHidden
        confirmLoading={saving}
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>
          {!editing && (
            <Form.Item
              name="password"
              label="密码"
              rules={[{ required: true, min: 4, message: '密码至少4位' }]}
            >
              <Input.Password />
            </Form.Item>
          )}
          <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
            <Input />
          </Form.Item>
          {editing && (
            <Form.Item name="isActive" label="状态" valuePropName="checked">
              <Switch checkedChildren="启用" unCheckedChildren="禁用" />
            </Form.Item>
          )}
          <Form.Item
            name="roleIds"
            label="角色分配"
            rules={[{ required: !editing, message: '请至少选择一个角色' }]}
          >
            <Select
              mode="multiple"
              placeholder="选择角色"
              options={roles
                .filter((r: any) => r.status !== 0)
                .map((r: any) => ({
                  value: r.id,
                  label: `${r.name}${r.isSystem ? ' (系统)' : ''}`,
                }))}
            />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={`重置密码 - ${resetTarget?.username}`}
        open={pwdModalOpen}
        onOk={handlePwdSubmit}
        onCancel={() => setPwdModalOpen(false)}
        destroyOnHidden
        confirmLoading={saving}
      >
        <Form form={pwdForm} layout="vertical">
          <Form.Item
            name="password"
            label="新密码"
            rules={[{ required: true, min: 4, message: '密码至少4位' }]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={`教师档案 - ${profileUser?.name || profileUser?.username}`}
        open={profileModalOpen}
        onOk={handleProfileSubmit}
        onCancel={() => setProfileModalOpen(false)}
        destroyOnHidden
        confirmLoading={saving}
      >
        <Form form={profileForm} layout="vertical">
          <Form.Item name="joinedAt" label="入职日期">
            <Input placeholder="YYYY-MM-DD" />
          </Form.Item>
          <Form.Item name="qualifications" label="资质">
            <Input.TextArea placeholder="教师资格证号、学历等" rows={2} />
          </Form.Item>
          <Form.Item name="subjects" label="任教学科">
            <Select
              mode="tags"
              placeholder="输入学科后回车添加"
              options={[
                { value: '语文', label: '语文' },
                { value: '数学', label: '数学' },
                { value: '英语', label: '英语' },
                { value: '政治', label: '政治' },
                { value: '历史', label: '历史' },
                { value: '地理', label: '地理' },
                { value: '物理', label: '物理' },
                { value: '化学', label: '化学' },
                { value: '生物', label: '生物' },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default UsersPage;