import { useEffect, useState } from 'react'
import { Button, Checkbox, DatePicker, Input, Select, message } from 'antd'
import dayjs from 'dayjs'
import Modal from './DraggableModal'
import { FormField, FormGrid, FormSection } from './OrderFormLayout'
import client, { apiPrefix, unwrap, type ApiResponse } from '../api/client'
import { options } from '../pages/care/homesShared'
import { statusOptions, PROGRESS_STATUS, GIFT_STATUS, GIFT_PLACE } from '../pages/care/receptionStatuses'

type Props = {
  open: boolean
  selectedIds: number[]
  progressStatuses: string[]
  giftStatuses: string[]
  centerOptions?: string[]
  onCancel: () => void
  onSuccess: () => void
}

const GIFT_PLACES = Object.entries(GIFT_PLACE).map(([value, label]) => ({ value, label }))

export default function ReceptionBulkModal({
  open,
  selectedIds,
  progressStatuses,
  giftStatuses,
  centerOptions = [],
  onCancel,
  onSuccess,
}: Props) {
  const [busy, setBusy] = useState(false)

  const [pgAdminOnly, setPgAdminOnly] = useState(false)
  const [pgStatus, setPgStatus] = useState<string | undefined>()
  const [pgNotNotice, setPgNotNotice] = useState(false)
  const [pgCenterId, setPgCenterId] = useState<string | undefined>()
  const [pgMemo, setPgMemo] = useState('')
  const [pgOpended, setPgOpended] = useState('')
  const [pgCanceled, setPgCanceled] = useState('')

  const [gPlace, setGPlace] = useState<string | undefined>()
  const [gStatus, setGStatus] = useState<string | undefined>()
  const [gProgressLog, setGProgressLog] = useState('')
  const [gDeliveryCompany, setGDeliveryCompany] = useState('')
  const [gTrackingNumber, setGTrackingNumber] = useState('')
  const [gRequested, setGRequested] = useState('')
  const [gSended, setGSended] = useState('')

  useEffect(() => {
    if (!open) return
    setPgAdminOnly(false)
    setPgStatus(undefined)
    setPgNotNotice(false)
    setPgCenterId(undefined)
    setPgMemo('')
    setPgOpended('')
    setPgCanceled('')
    setGPlace(undefined)
    setGStatus(undefined)
    setGProgressLog('')
    setGDeliveryCompany('')
    setGTrackingNumber('')
    setGRequested('')
    setGSended('')
  }, [open])

  const need = () => {
    if (!selectedIds.length) {
      message.warning('대상 접수를 선택하세요.')
      return false
    }
    return true
  }

  const run = async (fn: () => Promise<void>) => {
    setBusy(true)
    try {
      await fn()
      onSuccess()
    } catch (e: unknown) {
      message.error(e instanceof Error ? e.message : '일괄 처리에 실패했습니다.')
    } finally {
      setBusy(false)
    }
  }

  const runProgress = () => {
    if (!need()) return
    if (!pgStatus) {
      message.warning('진행상황을 선택하세요.')
      return
    }
    if (!window.confirm(`선택 ${selectedIds.length}건을 일괄 처리하시겠습니까?`)) return
    void run(async () => {
      const { data } = await client.post<ApiResponse<{ count: number }>>(`${apiPrefix()}/homes/receptions/bulk-progress`, {
        ids: selectedIds,
        status: pgStatus,
        memo: pgMemo,
        centerId: pgCenterId || null,
        opended: pgOpended || null,
        canceled: pgCanceled || null,
        adminOnly: pgAdminOnly,
        notNotice: pgNotNotice,
      })
      const res = unwrap(data) as { count: number }
      message.success(`${res.count}건 진행상황을 변경했습니다.`)
    })
  }

  const runGift = () => {
    if (!need()) return
    if (!gStatus) {
      message.warning('사은품진행상황을 선택하세요.')
      return
    }
    if (!window.confirm(`선택 ${selectedIds.length}건을 일괄 처리하시겠습니까?`)) return
    void run(async () => {
      const { data } = await client.post<ApiResponse<{ count: number }>>(`${apiPrefix()}/homes/receptions/bulk-gift`, {
        ids: selectedIds,
        place: gPlace || null,
        status: gStatus,
        giftProgressLog: gProgressLog,
        deliveryCompany: gDeliveryCompany || null,
        trackingNumber: gTrackingNumber || null,
        requested: gRequested || null,
        sended: gSended || null,
      })
      const res = unwrap(data) as { count: number }
      message.success(`${res.count}건 사은품진행을 변경했습니다.`)
    })
  }

  const runCenterWait = () => {
    if (!need()) return
    if (!window.confirm('입력처 정산대기로 일괄처리 하시겠습니까?')) return
    void run(async () => {
      const { data } = await client.post<ApiResponse<{ count: number }>>(`${apiPrefix()}/homes/receptions/bulk-center-progress`, {
        ids: selectedIds,
      })
      const res = unwrap(data) as { count: number }
      message.success(`${res.count}건을 입력처 정산대기로 변경했습니다.`)
    })
  }

  return (
    <Modal
      title={`일괄진행 (${selectedIds.length}건 선택)`}
      open={open}
      onCancel={onCancel}
      footer={null}
      destroyOnHidden
      width="96%"
      style={{ maxWidth: 1040 }}
      className="reception-bulk-modal reception-apply-modal order-form-modal"
      styles={{ body: { maxHeight: 'calc(92vh - 56px)', overflowY: 'auto' } }}
    >
      <div className="order-form-embedded-inner order-form-page reception-apply-form reception-bulk-form">
        <FormSection title="진행상황 일괄 처리">
          <FormGrid>
            <FormField label="관리자 전용로그" full>
              <div className="order-form-inline">
                <Checkbox checked={pgAdminOnly} onChange={(e) => setPgAdminOnly(e.target.checked)}>
                  관리자 전용로그
                </Checkbox>
                <span className="bulk-hint">■ 관리자만 보이고 영업점은 보이지 않습니다.</span>
              </div>
            </FormField>
            <FormField label="진행상황" full>
              <div className="order-form-inline">
                <Select
                  allowClear
                  placeholder="진행상황 선택"
                  value={pgStatus}
                  onChange={(v) => setPgStatus(v)}
                  options={statusOptions(
                    Object.fromEntries((progressStatuses.length ? progressStatuses : Object.keys(PROGRESS_STATUS)).map((c) => [c, PROGRESS_STATUS[c] || c])),
                  )}
                  style={{ flex: 1, minWidth: 180 }}
                />
                <Checkbox checked={pgNotNotice} onChange={(e) => setPgNotNotice(e.target.checked)}>
                  하부점에 전달하지 않음
                </Checkbox>
              </div>
              <p className="bulk-hint-line">■ 퀵전송으로 등록된 접수인 경우 진행상황을 하부점에 알리지 않습니다.</p>
              <p className="bulk-hint-line">■ 진행상황을 1개 선택후 검색하여야 진행상황을 변경할 수 있습니다.</p>
            </FormField>
            <FormField label="입력처" full>
              <Select
                allowClear
                placeholder="입력처 선택"
                value={pgCenterId}
                onChange={(v) => setPgCenterId(v)}
                options={options(centerOptions.length ? centerOptions : ['본사'])}
              />
            </FormField>
            <FormField label="업무진행메모(LOG)" full>
              <Input.TextArea rows={3} value={pgMemo} onChange={(e) => setPgMemo(e.target.value)} />
            </FormField>
            <FormField label="개통일자">
              <DatePicker
                value={pgOpended ? dayjs(pgOpended) : null}
                onChange={(d) => setPgOpended(d ? d.format('YYYY-MM-DD') : '')}
                style={{ width: '100%' }}
              />
            </FormField>
            <FormField label="해지일자">
              <DatePicker
                value={pgCanceled ? dayjs(pgCanceled) : null}
                onChange={(d) => setPgCanceled(d ? d.format('YYYY-MM-DD') : '')}
                style={{ width: '100%' }}
              />
            </FormField>
          </FormGrid>
          <div className="bulk-foot">
            <button type="button" className="bulk-submit" disabled={busy} onClick={runProgress}>선택 일괄 처리</button>
          </div>
        </FormSection>

        <FormSection title="본사발송 사은품 일괄 처리">
          <FormGrid>
            <FormField label="사은품 지급처">
              <Select
                allowClear
                placeholder="지급처 선택"
                value={gPlace}
                onChange={(v) => setGPlace(v)}
                options={GIFT_PLACES}
              />
              <p className="bulk-hint-line">■ 지급처를 검색하세요.</p>
            </FormField>
            <FormField label="사은품진행상황">
              <Select
                allowClear
                placeholder="사은품 진행상황 선택"
                value={gStatus}
                onChange={(v) => setGStatus(v)}
                options={statusOptions(
                  Object.fromEntries((giftStatuses.length ? giftStatuses : Object.keys(GIFT_STATUS)).map((c) => [c, GIFT_STATUS[c] || c])),
                )}
              />
            </FormField>
            <FormField label="사은품진행메모(LOG)" full>
              <Input.TextArea rows={3} value={gProgressLog} onChange={(e) => setGProgressLog(e.target.value)} />
            </FormField>
            <FormField label="택배회사">
              <Input value={gDeliveryCompany} onChange={(e) => setGDeliveryCompany(e.target.value)} />
            </FormField>
            <FormField label="송장번호">
              <Input value={gTrackingNumber} onChange={(e) => setGTrackingNumber(e.target.value)} />
            </FormField>
            <FormField label="사은품지급요청일">
              <DatePicker
                value={gRequested ? dayjs(gRequested) : null}
                onChange={(d) => setGRequested(d ? d.format('YYYY-MM-DD') : '')}
                style={{ width: '100%' }}
              />
            </FormField>
            <FormField label="사은품지급완료일">
              <DatePicker
                value={gSended ? dayjs(gSended) : null}
                onChange={(d) => setGSended(d ? d.format('YYYY-MM-DD') : '')}
                style={{ width: '100%' }}
              />
            </FormField>
          </FormGrid>
          <div className="bulk-foot">
            <button type="button" className="bulk-submit" disabled={busy} onClick={runGift}>선택 일괄 처리</button>
          </div>
        </FormSection>

        <FormSection title="입력처 - 정산대기로 일괄처리">
          <FormGrid cols={1}>
            <FormField label="안내" full>
              <p className="bulk-desc-block" style={{ padding: 0, margin: 0 }}>
                ■ 개통완료된 고객중에 입력처 정산이 진행안된 고객은 입력처 정산대기로 일괄처리 진행할수 있습니다.
              </p>
            </FormField>
          </FormGrid>
          <div className="bulk-foot">
            <button type="button" className="bulk-submit" disabled={busy} onClick={runCenterWait}>선택 일괄 처리</button>
          </div>
        </FormSection>
      </div>

      <div className="balance-modal-footer" style={{ marginTop: 12 }}>
        <Button onClick={onCancel}>닫기</Button>
      </div>
    </Modal>
  )
}