import { useMemo, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
  Button,
  Card,
  Checkbox,
  Form,
  Input,
  Modal,
  Radio,
  Select,
  Space,
  Table,
  Typography,
  message,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { PlusOutlined, SearchOutlined, ShopOutlined } from '@ant-design/icons'
import client, { apiPrefix, unwrap, type ApiResponse } from '../../api/client'
import DraggableModal from '../../components/DraggableModal'
import { FormField, FormGrid, FormSection } from '../../components/OrderFormLayout'
import BranchFeeFlowModals from './BranchFeeFlowModals'

type BranchRow = {
  id: number
  name?: string
  officeName?: string
  userid?: string
  phone?: string
  email?: string
  sido?: string
  level?: number
  grant?: number
  branchGroupId?: number | null
  branchGroupName?: string | null
  hasBusinessLicense?: boolean
  isTax?: number
  createdAt?: string
}

type BranchGroup = { id: number; name: string }

type BranchDetail = BranchRow & {
  fax?: string
  zipcode?: string
  address?: string
  addressDetail?: string
  tel?: string
  centerName?: string
  isPersonal?: boolean
  accountBank?: string
  accountNumber?: string
  accountName?: string
  contactPhone?: string
  contactNateon?: string
  acceptPhone?: number
  acceptNateon?: number
  memo?: string
  adminMemo?: string
  licenseNumber?: string
  licenseType?: string
  licenseItem?: string
  notifyPhones?: string[]
  permissionOrderDateUpdate?: boolean
  permissionCalculate?: boolean
  permissionConfig?: boolean
  permissionExcelDownload?: boolean
  permissionChart?: boolean
}

const PAGE_SIZE = 50
const BANKS = ['국민은행', '우리은행', '신한은행', '하나은행', '기업은행', '농협', 'SC제일', '카카오뱅크', '기타']

function levelLabel(l?: number) {
  if (l === 5) return <span style={{ color: '#04A600' }}>센터</span>
  if (l === 9) return <span style={{ color: '#0F6DC4' }}>관리자</span>
  if (l === 10) return <span style={{ color: '#cc0000' }}>최고관리자</span>
  return <span>영업점</span>
}

function EditBranchFormBody({
  groups,
  centers,
}: {
  groups: BranchGroup[]
  centers: { id: number; name: string }[]
}) {
  const isPersonal = Form.useWatch('isPersonal')
  const level = Form.useWatch('level')

  return (
    <>
      <FormSection title="기본 정보">
        <FormGrid cols={1}>
          <FormField label="유형" full>
            <Form.Item name="isPersonal" noStyle>
              <Radio.Group
                className="of-antd-choice-row"
                style={{ padding: 0, border: 'none' }}
                options={[
                  { value: true, label: '개인' },
                  { value: false, label: '사업자 (일반/법인)' },
                ]}
              />
            </Form.Item>
          </FormField>
        </FormGrid>
        <FormGrid>
          <FormField label="영업점 그룹">
            <Form.Item name="branchGroupId" noStyle>
              <Select allowClear placeholder="영업점 그룹 선택" options={groups.map((g) => ({ value: g.id, label: g.name }))} />
            </Form.Item>
          </FormField>
          <FormField label="수수료 유지">
            <Form.Item name="keepFee" valuePropName="checked" noStyle>
              <Checkbox>그룹 변경 시 수수료 유지</Checkbox>
            </Form.Item>
          </FormField>
          <FormField label="레벨">
            <Form.Item name="level" noStyle>
              <Select options={[
                { value: 1, label: '영업점' },
                { value: 5, label: '센터' },
                { value: 9, label: '관리자' },
                { value: 10, label: '최고관리자' },
              ]} />
            </Form.Item>
          </FormField>
          <FormField label="입력처">
            {level === 5 ? (
              <Form.Item name="centerName" noStyle>
                <Select allowClear options={centers.map((c) => ({ value: c.name, label: c.name }))} />
              </Form.Item>
            ) : (
              <span className="of-muted">센터 레벨에서 선택</span>
            )}
          </FormField>
          {level === 9 && (
            <FormField label="권한" full>
              <Space wrap size={[8, 4]}>
                <Form.Item name="permissionOrderDateUpdate" valuePropName="checked" noStyle><Checkbox>접수일자 변경</Checkbox></Form.Item>
                <Form.Item name="permissionCalculate" valuePropName="checked" noStyle><Checkbox>정산</Checkbox></Form.Item>
                <Form.Item name="permissionConfig" valuePropName="checked" noStyle><Checkbox>환경설정</Checkbox></Form.Item>
                <Form.Item name="permissionExcelDownload" valuePropName="checked" noStyle><Checkbox>엑셀 다운로드</Checkbox></Form.Item>
                <Form.Item name="permissionChart" valuePropName="checked" noStyle><Checkbox>통계</Checkbox></Form.Item>
              </Space>
            </FormField>
          )}
          <FormField label="이름*">
            <Form.Item name="name" noStyle rules={[{ required: true }]}><Input /></Form.Item>
          </FormField>
          <FormField label="영업점명*">
            <Form.Item name="officeName" noStyle rules={[{ required: true }]}><Input /></Form.Item>
          </FormField>
          <FormField label="아이디">
            <Form.Item name="userid" noStyle><Input disabled /></Form.Item>
          </FormField>
          <FormField label="패스워드">
            <div style={{ display: 'flex', gap: 8, width: '100%' }}>
              <Form.Item name="password" noStyle style={{ flex: 1, margin: 0 }}>
                <Input.Password placeholder="변경 시 입력" />
              </Form.Item>
              <Form.Item name="passwordConfirmation" noStyle style={{ flex: 1, margin: 0 }}>
                <Input.Password placeholder="확인" />
              </Form.Item>
            </div>
          </FormField>
          <FormField label="이메일" full>
            <Form.Item name="email" noStyle><Input /></Form.Item>
          </FormField>
          <FormField label="휴대폰">
            <Form.Item name="phone" noStyle><Input placeholder="010-0000-0000" /></Form.Item>
          </FormField>
          <FormField label="연락처 / 팩스">
            <div style={{ display: 'flex', gap: 8, width: '100%' }}>
              <Form.Item name="tel" noStyle style={{ flex: 1, margin: 0 }}><Input placeholder="전화" /></Form.Item>
              <Form.Item name="fax" noStyle style={{ flex: 1, margin: 0 }}><Input placeholder="팩스" /></Form.Item>
            </div>
          </FormField>
          <FormField label="우편번호">
            <Form.Item name="zipcode" noStyle><Input /></Form.Item>
          </FormField>
          <FormField label="주소">
            <Form.Item name="address" noStyle><Input /></Form.Item>
          </FormField>
          <FormField label="상세주소" full>
            <Form.Item name="addressDetail" noStyle><Input /></Form.Item>
          </FormField>
          {isPersonal === false && (
            <>
              <FormField label="사업자등록번호">
                <Form.Item name="licenseNumber" noStyle><Input /></Form.Item>
              </FormField>
              <FormField label="업태 / 업종">
                <div style={{ display: 'flex', gap: 8, width: '100%' }}>
                  <Form.Item name="licenseType" noStyle style={{ flex: 1, margin: 0 }}><Input placeholder="업태" /></Form.Item>
                  <Form.Item name="licenseItem" noStyle style={{ flex: 1, margin: 0 }}><Input placeholder="업종" /></Form.Item>
                </div>
              </FormField>
            </>
          )}
        </FormGrid>
      </FormSection>

      <FormSection title="결제 정보">
        <FormGrid>
          <FormField label="은행">
            <Form.Item name="accountBank" noStyle>
              <Select allowClear options={BANKS.map((b) => ({ value: b, label: b }))} />
            </Form.Item>
          </FormField>
          <FormField label="계좌번호">
            <Form.Item name="accountNumber" noStyle><Input /></Form.Item>
          </FormField>
          <FormField label="예금주">
            <div style={{ display: 'flex', gap: 8, width: '100%', alignItems: 'center' }}>
              <Form.Item name="accountName" noStyle style={{ flex: 1, margin: 0 }}><Input /></Form.Item>
              <Form.Item name="accountNameIsName" valuePropName="checked" noStyle>
                <Checkbox>정보동일</Checkbox>
              </Form.Item>
            </div>
          </FormField>
          <FormField label="세금계산서">
            <Form.Item name="isTax" noStyle>
              <Select options={[
                { value: 1, label: '세금계산서발행' },
                { value: 0, label: '종합소득세공제' },
              ]} />
            </Form.Item>
          </FormField>
        </FormGrid>
      </FormSection>

      <FormSection title="업무진행 상황 수신정보">
        <FormGrid>
          <FormField label="수신설정" full>
            <Space wrap>
              <Form.Item name="acceptPhone" valuePropName="checked" noStyle><Checkbox>핸드폰 문자 받음</Checkbox></Form.Item>
              <Form.Item name="acceptNateon" valuePropName="checked" noStyle><Checkbox>네이트온 쪽지 받음</Checkbox></Form.Item>
            </Space>
          </FormField>
          <FormField label="휴대폰">
            <Form.Item name="contactPhone" noStyle><Input /></Form.Item>
          </FormField>
          <FormField label="네이트온 아이디">
            <Form.Item name="contactNateon" noStyle><Input /></Form.Item>
          </FormField>
          <FormField label="정책 수신 휴대폰" full>
            <Form.List name="notifyPhones">
              {(fields) => (
                <Space wrap>
                  {fields.map((field) => (
                    <Form.Item {...field} key={field.key} noStyle>
                      <Input style={{ width: 140 }} placeholder={`휴대폰 ${field.name + 1}`} />
                    </Form.Item>
                  ))}
                </Space>
              )}
            </Form.List>
          </FormField>
        </FormGrid>
      </FormSection>

      <FormSection title="메모">
        <FormGrid cols={1}>
          <FormField label="메모" full>
            <Form.Item name="memo" noStyle><Input.TextArea rows={2} /></Form.Item>
          </FormField>
          <FormField label="관리자 메모" full>
            <Form.Item name="adminMemo" noStyle><Input.TextArea rows={2} /></Form.Item>
          </FormField>
        </FormGrid>
      </FormSection>
    </>
  )
}

export default function BranchListPage() {
  const qc = useQueryClient()
  const [form] = Form.useForm()
  const [editForm] = Form.useForm()
  const [createOpen, setCreateOpen] = useState(false)
  const [editOpen, setEditOpen] = useState(false)
  const [feeOpen, setFeeOpen] = useState(false)
  const [feeBranch, setFeeBranch] = useState<BranchRow | null>(null)
  const [editingId, setEditingId] = useState<number | null>(null)
  const [selectedId, setSelectedId] = useState<number | null>(null)
  const [page, setPage] = useState(0)
  const [draft, setDraft] = useState({ fGroup: '', fSido: '', fUserid: '', fOffice: '', fName: '' })
  const [applied, setApplied] = useState(draft)

  const { data: rows = [], isLoading } = useQuery({
    queryKey: ['homes-branches'],
    queryFn: async () => {
      const { data } = await client.get<ApiResponse<BranchRow[]>>(`${apiPrefix()}/homes/branches`)
      return unwrap(data) || []
    },
  })

  const { data: groups = [] } = useQuery({
    queryKey: ['homes-branch-groups'],
    queryFn: async () => {
      const { data } = await client.get<ApiResponse<BranchGroup[]>>(`${apiPrefix()}/homes/branch-groups`)
      return unwrap(data) || []
    },
  })

  const { data: centers = [] } = useQuery({
    queryKey: ['homes-branch-centers'],
    queryFn: async () => {
      const { data } = await client.get<ApiResponse<{ id: number; name: string }[]>>(`${apiPrefix()}/homes/branch-centers`)
      return unwrap(data) || []
    },
  })

  const sidoOptions = useMemo(() => {
    const set = new Set<string>()
    rows.forEach((b) => { if (b.sido) set.add(b.sido) })
    return Array.from(set).sort()
  }, [rows])

  const filtered = useMemo(() => {
    const inc = (v: string | null | undefined, q: string) => (v ?? '').toLowerCase().includes(q.toLowerCase())
    return rows.filter((b) =>
      (!applied.fGroup || String(b.branchGroupId ?? '') === applied.fGroup)
      && (!applied.fSido || b.sido === applied.fSido)
      && (!applied.fUserid || inc(b.userid, applied.fUserid))
      && (!applied.fOffice || inc(b.officeName, applied.fOffice))
      && (!applied.fName || inc(b.name, applied.fName)),
    )
  }, [rows, applied])

  const pageRows = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)

  const grantMut = useMutation({
    mutationFn: async ({ id, g }: { id: number; g: number }) => {
      const { data } = await client.post(`${apiPrefix()}/homes/branches/${id}/grant/${g}`)
      return unwrap(data as ApiResponse)
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['homes-branches'] })
      message.success('승인 상태를 변경했습니다.')
    },
    onError: (e: Error) => message.error(e.message),
  })

  const createMut = useMutation({
    mutationFn: async (values: Record<string, unknown>) => {
      const params = new URLSearchParams({ level: String(values.level ?? 1) })
      if (values.branchGroupId) params.set('branchGroupId', String(values.branchGroupId))
      const { data } = await client.post(
        `${apiPrefix()}/homes/branches?${params.toString()}`,
        values,
      )
      return unwrap(data as ApiResponse)
    },
    onSuccess: () => {
      message.success('영업점을 등록했습니다.')
      setCreateOpen(false)
      form.resetFields()
      qc.invalidateQueries({ queryKey: ['homes-branches'] })
    },
    onError: (e: Error) => message.error(e.message),
  })

  const updateMut = useMutation({
    mutationFn: async (values: Record<string, unknown>) => {
      const { data } = await client.put(
        `${apiPrefix()}/homes/branches/${editingId}/detail`,
        values,
      )
      return unwrap(data as ApiResponse)
    },
    onSuccess: () => {
      message.success('수정했습니다.')
      setEditOpen(false)
      setEditingId(null)
      qc.invalidateQueries({ queryKey: ['homes-branches'] })
    },
    onError: (e: Error) => message.error(e.message),
  })

  const deleteMut = useMutation({
    mutationFn: async (id: number) => {
      const { data } = await client.delete(`${apiPrefix()}/homes/branches/${id}`)
      return unwrap(data as ApiResponse)
    },
    onSuccess: () => {
      message.success('삭제했습니다.')
      qc.invalidateQueries({ queryKey: ['homes-branches'] })
    },
    onError: (e: Error) => message.error(e.message),
  })

  const openEdit = async (row: BranchRow) => {
    try {
      const { data } = await client.get<ApiResponse<BranchDetail>>(
        `${apiPrefix()}/homes/branches/${row.id}/detail`,
      )
      const detail = unwrap(data)
      setEditingId(row.id)
      editForm.setFieldsValue({
        ...detail,
        isPersonal: detail.isPersonal !== false,
        notifyPhones: [...(detail.notifyPhones || []), '', '', '', '', '', ''].slice(0, 6),
        keepFee: false,
        password: '',
        passwordConfirmation: '',
        accountNameIsName: false,
        acceptPhone: detail.acceptPhone === 1,
        acceptNateon: detail.acceptNateon === 1,
      })
      setEditOpen(true)
    } catch (e) {
      message.error((e as Error).message)
    }
  }

  const confirmDelete = (row: BranchRow) => {
    Modal.confirm({
      title: '영업점 삭제',
      content: (
        <div>
          <p><b>{row.officeName}</b> 영업점을 삭제하시겠습니까?</p>
          <p className="muted">관련 접수·정산 자료는 삭제되지 않지만, 영업점 계정 정보는 제거됩니다.</p>
        </div>
      ),
      okText: '삭제',
      okButtonProps: { danger: true },
      cancelText: '취소',
      onOk: () => deleteMut.mutateAsync(row.id),
    })
  }

  const columns: ColumnsType<BranchRow> = [
    { title: '그룹', dataIndex: 'branchGroupName', width: 110, ellipsis: true },
    { title: '지역', dataIndex: 'sido', width: 70, align: 'center' },
    { title: '아이디', dataIndex: 'userid', width: 100, ellipsis: true },
    { title: '영업점명', dataIndex: 'officeName', width: 120, ellipsis: true },
    { title: '이름', dataIndex: 'name', width: 90, ellipsis: true },
    {
      title: '레벨',
      dataIndex: 'level',
      width: 80,
      align: 'center',
      render: (v) => levelLabel(v),
    },
    { title: '연락처', dataIndex: 'phone', width: 120 },
    {
      title: '사업자',
      dataIndex: 'hasBusinessLicense',
      width: 70,
      align: 'center',
      render: (v) => (v ? '사업자' : '개인'),
    },
    {
      title: '세금계산서',
      dataIndex: 'isTax',
      width: 110,
      align: 'center',
      render: (v) => (v === 1 ? '세금계산서발행' : '종합소득세공제'),
    },
    {
      title: '회원가입일',
      dataIndex: 'createdAt',
      width: 150,
      align: 'center',
      render: (v?: string) => v?.replace('T', ' ').substring(0, 19),
    },
    {
      title: '수수료',
      width: 80,
      align: 'center',
      render: (_, r) => (
        <Button
          size="small"
          type="primary"
          className="branch-row-btn"
          onClick={(e) => {
            e.stopPropagation()
            setFeeBranch(r)
            setFeeOpen(true)
          }}
        >
          수수료
        </Button>
      ),
    },
    {
      title: '승인여부',
      width: 80,
      align: 'center',
      render: (_, r) => (
        r.grant === 1
          ? (
            <Button
              size="small"
              type="primary"
              className="branch-row-btn"
              onClick={(e) => {
                e.stopPropagation()
                grantMut.mutate({ id: r.id, g: 0 })
              }}
            >
              승인
            </Button>
          )
          : (
            <Button
              size="small"
              type="primary"
              danger
              className="branch-row-btn"
              onClick={(e) => {
                e.stopPropagation()
                grantMut.mutate({ id: r.id, g: 1 })
              }}
            >
              거부
            </Button>
          )
      ),
    },
    {
      title: '수정',
      width: 70,
      align: 'center',
      render: (_, r) => (
        <Button
          size="small"
          type="primary"
          className="branch-row-btn"
          onClick={(e) => { e.stopPropagation(); void openEdit(r) }}
        >
          수정
        </Button>
      ),
    },
    {
      title: '삭제',
      width: 70,
      align: 'center',
      render: (_, r) => (
        <Button
          size="small"
          type="primary"
          danger
          className="branch-row-btn"
          onClick={(e) => { e.stopPropagation(); confirmDelete(r) }}
        >
          삭제
        </Button>
      ),
    },
  ]

  return (
    <div className="stock-page branch-list-page">
      <div className="stock-title">
        <div>
          <h2>
            <ShopOutlined className="product-title-icon" />
            영업점 목록
          </h2>
          <p>영업점을 검색·등록하고 승인·수수료·상세정보를 관리합니다.</p>
        </div>
        <Button type="primary" icon={<PlusOutlined />} onClick={() => { form.resetFields(); form.setFieldsValue({ level: 1, isTax: 1 }); setCreateOpen(true) }}>
          등록
        </Button>
      </div>

      <Card className="stock-table-card" size="small">
        <Space wrap style={{ marginBottom: 12 }} size={8}>
          <Select
            allowClear
            placeholder="그룹 선택"
            style={{ width: 140 }}
            value={draft.fGroup || undefined}
            onChange={(v) => setDraft((d) => ({ ...d, fGroup: v ?? '' }))}
            options={groups.map((g) => ({ value: String(g.id), label: g.name }))}
          />
          <Select
            allowClear
            placeholder="지역 선택"
            style={{ width: 120 }}
            value={draft.fSido || undefined}
            onChange={(v) => setDraft((d) => ({ ...d, fSido: v ?? '' }))}
            options={sidoOptions.map((s) => ({ value: s, label: s }))}
          />
          <Input
            placeholder="아이디"
            style={{ width: 120 }}
            value={draft.fUserid}
            onChange={(e) => setDraft((d) => ({ ...d, fUserid: e.target.value }))}
            onPressEnter={() => { setApplied(draft); setPage(0) }}
          />
          <Input
            placeholder="영업점명"
            style={{ width: 120 }}
            value={draft.fOffice}
            onChange={(e) => setDraft((d) => ({ ...d, fOffice: e.target.value }))}
            onPressEnter={() => { setApplied(draft); setPage(0) }}
          />
          <Input
            placeholder="이름"
            style={{ width: 100 }}
            value={draft.fName}
            onChange={(e) => setDraft((d) => ({ ...d, fName: e.target.value }))}
            onPressEnter={() => { setApplied(draft); setPage(0) }}
          />
          <Button
            type="primary"
            icon={<SearchOutlined />}
            onClick={() => { setApplied(draft); setPage(0) }}
          >
            검색
          </Button>
          <Typography.Text type="secondary">총 {filtered.length}건</Typography.Text>
        </Space>

        <Table
          size="small"
          rowKey="id"
          loading={isLoading}
          columns={columns}
          dataSource={pageRows}
          pagination={{
            current: page + 1,
            pageSize: PAGE_SIZE,
            total: filtered.length,
            showSizeChanger: false,
            onChange: (p) => setPage(p - 1),
          }}
          onRow={(r) => ({
            onClick: () => setSelectedId(r.id),
            className: selectedId === r.id ? 'row-selected' : undefined,
          })}
          scroll={{ x: 1400 }}
          locale={{ emptyText: '영업점이 없습니다.' }}
        />
      </Card>

      <DraggableModal
        title="영업점 등록"
        open={createOpen}
        onCancel={() => setCreateOpen(false)}
        onOk={() => form.submit()}
        confirmLoading={createMut.isPending}
        okText="등록"
        width={860}
        destroyOnClose
        className="order-form-modal branch-form-modal"
        styles={{ body: { maxHeight: 'calc(92vh - 56px)', overflowY: 'auto' } }}
      >
        <Form
          form={form}
          layout="vertical"
          className="order-form-embedded-inner order-form-page reception-apply-form"
          onFinish={(v) => createMut.mutate(v)}
          initialValues={{ level: 1, isTax: 1 }}
        >
          <FormSection title="계정 정보">
            <FormGrid>
              <FormField label="아이디*">
                <Form.Item name="userid" noStyle rules={[{ required: true, message: '아이디를 입력하세요' }]}>
                  <Input />
                </Form.Item>
              </FormField>
              <FormField label="패스워드*">
                <Form.Item name="password" noStyle rules={[{ required: true, message: '패스워드를 입력하세요' }]}>
                  <Input.Password />
                </Form.Item>
              </FormField>
            </FormGrid>
          </FormSection>

          <FormSection title="기본 정보">
            <FormGrid>
              <FormField label="상호(영업점명)*">
                <Form.Item name="officeName" noStyle rules={[{ required: true, message: '영업점명을 입력하세요' }]}>
                  <Input />
                </Form.Item>
              </FormField>
              <FormField label="대표자명*">
                <Form.Item name="name" noStyle rules={[{ required: true, message: '대표자명을 입력하세요' }]}>
                  <Input />
                </Form.Item>
              </FormField>
              <FormField label="전화">
                <Form.Item name="tel" noStyle><Input /></Form.Item>
              </FormField>
              <FormField label="휴대폰*">
                <Form.Item name="phone" noStyle rules={[{ required: true, message: '휴대폰을 입력하세요' }]}>
                  <Input placeholder="010-0000-0000" />
                </Form.Item>
              </FormField>
              <FormField label="이메일*" full>
                <Form.Item name="email" noStyle rules={[{ required: true, type: 'email', message: '이메일을 입력하세요' }]}>
                  <Input />
                </Form.Item>
              </FormField>
            </FormGrid>
          </FormSection>

          <FormSection title="주소">
            <FormGrid>
              <FormField label="우편번호">
                <Form.Item name="zipcode" noStyle><Input /></Form.Item>
              </FormField>
              <FormField label="주소">
                <Form.Item name="address" noStyle><Input /></Form.Item>
              </FormField>
              <FormField label="상세주소" full>
                <Form.Item name="addressDetail" noStyle><Input /></Form.Item>
              </FormField>
            </FormGrid>
          </FormSection>

          <FormSection title="설정">
            <FormGrid>
              <FormField label="레벨">
                <Form.Item name="level" noStyle>
                  <Select options={[
                    { value: 1, label: '영업점' },
                    { value: 5, label: '센터' },
                    { value: 9, label: '관리자' },
                    { value: 10, label: '최고관리자' },
                  ]} />
                </Form.Item>
              </FormField>
              <FormField label="영업점 그룹">
                <Form.Item name="branchGroupId" noStyle>
                  <Select allowClear placeholder="없음" options={groups.map((g) => ({ value: g.id, label: g.name }))} />
                </Form.Item>
              </FormField>
              <FormField label="세금계산서" full>
                <Form.Item name="isTax" noStyle>
                  <Select options={[
                    { value: 1, label: '세금계산서발행' },
                    { value: 0, label: '종합소득세공제' },
                  ]} />
                </Form.Item>
              </FormField>
            </FormGrid>
          </FormSection>
        </Form>
      </DraggableModal>

      <DraggableModal
        title="영업점 수정"
        open={editOpen}
        onCancel={() => setEditOpen(false)}
        onOk={() => editForm.submit()}
        confirmLoading={updateMut.isPending}
        okText="수정"
        width={920}
        destroyOnClose
        className="order-form-modal branch-form-modal"
        styles={{ body: { maxHeight: 'calc(92vh - 56px)', overflowY: 'auto' } }}
      >
        <Form
          form={editForm}
          layout="vertical"
          className="order-form-embedded-inner order-form-page reception-apply-form"
          onFinish={(values) => {
            const phones: string[] = values.notifyPhones || []
            updateMut.mutate({
              ...values,
              isPersonal: values.isPersonal,
              acceptPhone: values.acceptPhone ? 1 : 0,
              acceptNateon: values.acceptNateon ? 1 : 0,
              notifyPhones: phones,
            })
          }}
        >
          <EditBranchFormBody groups={groups} centers={centers} />
        </Form>
      </DraggableModal>

      <BranchFeeFlowModals
        open={feeOpen}
        branchId={feeBranch?.id ?? null}
        branchName={feeBranch?.officeName ?? ''}
        onClose={() => { setFeeOpen(false); setFeeBranch(null) }}
      />
    </div>
  )
}