import React, { useState } from 'react';
import { OperationActions } from '../../../common/OperationActions';
import type { SupplierRecord } from '../types';
import { CoopStatusBadge } from './CoopStatusBadge';

interface SupplierTableProps {
  records: SupplierRecord[];
  onView: (record: SupplierRecord) => void;
  onEdit: (record: SupplierRecord) => void;
  onDelete: (record: SupplierRecord) => void;
}

export function SupplierTable({
  records,
  onView,
  onEdit,
  onDelete,
}: SupplierTableProps) {
  const [hoverId, setHoverId] = useState<string | null>(null);

  return (
    <>
      {records.length === 0 ? (
        <div className="vm-empty" data-annotation-id="sm-list-table">
          <p>暂无符合条件的供应商</p>
        </div>
      ) : (
        <div className="vm-table-wrap sm-table-wrap" data-annotation-id="sm-list-table">
          <table className="vm-table sm-table">
            <thead>
              <tr>
                <th className="sm-col-code sticky-col-left">供应商编码</th>
                <th>合作状态</th>
                <th>供应商名称</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="sm-col-time">创建时间</th>
                <th className="sticky-col-right sm-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="sm-col-code sticky-col-left tabular-nums">{record.supplierCode}</td>
                  <td><CoopStatusBadge status={record.coopStatus} /></td>
                  <td className="sm-col-name">
                    <button
                      type="button"
                      className="vm-btn vm-btn-link sm-name-link"
                      onClick={() => onView(record)}
                    >
                      {record.supplierName}
                    </button>
                  </td>
                  <td>{record.type}</td>
                  <td>{record.region}</td>
                  <td>{record.city}</td>
                  <td className="sm-col-credit tabular-nums" title={record.creditCodeOrId}>
                    {record.creditCodeOrId}
                  </td>
                  <td>{record.contact}</td>
                  <td className="tabular-nums">{record.contactMobile}</td>
                  <td>{record.contactPhone === '-' || !record.contactPhone ? '—' : record.contactPhone}</td>
                  <td className="sm-col-address" title={record.address}>{record.address}</td>
                  <td className="sm-col-email" title={record.email}>{record.email}</td>
                  <td className="sm-col-remark" title={record.remark}>{record.remark || '—'}</td>
                  <td>{record.creator}</td>
                  <td className="sm-col-time tabular-nums">{record.createTime}</td>
                  <td className="sticky-col-right sm-col-actions">
                    <OperationActions
                      view={{ onClick: () => onView(record) }}
                      edit={{ onClick: () => onEdit(record) }}
                      more={[
                        {
                          key: 'delete',
                          label: '删除',
                          danger: true,
                          onClick: () => onDelete(record),
                        },
                      ]}
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </>
  );
}
