frontend/src/pages/ProjectOrders.tsx

import { useEffect, useState } from 'react';
import {
  Card,
  Table,
  Input,
  Button,
  Space,
  message,
  Modal,
  Tag,
  Form,
  Select,
  Pagination,
} from 'antd';
import {
  ToolOutlined,
  PlusOutlined,
  DeleteOutlined,
  EyeOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { projectOrdersApi, authApi } from '@/services/api';
import type {
  ProjectOrder,
  ProjectOrderStatus,
  ProjectType,
  CreateProjectOrderRequest,
} from '@/types';

const WORK_ORDER_STATUS_LABEL: Record<ProjectOrderStatus, string> = {
  created: '待处理',
  pending_completion: '待完成确认',
  closed: '已完成',
};

const WORK_ORDER_STATUS_COLOR: Record<ProjectOrderStatus, string> = {
  created: 'default',
  pending_completion: 'processing',
  closed: 'success',
};

const PROJECT_TYPE_LABEL: Record<ProjectType, string> = {
  survey: '项目勘察',
  implementation: '工程实施',
  maintenance: '定期维保',
  business: '商务合作',
  other: '其他',
};

function ProjectOrdersPage() {
  const navigate = useNavigate();
  const currentUser = authApi.getCurrentUser();
  const isAdmin = currentUser?.role === 'admin';

  const [orders, setOrders] = useState<ProjectOrder[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [total, setTotal] = useState(0);
  const [search, setSearch] = useState('');
  const [workOrderStatus, setWorkOrderStatus] = useState<ProjectOrderStatus | undefined>();
  const [projectType, setProjectType] = useState<ProjectType | undefined>();
  const [mineOnly, setMineOnly] = useState(false);

  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [creating, setCreating] = useState(false);
  const [createForm] = Form.useForm<CreateProjectOrderRequest>();

  const loadOrders = async () => {
    setLoading(true);
    try {
      const result = await projectOrdersApi.list({
        page,
        limit,
        search: search || undefined,
        workOrderStatus,
        projectType,
        mine: isAdmin ? mineOnly : undefined,
      });
      setOrders(result.data || []);
      setTotal(result.pagination?.total || 0);
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '加载工单列表失败');
      setOrders([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadOrders();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [page, limit, search, workOrderStatus, projectType, mineOnly]);

  const handleCreate = async (values: CreateProjectOrderRequest) => {
    setCreating(true);
    try {
      const order = await projectOrdersApi.create(values);
      message.success(`工单创建成功：${order.serialNumber}`);
      setCreateModalVisible(false);
      createForm.resetFields();
      navigate(`/admin/project-orders/${order.serialNumber}`);
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '创建失败');
    } finally {
      setCreating(false);
    }
  };

  const handleDelete = (order: ProjectOrder) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除工单 ${order.serialNumber} 吗？此操作不可恢复！`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          await projectOrdersApi.delete(order.serialNumber);
          message.success('删除成功');
          loadOrders();
        } catch (err: any) {
          message.error(err?.response?.data?.message || err.message || '删除失败');
        }
      },
    });
  };

  const columns = [
    {
      title: '工单号',
      dataIndex: 'serialNumber',
      key: 'serialNumber',
      width: 180,
      render: (sn: string) => (
        <span style={{ fontFamily: 'monospace', color: '#165DFF' }}>{sn}</span>
      ),
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      key: 'companyName',
    },
    {
      title: '现场联系人',
      dataIndex: 'contactName',
      key: 'contactName',
      width: 100,
    },
    {
      title: '项目类型',
      dataIndex: 'projectType',
      key: 'projectType',
      width: 100,
      render: (type: ProjectType) => PROJECT_TYPE_LABEL[type] || type,
    },
    {
      title: '工程师',
      key: 'technician',
      width: 120,
      render: (_: any, record: ProjectOrder) => record.technician?.name || '-',
    },
    {
      title: '工单状态',
      dataIndex: 'workOrderStatus',
      key: 'workOrderStatus',
      width: 130,
      render: (status: ProjectOrderStatus) => (
        <Space size={4}>
          <Tag color={WORK_ORDER_STATUS_COLOR[status]}>
            {WORK_ORDER_STATUS_LABEL[status]}
          </Tag>
        </Space>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 170,
      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
    },
    {
      title: '操作',
      key: 'actions',
      width: 180,
      render: (_: any, record: ProjectOrder) => (
        <Space>
          <Button
            type="link"
            size="small"
            icon={<EyeOutlined />}
            onClick={() => navigate(`/admin/project-orders/${record.serialNumber}`)}
          >
            详情
          </Button>
          {isAdmin && (
            <Button
              type="link"
              size="small"
              danger
              icon={<DeleteOutlined />}
              onClick={() => handleDelete(record)}
            >
              删除
            </Button>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card
        title={
          <Space>
            <ToolOutlined />
            <span>项目工单</span>
          </Space>
        }
        extra={isAdmin ? (
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => setCreateModalVisible(true)}
          >
            新建项目工单
          </Button>
        ) : null}
      >
        <Space style={{ marginBottom: 16, flexWrap: 'wrap' }}>
          <Input.Search
            placeholder="搜索工单号/公司/现场联系人"
            allowClear
            style={{ width: 260 }}
            onSearch={(v) => {
              setPage(1);
              setSearch(v);
            }}
            onChange={(e) => {
              if (!e.target.value) {
                setPage(1);
                setSearch('');
              }
            }}
          />
          <Select
            placeholder="工单状态"
            allowClear
            style={{ width: 160 }}
            value={workOrderStatus}
            onChange={(v) => {
              setPage(1);
              setWorkOrderStatus(v);
            }}
            options={(Object.keys(WORK_ORDER_STATUS_LABEL) as ProjectOrderStatus[]).map(
              (k) => ({ value: k, label: WORK_ORDER_STATUS_LABEL[k] })
            )}
          />
          <Select
            placeholder="项目类型"
            allowClear
            style={{ width: 130 }}
            value={projectType}
            onChange={(v) => {
              setPage(1);
              setProjectType(v);
            }}
            options={(Object.keys(PROJECT_TYPE_LABEL) as ProjectType[]).map((k) => ({
              value: k,
              label: PROJECT_TYPE_LABEL[k],
            }))}
          />
          {isAdmin && (
            <Button
              type={mineOnly ? 'primary' : 'default'}
              onClick={() => {
                setPage(1);
                setMineOnly(!mineOnly);
              }}
            >
              {mineOnly ? '查看全部' : '我负责的'}
            </Button>
          )}
        </Space>

        <Table
          columns={columns}
          dataSource={orders}
          rowKey="serialNumber"
          loading={loading}
          pagination={false}
        />
        <div style={{ marginTop: 16 }}>
          <Pagination
            current={page}
            pageSize={limit}
            total={total}
            onChange={(newPage, newLimit) => {
              setPage(newPage);
              setLimit(newLimit);
            }}
            showSizeChanger
            showTotal={(t) => `共计 ${t} 条记录`}
          />
        </div>
      </Card>

      <Modal
        title="新建项目工单"
        open={createModalVisible}
        onCancel={() => {
          setCreateModalVisible(false);
          createForm.resetFields();
        }}
        footer={null}
        width={560}
      >
        <Form form={createForm} layout="vertical" onFinish={handleCreate}>
          <Form.Item
            name="companyName"
            label="公司名称"
            rules={[{ required: true, message: '请输入公司名称' }]}
          >
            <Input placeholder="例如：浙江北凡科技" />
          </Form.Item>
          <Form.Item
            name="companyAddress"
            label="公司位置"
            rules={[{ required: true, message: '请输入公司位置' }]}
          >
            <Input placeholder="例如：杭州市西湖区文三路 100 号" />
          </Form.Item>
          <Form.Item
            name="contactName"
            label="现场联系人"
            rules={[{ required: true, message: '请输入现场联系人' }]}
          >
            <Input placeholder="现场联系人姓名" />
          </Form.Item>
          <Form.Item
            name="contactPhone"
            label="联系电话"
            rules={[
              { required: true, message: '请输入联系电话' },
              { pattern: /^\d{11}$/, message: '请输入 11 位手机号' },
            ]}
          >
            <Input placeholder="11 位手机号" maxLength={11} />
          </Form.Item>
          <Form.Item
            name="projectType"
            label="项目类型"
            rules={[{ required: true, message: '请选择项目类型' }]}
          >
            <Select
              placeholder="请选择"
              options={(Object.keys(PROJECT_TYPE_LABEL) as ProjectType[]).map((k) => ({
                value: k,
                label: PROJECT_TYPE_LABEL[k],
              }))}
            />
          </Form.Item>
          <Form.Item
            name="siteDescription"
            label="现场情况说明"
            rules={[{ required: true, message: '请填写现场情况说明' }]}
          >
            <Input.TextArea rows={4} placeholder="请描述现场条件、勘查情况或实施要求" />
          </Form.Item>
          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => setCreateModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit" loading={creating}>
                创建
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default ProjectOrdersPage;