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

/**
 * جدول حساب‌های بانکی — پورت مبدأ BankAccountList.jsx.
 * ستون «شماره ترمینال» مبدأ به «شماره کارت» تغییر کرد (حساب بانکی ترمینال ندارد؛
 * فرم افزودن شماره کارت می‌گیرد).
 */
export default function BankAccountTable({
  data,
  loading,
  togglingUuid,
  onToggle,
  onEdit,
  onAdd,
}: {
  data: BankAccount[];
  loading?: boolean;
  togglingUuid: string | null;
  onToggle: (uuid: string) => void;
  onEdit: (account: BankAccount) => 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: '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) => (
          <button
            className="btn sm ghost"
            style={{ color: 'var(--accent)' }}
            onClick={() => onEdit(r)}
          >
            <PencilIcon style={{ width: 14 }} />
            ویرایش
          </button>
        )}
      />
    </>
  );
}
