import { useState } from 'react';
import { Table } from 'antd';
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import PageContainer from '@/components/common/PageContainer';
import SearchForm from '@/components/common/SearchForm';
import CodeBadge from '@/components/common/CodeBadge';
import MoneyText from '@/components/common/MoneyText';
import PermissionButton from '@/components/common/PermissionButton';
import ExcelExportButton from '@/components/common/ExcelExportButton';
import { agentApi, AgentResp, AgentSearchParam } from '@/api/agent';

export default function AgentList() {
  const navigate = useNavigate();
  const [param, setParam] = useState<AgentSearchParam>({ pageNum: 1, pageSize: 20 });

  const { data, isLoading } = useQuery({
    queryKey: ['agent', 'list', param],
    queryFn: () => agentApi.list(param),
  });

  return (
    <PageContainer
      title="설계사 관리"
      extra={
        <div>
          <PermissionButton menuCode="ORG_AGENT" permCode="CREATE" type="primary"
                            onClick={() => navigate('/org/agents/new')} style={{ marginRight: 8 }}>
            등록
          </PermissionButton>
          <ExcelExportButton url="/api/agents/export" params={param} fileName="설계사목록" />
        </div>
      }
    >
      <SearchForm
        conditions={[
          { type: 'text', name: 'searchKeyword', label: '설계사명' },
          { type: 'code', name: 'status', label: '상태', groupCode: 'AGENT_STATUS' },
        ]}
        onSearch={(v) => setParam({ ...param, ...v, pageNum: 1 })}
        onReset={() => setParam({ pageNum: 1, pageSize: 20 })}
      />

      <Table<AgentResp>
        rowKey="agentId"
        loading={isLoading}
        dataSource={data?.list}
        pagination={{
          current: param.pageNum,
          pageSize: param.pageSize,
          total: data?.total,
          showSizeChanger: true,
          onChange: (page, size) => setParam({ ...param, pageNum: page, pageSize: size }),
        }}
        onRow={(r) => ({ onClick: () => navigate(`/org/agents/${r.agentId}`) })}
        columns={[
          { title: '설계사명', dataIndex: 'agentName', width: 120 },
          { title: '사번',     dataIndex: 'licenseNo', width: 120 },
          { title: '소속',     dataIndex: 'orgName',   width: 200 },
          { title: '직급',     dataIndex: 'gradeName', width: 100 },
          { title: '전화번호', dataIndex: 'phone',     width: 140 },
          {
            title: '상태', dataIndex: 'status', width: 100,
            render: (v) => <CodeBadge groupCode="AGENT_STATUS" value={v} />,
          },
          {
            title: '계약수', dataIndex: 'contractCount', align: 'right', width: 90,
            render: (v) => <MoneyText value={v} />,
          },
          {
            title: '누적수수료', dataIndex: 'totalCommission', align: 'right', width: 130,
            render: (v) => <MoneyText value={v} />,
          },
          { title: '입사일', dataIndex: 'joinDate', width: 110 },
        ]}
      />
    </PageContainer>
  );
}