import { useRef, useState } from 'react';
import { Modal, Space, message } from 'antd';
import {
  ModalForm,
  ProForm,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
  ProTable,
  type ActionType,
  type ProColumns,
} from '@ant-design/pro-components';
import dayjs from 'dayjs';
import PageContainer from '@/components/common/PageContainer';
import CodeBadge from '@/components/common/CodeBadge';
import MoneyText from '@/components/common/MoneyText';
import PermissionButton from '@/components/common/PermissionButton';
import { useCommonCodes } from '@/hooks/useCommonCodes';
import {
  deductionApi,
  DeductionResp,
  DeductionSaveReq,
  DeductionSearchParam,
} from '@/api/deduction';

// ── 상수 ─────────────────────────────────────────────────────────────────
const MENU_CODE = 'DEDUCTION';

// YYYYMM 유효성 검사
function isValidYYYYMM(v: string): boolean {
  if (!/^\d{6}$/.test(v)) return false;
  const year = parseInt(v.slice(0, 4), 10);
  const month = parseInt(v.slice(4, 6), 10);
  return year >= 2000 && year <= 2099 && month >= 1 && month <= 12;
}

// ── 컴포넌트 ──────────────────────────────────────────────────────────────
export default function DeductionList() {
  const actionRef = useRef<ActionType>();
  const [modal, setModal] = useState<{ open: boolean; editRecord?: DeductionResp }>({
    open: false,
  });

  const { data: statusCodes = [] } = useCommonCodes('DEDUCTION_STATUS');
  const { data: typeCodes = [] } = useCommonCodes('DEDUCTION_TYPE');

  // ── 열기 ───────────────────────────────────────────────────────────────
  const openCreate = () => setModal({ open: true });
  const openEdit = (record: DeductionResp) => setModal({ open: true, editRecord: record });

  // ── 취소 ───────────────────────────────────────────────────────────────
  const onCancel = (record: DeductionResp) => {
    Modal.confirm({
      title: '공제 취소',
      content: `[${record.agentName}] ${record.settleMonth} 공제를 취소하시겠습니까?`,
      okType: 'danger',
      okText: '취소 처리',
      cancelText: '닫기',
      onOk: async () => {
        await deductionApi.cancel(record.deductionId);
        message.success('취소 완료');
        actionRef.current?.reload();
      },
    });
  };

  // ── 저장 ───────────────────────────────────────────────────────────────
  const onSubmit = async (values: Record<string, unknown>) => {
    const req: DeductionSaveReq = {
      agentId: values.agentId as number,
      settleMonth: values.settleMonth as string,
      deductionType: values.deductionType as string,
      amount: values.amount as number,
      description: values.description as string | undefined,
    };

    if (modal.editRecord) {
      await deductionApi.update(modal.editRecord.deductionId, req);
      message.success('수정 완료');
    } else {
      await deductionApi.create(req);
      message.success('등록 완료');
    }
    setModal({ open: false });
    actionRef.current?.reload();
    return true;
  };

  // ── 컬럼 ───────────────────────────────────────────────────────────────
  const columns: ProColumns<DeductionResp>[] = [
    {
      title: '설계사명',
      dataIndex: 'agentName',
      width: 110,
      fixed: 'left',
      search: false,
    },
    {
      title: '설계사ID',
      dataIndex: 'agentId',
      width: 90,
      hideInTable: true,
      valueType: 'digit',
    },
    {
      title: '정산월',
      dataIndex: 'settleMonth',
      width: 90,
      align: 'center',
    },
    {
      title: '차감유형',
      dataIndex: 'deductionType',
      width: 120,
      valueType: 'select',
      valueEnum: Object.fromEntries(
        typeCodes.map((c) => [c.code, { text: c.codeName }]),
      ),
      render: (_, r) => (
        <CodeBadge groupCode="DEDUCTION_TYPE" value={r.deductionType} />
      ),
    },
    {
      title: '금액',
      dataIndex: 'amount',
      width: 130,
      align: 'right',
      search: false,
      render: (_, r) => <MoneyText value={r.amount} />,
    },
    {
      title: '설명',
      dataIndex: 'description',
      width: 200,
      ellipsis: true,
      search: false,
    },
    {
      title: '상태',
      dataIndex: 'status',
      width: 100,
      valueType: 'select',
      valueEnum: Object.fromEntries(
        statusCodes.map((c) => [c.code, { text: c.codeName }]),
      ),
      render: (_, r) => (
        <CodeBadge groupCode="DEDUCTION_STATUS" value={r.status} />
      ),
    },
    {
      title: '등록일',
      dataIndex: 'createdAt',
      width: 160,
      search: false,
      render: (_, r) => dayjs(r.createdAt).format('YYYY-MM-DD HH:mm'),
    },
    {
      title: '액션',
      valueType: 'option',
      width: 140,
      fixed: 'right',
      render: (_, r) =>
        r.status !== 'CANCELLED' ? (
          <Space>
            <PermissionButton
              key="edit"
              menuCode={MENU_CODE}
              permCode="UPDATE"
              size="small"
              type="link"
              onClick={() => openEdit(r)}
            >
              수정
            </PermissionButton>
            <PermissionButton
              key="cancel"
              menuCode={MENU_CODE}
              permCode="UPDATE"
              size="small"
              type="link"
              danger
              onClick={() => onCancel(r)}
            >
              취소
            </PermissionButton>
          </Space>
        ) : null,
    },
  ];

  // ── 렌더링 ─────────────────────────────────────────────────────────────
  return (
    <PageContainer title="공제차감 관리" description="설계사별 정산월 공제 항목 등록 및 관리">
      <ProTable<DeductionResp, DeductionSearchParam>
        actionRef={actionRef}
        rowKey="deductionId"
        columns={columns}
        scroll={{ x: 1100 }}
        request={async (params) => {
          const { current, pageSize, agentId, settleMonth, deductionType, status } =
            params as DeductionSearchParam & { current?: number; pageSize?: number };
          const res = await deductionApi.list({
            agentId,
            settleMonth,
            deductionType,
            status,
            pageNum: current,
            pageSize,
          });
          return { data: res.list, total: res.total, success: true };
        }}
        pagination={{
          pageSize: 30,
          showSizeChanger: true,
          pageSizeOptions: ['20', '50', '100'],
          showTotal: (total) => `총 ${total.toLocaleString()}건`,
        }}
        search={{
          labelWidth: 'auto',
          searchText: '검색',
          resetText: '초기화',
          collapsed: false,
          collapseRender: false,
        }}
        options={{ density: false, fullScreen: true, reload: true, setting: true }}
        toolBarRender={() => [
          <PermissionButton
            key="create"
            menuCode={MENU_CODE}
            permCode="CREATE"
            type="primary"
            onClick={openCreate}
          >
            + 공제 등록
          </PermissionButton>,
        ]}
        dateFormatter="string"
      />

      {/* ── 등록/수정 모달 ─────────────────────────────────────────────── */}
      <ModalForm
        title={modal.editRecord ? '공제 수정' : '공제 등록'}
        open={modal.open}
        onOpenChange={(o) => !o && setModal({ open: false })}
        width={520}
        layout="vertical"
        key={modal.editRecord?.deductionId ?? 'new'}
        initialValues={
          modal.editRecord
            ? {
                agentId: modal.editRecord.agentId,
                settleMonth: modal.editRecord.settleMonth,
                deductionType: modal.editRecord.deductionType,
                amount: modal.editRecord.amount,
                description: modal.editRecord.description,
              }
            : undefined
        }
        onFinish={onSubmit}
        submitter={{
          searchConfig: {
            submitText: modal.editRecord ? '수정' : '등록',
            resetText: '취소',
          },
        }}
        modalProps={{ destroyOnClose: true, maskClosable: false }}
      >
        <ProForm.Group>
          <ProFormDigit
            name="agentId"
            label="설계사 ID"
            rules={[{ required: true, message: '설계사 ID를 입력하세요' }]}
            width="sm"
            min={1}
            fieldProps={{ precision: 0 }}
          />
          <ProFormText
            name="settleMonth"
            label="정산월"
            rules={[
              { required: true, message: '정산월을 입력하세요' },
              {
                validator: (_, v) =>
                  !v || isValidYYYYMM(v)
                    ? Promise.resolve()
                    : Promise.reject(new Error('YYYYMM 6자리로 입력하세요 (예: 202501)')),
              },
            ]}
            width="sm"
            placeholder="예: 202501"
            fieldProps={{ maxLength: 6 }}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSelect
            name="deductionType"
            label="차감유형"
            rules={[{ required: true, message: '차감유형을 선택하세요' }]}
            width="md"
            options={typeCodes.map((c) => ({ value: c.code, label: c.codeName }))}
          />
          <ProFormDigit
            name="amount"
            label="금액"
            rules={[
              { required: true, message: '금액을 입력하세요' },
              {
                validator: (_, v) =>
                  v === undefined || v === null || v > 0
                    ? Promise.resolve()
                    : Promise.reject(new Error('금액은 양수여야 합니다')),
              },
            ]}
            width="md"
            min={1}
            fieldProps={{
              precision: 0,
              formatter: (v) => `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
            }}
          />
        </ProForm.Group>
        <ProFormText
          name="description"
          label="설명"
          width="xl"
          placeholder="공제 사유를 입력하세요"
        />
      </ModalForm>
    </PageContainer>
  );
}