clinicpro/assets/admin/components/FreeVisitPrice.tsx

import { useEffect, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { api } from '../lib/api';
import { formatRial, rialToToman, tomanToRial } from '../lib/utils';

interface Pricing { free_visit_price_rials: number; require_visit_price: boolean }

export default function FreeVisitPrice() {
  const qc = useQueryClient();
  const [value, setValue] = useState('');
  const [required, setRequired] = useState(false);
  const [error, setError] = useState('');

  const { data } = useQuery<{ data: Pricing }>({
    queryKey: ['insurance-pricing'],
    queryFn: () => api.get('/api/v1/insurance-pricing'),
  });
  const pricing = (data as any)?.data as Pricing | undefined;

  useEffect(() => {
    if (pricing) {
      setValue(String(rialToToman(pricing.free_visit_price_rials ?? 0)));
      setRequired(!!pricing.require_visit_price);
    }
  }, [pricing]);

  const saveMut = useMutation({
    mutationFn: () => api.put('/api/v1/insurance-pricing', {
      free_visit_price_rials: tomanToRial(Number(value) || 0),
      require_visit_price: required,
    }),
    onSuccess: () => {
      toast.success('قیمت ویزیت ذخیره شد');
      qc.invalidateQueries({ queryKey: ['insurance-pricing'] });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const save = () => {
    if (required && (Number(value) || 0) <= 0) {
      setError('با فعال بودن «الزامی کردن هزینه ویزیت»، قیمت ویزیت آزاد الزامی است');
      return;
    }
    setError('');
    saveMut.mutate();
  };

  return (
    <div className="card" style={{ padding: 20, marginBottom: 16 }}>
      <h2 style={{ fontSize: 14, fontWeight: 700, margin: '0 0 4px' }}>قیمت ویزیت آزاد</h2>
      <p style={{ fontSize: 12, color: 'var(--text-3)', margin: '0 0 12px', lineHeight: 1.7 }}>
        مبلغ ویزیت بدون بیمه. در ثبت مراجعه، انتخاب بیمه درصد پوشش قرارداد را روی همین مبلغ اعمال می‌کند.
      </p>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <label style={{ fontSize: 11.5, fontWeight: 600 }}>
            قیمت (تومان){required && <span style={{ color: 'var(--danger)' }}> *</span>}
          </label>
          <input
            type="number" min={0} dir="ltr" className="input" style={{ width: 200 }}
            aria-invalid={!!error}
            value={value} onChange={(e) => { setValue(e.target.value); setError(''); }}
          />
        </div>
        {value !== '' && (
          <span style={{ fontSize: 12, color: 'var(--text-3)', marginBottom: 8 }}>{formatRial(tomanToRial(Number(value) || 0))}</span>
        )}
      </div>
      {error && (
        <p style={{ fontSize: 12, color: 'var(--danger)', margin: '6px 0 0' }}>{error}</p>
      )}

      <label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 13, cursor: 'pointer', marginTop: 16 }}>
        <span style={{
          position: 'relative', width: 42, height: 22, borderRadius: 999, flexShrink: 0,
          background: required ? 'var(--primary)' : '#c4c4c4', transition: 'background .2s',
        }}>
          <input
            type="checkbox" checked={required} role="switch" aria-label="الزامی کردن هزینه ویزیت"
            onChange={(e) => { setRequired(e.target.checked); setError(''); }}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', margin: 0, opacity: 0, cursor: 'pointer' }}
          />
          <span style={{
            position: 'absolute', top: 2, insetInlineStart: required ? 22 : 2, width: 18, height: 18,
            borderRadius: 999, background: '#fff', transition: 'inset-inline-start .2s', boxShadow: '0 1px 2px rgba(0,0,0,.2)',
          }} />
        </span>
        الزامی کردن هزینه ویزیت
      </label>
      <p style={{ fontSize: 12, color: 'var(--text-3)', margin: '6px 0 0', lineHeight: 1.7 }}>
        با فعال شدن این گزینه، وارد کردن هزینه ویزیت در تنظیمات، ثبت مراجعه (سرویس)، فاکتور سرویس و ثبت نوبت الزامی می‌شود و بدون آن امکان ذخیره وجود ندارد.
      </p>

      <div style={{ display: 'flex', marginTop: 16 }}>
        <button className="btn primary sm" style={{ marginInlineStart: 'auto' }} disabled={saveMut.isPending} onClick={save}>
          {saveMut.isPending ? '...' : 'ذخیره'}
        </button>
      </div>
    </div>
  );
}