import React, { useState, useEffect, useMemo, useRef } from 'react';
import { createPortal } from 'react-dom';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  ArrowRightIcon, PencilIcon, TrashIcon,
  BuildingOffice2Icon, PhoneIcon, MapPinIcon, XMarkIcon,
  PlusIcon, CameraIcon, ChevronDownIcon,
  EnvelopeIcon, ArrowPathIcon, NoSymbolIcon, EyeIcon,
} from '@heroicons/react/24/outline';
import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { toast } from 'sonner';
import { api } from '../lib/api';
import type { ApiResponse, PaginatedResponse } from '../lib/api';
import type { ClinicDetail } from '../types';
import { formatNumber } from '../lib/utils';
import ConfirmDialog from '../components/ui/ConfirmDialog';
import NotificationMobileCard from '../components/ui/NotificationMobileCard';
import InviteDoctorModal from '../components/ui/InviteDoctorModal';
import { useAuthStore } from '../stores/authStore';

// Fix leaflet icons
delete (L.Icon.Default.prototype as any)._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
  iconUrl:       'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
  shadowUrl:     'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
});

const HUES_LIST = [256, 205, 162, 295, 272];
const IRAN_CENTER: [number, number] = [32.4279, 53.6880];

// ── Types ──────────────────────────────────────────────────────────────────

interface ClinicInvitation {
  uuid: string;
  mobile: string;
  invited_name: string | null;
  invited_specialty: string | null;
  status: 'pending' | 'accepted' | 'rejected' | 'suspended' | 'removed';
  token_used: boolean;
  invited_at: number;
  expires_at: number;
  responded_at: number | null;
  doctor: { uuid: string; name: string } | null;
}

interface ClinicDoctorItem {
  id: string; uuid: string; name: string;
  gender: string | null; degree: string | null;
  img: { url: string }[];
  specialties: { id: string; name: string }[];
  active: boolean;
}

interface ClinicAddress {
  id: string; uuid: string;
  name: string | null; address: string | null;
  telephone: string | null;
  map: { latitude: string | null; longitude: string | null };
  city:     { id: string; name: string } | null;
  province: { id: string; name: string } | null;
}

interface Opt { id: number; name: string; }
interface OptUuid { id: number; uuid: string; name: string; }

// ── Edit form schema ───────────────────────────────────────────────────────

const editSchema = z.object({
  name:        z.string().min(1, 'نام الزامی است'),
  telephone:   z.string().optional(),
  info:        z.string().optional(),
  is_247:      z.boolean(),
  specialties: z.array(z.number()),
  insurance:   z.array(z.number()),
  doctor_services: z.array(z.number()),
});
type EditForm = z.infer<typeof editSchema>;

// ── Searchable Select (template CSS) ──────────────────────────────────────

function SearchableSelectField({ options, value, onChange, placeholder, disabled = false }: {
  options: Opt[];
  value: number | null;
  onChange: (v: number | null, label?: string) => void;
  placeholder?: string;
  disabled?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const [q,    setQ]    = useState('');
  const [rect, setRect] = useState<DOMRect | null>(null);
  const btnRef = useRef<HTMLButtonElement>(null);
  const dropRef = useRef<HTMLDivElement>(null);

  const filtered = useMemo(
    () => q ? options.filter(o => o.name.includes(q)) : options,
    [options, q],
  );
  const selected = useMemo(() => options.find(o => o.id === value) ?? null, [options, value]);

  const openDD = () => {
    if (disabled || !btnRef.current) return;
    setRect(btnRef.current.getBoundingClientRect());
    setOpen(v => !v);
    setQ('');
  };

  useEffect(() => {
    if (!open) return;
    const onDown = (e: MouseEvent) => {
      if (dropRef.current && !dropRef.current.contains(e.target as Node) &&
          btnRef.current  && !btnRef.current.contains(e.target as Node))
        setOpen(false);
    };
    document.addEventListener('mousedown', onDown);
    return () => document.removeEventListener('mousedown', onDown);
  }, [open]);

  const dropStyle: React.CSSProperties = rect
    ? { position: 'fixed', top: rect.bottom + 4, left: rect.left, width: rect.width, zIndex: 9999 }
    : {};

  return (
    <div>
      <button ref={btnRef} type="button" disabled={disabled} onClick={openDD}
        style={{
          width: '100%', textAlign: 'right', display: 'flex', alignItems: 'center',
          justifyContent: 'space-between', padding: '8px 12px', borderRadius: 8,
          border: '1px solid var(--border)', background: disabled ? 'var(--surface-2, var(--bg))' : 'var(--surface)',
          color: selected ? 'var(--text)' : 'var(--text-3)', cursor: disabled ? 'not-allowed' : 'pointer',
          fontSize: 14, opacity: disabled ? 0.6 : 1,
        }}>
        <span>{selected?.name ?? placeholder ?? 'انتخاب کنید'}</span>
        <ChevronDownIcon style={{ width: 14, height: 14, flexShrink: 0, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
      </button>
      {open && createPortal(
        <div ref={dropRef} style={{
          ...dropStyle,
          background: 'var(--surface)', border: '1px solid var(--border)',
          borderRadius: 10, boxShadow: '0 8px 32px rgba(0,0,0,.12)', overflow: 'hidden',
        }}>
          <div style={{ padding: '8px 8px 0' }}>
            <input autoFocus value={q} onChange={e => setQ(e.target.value)} placeholder="جستجو..."
              className="input" style={{ fontSize: 13 }} />
          </div>
          <div style={{ maxHeight: 200, overflowY: 'auto', padding: '4px 0' }}>
            <button type="button"
              onClick={() => { onChange(null); setOpen(false); }}
              style={{ width: '100%', textAlign: 'right', padding: '8px 12px', fontSize: 13, color: 'var(--text-3)', background: 'none', border: 'none', cursor: 'pointer' }}>
              {placeholder ?? 'انتخاب کنید'}
            </button>
            {filtered.map(o => (
              <button key={o.id} type="button"
                onClick={() => { onChange(o.id, o.name); setOpen(false); setQ(''); }}
                style={{
                  width: '100%', textAlign: 'right', padding: '8px 12px', fontSize: 13,
                  background: value === o.id ? 'var(--primary-light, oklch(0.95 0.04 256))' : 'none',
                  color: value === o.id ? 'var(--primary)' : 'var(--text)', border: 'none', cursor: 'pointer',
                }}>
                {o.name}
              </button>
            ))}
            {filtered.length === 0 && (
              <p style={{ textAlign: 'center', padding: '10px 0', fontSize: 12, color: 'var(--text-3)' }}>نتیجه‌ای یافت نشد</p>
            )}
          </div>
        </div>,
        document.body,
      )}
    </div>
  );
}

// ── Multi-select checkbox list ─────────────────────────────────────────────

function MultiCheckList({ options, selected, onChange, placeholder }: {
  options: Opt[]; selected: number[]; onChange: (v: number[]) => void; placeholder?: string;
}) {
  const [q, setQ] = useState('');
  const filtered = useMemo(() => q ? options.filter(o => o.name.includes(q)) : options, [options, q]);
  const toggle = (id: number) =>
    onChange(selected.includes(id) ? selected.filter(x => x !== id) : [...selected, id]);

  return (
    <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
      <div style={{ padding: '6px 8px', borderBottom: '1px solid var(--border)', background: 'var(--surface-2, var(--bg))' }}>
        <input value={q} onChange={e => setQ(e.target.value)} placeholder={placeholder ?? 'جستجو...'}
          className="input" style={{ fontSize: 13 }} />
      </div>
      {selected.length > 0 && (
        <div style={{ padding: '6px 10px', borderBottom: '1px solid var(--border)', display: 'flex', flexWrap: 'wrap', gap: 4 }}>
          {selected.map(id => {
            const opt = options.find(o => o.id === id);
            if (!opt) return null;
            return (
              <span key={id} className="badge violet" style={{ cursor: 'pointer', userSelect: 'none' }}
                onClick={() => toggle(id)}>
                <span className="bdot" />{opt.name} ×
              </span>
            );
          })}
        </div>
      )}
      <div style={{ maxHeight: 180, overflowY: 'auto' }}>
        {filtered.length === 0
          ? <p style={{ textAlign: 'center', padding: '10px 0', fontSize: 12, color: 'var(--text-3)' }}>نتیجه‌ای یافت نشد</p>
          : filtered.map(o => (
            <label key={o.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 12px', cursor: 'pointer' }}>
              <input type="checkbox" checked={selected.includes(o.id)} onChange={() => toggle(o.id)} />
              <span style={{ fontSize: 13, color: 'var(--text)' }}>{o.name}</span>
            </label>
          ))}
      </div>
    </div>
  );
}

// ── Leaflet helpers ────────────────────────────────────────────────────────

function MapClickHandler({ onPick }: { onPick: (lat: number, lng: number) => void }) {
  useMapEvents({ click: e => onPick(e.latlng.lat, e.latlng.lng) });
  return null;
}
function MapFlyController({ target }: { target: [number, number] | null }) {
  const map = useMap();
  useEffect(() => { if (target) map.flyTo(target, 12, { duration: 1.2 }); }, [target, map]);
  return null;
}
function MapPicker({ lat, lng, onChange, flyTarget, initialCenter }: {
  lat: number | null; lng: number | null;
  onChange: (lat: number, lng: number) => void;
  flyTarget?: [number, number] | null;
  initialCenter?: [number, number] | null;
}) {
  const pos: [number, number] | null = lat !== null && lng !== null ? [lat, lng] : null;
  const center: [number, number] = initialCenter ?? pos ?? IRAN_CENTER;
  const zoom = initialCenter ?? pos ? 13 : 5;
  return (
    <div style={{ borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border)', height: 260 }}>
      <MapContainer key={`${center[0]},${center[1]}`} center={center} zoom={zoom} style={{ height: '100%', width: '100%' }}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://openstreetmap.org">OpenStreetMap</a>' />
        <MapClickHandler onPick={onChange} />
        <MapFlyController target={flyTarget ?? null} />
        {pos && <Marker position={pos} />}
      </MapContainer>
    </div>
  );
}

// ── Geocode helper ─────────────────────────────────────────────────────────

async function geocodeCity(name: string): Promise<[number, number] | null> {
  try {
    const url = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(name + ',ایران')}&format=json&countrycodes=ir&limit=1`;
    const res = await fetch(url, { headers: { 'Accept-Language': 'fa' } });
    const d = await res.json();
    if (d?.[0]) return [parseFloat(d[0].lat), parseFloat(d[0].lon)];
    return null;
  } catch { return null; }
}

// ── Edit Modal ─────────────────────────────────────────────────────────────

function EditModal({ clinic, onClose, onSaved }: {
  clinic: ClinicDetail; onClose: () => void; onSaved: () => void;
}) {
  const { register, handleSubmit, watch, setValue, formState: { errors } } = useForm<EditForm>({
    resolver: zodResolver(editSchema),
    defaultValues: {
      name:        clinic.name ?? '',
      telephone:   clinic.phone ?? clinic.phone_number ?? '',
      info:        clinic.caption ?? '',
      is_247:      clinic['24_7'] ?? false,
      specialties: (clinic.specialties ?? []).map(s => Number(s.id)),
      insurance:   (clinic.list_bime  ?? []).map(s => Number(s.id)),
      doctor_services: (clinic.services ?? []).map(s => Number(s.id)),
    },
  });

  const watchedSpec  = (watch('specialties') ?? []) as number[];
  const watchedIns   = (watch('insurance')   ?? []) as number[];
  const watchedSrv   = (watch('doctor_services') ?? []) as number[];

  const specialtiesQ = useQuery({
    queryKey: ['specialties-all'], staleTime: 600_000,
    queryFn: () => api.get<ApiResponse<any>>('/api/v1/specialties'),
  });
  const insurancesQ = useQuery({
    queryKey: ['insurances-all'], staleTime: 600_000,
    queryFn: () => api.get<ApiResponse<any>>('/api/v1/insurances'),
  });
  const servicesQ = useQuery({
    queryKey: ['doctor-services-all'], staleTime: 600_000,
    queryFn: () => api.get<ApiResponse<any>>('/api/v1/doctor-services'),
  });

  const specialties: Opt[] = useMemo(() => {
    const raw = specialtiesQ.data?.data?.data ?? specialtiesQ.data?.data ?? [];
    return raw.map((s: any) => ({ id: Number(s.id), name: s.name }));
  }, [specialtiesQ.data]);
  const insurances: Opt[] = useMemo(() => {
    const raw = insurancesQ.data?.data?.data ?? insurancesQ.data?.data ?? [];
    return raw.map((i: any) => ({ id: Number(i.id), name: i.name }));
  }, [insurancesQ.data]);
  const services: Opt[] = useMemo(() => {
    const raw = servicesQ.data?.data?.data ?? servicesQ.data?.data ?? [];
    return raw.map((s: any) => ({ id: Number(s.id), name: s.name }));
  }, [servicesQ.data]);

  const saveMut = useMutation({
    mutationFn: (values: EditForm) => api.patch<ApiResponse<any>>(`/api/v1/clinic/${clinic.uuid}`, {
      name:            values.name,
      telephone:       values.telephone || undefined,
      info:            values.info      || undefined,
      '24_7':          values.is_247,
      specialties:     values.specialties,
      insurance:       values.insurance,
      doctor_services: values.doctor_services,
    }),
    onSuccess: () => { toast.success('اطلاعات کلینیک ذخیره شد'); onSaved(); onClose(); },
    onError:   (e: Error) => toast.error(e.message),
  });

  const [activeTab, setActiveTab] = useState<'basic' | 'tags'>('basic');

  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" style={{ maxWidth: 560, maxHeight: '90vh', overflowY: 'auto' }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <b>ویرایش کلینیک</b>
          <button className="mini-btn" onClick={onClose}>
            <XMarkIcon style={{ width: 16, height: 16 }} />
          </button>
        </div>

        {/* Tab switcher */}
        <div style={{ borderBottom: '1px solid var(--border)', padding: '0 16px', display: 'flex', gap: 4 }}>
          {([['basic', 'اطلاعات پایه'], ['tags', 'تخصص و بیمه']] as const).map(([id, label]) => (
            <button key={id} type="button" onClick={() => setActiveTab(id)}
              style={{
                padding: '10px 14px', fontSize: 13, fontWeight: 600, border: 'none', background: 'none',
                cursor: 'pointer', borderBottom: activeTab === id ? '2px solid var(--primary)' : '2px solid transparent',
                color: activeTab === id ? 'var(--primary)' : 'var(--text-3)', marginBottom: -1,
              }}>
              {label}
            </button>
          ))}
        </div>

        <form onSubmit={handleSubmit(v => saveMut.mutate(v))}>
          <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

            {/* ── Basic tab ── */}
            {activeTab === 'basic' && (
              <>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>نام کلینیک</label>
                  <input className="input" {...register('name')} />
                  {errors.name && <div className="err-text">{errors.name.message}</div>}
                </div>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>تلفن</label>
                  <input className="input" dir="ltr" placeholder="021-12345678" {...register('telephone')} />
                </div>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>توضیحات</label>
                  <textarea className="input" rows={3} style={{ resize: 'vertical' }} {...register('info')} />
                </div>
                <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', userSelect: 'none' }}>
                  <input type="checkbox" {...register('is_247')} />
                  <span style={{ fontSize: 13, fontWeight: 600 }}>کلینیک ۲۴ ساعته (۷ روز هفته)</span>
                </label>
              </>
            )}

            {/* ── Tags tab ── */}
            {activeTab === 'tags' && (
              <>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>
                    تخصص‌ها ({watchedSpec.length} انتخاب‌شده)
                  </label>
                  <MultiCheckList options={specialties} selected={watchedSpec}
                    onChange={v => setValue('specialties', v)} placeholder="جستجوی تخصص..." />
                </div>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>
                    بیمه‌ها ({watchedIns.length} انتخاب‌شده)
                  </label>
                  <MultiCheckList options={insurances} selected={watchedIns}
                    onChange={v => setValue('insurance', v)} placeholder="جستجوی بیمه..." />
                </div>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>
                    خدمات ({watchedSrv.length} انتخاب‌شده)
                  </label>
                  <MultiCheckList options={services} selected={watchedSrv}
                    onChange={v => setValue('doctor_services', v)} placeholder="جستجوی خدمت..." />
                </div>
              </>
            )}
          </div>

          <div className="modal-foot">
            <button type="button" className="btn ghost sm" onClick={onClose}>انصراف</button>
            <button type="submit" className="btn primary sm" disabled={saveMut.isPending}>
              {saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ── Invitation status badge ────────────────────────────────────────────────

const INV_STATUS_MAP: Record<string, { label: string; cls: string }> = {
  pending:   { label: 'در انتظار',   cls: 'amber' },
  accepted:  { label: 'پذیرفته‌شده', cls: 'green' },
  rejected:  { label: 'رد شده',      cls: 'gray'  },
  suspended: { label: 'تعلیق',       cls: 'violet' },
  removed:   { label: 'حذف‌شده',     cls: 'gray'  },
};


// ── Main Page ──────────────────────────────────────────────────────────────

export default function ClinicDetailPage() {
  const { uuid }   = useParams<{ uuid: string }>();
  const navigate   = useNavigate();
  const qc         = useQueryClient();
  const primaryRole = useAuthStore(s => s.primaryRole);
  const dbUuid      = useAuthStore(s => s.dbUuid);
  const authToken   = useAuthStore(s => s.token);
  const isOwner     = primaryRole === 'clinic' && dbUuid === uuid;

  const [editOpen, setEditOpen]         = useState(false);
  const [deleteOpen, setDeleteOpen]     = useState(false);
  const [inviteOpen, setInviteOpen]     = useState(false);
  const [doctorsTab, setDoctorsTab] = useState<'doctors' | 'invitations'>('doctors');
  const logoInputRef    = useRef<HTMLInputElement>(null);
  const galleryInputRef = useRef<HTMLInputElement>(null);
  const [logoUploading,    setLogoUploading]    = useState(false);
  const [galleryUploading, setGalleryUploading] = useState(false);

  const { data, isLoading } = useQuery({
    queryKey: ['clinic-detail', uuid],
    queryFn:  () => api.get<ApiResponse<{ data: ClinicDetail }>>(`/api/v1/clinic/${uuid}`),
    enabled:  !!uuid,
  });

  const doctorsQ = useQuery({
    queryKey: ['clinic-doctors', uuid],
    queryFn:  () => api.get<ApiResponse<{ data: ClinicDoctorItem[] }>>(`/api/v1/clinic/doctor-list/${uuid}`),
    enabled:  !!uuid,
  });

  const invitationsQ = useQuery({
    queryKey: ['clinic-invitations', uuid],
    queryFn:  () => api.get<PaginatedResponse<ClinicInvitation>>(`/api/v1/admin/clinic/${uuid}/invitations?limit=50`),
    enabled:  !!uuid,
  });

  const clinicAddressesQ = useQuery({
    queryKey: ['clinic-addresses', uuid],
    queryFn:  () => api.get<ApiResponse<ClinicAddress[]>>(`/api/v1/clinic/${uuid}/addresses`),
    enabled:  !!uuid,
  });
  const clinicAddresses: ClinicAddress[] = (clinicAddressesQ.data?.data as any)?.data ?? clinicAddressesQ.data?.data ?? [];

  const [addrFormOpen,      setAddrFormOpen]      = useState(false);
  const [editingClinicAddr, setEditingClinicAddr] = useState<ClinicAddress | null>(null);
  const [deleteAddrConfirm, setDeleteAddrConfirm] = useState<ClinicAddress | null>(null);

  const emptyAddrForm = { name: '', address: '', telephone: '', province_id: null as number | null, city_id: null as number | null, latitude: null as number | null, longitude: null as number | null };
  const [addrForm, setAddrForm] = useState(emptyAddrForm);
  const [addrMapFlyTarget, setAddrMapFlyTarget] = useState<[number, number] | null>(null);

  const provincesQ = useQuery({
    queryKey: ['provinces'], staleTime: 600_000,
    queryFn: () => api.get<ApiResponse<any>>('/api/v1/provinces'),
  });
  const citiesQ = useQuery({
    queryKey: ['cities', addrForm.province_id], staleTime: 300_000,
    queryFn: () => api.get<ApiResponse<any>>(`/api/v1/cities?province_id=${addrForm.province_id}`),
    enabled: !!addrForm.province_id,
  });
  const provinces: Opt[] = useMemo(() => (provincesQ.data?.data?.data ?? provincesQ.data?.data ?? []).map((p: any) => ({ id: Number(p.id ?? p.nid), name: p.name })), [provincesQ.data]);
  const addrCities: Opt[] = useMemo(() => (citiesQ.data?.data?.data ?? citiesQ.data?.data ?? []).map((c: any) => ({ id: Number(c.id ?? c.nid), name: c.name })), [citiesQ.data]);

  const openAddrForm = (addr: ClinicAddress | null) => {
    setEditingClinicAddr(addr);
    const lat = addr?.map?.latitude  ? parseFloat(addr.map.latitude)  : null;
    const lng = addr?.map?.longitude ? parseFloat(addr.map.longitude) : null;
    setAddrForm(addr ? {
      name: addr.name ?? '', address: addr.address ?? '', telephone: addr.telephone ?? '',
      province_id: addr.province ? Number(addr.province.id) : null,
      city_id:     addr.city     ? Number(addr.city.id)     : null,
      latitude: lat, longitude: lng,
    } : emptyAddrForm);
    setAddrMapFlyTarget(lat && lng ? [lat, lng] : null);
    setAddrFormOpen(true);
  };

  const saveAddrMutation = useMutation({
    mutationFn: (payload: typeof addrForm) => {
      if (editingClinicAddr) {
        return api.patch<ApiResponse<ClinicAddress>>(`/api/v1/clinic/${uuid}/address/${editingClinicAddr.uuid}`, payload);
      }
      return api.post<ApiResponse<ClinicAddress>>(`/api/v1/clinic/${uuid}/address`, payload);
    },
    onSuccess: () => {
      toast.success(editingClinicAddr ? 'آدرس ویرایش شد' : 'آدرس اضافه شد');
      qc.invalidateQueries({ queryKey: ['clinic-addresses', uuid] });
      setAddrFormOpen(false);
      setEditingClinicAddr(null);
      setAddrForm(emptyAddrForm);
    },
    onError: () => toast.error('خطا در ذخیره آدرس'),
  });

  const deleteAddrMutation = useMutation({
    mutationFn: (addrUuid: string) => api.delete<ApiResponse<null>>(`/api/v1/clinic/${uuid}/address/${addrUuid}`),
    onSuccess: () => {
      toast.success('آدرس حذف شد');
      qc.invalidateQueries({ queryKey: ['clinic-addresses', uuid] });
      setDeleteAddrConfirm(null);
    },
    onError: (err: any) => toast.error(err?.message ?? 'خطا در حذف آدرس'),
  });

  const clinic: ClinicDetail | undefined = useMemo(() => {
    const raw = data?.data;
    return (raw as any)?.data ?? raw;
  }, [data]);

  const doctorList: ClinicDoctorItem[] = useMemo(() => {
    const raw = doctorsQ.data?.data;
    return (raw as any)?.data ?? raw ?? [];
  }, [doctorsQ.data]);

  const invitationList: ClinicInvitation[] = invitationsQ.data?.data ?? [];

  const openEdit = () => setEditOpen(true);

  const toggleMut = useMutation({
    mutationFn: () => api.patch<ApiResponse<any>>(`/api/v1/admin/clinic/${uuid}/status`, {}),
    onSuccess: () => {
      toast.success('وضعیت کلینیک تغییر کرد');
      qc.invalidateQueries({ queryKey: ['clinic-detail', uuid] });
      qc.invalidateQueries({ queryKey: ['admin-clinics'] });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const deleteMut = useMutation({
    mutationFn: () => api.delete<ApiResponse<null>>(`/api/v1/admin/clinic/${uuid}`),
    onSuccess: () => { toast.success('کلینیک حذف شد'); navigate('/admin/clinics'); },
    onError:   (e: Error) => toast.error(e.message),
  });

  const resendInvMut = useMutation({
    mutationFn: (invUuid: string) => api.post<ApiResponse<any>>(`/api/v1/admin/clinic/invitation/${invUuid}/resend`, {}),
    onSuccess: () => { toast.success('پیامک مجدداً ارسال شد'); qc.invalidateQueries({ queryKey: ['clinic-invitations', uuid] }); },
    onError:   (e: Error) => toast.error(e.message),
  });

  const changeInvStatusMut = useMutation({
    mutationFn: ({ invUuid, status }: { invUuid: string; status: string }) =>
      api.patch<ApiResponse<any>>(`/api/v1/admin/clinic/invitation/${invUuid}/status`, { status }),
    onSuccess: () => { toast.success('وضعیت دعوتنامه تغییر کرد'); qc.invalidateQueries({ queryKey: ['clinic-invitations', uuid] }); },
    onError:   (e: Error) => toast.error(e.message),
  });

  const deleteInvMut = useMutation({
    mutationFn: (invUuid: string) => api.delete<ApiResponse<null>>(`/api/v1/admin/clinic/invitation/${invUuid}`),
    onSuccess: () => { toast.success('دعوتنامه حذف شد'); qc.invalidateQueries({ queryKey: ['clinic-invitations', uuid] }); },
    onError:   (e: Error) => toast.error(e.message),
  });

  const handleLogoUpload = async (file: File) => {
    setLogoUploading(true);
    try {
      const res = await fetch('/file/upload/clinic_pro/clinic/field_clinic_logo', {
        method: 'POST',
        headers: {
          'Content-Disposition': `filename="${file.name}"`,
          'Content-Type': file.type || 'application/octet-stream',
          Authorization: `Bearer ${authToken ?? ''}`,
        },
        body: file,
      });
      const json = await res.json();
      const url  = json?.data?.url;
      if (url) {
        await api.patch(`/api/v1/clinic/${uuid}`, { clinic_logo: url });
        toast.success('لوگو آپلود شد');
        qc.invalidateQueries({ queryKey: ['clinic-detail', uuid] });
      }
    } catch (e: any) { toast.error(e.message); }
    finally { setLogoUploading(false); }
  };

  const handleGalleryUpload = async (files: FileList) => {
    setGalleryUploading(true);
    try {
      const uploaded: { url: string }[] = [];
      for (const file of Array.from(files)) {
        const res = await fetch('/file/upload/clinic_pro/clinic/field_image_clinic', {
          method: 'POST',
          headers: {
            'Content-Disposition': `filename="${file.name}"`,
            'Content-Type': file.type || 'application/octet-stream',
            Authorization: `Bearer ${authToken ?? ''}`,
          },
          body: file,
        });
        const json = await res.json();
        if (json?.data?.url) uploaded.push({ url: json.data.url });
      }
      if (uploaded.length > 0 && clinic) {
        const existing = (clinic.images_clinic ?? []).filter(img => img?.url);
        await api.patch(`/api/v1/clinic/${uuid}`, { image_clinic: [...existing, ...uploaded] });
        toast.success(`${uploaded.length} تصویر اضافه شد`);
        qc.invalidateQueries({ queryKey: ['clinic-detail', uuid] });
      }
    } catch (e: any) { toast.error(e.message); }
    finally { setGalleryUploading(false); }
  };

  const hue = HUES_LIST[(uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
  const logo = clinic?.logo ?? clinic?.clinic_logo;
  // شهر و استان از آدرس DoctorAddress (منبع واقعی) نه از Clinic entity
  const primaryAddr  = clinicAddresses[0] ?? null;
  const cityName     = primaryAddr?.city?.name     ?? clinic?.city?.[0]?.name;
  const provinceName = primaryAddr?.province?.name ?? clinic?.state?.[0]?.name;
  const lat  = primaryAddr?.map?.latitude  ? parseFloat(primaryAddr.map.latitude)
             : clinic?.map?.latitude  ? parseFloat(clinic.map.latitude)  : null;
  const lng  = primaryAddr?.map?.longitude ? parseFloat(primaryAddr.map.longitude)
             : clinic?.map?.longitude ? parseFloat(clinic.map.longitude) : null;

  if (isLoading) {
    return (
      <div className="fade-in">
        <div className="card card-pad">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="skeleton" style={{ height: 20, borderRadius: 6, marginBottom: 12 }} />
          ))}
        </div>
      </div>
    );
  }

  if (!clinic) {
    return (
      <div className="fade-in">
        <div className="card card-pad">
          <div className="empty">
            <BuildingOffice2Icon style={{ width: 36, height: 36 }} />
            <p>کلینیک یافت نشد</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in">

      {/* ── Header ── */}
      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button className="btn ghost sm" onClick={() => navigate('/admin/clinics')} style={{ padding: '6px 10px' }}>
            <ArrowRightIcon style={{ width: 16, height: 16 }} />
          </button>
          <div>
            <h1 className="section-title">{clinic.name}</h1>
            <div className="muted">جزئیات کلینیک</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn ghost sm" onClick={() => openEdit()}>
            <PencilIcon style={{ width: 15, height: 15 }} /> ویرایش
          </button>
          {primaryRole === 'admin' && (
            <>
              <button className={`btn sm ${clinic.is_active ? 'soft' : 'primary'}`}
                onClick={() => toggleMut.mutate()} disabled={toggleMut.isPending}>
                {clinic.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
              </button>
              <button className="btn danger sm" onClick={() => setDeleteOpen(true)}>
                <TrashIcon style={{ width: 15, height: 15 }} /> حذف
              </button>
            </>
          )}
        </div>
      </div>

      {/* ── Main grid ── */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 'var(--gap)', alignItems: 'start' }}>

        {/* Left column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>

          {/* Identity card */}
          <div className="card card-pad">
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
              <div style={{ position: 'relative', flexShrink: 0 }}>
                {logo ? (
                  <img src={logo} alt="" className="avatar lg" style={{ objectFit: 'cover' }} />
                ) : (
                  <div className="avatar lg"
                    style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))`, fontSize: 28, fontWeight: 700 }}>
                    {clinic.name?.[0] ?? '?'}
                  </div>
                )}
                <button onClick={() => logoInputRef.current?.click()} disabled={logoUploading}
                  style={{
                    position: 'absolute', insetInlineEnd: -6, bottom: -6, width: 24, height: 24,
                    borderRadius: '50%', background: 'var(--primary)', border: '2px solid var(--surface)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
                  }}>
                  <CameraIcon style={{ width: 12, height: 12, color: '#fff' }} />
                </button>
                <input ref={logoInputRef} type="file" accept="image/*" style={{ display: 'none' }}
                  onChange={e => e.target.files?.[0] && handleLogoUpload(e.target.files[0])} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 20, fontWeight: 700 }}>{clinic.name}</div>
                <div style={{ display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
                  <span className={`badge ${clinic.is_active ? 'green' : 'gray'}`}>
                    <span className="bdot" />{clinic.is_active ? 'فعال' : 'غیرفعال'}
                  </span>
                  {clinic['24_7'] && <span className="badge amber"><span className="bdot" />۲۴ ساعته</span>}
                </div>
              </div>
            </div>

            {/* Info rows */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <InfoTile icon={<PhoneIcon style={{ width: 15, height: 15 }} />}
                label="تلفن" value={clinic.phone ? <span dir="ltr">{clinic.phone}</span> : '—'} />
              <InfoTile icon={<MapPinIcon style={{ width: 15, height: 15 }} />}
                label="شهر"
                value={[cityName, provinceName].filter(Boolean).join('، ') || '—'} />
              <InfoTile icon={<BuildingOffice2Icon style={{ width: 15, height: 15 }} />}
                label="آدرس" value={primaryAddr?.address ?? clinic.location ?? '—'} fullWidth />
            </div>

            {clinic.caption && (
              <div style={{ marginTop: 16, padding: '12px 14px', background: 'var(--surface-2, var(--bg))', borderRadius: 8 }}>
                <div className="muted" style={{ fontSize: 12, marginBottom: 4 }}>توضیحات</div>
                <p style={{ fontSize: 13, lineHeight: 1.7 }}>{clinic.caption}</p>
              </div>
            )}
          </div>

          {/* Doctors + Invitations card */}
          <div className="card card-pad">
            {/* Card header */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <div className="seg">
                <button className={doctorsTab === 'doctors' ? 'active' : ''} onClick={() => setDoctorsTab('doctors')}>
                  پزشکان ({formatNumber(doctorList.length)})
                </button>
                <button className={doctorsTab === 'invitations' ? 'active' : ''} onClick={() => setDoctorsTab('invitations')}>
                  دعوتنامه‌ها ({formatNumber(invitationList.length)})
                </button>
              </div>
              <button className="btn primary sm" onClick={() => setInviteOpen(true)}>
                <EnvelopeIcon style={{ width: 14, height: 14 }} /> دعوت پزشک
              </button>
            </div>

            {/* Doctors tab */}
            {doctorsTab === 'doctors' && (
              doctorList.length === 0 ? (
                <div className="empty" style={{ padding: '20px 0' }}>
                  <p className="muted">هیچ پزشکی به این کلینیک متصل نیست</p>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {doctorList.map(doc => {
                    const dHue = HUES_LIST[(doc.uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
                    const img  = doc.img?.[0]?.url;
                    return (
                      <div key={doc.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 8, background: 'var(--surface-2, var(--bg))' }}>
                        {img
                          ? <img src={img} alt="" className="avatar sm" style={{ objectFit: 'cover', flexShrink: 0 }} />
                          : <div className="avatar sm" style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${dHue}), oklch(0.48 0.16 ${dHue}))`, flexShrink: 0 }}>{doc.name?.[0] ?? '?'}</div>
                        }
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontWeight: 600, fontSize: 13 }}>{doc.name}</div>
                          {doc.specialties?.length > 0 && (
                            <div className="muted" style={{ fontSize: 11 }}>{doc.specialties.map(s => s.name).join('، ')}</div>
                          )}
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                          <span className={`badge ${doc.active ? 'green' : 'gray'}`} style={{ fontSize: 11 }}>
                            <span className="bdot" />{doc.active ? 'فعال' : 'غیرفعال'}
                          </span>
                          <button
                            className="mini-btn"
                            title="مشاهده پروفایل"
                            onClick={() => navigate(`/admin/doctors/${doc.uuid}`)}
                          >
                            <EyeIcon style={{ width: 14, height: 14 }} />
                          </button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )
            )}

            {/* Invitations tab */}
            {doctorsTab === 'invitations' && (
              invitationList.length === 0 ? (
                <div className="empty" style={{ padding: '20px 0' }}>
                  <EnvelopeIcon style={{ width: 30, height: 30 }} />
                  <p className="muted">هیچ دعوتنامه‌ای ارسال نشده</p>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {invitationList.map(inv => {
                    const statusInfo = INV_STATUS_MAP[inv.status] ?? { label: inv.status, cls: 'gray' };
                    const isExpired  = !inv.token_used && inv.status === 'pending' && Date.now() / 1000 > inv.expires_at;
                    return (
                      <div key={inv.uuid} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 8, background: 'var(--surface-2, var(--bg))' }}>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontWeight: 600, fontSize: 13 }}>{inv.invited_name ?? inv.mobile}</div>
                          <div style={{ display: 'flex', gap: 6, marginTop: 3, flexWrap: 'wrap', alignItems: 'center' }}>
                            <span className="muted" style={{ fontSize: 11, direction: 'ltr' }}>{inv.mobile}</span>
                            {inv.invited_specialty && (
                              <span className="muted" style={{ fontSize: 11 }}>{inv.invited_specialty}</span>
                            )}
                            {inv.doctor && (
                              <button
                                className="badge blue"
                                style={{ fontSize: 11, cursor: 'pointer', border: 'none', background: 'none', padding: 0 }}
                                onClick={() => navigate(`/admin/doctors/${inv.doctor!.uuid}`)}
                              >
                                <span className="bdot" />{inv.doctor.name}
                              </button>
                            )}
                          </div>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                          <span className={`badge ${isExpired ? 'gray' : statusInfo.cls}`} style={{ fontSize: 11 }}>
                            <span className="bdot" />{isExpired ? 'منقضی' : statusInfo.label}
                          </span>
                          <div style={{ display: 'flex', gap: 4 }}>
                            {inv.status === 'pending' && (
                              <button
                                className="mini-btn"
                                title="ارسال مجدد"
                                disabled={resendInvMut.isPending}
                                onClick={() => resendInvMut.mutate(inv.uuid)}
                              >
                                <ArrowPathIcon style={{ width: 13, height: 13 }} />
                              </button>
                            )}
                            {inv.status !== 'removed' && inv.status !== 'accepted' && (
                              <button
                                className="mini-btn"
                                title="تعلیق"
                                disabled={changeInvStatusMut.isPending}
                                onClick={() => changeInvStatusMut.mutate({ invUuid: inv.uuid, status: inv.status === 'suspended' ? 'pending' : 'suspended' })}
                              >
                                <NoSymbolIcon style={{ width: 13, height: 13 }} />
                              </button>
                            )}
                            <button
                              className="mini-btn danger"
                              title="حذف"
                              disabled={deleteInvMut.isPending}
                              onClick={() => deleteInvMut.mutate(inv.uuid)}
                            >
                              <TrashIcon style={{ width: 13, height: 13 }} />
                            </button>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )
            )}
          </div>

          {/* Gallery */}
          <div className="card card-pad">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <b style={{ fontSize: 14 }}>گالری تصاویر</b>
              <button className="btn ghost sm" onClick={() => galleryInputRef.current?.click()} disabled={galleryUploading}>
                <PlusIcon style={{ width: 14, height: 14 }} />
                {galleryUploading ? 'در حال آپلود...' : 'افزودن تصویر'}
              </button>
              <input ref={galleryInputRef} type="file" accept="image/*" multiple style={{ display: 'none' }}
                onChange={e => e.target.files?.length && handleGalleryUpload(e.target.files)} />
            </div>
            {(clinic.images_clinic ?? []).length === 0 ? (
              <div className="empty" style={{ padding: '20px 0' }}>
                <p className="muted">هیچ تصویری در گالری وجود ندارد</p>
              </div>
            ) : (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))', gap: 8 }}>
                {clinic.images_clinic.filter(img => img?.url).map((img, i) => (
                  <div key={i} style={{ borderRadius: 8, overflow: 'hidden', aspectRatio: '1', background: 'var(--surface-2, var(--bg))' }}>
                    <img src={img.url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Map (read-only) */}
          {lat !== null && lng !== null && (
            <div className="card card-pad">
              <b style={{ fontSize: 14, display: 'block', marginBottom: 12 }}>موقعیت روی نقشه</b>
              <div style={{ borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border)', height: 260 }}>
                <MapContainer center={[lat, lng]} zoom={13} style={{ height: '100%', width: '100%' }}>
                  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution='&copy; <a href="https://openstreetmap.org">OpenStreetMap</a>' />
                  <Marker position={[lat, lng]} />
                </MapContainer>
              </div>
            </div>
          )}
        </div>

        {/* Right sidebar */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>

          {/* Specialties + Insurances + Services combined */}
          <div className="card card-pad">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <b style={{ fontSize: 13 }}>تخصص‌ها، بیمه و خدمات</b>
              <button className="btn ghost sm" style={{ fontSize: 12 }} onClick={() => openEdit()}>
                <PencilIcon style={{ width: 13, height: 13 }} /> ویرایش
              </button>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
                  تخصص‌ها ({formatNumber((clinic.specialties ?? []).length)})
                </div>
                {(clinic.specialties ?? []).length === 0
                  ? <p className="muted" style={{ fontSize: 12 }}>ثبت نشده</p>
                  : <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {clinic.specialties.map(s => (
                        <span key={s.id} className="badge violet"><span className="bdot" />{s.name}</span>
                      ))}
                    </div>
                }
              </div>

              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12 }}>
                <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
                  بیمه‌ها ({formatNumber((clinic.list_bime ?? []).length)})
                </div>
                {(clinic.list_bime ?? []).length === 0
                  ? <p className="muted" style={{ fontSize: 12 }}>ثبت نشده</p>
                  : <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {clinic.list_bime.map(ins => (
                        <span key={ins.id} className="badge blue"><span className="bdot" />{ins.name}</span>
                      ))}
                    </div>
                }
              </div>

              <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12 }}>
                <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
                  خدمات ({formatNumber((clinic.services ?? []).length)})
                </div>
                {(clinic.services ?? []).length === 0
                  ? <p className="muted" style={{ fontSize: 12 }}>ثبت نشده</p>
                  : <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {clinic.services.map(s => (
                        <span key={s.id} className="badge green"><span className="bdot" />{s.name}</span>
                      ))}
                    </div>
                }
              </div>
            </div>
          </div>

          {primaryRole === 'clinic' && (
            <NotificationMobileCard target="clinic" />
          )}

          {/* Clinic Addresses Section */}
          {(isOwner || primaryRole === 'admin') && (
            <div className="card">
              <div className="toolbar" style={{ padding: '12px 16px' }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>
                  آدرس‌های کلینیک ({formatNumber(clinicAddresses.length)})
                </div>
                {(isOwner || primaryRole === 'admin') && clinicAddresses.length === 0 && (
                  <button className="btn primary sm" onClick={() => openAddrForm(null)}>
                    <PlusIcon style={{ width: 14, height: 14 }} />
                    افزودن آدرس
                  </button>
                )}
              </div>

              {clinicAddresses.length === 0 ? (
                <div className="empty" style={{ padding: '24px 16px' }}>
                  <MapPinIcon style={{ width: 28, height: 28 }} />
                  <p className="muted" style={{ marginTop: 8, fontSize: 13 }}>
                    هنوز آدرسی ثبت نشده — دکتران نمی‌توانند این کلینیک را به عنوان لوکیشن انتخاب کنند
                  </p>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                  {clinicAddresses.map((addr, idx) => (
                    <div key={addr.uuid} style={{
                      display: 'flex', alignItems: 'flex-start', gap: 10,
                      padding: '12px 16px',
                      borderTop: idx === 0 ? '1px solid var(--border)' : undefined,
                      borderBottom: '1px solid var(--border)',
                    }}>
                      <MapPinIcon style={{ width: 18, height: 18, color: 'var(--primary)', flexShrink: 0, marginTop: 2 }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        {addr.name && <div style={{ fontWeight: 600, fontSize: 13 }}>{addr.name}</div>}
                        {addr.address && <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{addr.address}</div>}
                        {addr.telephone && (
                          <div style={{ fontSize: 12, marginTop: 2, color: 'var(--text-2)' }}>
                            <PhoneIcon style={{ width: 12, height: 12, display: 'inline', marginLeft: 4 }} />
                            {addr.telephone}
                          </div>
                        )}
                      </div>
                      {(isOwner || primaryRole === 'admin') && (
                        <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
                          <button className="btn ghost sm" style={{ padding: '4px 8px' }} onClick={() => openAddrForm(addr)}>
                            <PencilIcon style={{ width: 14, height: 14 }} />
                          </button>
                          <button className="btn ghost sm" style={{ padding: '4px 8px', color: 'var(--error)' }}
                            onClick={() => setDeleteAddrConfirm(addr)}>
                            <TrashIcon style={{ width: 14, height: 14 }} />
                          </button>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

        </div>
      </div>

      {/* Clinic Address Form Modal */}
      {addrFormOpen && createPortal(
        <div className="overlay" onClick={() => setAddrFormOpen(false)}>
          <div className="modal" style={{ maxWidth: 460 }} onClick={e => e.stopPropagation()}>
            <div className="modal-head">
              <b>{editingClinicAddr ? 'ویرایش آدرس' : 'افزودن آدرس جدید'}</b>
              <button className="mini-btn" onClick={() => setAddrFormOpen(false)}>
                <XMarkIcon style={{ width: 16, height: 16 }} />
              </button>
            </div>
            <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>نام شعبه / عنوان</label>
                <input className="input" placeholder="مثال: شعبه مرکزی"
                  value={addrForm.name}
                  onChange={e => setAddrForm(f => ({ ...f, name: e.target.value }))} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>استان</label>
                  <SearchableSelectField
                    options={provinces}
                    value={addrForm.province_id}
                    placeholder="انتخاب استان"
                    onChange={val => setAddrForm(f => ({ ...f, province_id: val, city_id: null }))}
                  />
                </div>
                <div>
                  <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>شهر</label>
                  <SearchableSelectField
                    options={addrCities}
                    value={addrForm.city_id}
                    placeholder={addrForm.province_id ? 'انتخاب شهر' : 'ابتدا استان'}
                    disabled={!addrForm.province_id}
                    onChange={(val, label) => {
                      setAddrForm(f => ({ ...f, city_id: val }));
                      if (label) geocodeCity(label).then(c => { if (c) setAddrMapFlyTarget(c); });
                    }}
                  />
                </div>
              </div>
              <div>
                <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>آدرس کامل</label>
                <textarea className="input" rows={2} style={{ resize: 'none' }} placeholder="خیابان، کوچه، پلاک..."
                  value={addrForm.address}
                  onChange={e => setAddrForm(f => ({ ...f, address: e.target.value }))} />
              </div>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                  <label style={{ fontSize: 13, fontWeight: 600 }}>موقعیت روی نقشه</label>
                  {addrForm.latitude && addrForm.longitude && (
                    <span className="muted" style={{ fontSize: 11, direction: 'ltr' }}>
                      {addrForm.latitude.toFixed(4)}, {addrForm.longitude.toFixed(4)}
                    </span>
                  )}
                </div>
                <p className="muted" style={{ fontSize: 12, marginBottom: 6 }}>برای تعیین موقعیت دقیق روی نقشه کلیک کنید</p>
                <MapPicker
                  lat={addrForm.latitude} lng={addrForm.longitude}
                  flyTarget={addrMapFlyTarget}
                  initialCenter={addrForm.latitude && addrForm.longitude ? [addrForm.latitude, addrForm.longitude] : null}
                  onChange={(lt, ln) => setAddrForm(f => ({ ...f, latitude: lt, longitude: ln }))}
                />
                {addrForm.latitude && addrForm.longitude && (
                  <button type="button" className="btn ghost sm" style={{ marginTop: 6, fontSize: 12 }}
                    onClick={() => setAddrForm(f => ({ ...f, latitude: null, longitude: null }))}>
                    <XMarkIcon style={{ width: 13, height: 13 }} /> حذف موقعیت
                  </button>
                )}
              </div>
              <div>
                <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>تلفن</label>
                <input className="input" dir="ltr" placeholder="مثال: 02112345678"
                  value={addrForm.telephone}
                  onChange={e => setAddrForm(f => ({ ...f, telephone: e.target.value }))} />
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn ghost sm" onClick={() => setAddrFormOpen(false)}>انصراف</button>
              <button className="btn primary sm" disabled={saveAddrMutation.isPending}
                onClick={() => saveAddrMutation.mutate(addrForm)}>
                {saveAddrMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
              </button>
            </div>
          </div>
        </div>,
        document.body,
      )}

      {/* Delete Address Confirm */}
      <ConfirmDialog
        open={deleteAddrConfirm !== null}
        title="حذف آدرس"
        message={`آیا از حذف آدرس "${deleteAddrConfirm?.name ?? deleteAddrConfirm?.address ?? ''}" اطمینان دارید؟`}
        confirmLabel="حذف"
        onConfirm={() => deleteAddrConfirm && deleteAddrMutation.mutate(deleteAddrConfirm.uuid)}
        onCancel={() => setDeleteAddrConfirm(null)}
      />

      {/* Edit modal — portal to escape Leaflet transform context */}
      {editOpen && createPortal(
        <EditModal
          clinic={clinic}
          onClose={() => setEditOpen(false)}
          onSaved={() => { qc.invalidateQueries({ queryKey: ['clinic-detail', uuid] }); qc.invalidateQueries({ queryKey: ['admin-clinics'] }); }}
        />,
        document.body,
      )}

      {/* Invite doctor modal */}
      {inviteOpen && uuid && createPortal(
        <InviteDoctorModal
          clinicUuid={uuid}
          onClose={() => setInviteOpen(false)}
          onInvited={() => { qc.invalidateQueries({ queryKey: ['clinic-invitations', uuid] }); setDoctorsTab('invitations'); }}
        />,
        document.body,
      )}

      {/* Delete confirm */}
      <ConfirmDialog
        open={deleteOpen}
        title="حذف کلینیک"
        message={`آیا از حذف کلینیک "${clinic.name}" اطمینان دارید؟ این عمل قابل بازگشت نیست.`}
        confirmLabel="حذف"
        danger
        loading={deleteMut.isPending}
        onConfirm={() => deleteMut.mutate()}
        onCancel={() => setDeleteOpen(false)}
      />
    </div>
  );
}

// ── Info tile ──────────────────────────────────────────────────────────────

function InfoTile({ icon, label, value, fullWidth }: {
  icon?: React.ReactNode; label: string; value: React.ReactNode; fullWidth?: boolean;
}) {
  return (
    <div style={{
      gridColumn: fullWidth ? '1 / -1' : undefined,
      padding: '10px 12px', borderRadius: 8,
      background: 'var(--surface-2, var(--bg))',
      border: '1px solid var(--border)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 3, color: 'var(--text-3)' }}>
        {icon}
        <span style={{ fontSize: 11 }}>{label}</span>
      </div>
      <div style={{ fontSize: 13, fontWeight: 600 }}>{value}</div>
    </div>
  );
}