import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Card,
  Form,
  Input,
  Select,
  Button,
  Space,
  Tag,
  message,
  Modal,
  Spin,
  Steps,
  Descriptions,
  Divider,
} from 'antd';
import {
  ArrowLeftOutlined,
  FileTextOutlined,
  PrinterOutlined,
  QrcodeOutlined,
  SaveOutlined,
  SendOutlined,
  StopOutlined,
  UserSwitchOutlined,
} from '@ant-design/icons';
import { aftersalesApi, authApi, usersApi } from '@/services/api';
import logo from '@/assets/img/logo.png?url';
import type {
  AftersalesOrder,
  AftersalesServiceType,
  AftersalesWorkOrderStatus,
  UpdateAftersalesRequest,
  User,
} from '@/types';
import './styles/AftersalesDetail.css';

const SERVICE_TYPE_LABEL: Record<AftersalesServiceType, string> = {
  software: '软件故障',
  hardware: '硬件故障',
  maintenance: '售后维保',
};

const WORK_ORDER_STATUS_LABEL: Record<AftersalesWorkOrderStatus, string> = {
  created: '待处理',
  pending_confirmation: '待客户确认',
  closed: '已完成',
  rejected: '已退回',
};

const WORK_ORDER_STATUS_COLOR: Record<AftersalesWorkOrderStatus, string> = {
  created: 'default',
  pending_confirmation: 'processing',
  closed: 'success',
  rejected: 'warning',
};

const AUTHORIZATION_STATUS_LABEL = {
  pending: '待确认',
  authorized: '已授权',
  unauthorized: '未授权',
} as const;

function statusStepIndex(status: AftersalesWorkOrderStatus): number {
  switch (status) {
    case 'created':
      return 0;
    case 'pending_confirmation':
      return 1;
    case 'closed':
    case 'rejected':
      return 2;
  }
}

function formatDateTime(value?: string) {
  if (!value) return '-';
  return new Date(value).toLocaleString('zh-CN');
}

function AftersalesDetailPage() {
  const { serialNumber = '' } = useParams<{ serialNumber: string }>();
  const navigate = useNavigate();
  const currentUser = authApi.getCurrentUser();
  const isAdmin = currentUser?.role === 'admin';

  const [order, setOrder] = useState<AftersalesOrder | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [form] = Form.useForm();

  const [qrModalVisible, setQrModalVisible] = useState(false);
  const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
  const [qrUrl, setQrUrl] = useState('');
  const [electronicFormVisible, setElectronicFormVisible] = useState(false);

  const [reassignModalVisible, setReassignModalVisible] = useState(false);
  const [reassignTechnicianId, setReassignTechnicianId] = useState<number | undefined>();
  const [assignableUsers, setAssignableUsers] = useState<User[]>([]);

  const loadOrder = async () => {
    setLoading(true);
    try {
      const data = await aftersalesApi.get(serialNumber);
      setOrder(data);
      form.setFieldsValue({
        companyAddress: data.companyAddress,
        contactName: data.contactName,
        contactPhone: data.contactPhone,
        serviceType: data.serviceType,
        issueDescription: data.issueDescription,
        resolutionNote: data.resolutionNote,
      });
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '加载工单失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (serialNumber) loadOrder();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [serialNumber]);

  const openReassign = async () => {
    setReassignModalVisible(true);
    if (assignableUsers.length === 0) {
      try {
        const users = await usersApi.assignable();
        setAssignableUsers(users);
      } catch (err: any) {
        message.error(err?.response?.data?.message || err.message || '加载技术员列表失败');
      }
    }
  };

  const handleSave = async (values: UpdateAftersalesRequest) => {
    if (!order) return;
    setSaving(true);
    try {
      const updated = await aftersalesApi.update(order.serialNumber, values);
      setOrder(updated);
      message.success('保存成功');
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  const handleSubmitForConfirmation = async () => {
    if (!order) return;
    const resolutionNote = form.getFieldValue('resolutionNote')?.trim();
    if (!resolutionNote) {
      message.error('请先填写处理结果');
      return;
    }
    Modal.confirm({
      title: '确认提交',
      content: '提交后工单将进入"待客户确认"状态，客户扫码确认后才能关闭工单。',
      okText: '提交',
      cancelText: '取消',
      onOk: async () => {
        setSubmitting(true);
        try {
          const updated = await aftersalesApi.submit(order.serialNumber, resolutionNote);
          setOrder(updated);
          message.success('已提交客户确认');
        } catch (err: any) {
          message.error(err?.response?.data?.message || err.message || '提交失败');
        } finally {
          setSubmitting(false);
        }
      },
    });
  };

  const handleGenerateQrCode = async () => {
    if (!order) return;
    try {
      const result = await aftersalesApi.generateQrCode(order.serialNumber);
      const data = result.qrCodeData.startsWith('data:')
        ? result.qrCodeData
        : `data:image/png;base64,${result.qrCodeData}`;
      setQrCodeDataUrl(data);
      setQrUrl(result.queryUrl);
      setQrModalVisible(true);
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '生成二维码失败');
    }
  };

  const handleDownloadQR = () => {
    if (!order || !qrCodeDataUrl) return;
    const link = document.createElement('a');
    link.download = `${order.serialNumber}.png`;
    link.href = qrCodeDataUrl;
    link.click();
  };

  const handlePrintElectronicForm = () => {
    const formNode = document.querySelector('.aftersales-electronic-form');
    if (!formNode) return;

    const printWindow = window.open('', '_blank', 'width=960,height=720');
    if (!printWindow) {
      message.error('无法打开打印窗口，请检查浏览器弹窗设置');
      return;
    }

    printWindow.document.write(`
      <!doctype html>
      <html>
        <head>
          <title>${order?.serialNumber || '售后电子表单'}</title>
          <style>
            body { margin: 24px; color: #111827; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
            .aftersales-electronic-form { max-width: 1080px; margin: 0 auto; }
            .electronic-form-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
            .electronic-form-logo { height: 34px; object-fit: contain; }
            .electronic-form-title { flex: 1; text-align: center; font-size: 20px; font-weight: 700; }
            .electronic-form-serial { border: 2px solid #111827; padding: 8px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; }
            .electronic-form-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
            .electronic-form-table th, .electronic-form-table td { border: 1px solid #1f2937; padding: 9px 10px; vertical-align: top; word-break: break-word; }
            .electronic-form-table th { width: 120px; background: #f3f4f6; text-align: left; font-weight: 600; }
            .electronic-form-table td { min-height: 24px; }
            .electronic-form-table .electronic-form-code { color: #165dff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; }
            .electronic-form-text { min-height: 72px; white-space: pre-wrap; }
          </style>
        </head>
        <body>${formNode.outerHTML}</body>
      </html>
    `);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(() => printWindow.print(), 300);
  };

  const handleForceClose = () => {
    if (!order) return;
    Modal.confirm({
      title: '强制关闭工单',
      content: '强制关闭后工单状态将变为"已完成"，且不可恢复。',
      okText: '强制关闭',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          const updated = await aftersalesApi.forceClose(order.serialNumber);
          setOrder(updated);
          message.success('工单已强制关闭');
        } catch (err: any) {
          message.error(err?.response?.data?.message || err.message || '强制关闭失败');
        }
      },
    });
  };

  const handleReassign = async () => {
    if (!order || !reassignTechnicianId) {
      message.error('请输入新的技术员 ID');
      return;
    }
    try {
      const updated = await aftersalesApi.reassign(order.serialNumber, reassignTechnicianId);
      setOrder(updated);
      message.success('重新分配成功');
      setReassignModalVisible(false);
      setReassignTechnicianId(undefined);
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '重新分配失败');
    }
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '80px 0' }}>
        <Spin size="large" />
      </div>
    );
  }

  if (!order) {
    return null;
  }

  const isClosed = order.workOrderStatus === 'closed';
  const isPendingCustomer = order.workOrderStatus === 'pending_confirmation';
  const canSubmit =
    !isClosed &&
    !isPendingCustomer &&
    (isAdmin || order.technicianId === currentUser?.id);
  const canEdit = !isClosed && (isAdmin || order.technicianId === currentUser?.id);

  const stepStatus =
    order.workOrderStatus === 'rejected'
      ? 'error'
      : isClosed
      ? 'finish'
      : 'process';

  return (
    <div>
      <Card
        title={
          <Space>
            <Button
              type="text"
              icon={<ArrowLeftOutlined />}
              onClick={() => navigate('/admin/aftersales')}
            />
            <span style={{ fontFamily: 'monospace', color: '#165DFF' }}>
              {order.serialNumber}
            </span>
            <Tag color={WORK_ORDER_STATUS_COLOR[order.workOrderStatus]}>
              {WORK_ORDER_STATUS_LABEL[order.workOrderStatus]}
            </Tag>
            {order.rejectCount > 0 && <Tag color="orange">退回 {order.rejectCount} 次</Tag>}
          </Space>
        }
        extra={
          <Space>
            <Button icon={<FileTextOutlined />} onClick={() => setElectronicFormVisible(true)}>
              电子表单
            </Button>
            <Button icon={<QrcodeOutlined />} onClick={handleGenerateQrCode}>
              生成二维码
            </Button>
            {isAdmin && !isClosed && (
              <>
                <Button icon={<UserSwitchOutlined />} onClick={openReassign}>
                  工单分配
                </Button>
                <Button danger icon={<StopOutlined />} onClick={handleForceClose}>
                  强制关闭
                </Button>
              </>
            )}
          </Space>
        }
      >
        <Steps
          current={statusStepIndex(order.workOrderStatus)}
          status={stepStatus}
          items={[
            { title: '工单创建', description: new Date(order.createdAt).toLocaleString('zh-CN') },
            {
              title: '待客户确认',
              description: order.scannedAt
                ? `客户扫码 ${new Date(order.scannedAt).toLocaleString('zh-CN')}`
                : undefined,
            },
            {
              title: order.workOrderStatus === 'rejected' ? '客户退回' : '工单完成',
              description: order.confirmedAt
                ? new Date(order.confirmedAt).toLocaleString('zh-CN')
                : undefined,
            },
          ]}
        />

        <Divider />

        <Descriptions column={2} size="small" bordered style={{ marginBottom: 24 }}>
          <Descriptions.Item label="客户公司">{order.companyName}</Descriptions.Item>
          <Descriptions.Item label="负责技术员">
            {order.technician?.name || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="创建人">{order.creator?.name || '-'}</Descriptions.Item>
          <Descriptions.Item label="授权状态">
            {order.authorizationStatus === 'authorized'
              ? '已授权'
              : order.authorizationStatus === 'unauthorized'
              ? '未授权'
              : '待确认'}
          </Descriptions.Item>
        </Descriptions>

        {order.authorizationStatus === 'authorized' && order.signature && (
          <div style={{ marginBottom: 24 }}>
            <div style={{ fontSize: 13, color: '#595959', marginBottom: 8 }}>
              客户确认签名
              {order.confirmedAt && (
                <span style={{ marginLeft: 12, color: '#8c8c8c', fontSize: 12 }}>
                  签署时间：{new Date(order.confirmedAt).toLocaleString('zh-CN')}
                </span>
              )}
            </div>
            <img
              src={order.signature}
              alt="客户确认签名"
              style={{
                maxWidth: 480,
                maxHeight: 220,
                width: '100%',
                height: 'auto',
                objectFit: 'contain',
                border: '1px solid #f0f0f0',
                borderRadius: 6,
                background: '#fff',
              }}
            />
          </div>
        )}

        <Form form={form} layout="vertical" onFinish={handleSave} disabled={!canEdit}>
          <Form.Item
            name="companyAddress"
            label="公司位置"
            rules={[{ required: true, message: '请输入公司位置' }]}
          >
            <Input />
          </Form.Item>
          <Space style={{ display: 'flex' }} size={16}>
            <Form.Item
              name="contactName"
              label="联系人"
              rules={[{ required: true, message: '请输入联系人' }]}
              style={{ flex: 1 }}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="contactPhone"
              label="联系电话"
              rules={[
                { required: true, message: '请输入联系电话' },
                { pattern: /^\d{11}$/, message: '请输入 11 位手机号' },
              ]}
              style={{ flex: 1 }}
            >
              <Input maxLength={11} />
            </Form.Item>
            <Form.Item
              name="serviceType"
              label="服务类型"
              rules={[{ required: true, message: '请选择服务类型' }]}
              style={{ flex: 1 }}
            >
              <Select
                options={(Object.keys(SERVICE_TYPE_LABEL) as AftersalesServiceType[]).map((k) => ({
                  value: k,
                  label: SERVICE_TYPE_LABEL[k],
                }))}
              />
            </Form.Item>
          </Space>
          <Form.Item
            name="issueDescription"
            label="问题描述反馈"
            rules={[{ required: true, message: '请填写问题描述反馈' }]}
          >
            <Input.TextArea rows={3} />
          </Form.Item>
          <Form.Item
            name="resolutionNote"
            label="处理结果"
            tooltip="维修完成后填写，提交客户确认后客户可在公开页看到此内容"
          >
            <Input.TextArea rows={4} placeholder="请描述维修过程和最终处理结果" />
          </Form.Item>

          {canEdit && (
            <Form.Item>
              <Space>
                <Button type="primary" htmlType="submit" icon={<SaveOutlined />} loading={saving}>
                  保存
                </Button>
                {canSubmit && (
                  <Button
                    type="primary"
                    icon={<SendOutlined />}
                    loading={submitting}
                    onClick={handleSubmitForConfirmation}
                  >
                    提交客户确认
                  </Button>
                )}
              </Space>
            </Form.Item>
          )}
        </Form>
      </Card>

      <Modal
        title="售后工单二维码"
        open={qrModalVisible}
        onCancel={() => setQrModalVisible(false)}
        footer={[
          <Button key="download" onClick={handleDownloadQR}>
            下载二维码
          </Button>,
          <Button key="close" type="primary" onClick={() => setQrModalVisible(false)}>
            关闭
          </Button>,
        ]}
      >
        <div style={{ textAlign: 'center' }}>
          {qrCodeDataUrl && (
            <>
              <img src={qrCodeDataUrl} alt="QR Code" style={{ width: 220, height: 220 }} />
              <p
                style={{
                  marginTop: 12,
                  fontFamily: 'monospace',
                  fontSize: 16,
                  fontWeight: 'bold',
                  color: '#165DFF',
                }}
              >
                {order.serialNumber}
              </p>
              <p style={{ fontSize: 12, color: '#888', wordBreak: 'break-all' }}>{qrUrl}</p>
            </>
          )}
        </div>
      </Modal>

      <Modal
        title="售后电子表单"
        open={electronicFormVisible}
        onCancel={() => setElectronicFormVisible(false)}
        width={960}
        footer={[
          <Button key="print" icon={<PrinterOutlined />} onClick={handlePrintElectronicForm}>
            打印表单
          </Button>,
          <Button key="close" type="primary" onClick={() => setElectronicFormVisible(false)}>
            关闭
          </Button>,
        ]}
      >
        <div className="aftersales-electronic-form">
          <div className="electronic-form-header">
            <img src={logo} alt="浙江贝凡" className="electronic-form-logo" />
            <div className="electronic-form-title">浙江贝凡售后服务电子表单</div>
            <div className="electronic-form-serial">售后码：{order.serialNumber}</div>
          </div>
          <table className="electronic-form-table">
            <tbody>
              <tr>
                <th>售后码</th>
                <td className="electronic-form-code">{order.serialNumber}</td>
                <th>工单状态</th>
                <td>{WORK_ORDER_STATUS_LABEL[order.workOrderStatus]}</td>
              </tr>
              <tr>
                <th>授权状态</th>
                <td>{AUTHORIZATION_STATUS_LABEL[order.authorizationStatus]}</td>
                <th>服务类型</th>
                <td>{SERVICE_TYPE_LABEL[order.serviceType]}</td>
              </tr>
              <tr>
                <th>客户公司</th>
                <td>{order.companyName}</td>
                <th>公司位置</th>
                <td>{order.companyAddress}</td>
              </tr>
              <tr>
                <th>联系人</th>
                <td>{order.contactName}</td>
                <th>联系电话</th>
                <td>{order.contactPhone}</td>
              </tr>
              <tr>
                <th>负责技术员</th>
                <td>{order.technician?.name || '-'}</td>
                <th>创建人</th>
                <td>{order.creator?.name || '-'}</td>
              </tr>
              <tr>
                <th>创建时间</th>
                <td>{formatDateTime(order.createdAt)}</td>
                <th>更新时间</th>
                <td>{formatDateTime(order.updatedAt)}</td>
              </tr>
              <tr>
                <th>客户扫码时间</th>
                <td>{formatDateTime(order.scannedAt)}</td>
                <th>客户确认时间</th>
                <td>{formatDateTime(order.confirmedAt)}</td>
              </tr>
              <tr>
                <th>退回次数</th>
                <td>{order.rejectCount}</td>
                <th>表单生成时间</th>
                <td>{formatDateTime(new Date().toISOString())}</td>
              </tr>
              <tr>
                <th>问题描述反馈</th>
                <td colSpan={3} className="electronic-form-text">
                  {order.issueDescription || '-'}
                </td>
              </tr>
              <tr>
                <th>处理结果</th>
                <td colSpan={3} className="electronic-form-text">
                  {order.resolutionNote || '-'}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </Modal>

      <Modal
        title="工单分配"
        open={reassignModalVisible}
        onCancel={() => {
          setReassignModalVisible(false);
          setReassignTechnicianId(undefined);
        }}
        onOk={handleReassign}
        okText="确认"
        cancelText="取消"
      >
        <Form layout="vertical">
          <Form.Item label="选择技术员" required>
            <Select
              placeholder="请选择技术员或管理员"
              value={reassignTechnicianId}
              onChange={(v) => setReassignTechnicianId(v)}
              showSearch
              optionFilterProp="label"
              options={assignableUsers.map((u) => ({
                value: u.id,
                label: `${u.name}（${u.username}）${u.role === 'admin' ? ' · 管理员' : ' · 技术员'}`,
              }))}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default AftersalesDetailPage;