/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

import { Component, inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { MatButton } from '@angular/material/button';

/**
 * Confirmation popup shown right after a family member is added — surfaces the linked
 * client's own CBS Client ID (when the member was linked to an existing client rather than
 * entered manually) alongside name/relationship, since the "Add Member" dialog itself just
 * closed silently before this with no acknowledgement of what got recorded.
 */
@Component({
  selector: 'mifosx-family-member-added-dialog',
  imports: [
    MatDialogTitle,
    MatDialogActions,
    MatIcon,
    MatButton
  ],
  template: `
    <h2 mat-dialog-title class="fma-title">
      <mat-icon class="fma-title__icon">check_circle</mat-icon>
      Family Member Added
    </h2>
    <div class="fma-body">
      @if (data.clientId) {
        <div class="fma-row fma-row--id">
          <span class="fma-row__label">Client ID</span>
          <span class="fma-row__value fma-row__value--id">{{ data.clientId }}</span>
        </div>
      }
      <div class="fma-row">
        <span class="fma-row__label">Name</span>
        <span class="fma-row__value">{{ data.name }}</span>
      </div>
      @if (data.relationship) {
        <div class="fma-row">
          <span class="fma-row__label">Relationship</span>
          <span class="fma-row__value">{{ data.relationship }}</span>
        </div>
      }
      @if (data.dateOfBirth) {
        <div class="fma-row">
          <span class="fma-row__label">Date of Birth</span>
          <span class="fma-row__value">{{ data.dateOfBirth }}</span>
        </div>
      }
      @if (data.isDependent) {
        <div class="fma-row">
          <span class="fma-row__label">Dependent</span>
          <span class="fma-row__value">Yes</span>
        </div>
      }
    </div>
    <mat-dialog-actions align="end">
      <button mat-flat-button color="primary" (click)="dialogRef.close()">Done</button>
    </mat-dialog-actions>
  `,
  styles: [
    `
      .fma-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 17px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        padding: 20px 24px 4px;
      }

      .fma-title__icon {
        color: #059669;
      }

      .fma-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 12px 24px 8px;
        min-width: 280px;
      }

      .fma-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;

        &:last-child {
          border-bottom: none;
        }
      }

      .fma-row__label {
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
      }

      .fma-row__value {
        font-size: 13px;
        color: #0f172a;
        font-weight: 600;
        text-align: right;
      }

      .fma-row--id {
        background: #eff6ff;
        margin: 0 -24px;
        padding: 10px 24px;
      }

      .fma-row__value--id {
        font-family: 'Roboto Mono', monospace;
        color: #1353a0;
        font-size: 14px;
      }

      mat-dialog-actions {
        padding: 8px 24px 16px;
      }
    `
  ]
})
export class FamilyMemberAddedDialogComponent {
  dialogRef = inject<MatDialogRef<FamilyMemberAddedDialogComponent>>(MatDialogRef);
  data: {
    clientId?: string | number | null;
    name: string;
    relationship?: string;
    dateOfBirth?: string;
    isDependent?: boolean;
  } = inject(MAT_DIALOG_DATA);
}