import { useEffect, useState } from 'react';
import {
  Button,
  Descriptions,
  Drawer,
  Form,
  Input,
  Modal,
  Select,
  Space,
  Table,
  Tag,
  Typography,
  message,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
  SUPPORT_TICKET_STATUS_LABELS,
  SUPPORT_TICKET_TYPE_LABELS,
  type SupportTicketDto,
  type SupportTicketStatusDto,
  type SupportTicketTypeDto,
} from '@dukang/shared-types';
import { request, type HqProfile } from '../lib/api';
import { fmtTime } from '../lib/constants';
import { useAdminList } from '../lib/useAdminList';

const STATUS_COLOR: Record<SupportTicketStatusDto, string> = {
  PENDING_REVIEW: 'orange',
  REJECTED: 'red',
  DEVELOPING: 'blue',
  TESTING: 'purple',
  PASSED: 'green',
};

const TYPE_OPTIONS = (Object.keys(SUPPORT_TICKET_TYPE_LABELS) as SupportTicketTypeDto[]).map(
  (value) => ({ value, label: SUPPORT_TICKET_TYPE_LABELS[value] }),
);

const STATUS_OPTIONS = (Object.keys(SUPPORT_TICKET_STATUS_LABELS) as SupportTicketStatusDto[]).map(
  (value) => ({ value, label: SUPPORT_TICKET_STATUS_LABELS[value] }),
);

export default function SupportTicketsPage() {
  const [profile, setProfile] = useState<HqProfile | null>(null);
  const [filters, setFilters] = useState<Record<string, string>>({});
  const { data, loading, page, pageSize, setPage, setPageSize, reload } =
    useAdminList<SupportTicketDto>('/admin/support-tickets', () => {
      const qs = new URLSearchParams();
      if (filters.ticketType) qs.set('ticketType', filters.ticketType);
      if (filters.status) qs.set('status', filters.status);
      return qs;
    }, [filters]);

  const [detail, setDetail] = useState<SupportTicketDto | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [creating, setCreating] = useState(false);
  const [acting, setActing] = useState(false);
  const [rejectOpen, setRejectOpen] = useState(false);
  const [createForm] = Form.useForm<{
    ticketType: SupportTicketTypeDto;
    title: string;
    content?: string;
    remark?: string;
  }>();
  const [rejectForm] = Form.useForm<{ rejectReason: string }>();

  const isSuperAdmin = profile?.adminRole === 'SUPER_ADMIN';

  useEffect(() => {
    request<HqProfile>('/admin/auth/me').then(setProfile).catch(() => {});
  }, []);

  async function openDetail(id: string) {
    setDetail(await request<SupportTicketDto>(`/admin/support-tickets/${id}`));
    setDrawerOpen(true);
  }

  async function submitCreate() {
    const values = await createForm.validateFields();
    setCreating(true);
    try {
      await request('/admin/support-tickets', {
        method: 'POST',
        body: JSON.stringify({
          ticketType: values.ticketType,
          title: values.title.trim(),
          content: values.content?.trim() || undefined,
          remark: values.remark?.trim() || undefined,
        }),
      });
      message.success('技术支持工单已创建，等待最高管理员评审');
      setCreateOpen(false);
      createForm.resetFields();
      reload();
    } catch (e) {
      message.error(e instanceof Error ? e.message : '创建失败');
    } finally {
      setCreating(false);
    }
  }

  async function approve() {
    if (!detail) return;
    setActing(true);
    try {
      await request(`/admin/support-tickets/${detail.id}/approve`, {
        method: 'POST',
        body: JSON.stringify({}),
      });
      message.success('评审通过，已进入开发');
      setDrawerOpen(false);
      reload();
    } catch (e) {
      message.error(e instanceof Error ? e.message : '操作失败');
    } finally {
      setActing(false);
    }
  }

  async function submitReject() {
    if (!detail) return;
    const values = await rejectForm.validateFields();
    setActing(true);
    try {
      await request(`/admin/support-tickets/${detail.id}/reject`, {
        method: 'POST',
        body: JSON.stringify({ rejectReason: values.rejectReason.trim() }),
      });
      message.success('已驳回');
      setRejectOpen(false);
      rejectForm.resetFields();
      setDrawerOpen(false);
      reload();
    } catch (e) {
      message.error(e instanceof Error ? e.message : '操作失败');
    } finally {
      setActing(false);
    }
  }

  async function startTesting() {
    if (!detail) return;
    setActing(true);
    try {
      await request(`/admin/support-tickets/${detail.id}/start-testing`, {
        method: 'POST',
        body: JSON.stringify({}),
      });
      message.success('已转入测试');
      setDrawerOpen(false);
      reload();
    } catch (e) {
      message.error(e instanceof Error ? e.message : '操作失败');
    } finally {
      setActing(false);
    }
  }

  async function pass() {
    if (!detail) return;
    setActing(true);
    try {
      await request(`/admin/support-tickets/${detail.id}/pass`, {
        method: 'POST',
        body: JSON.stringify({}),
      });
      message.success('测试通过');
      setDrawerOpen(false);
      reload();
    } catch (e) {
      message.error(e instanceof Error ? e.message : '操作失败');
    } finally {
      setActing(false);
    }
  }

  const columns: ColumnsType<SupportTicketDto> = [
    { title: '工单号', dataIndex: 'ticketNo', width: 180 },
    {
      title: '类型',
      dataIndex: 'ticketType',
      width: 90,
      render: (t: SupportTicketTypeDto) => SUPPORT_TICKET_TYPE_LABELS[t] ?? t,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (s: SupportTicketStatusDto) => (
        <Tag color={STATUS_COLOR[s]}>{SUPPORT_TICKET_STATUS_LABELS[s] ?? s}</Tag>
      ),
    },
    { title: '标题', dataIndex: 'title', ellipsis: true },
    { title: '创建人', dataIndex: 'creatorName', width: 100 },
    { title: '时间', dataIndex: 'createdAt', width: 160, render: fmtTime },
    {
      title: '操作',
      width: 80,
      render: (_, row) => (
        <Button type="link" size="small" onClick={() => void openDetail(String(row.id))}>
          详情
        </Button>
      ),
    },
  ];

  const drawerExtra = (() => {
    if (!detail) return null;
    if (detail.status === 'PENDING_REVIEW' && isSuperAdmin) {
      return (
        <Space>
          <Button type="primary" loading={acting} onClick={() => void approve()}>
            评审通过
          </Button>
          <Button danger loading={acting} onClick={() => setRejectOpen(true)}>
            驳回
          </Button>
        </Space>
      );
    }
    if (detail.status === 'DEVELOPING') {
      return (
        <Button type="primary" loading={acting} onClick={() => void startTesting()}>
          开发完成 · 转入测试
        </Button>
      );
    }
    if (detail.status === 'TESTING') {
      return (
        <Button type="primary" loading={acting} onClick={() => void pass()}>
          测试通过
        </Button>
      );
    }
    return null;
  })();

  return (
    <div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: 16,
        }}
      >
        <Typography.Title level={4} style={{ margin: 0 }}>
          技术支持
        </Typography.Title>
        <Button type="primary" onClick={() => setCreateOpen(true)}>
          创建工单
        </Button>
      </div>

      <Form
        layout="inline"
        style={{ marginBottom: 16 }}
        onFinish={(v) => {
          setFilters(v);
          setPage(1);
        }}
      >
        <Form.Item name="ticketType" label="类型">
          <Select allowClear style={{ width: 120 }} options={TYPE_OPTIONS} />
        </Form.Item>
        <Form.Item name="status" label="状态">
          <Select allowClear style={{ width: 120 }} options={STATUS_OPTIONS} />
        </Form.Item>
        <Button type="primary" htmlType="submit">
          筛选
        </Button>
      </Form>

      <Table
        rowKey="id"
        loading={loading}
        columns={columns}
        dataSource={data?.items ?? []}
        scroll={{ x: 900 }}
        pagination={{
          current: page,
          pageSize,
          total: data?.total ?? 0,
          showSizeChanger: true,
          onChange: (p, ps) => {
            setPage(p);
            setPageSize(ps);
          },
        }}
      />

      <Drawer
        title="技术支持详情"
        width={520}
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        extra={drawerExtra}
      >
        {detail && (
          <Descriptions column={1} bordered size="small">
            <Descriptions.Item label="工单号">{detail.ticketNo}</Descriptions.Item>
            <Descriptions.Item label="类型">
              {SUPPORT_TICKET_TYPE_LABELS[detail.ticketType] ?? detail.ticketType}
            </Descriptions.Item>
            <Descriptions.Item label="状态">
              <Tag color={STATUS_COLOR[detail.status]}>
                {SUPPORT_TICKET_STATUS_LABELS[detail.status] ?? detail.status}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="标题">{detail.title}</Descriptions.Item>
            <Descriptions.Item label="内容">
              <div style={{ whiteSpace: 'pre-wrap' }}>{detail.content || '—'}</div>
            </Descriptions.Item>
            <Descriptions.Item label="创建人">{detail.creatorName}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{fmtTime(detail.createdAt)}</Descriptions.Item>
            <Descriptions.Item label="评审人">{detail.reviewerName || '—'}</Descriptions.Item>
            <Descriptions.Item label="评审时间">
              {detail.reviewedAt ? fmtTime(detail.reviewedAt) : '—'}
            </Descriptions.Item>
            <Descriptions.Item label="驳回理由">{detail.rejectReason || '—'}</Descriptions.Item>
            <Descriptions.Item label="备注">{detail.remark || '—'}</Descriptions.Item>
          </Descriptions>
        )}
      </Drawer>

      <Modal
        title="创建技术支持工单"
        open={createOpen}
        onCancel={() => setCreateOpen(false)}
        onOk={() => void submitCreate()}
        confirmLoading={creating}
        destroyOnClose
        okText="提交"
      >
        <Form form={createForm} layout="vertical" initialValues={{ ticketType: 'BUG' }}>
          <Form.Item
            name="ticketType"
            label="类型"
            rules={[{ required: true, message: '请选择类型' }]}
          >
            <Select options={TYPE_OPTIONS} />
          </Form.Item>
          <Form.Item
            name="title"
            label="标题"
            rules={[{ required: true, message: '请填写标题' }]}
          >
            <Input placeholder="简要描述问题或建议" maxLength={128} showCount />
          </Form.Item>
          <Form.Item name="content" label="详细说明">
            <Input.TextArea rows={5} placeholder="复现步骤、期望结果等" maxLength={4000} showCount />
          </Form.Item>
          <Form.Item name="remark" label="备注">
            <Input.TextArea rows={2} placeholder="可选" maxLength={512} showCount />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="驳回技术支持工单"
        open={rejectOpen}
        onCancel={() => setRejectOpen(false)}
        onOk={() => void submitReject()}
        confirmLoading={acting}
        destroyOnClose
        okText="确认驳回"
        okButtonProps={{ danger: true }}
      >
        <Form form={rejectForm} layout="vertical">
          <Form.Item
            name="rejectReason"
            label="驳回理由"
            rules={[{ required: true, message: '请填写驳回理由' }]}
          >
            <Input.TextArea rows={4} placeholder="必填" maxLength={512} showCount />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}