import { useMemo, useState } from 'react';
import { Tree, Card, Empty, Tag, Spin } from 'antd';
import { useQuery } from '@tanstack/react-query';
import { ProCard, ProTable, type ProColumns } from '@ant-design/pro-components';
import { IconBuilding } from '@tabler/icons-react';
import PageContainer from '@/components/common/PageContainer';
import CodeBadge from '@/components/common/CodeBadge';
import MoneyText from '@/components/common/MoneyText';
import { orgApi, OrgNode } from '@/api/org';
import { agentApi, AgentResp } from '@/api/agent';

interface AntdTreeNode { key: string; title: any; children?: AntdTreeNode[]; orgId: number; orgType: string; }

function toTree(nodes: OrgNode[] = []): AntdTreeNode[] {
  return nodes.map((n) => ({
    key: String(n.orgId),
    orgId: n.orgId,
    orgType: n.orgType,
    title: (
      <span>
        <Tag color={n.orgType === 'HQ' ? 'blue' : n.orgType === 'BR' ? 'cyan' : 'green'} style={{ marginRight: 6 }}>
          {n.orgType}
        </Tag>
        {n.orgName}
      </span>
    ),
    children: n.children ? toTree(n.children) : undefined,
  }));
}

export default function OrgTree() {
  const [selectedOrgId, setSelectedOrgId] = useState<number | undefined>();

  const { data: tree = [], isLoading: treeLoading } = useQuery({
    queryKey: ['orgs', 'tree'],
    queryFn: orgApi.tree,
  });
  const treeData = useMemo(() => toTree(tree), [tree]);

  const columns: ProColumns<AgentResp>[] = [
    { title: '설계사명', dataIndex: 'agentName', width: 110 },
    { title: '직급',     dataIndex: 'gradeName', width: 90 },
    {
      title: '상태', dataIndex: 'status', width: 90,
      render: (_, r) => <CodeBadge groupCode="AGENT_STATUS" value={r.status} />,
    },
    { title: '사번',     dataIndex: 'licenseNo', width: 110 },
    { title: '전화번호', dataIndex: 'phone', width: 130 },
    { title: '계약수', dataIndex: 'contractCount', width: 80, align: 'right',
      render: (_, r) => <MoneyText value={r.contractCount} /> },
    { title: '누적수수료', dataIndex: 'totalCommission', align: 'right',
      render: (_, r) => <MoneyText value={r.totalCommission} /> },
  ];

  return (
    <PageContainer title="조직 트리" description="본부 / 지점 / 팀 트리 + 소속 설계사">
      <ProCard split="vertical" ghost>
        <ProCard colSpan="280px" bordered title={<><IconBuilding size={16} style={{ verticalAlign: -2 }} /> 조직</>}>
          {treeLoading ? <Spin /> : (
            treeData.length ? (
              <Tree
                treeData={treeData as any}
                defaultExpandAll
                onSelect={(keys, e) => {
                  const node = e.node as unknown as AntdTreeNode;
                  setSelectedOrgId(node.orgId);
                }}
              />
            ) : <Empty description="조직 없음" />
          )}
        </ProCard>
        <ProCard ghost>
          {selectedOrgId ? (
            <Card bordered={false} title={<span style={{ fontWeight: 600 }}>소속 설계사</span>}>
              <ProTable<AgentResp>
                rowKey="agentId"
                columns={columns}
                search={false}
                options={false}
                request={async (params) => {
                  const res = await agentApi.list({
                    orgId: selectedOrgId,
                    pageNum: params.current ?? 1,
                    pageSize: params.pageSize ?? 50,
                  });
                  return { data: res.list, total: res.total, success: true };
                }}
                pagination={{ pageSize: 50, showTotal: (t) => `총 ${t}명` }}
              />
            </Card>
          ) : (
            <Empty description="좌측에서 조직을 선택하세요" />
          )}
        </ProCard>
      </ProCard>
    </PageContainer>
  );
}
