import React from 'react';
import { PencilIcon } from '@heroicons/react/24/outline';
import DataTable, { type Column } from '../ui/DataTable';
import StatusToggle from './StatusToggle';
import EnvironmentCell from './EnvironmentCell';
import type { BankAccount } from '../../hooks/usePaymentMethods';

/**
 * جدول حساب‌های بانکی — پورت مبدأ BankAccountList.jsx.
 * ستون «شماره ترمینال» مبدأ به «شماره کارت» تغییر کرد (حساب بانکی ترمینال ندارد؛
 * فرم افزودن شماره کارت می‌گیرد).
 */
export default function BankAccountTable({
  data,
  loading,
  togglingUuid,
  assigningUuid,
  environmentName,
  onToggle,
  onEdit,
  onAssign,
  onAdd,
}: {
  data: BankAccount[];
  loading?: boolean;
  togglingUuid: string | null;
  assigningUuid: string | null;
  environmentName: string;
  onToggle: (uuid: string) => void;
  onEdit: (account: BankAccount) => void;
  onAssign: (uuid: string) => void;
  onAdd: () => void;
}) {
  const columns: Column<BankAccount>[] = [
    { key: 'bank_name', header: 'نام بانک' },
    { key: 'card_number', header: 'شماره کارت', render: (r) => r.card_number || '—' },
    { key: 'account_number', header: 'شماره حساب', render: (r) => r.account_number || '—' },
    {
      key: 'entity_type',
      header: 'محیط',
      render: (r) => <EnvironmentCell entityType={r.entity_type} environmentName={environmentName} />,
    },
    {
      key: 'is_active',
      header: 'وضعیت',
      render: (r) => (
        <StatusToggle
          active={r.is_active}
          disabled={togglingUuid === r.uuid}
          onToggle={() => onToggle(r.uuid)}
        />
      ),
    },
  ];

  return (
    <>
      <p style={{ fontSize: 13.5, color: 'var(--text-2)', margin: '0 0 14px' }}>
        مدیریت و اضافه کردن حساب های بانکی کلینیک
      </p>
      <DataTable<BankAccount>
        columns={columns}
        data={data}
        loading={loading}
        emptyMessage="هنوز حساب بانکی ثبت نشده است"
        emptyAction={<button className="btn primary sm" onClick={onAdd}>افزودن حساب بانکی</button>}
        actions={(r) => (
          r.entity_type === null ? (
            <button
              className="btn sm primary"
              disabled={assigningUuid === r.uuid}
              onClick={() => onAssign(r.uuid)}
            >
              انتساب به {environmentName}
            </button>
          ) : (
            <button
              className="btn sm ghost"
              style={{ color: 'var(--accent)' }}
              onClick={() => onEdit(r)}
            >
              <PencilIcon style={{ width: 14 }} />
              ویرایش
            </button>
          )
        )}
      />
    </>
  );
}