<template>
  <div class="view-bank-account-detail">
    <div class="row">
      <!-- Thông tin tài khoản -->
      <div class="col-md-6">
        <div class="info-section">
          <h6 class="section-title">
            <i class="fas fa-credit-card me-2"></i>
            Thông tin tài khoản
          </h6>
          
          <div class="info-item">
            <label>Số tài khoản:</label>
            <div class="value">
              <strong>{{ account.accountNumber }}</strong>
              <button 
                type="button" 
                class="btn btn-sm btn-outline-secondary ms-2"
                @click="copyToClipboard(account.accountNumber)"
                title="Sao chép số tài khoản"
              >
                <i class="fas fa-copy"></i>
              </button>
            </div>
          </div>

          <div class="info-item">
            <label>Tên chủ tài khoản:</label>
            <div class="value">{{ account.accountHolderName }}</div>
          </div>

          <div class="info-item">
            <label>Trạng thái:</label>
            <div class="value">
              <span v-if="account.isDefault" class="badge bg-success">
                <i class="fas fa-star me-1"></i>
                Tài khoản mặc định
              </span>
              <span v-else class="badge bg-secondary">
                Tài khoản phụ
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Thông tin ngân hàng -->
      <div class="col-md-6">
        <div class="info-section">
          <h6 class="section-title">
            <i class="fas fa-university me-2"></i>
            Thông tin ngân hàng
          </h6>
          
          <div class="info-item">
            <label>Mã ngân hàng:</label>
            <div class="value">
              <span class="badge bg-primary">{{ account.bankCode }}</span>
            </div>
          </div>

          <div class="info-item">
            <label>Tên ngân hàng:</label>
            <div class="value">{{ account.bankName }}</div>
          </div>

          <div class="info-item" v-if="account.branchName">
            <label>Chi nhánh:</label>
            <div class="value">{{ account.branchName }}</div>
          </div>

          <div class="info-item" v-if="account.branchAddress">
            <label>Địa chỉ chi nhánh:</label>
            <div class="value">{{ account.branchAddress }}</div>
          </div>
        </div>
      </div>

      <!-- Ghi chú -->
      <div class="col-12" v-if="account.note">
        <div class="info-section">
          <h6 class="section-title">
            <i class="fas fa-sticky-note me-2"></i>
            Ghi chú
          </h6>
          
          <div class="note-content">
            {{ account.note }}
          </div>
        </div>
      </div>

      <!-- Thông tin hệ thống -->
      <div class="col-12">
        <div class="info-section">
          <h6 class="section-title">
            <i class="fas fa-info-circle me-2"></i>
            Thông tin hệ thống
          </h6>
          
          <div class="row">
            <div class="col-md-6">
              <div class="info-item">
                <label>Ngày tạo:</label>
                <div class="value">
                  {{ formatDateTime(account.createdTime) }}
                </div>
              </div>
              
              <div class="info-item" v-if="account.createdByUserName">
                <label>Người tạo:</label>
                <div class="value">{{ account.createdByUserName }}</div>
              </div>
            </div>
            
            <div class="col-md-6" v-if="account.updatedTime">
              <div class="info-item">
                <label>Ngày cập nhật:</label>
                <div class="value">
                  {{ formatDateTime(account.updatedTime) }}
                </div>
              </div>
              
              <div class="info-item" v-if="account.updatedByUserName">
                <label>Người cập nhật:</label>
                <div class="value">{{ account.updatedByUserName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Actions -->
    <div class="d-flex justify-content-end mt-4">
      <button
        type="button"
        class="btn btn-secondary"
        @click="handleClose"
      >
        Đóng
      </button>
    </div>
  </div>
</template>

<script setup>
import { useToast } from "vue-toastification";

const toast = useToast();

// Props
const props = defineProps({
  account: {
    type: Object,
    required: true,
    default: () => ({})
  }
});

// Emits
const emit = defineEmits(['close']);

// Methods
function formatDateTime(dateString) {
  if (!dateString) return '-';
  
  const date = new Date(dateString);
  const dateOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  };
  const timeOptions = {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  };
  
  const formattedDate = date.toLocaleDateString('vi-VN', dateOptions);
  const formattedTime = date.toLocaleTimeString('vi-VN', timeOptions);
  
  return `${formattedDate} ${formattedTime}`;
}

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    toast.success('Đã sao chép số tài khoản');
  } catch (error) {
    console.error('Error copying to clipboard:', error);
    
    // Fallback for older browsers
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    
    try {
      document.execCommand('copy');
      toast.success('Đã sao chép số tài khoản');
    } catch (fallbackError) {
      toast.error('Không thể sao chép số tài khoản');
    }
    
    document.body.removeChild(textArea);
  }
}

function handleClose() {
  emit('close');
}
</script>

<style scoped>
.view-bank-account-detail {
  max-width: 100%;
}

.info-section {
  margin-bottom: 2rem;
}

.section-title {
  color: #495057;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

.info-item {
  margin-bottom: 1rem;
}

.info-item label {
  font-weight: 600;
  color: #6c757d;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  display: block;
}

.info-item .value {
  color: #212529;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
}

.note-content {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 1rem;
  color: #495057;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.badge {
  font-size: 0.75rem;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .info-section {
    margin-bottom: 1.5rem;
  }
  
  .section-title {
    font-size: 1rem;
  }
  
  .info-item {
    margin-bottom: 0.75rem;
  }
  
  .info-item .value {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-item .value .btn {
    margin-top: 0.25rem;
    margin-left: 0 !important;
  }
}
</style>
