clinicpro/assets/admin/components/ServiceItemFormModal.tsx

import { useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { ShieldCheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { toast } from 'sonner';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import type { ServiceItem, ClinicStaff } from '../types';
import type { InventoryPackage } from '../hooks/useInventory';
import { rialToToman, tomanToRial } from '../lib/utils';
import { numericField } from '../lib/forms';
import Modal from './ui/Modal';
import PriceInput from './ui/PriceInput';
import SearchableSelect from './ui/SearchableSelect';

const itemSchema = z.object({
  name:             z.string().min(1, 'نام سرویس الزامی است'),
  price_rials:      z.coerce.number().min(0, 'مبلغ نمی‌تواند منفی باشد'),
  staff_uuids:      z.array(z.string()).optional(),
  duration_minutes: z.coerce.number().min(0).optional(),
  bookable:         z.boolean().optional(),
  /** پکیج کالای مصرفی؛ رشته‌ی خالی یعنی بدون پکیج. */
  inventory_package_uuid: z.string().optional(),
});
type ItemForm = z.infer<typeof itemSchema>;

const EMPTY_FORM: ItemForm = {
  name: '', price_rials: 0, staff_uuids: [], duration_minutes: undefined,
  bookable: false, inventory_package_uuid: '',
};

interface Props {
  /** `'create'` برای سرویس جدید، شیء سرویس برای ویرایش، `null` یعنی بسته. */
  item: 'create' | ServiceItem | null;
  /** بخش مقصد؛ برای حالت ایجاد الزامی است. */
  sectionUuid: string | null;
  onClose: () => void;
  /** برای باز کردن مودال پوشش بیمه از داخل فرم (فقط در حالت ویرایش). */
  onManageInsurance?: (item: ServiceItem) => void;
}

/**
 * فرم ایجاد/ویرایش سرویس — مشترک بین فهرست سرویس‌ها و صفحه‌ی جزئیات سرویس.
 *
 * تنظیمات بیمه اینجا نیست: پوشش هر بیمه‌گر تنها در «پوشش بیمه» مدیریت می‌شود و
 * پرچم `insurance_covered` سمت سرور از همان‌جا همگام می‌شود.
 */
export default function ServiceItemFormModal({ item, sectionUuid, onClose, onManageInsurance }: Props) {
  const qc = useQueryClient();
  const editing = item !== null && typeof item === 'object' ? item : null;

  const { data: staffData } = useQuery<ApiResponse<ClinicStaff[]>>({
    queryKey: ['staff'],
    queryFn: () => api.get('/api/v1/staff'),
    enabled: item !== null,
  });
  const allStaff = staffData?.data ?? [];

  const { data: packagesData } = useQuery<ApiResponse<InventoryPackage[]>>({
    queryKey: ['inventory-packages'],
    queryFn: () => api.get('/api/v1/inventory-packages'),
    enabled: item !== null,
  });
  const packages = packagesData?.data ?? [];

  const form = useForm<ItemForm>({ resolver: zodResolver(itemSchema), defaultValues: EMPTY_FORM });

  useEffect(() => {
    if (item === null) return;
    form.reset(editing
      ? {
          name: editing.name,
          price_rials: rialToToman(editing.price_rials),
          staff_uuids: (editing.staff_members ?? (editing.staff ? [editing.staff] : [])).map((s) => s.uuid),
          duration_minutes: editing.duration_minutes ?? undefined,
          bookable: editing.bookable ?? false,
          inventory_package_uuid: editing.inventory_package_uuid ?? '',
        }
      : EMPTY_FORM);
  }, [item]);

  const invalidate = () => {
    qc.invalidateQueries({ queryKey: ['service-items'] });
    qc.invalidateQueries({ queryKey: ['service-sections'] });
    if (editing) qc.invalidateQueries({ queryKey: ['service-item', editing.uuid] });
  };

  // رشته‌ی خالی در payload یعنی «بدون پکیج»؛ بک‌اند null می‌خواهد.
  const toPayload = (body: ItemForm) => ({
    ...body,
    price_rials: tomanToRial(body.price_rials),
    inventory_package_uuid: body.inventory_package_uuid || null,
  });

  const createItem = useMutation({
    mutationFn: (body: ItemForm) => api.post('/api/v1/service-item', {
      ...toPayload(body),
      section_uuid: sectionUuid,
    }),
    onSuccess: () => { invalidate(); onClose(); toast.success('سرویس ایجاد شد'); },
    onError: (e: Error) => toast.error(e.message),
  });

  const editItem = useMutation({
    mutationFn: (body: ItemForm) => api.patch(`/api/v1/service-item/${editing!.uuid}`, toPayload(body)),
    onSuccess: () => { invalidate(); onClose(); toast.success('سرویس ویرایش شد'); },
    onError: (e: Error) => toast.error(e.message),
  });

  const saving = createItem.isPending || editItem.isPending;

  const selectedStaffUuids = form.watch('staff_uuids') ?? [];
  const editingMembers = editing ? (editing.staff_members ?? (editing.staff ? [editing.staff] : [])) : [];
  const staffOptions = allStaff
    .filter((s) => s.active || editingMembers.some((m) => m.uuid === s.uuid))
    .filter((s) => !selectedStaffUuids.includes(s.uuid))
    .map((s) => ({ value: s.uuid, label: s.active ? s.full_name : `${s.full_name} (غیرفعال)` }));
  const staffNameOf = (uuid: string) =>
    allStaff.find((s) => s.uuid === uuid)?.full_name
    ?? editingMembers.find((m) => m.uuid === uuid)?.full_name
    ?? uuid;

  return (
    <Modal
      open={item !== null}
      onClose={onClose}
      title={editing ? 'ویرایش سرویس' : 'سرویس جدید'}
      size="md"
      footer={
        <>
          <button type="button" className="btn" onClick={onClose}>انصراف</button>
          <button type="submit" form="service-item-form" className="btn primary" disabled={saving}>
            {saving ? 'در حال ذخیره...' : 'ذخیره سرویس'}
          </button>
        </>
      }
    >
      <form
        id="service-item-form"
        onSubmit={form.handleSubmit((d) => (editing ? editItem : createItem).mutate(d))}
        style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <label className="field-label">نام سرویس *</label>
            <div className="field" style={form.formState.errors.name ? { borderColor: 'var(--danger)' } : undefined}>
              <input {...form.register('name')} placeholder="مثلاً: سرم ۵۰۰cc" autoFocus />
            </div>
            {form.formState.errors.name && (
              <span className="field-error">{form.formState.errors.name.message}</span>
            )}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label className="field-label">قیمت پایه (تومان) *</label>
              <div className="field">
                <PriceInput
                  value={form.watch('price_rials') ?? 0}
                  onChange={(v) => form.setValue('price_rials', v)}
                  placeholder="۸۵,۰۰۰"
                  min={0}
                  suffix="تومان"
                />
              </div>
              {form.formState.errors.price_rials && (
                <span className="field-error">{form.formState.errors.price_rials.message}</span>
              )}
            </div>
            <div>
              <label className="field-label">پرسنل مسئول</label>
              <SearchableSelect
                options={staffOptions}
                value={''}
                onChange={(v) => { if (v != null) form.setValue('staff_uuids', [...selectedStaffUuids, String(v)]); }}
                placeholder="افزودن پرسنل (اختیاری)"
                noOptionsMessage="پرسنلی باقی نمانده"
                height={42}
              />
              {selectedStaffUuids.length > 0 && (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
                  {selectedStaffUuids.map((uuid) => (
                    <span key={uuid} style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6,
                      fontSize: 12.5, color: 'var(--text-2)', background: 'var(--surface-2)',
                      border: '1px solid var(--border)', borderRadius: 999, padding: '4px 6px 4px 10px',
                    }}>
                      {staffNameOf(uuid)}
                      <button
                        type="button" aria-label={`حذف ${staffNameOf(uuid)}`}
                        onClick={() => form.setValue('staff_uuids', selectedStaffUuids.filter((u) => u !== uuid))}
                        style={{ display: 'grid', placeItems: 'center', width: 16, height: 16, border: 'none', cursor: 'pointer', borderRadius: '50%', background: 'var(--surface-3)', color: 'var(--text-3)' }}
                      >
                        <XMarkIcon style={{ width: 11 }} />
                      </button>
                    </span>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, alignItems: 'end' }}>
            <div>
              <label className="field-label">زمان متوسط (دقیقه)</label>
              <div className="field">
                <input {...numericField(form.register('duration_minutes'))} placeholder="مثلاً: 50" />
              </div>
            </div>
            <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', padding: '9px 0' }}>
              <span className="switch">
                <input
                  type="checkbox"
                  checked={form.watch('bookable') ?? false}
                  onChange={(e) => form.setValue('bookable', e.target.checked)}
                />
                <span className="switch-track"><span className="switch-thumb" /></span>
              </span>
              <span style={{ fontSize: 13 }}>نمایش در نوبت‌دهی</span>
            </label>
          </div>

          <div>
            <label className="field-label">پکیج کالای مصرفی</label>
            <SearchableSelect
              options={packages.map((p) => ({ value: p.uuid, label: p.title }))}
              value={form.watch('inventory_package_uuid') || null}
              onChange={(v) => form.setValue('inventory_package_uuid', v == null ? '' : String(v))}
              placeholder="بدون پکیج (اختیاری)"
              noOptionsMessage="پکیجی تعریف نشده است"
              isClearable
              height={42}
            />
          </div>
        </div>

        {/* بیمه — تنظیمات فقط در «پوشش بیمه» مدیریت می‌شود تا داده‌ی تکراری ساخته نشود. */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: '11px 13px',
          borderRadius: 'var(--r-sm)', background: 'var(--primary-soft)',
        }}>
          <ShieldCheckIcon style={{ width: 16, flexShrink: 0, color: 'var(--primary)' }} />
          <span style={{ flex: 1, minWidth: 0, fontSize: 12, color: 'var(--text-2)', lineHeight: 1.7 }}>
            پوشش بیمه‌ی این خدمت — درصد، فرانشیز و سقف هر بیمه‌گر — در بخش «پوشش بیمه» تنظیم می‌شود.
          </span>
          {editing && onManageInsurance && (
            <button
              type="button"
              className="btn sm"
              style={{ flexShrink: 0 }}
              onClick={() => { const it = editing; onClose(); onManageInsurance(it); }}
            >
              پوشش بیمه
            </button>
          )}
        </div>
      </form>
    </Modal>
  );
}