clinicpro/assets/admin/pages/RepresentationProfilePage.tsx

import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { CheckBadgeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';

interface IbanItem {
  id: string;
  iban: string;
  bank_name: string | null;
  owner_name: string | null;
  verified: boolean;
}

interface RepProfile {
  full_name: string;
  mobile_number: string | null;
  national_code: string | null;
  national_code_verified: boolean;
  bank_account: IbanItem[] | null;
}

// پاسخ تک‌منبعی ممکن است double-nested باشد
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const unwrap = (d: any): RepProfile | undefined => d?.data?.data ?? d?.data;

export default function RepresentationProfilePage() {
  const qc = useQueryClient();
  const [nationalCode, setNationalCode] = useState('');
  const [iban, setIban] = useState('');
  const [birthDate, setBirthDate] = useState('');

  const meQ = useQuery({
    queryKey: ['representation-me'],
    queryFn: () => api.get<ApiResponse<RepProfile>>('/api/v1/representation/me'),
    staleTime: 30_000,
  });
  const profile = unwrap(meQ.data);
  const verified = profile?.national_code_verified ?? false;
  const ibans = profile?.bank_account ?? [];

  const verifyMut = useMutation({
    mutationFn: (code: string) =>
      api.post<ApiResponse<RepProfile>>('/api/v1/representation/verify-national-code', { national_code: code }),
    onSuccess: () => {
      toast.success('کد ملی با موفقیت تأیید شد');
      setNationalCode('');
      qc.invalidateQueries({ queryKey: ['representation-me'] });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const addIbanMut = useMutation({
    mutationFn: (v: string) =>
      api.post<ApiResponse<RepProfile>>('/api/v1/representation/iban', { iban: v }),
    onSuccess: () => {
      toast.success('شماره شبا تأیید و اضافه شد');
      setIban('');
      qc.invalidateQueries({ queryKey: ['representation-me'] });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const removeIbanMut = useMutation({
    mutationFn: (id: string) =>
      api.delete<ApiResponse<RepProfile>>(`/api/v1/representation/iban/${id}`),
    onSuccess: () => {
      toast.success('شماره شبا حذف شد');
      qc.invalidateQueries({ queryKey: ['representation-me'] });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const submitNationalCode = () => {
    const code = nationalCode.replace(/\D/g, '');
    if (code.length !== 10) { toast.error('کد ملی باید ۱۰ رقم باشد'); return; }
    verifyMut.mutate(code);
  };

  const submitIban = () => {
    if (!iban.trim()) { toast.error('شماره شبا را وارد کنید'); return; }
    addIbanMut.mutate(iban.trim());
  };

  return (
    <div className="fade-in">
      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
        <div>
          <h1 className="section-title">پروفایل نماینده</h1>
          <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>تأیید هویت و مدیریت شماره‌های شبا</div>
        </div>
      </div>

      {/* تأیید کد ملی */}
      <div className="card card-pad">
        <div className="card-title-row" style={{ marginBottom: 12 }}>
          <h3 style={{ fontSize: 16 }}>تأیید هویت</h3>
          {verified && (
            <span className="badge green" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <CheckBadgeIcon style={{ width: 15, height: 15 }} /> کد ملی تأیید شده
            </span>
          )}
        </div>

        {verified ? (
          <div className="muted" style={{ fontSize: 13.5 }}>
            کد ملی: <span dir="ltr" style={{ fontWeight: 600 }}>{profile?.national_code}</span>
          </div>
        ) : (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
            <input
              type="text" inputMode="numeric" dir="ltr" maxLength={10} value={nationalCode}
              placeholder="کد ملی ۱۰ رقمی"
              onChange={(e) => setNationalCode(e.target.value.replace(/\D/g, ''))}
              style={{ width: 220, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5, boxSizing: 'border-box', textAlign: 'center' }}
            />
            <button className="btn primary" onClick={submitNationalCode} disabled={verifyMut.isPending}>
              {verifyMut.isPending ? 'در حال تأیید...' : 'تأیید کد ملی'}
            </button>
            <span className="muted" style={{ fontSize: 12 }}>با استعلام شاهکار بررسی می‌شود</span>
          </div>
        )}
      </div>

      {/* شماره‌های شبا */}
      <div className="card card-pad" style={{ marginTop: 'var(--gap)' }}>
        <div className="card-title-row" style={{ marginBottom: 12 }}>
          <h3 style={{ fontSize: 16 }}>شماره‌های شبا</h3>
          <span className="muted" style={{ fontSize: 12 }}>{ibans.length} از ۲</span>
        </div>

        <div style={{ overflowX: 'auto' }}>
          <table className="tbl" style={{ width: '100%' }}>
            <thead><tr><th>شماره شبا</th><th>بانک</th><th>صاحب حساب</th><th>وضعیت</th><th></th></tr></thead>
            <tbody>
              {ibans.length === 0 && (
                <tr><td colSpan={5} className="muted" style={{ textAlign: 'center', padding: 16 }}>هنوز شبایی ثبت نشده است</td></tr>
              )}
              {ibans.map((b) => (
                <tr key={b.id}>
                  <td dir="ltr" style={{ textAlign: 'left', fontFamily: 'monospace' }}>{b.iban}</td>
                  <td>{b.bank_name ?? '—'}</td>
                  <td>{b.owner_name ?? '—'}</td>
                  <td><span className={`badge ${b.verified ? 'green' : 'gray'}`}>{b.verified ? 'تأیید شده' : 'تأیید نشده'}</span></td>
                  <td style={{ textAlign: 'center' }}>
                    <button className="btn icon danger" title="حذف" onClick={() => removeIbanMut.mutate(b.id)} disabled={removeIbanMut.isPending}>
                      <TrashIcon style={{ width: 16, height: 16 }} />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {!verified && (
          <div className="muted" style={{ fontSize: 12.5, marginTop: 12 }}>
            برای افزودن شبا ابتدا باید کد ملی خود را تأیید کنید.
          </div>
        )}

        {verified && ibans.length < 2 && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
            <input
              type="text" dir="ltr" value={iban} placeholder="IR000000000000000000000000"
              onChange={(e) => setIban(e.target.value)}
              style={{ width: 320, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box', fontFamily: 'monospace' }}
            />
            <button className="btn primary" onClick={submitIban} disabled={addIbanMut.isPending} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <PlusIcon style={{ width: 16, height: 16 }} />
              {addIbanMut.isPending ? 'در حال بررسی...' : 'افزودن شبا'}
            </button>
            <span className="muted" style={{ fontSize: 12 }}>مالکیت با استعلام بررسی می‌شود</span>
          </div>
        )}
      </div>
    </div>
  );
}