clinicpro/assets/admin/components/SessionPaymentAccordion.tsx

import { ChevronDownIcon } from '@heroicons/react/24/outline';
import { formatDate, formatRial } from '../lib/utils';
import { FilesServicePaymentsCheck } from './icons/FilesServiceIcons';

export interface SessionPaymentData {
  uuid: string;
  services?: Array<{ service_name?: string; name?: string }>;
  visit_price_rials?: number;
  doctor_name?: string | null;
  final_price_rials?: number;
  payment_method?: string;
  is_paid?: boolean;
  created_at?: number;
  updated_at?: number;
}

const PAYMENT_LABELS: Record<string, string> = {
  cash: 'نقدی', card: 'کارت', insurance: 'بیمه', online: 'آنلاین', pending: 'در انتظار',
  wallet: 'کیف پول', pos: 'کارتخوان',
};

/** vertical hairline divider between meta columns (tauri MUI vertical Divider). */
function VDivider({ h = 24 }: { h?: number }) {
  return <span className="dark:bg-[#35343D]" style={{ width: 1, height: h, background: '#E5E7EB', flexShrink: 0, margin: '0 16px', alignSelf: 'center' }} />;
}

function Meta({ label, value }: { label: string; value: string }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13 }}>
      <span className="dark:text-[#A1A1A1]" style={{ color: '#6B7280' }}>{label}:</span>
      <span className="dark:text-[#D7D8ED]" style={{ color: '#525252', fontWeight: 500 }}>{value}</span>
    </span>
  );
}

/**
 * A patient «پرداخت‌ها» accordion — one settled/unsettled مراجعه (session) —
 * ported from tauri files/tabs/PaymentsSection. Header shows the service, date,
 * final price and settlement badge; the body lists the session's settlement
 * (real model = one payment_method per session), or the empty message.
 */
export default function SessionPaymentAccordion({ session, expanded, onToggle }: {
  session: SessionPaymentData;
  expanded: boolean;
  onToggle: () => void;
}) {
  const names = (session.services ?? []).map((s) => s.service_name || s.name).filter(Boolean) as string[];
  if ((session.visit_price_rials ?? 0) > 0) names.unshift('ویزیت');
  const name = names.length ? names.join(' - ') : 'ویزیت';
  const paid = !!session.is_paid;
  const finalPrice = formatRial(session.final_price_rials ?? 0);

  return (
    <div className="dark:border-[#35343D]" style={{ border: '1px solid #E5E7EB', borderRadius: 8, marginBottom: 16, overflow: 'hidden' }}>
      {/* summary */}
      <button
        type="button"
        onClick={onToggle}
        aria-expanded={expanded}
        className="bg-white dark:bg-[#2B2D3A]"
        style={{ display: 'flex', alignItems: 'center', gap: 4, width: '100%', padding: '12px 16px', border: 'none', cursor: 'pointer', textAlign: 'start', flexWrap: 'wrap' }}
      >
        <span className="dark:text-[#D7D8ED]" style={{ minWidth: 150, color: '#2f2f2f', fontWeight: 500, fontSize: 14 }}>{name}</span>
        <VDivider />
        <Meta label="تاریخ" value={session.created_at ? formatDate(session.created_at) : '—'} />
        <VDivider />
        <Meta label="مبلغ نهایی" value={finalPrice} />
        <span style={{ flex: 1 }} />
        <VDivider />
        <span style={{
          color: '#fff', padding: '3px 16px', borderRadius: 4, fontSize: 12, fontWeight: 600,
          textAlign: 'center', minWidth: 90, background: paid ? '#10B981' : '#F59E0B',
        }}>
          {paid ? 'پرداخت شده' : 'تسویه نشده'}
        </span>
        <ChevronDownIcon className="dark:text-[#D7D8ED]" style={{ width: 20, height: 20, color: '#525252', marginInlineStart: 8, transition: 'transform .2s', transform: expanded ? 'rotate(180deg)' : 'none' }} />
      </button>

      {/* details */}
      {expanded && (
        <div className="dark:border-[#35343D] dark:bg-[#222433]" style={{ borderTop: '1px solid #E5E7EB' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px 8px' }}>
            <FilesServicePaymentsCheck color="#6B7280" size={18} style={{ transform: 'rotate(180deg)' }} />
            <span className="dark:text-[#A1A1A1]" style={{ color: '#6B7280', fontWeight: 600, fontSize: 13 }}>پرداختی‌ها</span>
          </div>

          <div style={{ padding: '0 16px 16px' }}>
            {paid ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 0', flexWrap: 'wrap' }}>
                <FilesServicePaymentsCheck color="#6B7280" size={20} />
                <Meta label="تاریخ" value={formatDate(session.updated_at ?? session.created_at ?? 0)} />
                <VDivider h={32} />
                <Meta label="مبلغ" value={finalPrice} />
                <VDivider h={32} />
                <Meta label="نحوه پرداخت" value={PAYMENT_LABELS[session.payment_method ?? ''] ?? session.payment_method ?? '—'} />
                <VDivider h={32} />
                <Meta label="پرسنل" value={session.doctor_name || '—'} />
              </div>
            ) : (
              <div className="dark:text-[#A1A1A1]" style={{ padding: 16, textAlign: 'center', color: '#6B7280', fontSize: 13 }}>هیچ پرداختی ثبت نشده است.</div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}