import React, { useState } from 'react';
import { OperationActions } from '../../../common/OperationActions';
import type { CustomerRecord } from '../types';
import type { CustomerRiskTag, MockUser } from '../types/riskTag';
import { RiskLabelTags } from './RiskLabelTags';
import { StatusBadge } from './StatusBadge';
import { canAddRiskTags } from '../utils/permissions';

interface CustomerTableProps {
  records: CustomerRecord[];
  selectedIds: Set<string>;
  riskTagsByCustomer: Record<string, CustomerRiskTag[]>;
  currentUser: MockUser;
  onToggleRow: (id: string, checked: boolean) => void;
  onToggleAll: (checked: boolean) => void;
  onView: (record: CustomerRecord) => void;
  onEdit: (record: CustomerRecord) => void;
  onDelete: (record: CustomerRecord) => void;
  onManageTags: (record: CustomerRecord) => void;
}

export function CustomerTable({
  records,
  selectedIds,
  riskTagsByCustomer,
  currentUser,
  onToggleRow,
  onToggleAll,
  onView,
  onEdit,
  onDelete,
  onManageTags,
}: CustomerTableProps) {
  const allSelected = records.length > 0 && records.every((record) => selectedIds.has(record.id));
  const [hoverId, setHoverId] = useState<string | null>(null);
  const canManage = canAddRiskTags(currentUser);

  if (records.length === 0) {
    return (
      <div className="vm-empty" data-annotation-id="cm-list-table">
        <p>暂无符合条件的客户</p>
      </div>
    );
  }

  return (
    <div className="vm-table-wrap cm-table-wrap" data-annotation-id="cm-list-table">
      <table className="vm-table cm-table">
        <thead>
          <tr>
            <th className="cm-col-check sticky-col-left">
              <input
                type="checkbox"
                checked={allSelected}
                onChange={(event) => onToggleAll(event.target.checked)}
                aria-label="全选当前页"
              />
            </th>
            <th className="sticky-col-left cm-col-code">客户编号</th>
            <th>客户名称</th>
            <th className="cm-col-labels">风险标签</th>
            <th>客户区域</th>
            <th>客户状态</th>
            <th>业务部门</th>
            <th>业务负责人</th>
            <th>客户类型</th>
            <th>所属行业</th>
            <th>统一社会信用代码</th>
            <th>法人</th>
            <th>注册资本</th>
            <th>经营状态</th>
            <th>详细地址</th>
            <th className="cm-col-time">创建时间</th>
            <th className="sticky-col-right cm-col-actions">操作</th>
          </tr>
        </thead>
        <tbody>
          {records.map((record) => (
            <tr
              key={record.id}
              onMouseEnter={() => setHoverId(record.id)}
              onMouseLeave={() => setHoverId(null)}
              className={hoverId === record.id ? 'is-hovered' : undefined}
            >
              <td className="cm-col-check sticky-col-left">
                <input
                  type="checkbox"
                  checked={selectedIds.has(record.id)}
                  onChange={(event) => onToggleRow(record.id, event.target.checked)}
                  aria-label={`选择 ${record.name}`}
                />
              </td>
              <td className="sticky-col-left cm-col-code tabular-nums">{record.code}</td>
              <td className="cm-col-name" title={record.name}>{record.name}</td>
              <td className="cm-col-labels">
                <RiskLabelTags
                  tags={riskTagsByCustomer[record.id] ?? []}
                  onView={() => onManageTags(record)}
                />
              </td>
              <td>{record.region}</td>
              <td><StatusBadge status={record.status} /></td>
              <td>{record.department}</td>
              <td>{record.manager}</td>
              <td>{record.customerType}</td>
              <td>{record.industry}</td>
              <td className="cm-col-credit tabular-nums" title={record.creditCode}>{record.creditCode}</td>
              <td>{record.legalPerson}</td>
              <td>{record.regCapital}</td>
              <td>{record.operateStatus}</td>
              <td className="cm-col-address" title={record.address}>{record.address}</td>
              <td className="cm-col-time tabular-nums">{record.createTime}</td>
              <td className="sticky-col-right cm-col-actions">
                <OperationActions
                  view={{ label: '详情', onClick: () => onView(record) }}
                  edit={{ onClick: () => onEdit(record) }}
                  more={[
                    {
                      key: 'tags',
                      label: canManage ? '管理标签' : '查看标签',
                      onClick: () => onManageTags(record),
                    },
                    ...(canManage
                      ? [{
                          key: 'delete',
                          label: '删除',
                          danger: true,
                          onClick: () => onDelete(record),
                        }]
                      : []),
                  ]}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
