import { useState, useMemo, useEffect } from 'react';
import { useNavigate } from 'react-router';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  TrashIcon, EnvelopeIcon, ArrowPathIcon, NoSymbolIcon, EyeIcon, ShieldCheckIcon,
} from '@heroicons/react/24/outline';
import { toast } from 'sonner';
import { api } from '../lib/api';
import type { ApiResponse, PaginatedResponse } from '../lib/api';
import { formatNumber } from '../lib/utils';
import ConfirmDialog from './ui/ConfirmDialog';
import InviteDoctorModal from './ui/InviteDoctorModal';
import DoctorPermissionsModal from './ui/DoctorPermissionsModal';
import DataTable, { type Column } from './ui/DataTable';
import Pagination from './ui/Pagination';

const HUES_LIST = [256, 205, 162, 295, 272];
const PAGE_SIZE = 10;

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

export 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;
}

/** یک ردیف از `GET /api/v1/admin/clinic/{uuid}/doctor-permissions`. */
interface DoctorPermissionRow {
  doctor_uuid: string;
  active: boolean;
  permissions: { resources: Record<string, Record<string, boolean>> };
}

/** چند اکشن از کل اکشن‌های تعریف‌شده به این پزشک داده شده. */
function grantedCount(row?: DoctorPermissionRow): { granted: number; total: number } {
  const resources = row?.permissions?.resources ?? {};
  let granted = 0;
  let total   = 0;

  for (const actions of Object.values(resources)) {
    for (const allowed of Object.values(actions)) {
      total += 1;
      if (allowed) granted += 1;
    }
  }

  return { granted, total };
}

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'  },
};

/**
 * ClinicDoctorsManager — self-contained management of a clinic's doctors and
 * pending invitations (list, invite, resend, suspend, delete invitation, detach
 * doctor). Reused by both the admin ClinicDetailPage and the clinic-owner
 * settings tab (ClinicDoctorsPage). `readOnly` hides every mutating control.
 * `canCreate`/`canUpdate`/`canDelete` allow a caller (e.g. a secretary-scoped
 * page) to gate each action group; they default to `true` so unrestricted
 * callers (owner/admin) are unaffected.
 */
export default function ClinicDoctorsManager({
  clinicUuid,
  readOnly = false,
  canCreate = true,
  canUpdate = true,
  canDelete = true,
}: {
  clinicUuid: string;
  readOnly?: boolean;
  canCreate?: boolean;
  canUpdate?: boolean;
  canDelete?: boolean;
}) {
  const navigate = useNavigate();
  const qc = useQueryClient();

  const [doctorsTab, setDoctorsTab] = useState<'doctors' | 'invitations'>('doctors');
  const [inviteOpen, setInviteOpen] = useState(false);
  const [detachDoctorConfirm, setDetachDoctorConfirm] = useState<ClinicDoctorItem | null>(null);
  const [permissionsFor, setPermissionsFor] = useState<ClinicDoctorItem | null>(null);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');

  // فیلدِ جستجو محلی می‌ماند و فقط مقدارِ آرام‌شده به کوئری می‌رود؛ وگرنه هر حرف یک
  // درخواست به سرور می‌زند.
  useEffect(() => {
    const t = setTimeout(() => { setDebouncedSearch(search); setPage(1); }, 350);
    return () => clearTimeout(t);
  }, [search]);

  /**
   * صفحه و جستجو به سرور می‌روند.
   *
   * پیش از این هیچ‌کدام فرستاده نمی‌شد و backend سقف پیش‌فرضِ ۱۰ را اعمال می‌کرد
   * (`DoctorRepository::findByClinicWithFilters`)، پس کلینیکِ یازده‌پزشکه بی‌هیچ نشانه‌ای
   * یک پزشک را گم می‌کرد.
   */
  const doctorsQ = useQuery({
    queryKey: ['clinic-doctors', clinicUuid, page, debouncedSearch],
    queryFn:  () => api.get<PaginatedResponse<ClinicDoctorItem>>(
      `/api/v1/clinic/doctor-list/${clinicUuid}?page=${page}&limit=${PAGE_SIZE}`
      + (debouncedSearch ? `&name=${encodeURIComponent(debouncedSearch)}` : ''),
    ),
    enabled:  !!clinicUuid,
  });

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

  /**
   * مجوزهای همهٔ پزشکان کلینیک با **یک** درخواست.
   *
   * اندپوینت تک‌پزشکی از قبل بود ولی برای فهرست یعنی N درخواست؛ نسخهٔ گروهی هم از قبل
   * وجود داشت و فقط مصرف نمی‌شد.
   */
  const permissionsQ = useQuery({
    queryKey: ['clinic-doctor-permissions', clinicUuid],
    queryFn:  () => api.get<ApiResponse<DoctorPermissionRow[]>>(`/api/v1/admin/clinic/${clinicUuid}/doctor-permissions`),
    enabled:  !!clinicUuid && canUpdate,
  });

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

  const doctorTotal = doctorsQ.data?.meta?.totalRecords ?? doctorList.length;

  const permissionByDoctor = useMemo(() => {
    const rows = permissionsQ.data?.data ?? [];
    return new Map((Array.isArray(rows) ? rows : []).map(r => [r.doctor_uuid, r]));
  }, [permissionsQ.data]);

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

  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', clinicUuid] }); },
    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: (_d, v) => {
      toast.success(v.status === 'pending' ? 'دعوتنامه فعال و پیامک مجدداً ارسال شد' : 'دعوتنامه تعلیق شد');
      qc.invalidateQueries({ queryKey: ['clinic-invitations', clinicUuid] });
    },
    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', clinicUuid] }); },
    onError:   (e: Error) => toast.error(e.message),
  });

  /**
   * ستون‌ها دو «فعال بودن» را از هم جدا می‌کنند، چون دو چیز متفاوت‌اند و پیش از این
   * یکی جای هر دو می‌نشست:
   *
   * • «دسترسی در کلینیک» → `ClinicDoctorPermission::active` — کلیدِ خودِ مالک کلینیک،
   *   و خاموش‌بودنش یعنی `can()` همه‌چیز را رد می‌کند.
   * • «نوبت‌دهی آنلاین» → `Doctor::$activeDoctorAppointment && has_schedule` — حالِ
   *   پروفایلِ خودِ پزشک و ربطی به عضویتش ندارد.
   *
   * بجِ قبلی دومی را نشان می‌داد با متنِ «فعال/غیرفعال»، پس پزشکِ سالمِ بدون برنامهٔ
   * هفتگی «غیرفعال» خوانده می‌شد و مالک ممکن بود بی‌دلیل جدایش کند.
   */
  const doctorColumns: Column<ClinicDoctorItem>[] = useMemo(() => [
    {
      key: 'name',
      header: 'پزشک',
      render: (doc) => {
        const dHue = HUES_LIST[(doc.uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
        const img  = doc.img?.[0]?.url;
        return (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
            {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={{ minWidth: 0 }}>
              <div style={{ fontWeight: 600 }}>{doc.name}</div>
              {doc.specialties?.length > 0 && (
                <div className="muted" style={{ fontSize: 11 }}>{doc.specialties.map(s => s.name).join('، ')}</div>
              )}
            </div>
          </div>
        );
      },
    },
    {
      // بج و شمارِ مجوز یک ستون‌اند نه دو: هر دو یک سؤال را جواب می‌دهند («این پزشک
      // چقدر دسترسی دارد؟») و ستونِ کمتر یعنی جدولی که در موبایل هم جا می‌شود.
      key: 'clinic_access',
      header: 'دسترسی در کلینیک',
      render: (doc) => {
        // ردیفِ نبوده یعنی هنوز چیزی تنظیم نشده و پیش‌فرض‌ها برقرارند.
        const row = permissionByDoctor.get(doc.uuid);
        const on  = row?.active ?? true;
        const { granted, total } = grantedCount(row);

        return (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 3 }}>
            <span className={`badge ${on ? 'green' : 'gray'}`} style={{ fontSize: 11 }}>
              <span className="bdot" />{on ? 'فعال' : 'غیرفعال'}
            </span>
            <span className="muted" style={{ fontSize: 11 }}>
              {row ? `${formatNumber(granted)} از ${formatNumber(total)} مجوز` : 'پیش‌فرض'}
            </span>
          </div>
        );
      },
    },
    {
      key: 'online_booking',
      header: 'نوبت‌دهی آنلاین',
      render: (doc) => (
        <span className={`badge ${doc.active ? 'green' : 'gray'}`} style={{ fontSize: 11 }}>
          <span className="bdot" />{doc.active ? 'فعال' : 'غیرفعال'}
        </span>
      ),
    },
  ], [permissionByDoctor]);

  const detachDoctorMut = useMutation({
    mutationFn: (doctorUuid: string) =>
      api.delete<ApiResponse<{ message: string }>>(`/api/v1/admin/clinic/${clinicUuid}/doctor/${doctorUuid}`),
    onSuccess: () => {
      toast.success('پزشک از کلینیک جدا شد');
      qc.invalidateQueries({ queryKey: ['clinic-doctors', clinicUuid] });
      qc.invalidateQueries({ queryKey: ['clinic-detail', clinicUuid] });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  return (
    <>
      <div className="card card-pad">
        {/* Card header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div className="seg">
            {/* شمارنده از meta می‌آید نه از طول آرایه؛ طول آرایه فقط صفحهٔ جاری است. */}
            <button className={doctorsTab === 'doctors' ? 'active' : ''} onClick={() => setDoctorsTab('doctors')}>
              پزشکان ({formatNumber(doctorTotal)})
            </button>
            <button className={doctorsTab === 'invitations' ? 'active' : ''} onClick={() => setDoctorsTab('invitations')}>
              دعوتنامه‌ها ({formatNumber(invitationList.length)})
            </button>
          </div>
          {!readOnly && canCreate && (
            <button className="btn primary sm" onClick={() => setInviteOpen(true)}>
              <EnvelopeIcon style={{ width: 14, height: 14 }} /> دعوت پزشک
            </button>
          )}
        </div>

        {/* Doctors tab */}
        {doctorsTab === 'doctors' && (
          doctorsQ.isError ? (
            <div className="empty" style={{ padding: '20px 0' }}>
              <p className="muted">فهرست پزشکان بارگذاری نشد</p>
              <button className="btn secondary sm" onClick={() => doctorsQ.refetch()}>تلاش دوباره</button>
            </div>
          ) : (
            <>
              <DataTable<ClinicDoctorItem>
                columns={doctorColumns}
                data={doctorList}
                loading={doctorsQ.isLoading}
                searchValue={search}
                onSearchChange={setSearch}
                searchPlaceholder="جستجوی نام پزشک"
                emptyMessage={debouncedSearch ? 'پزشکی با این نام پیدا نشد' : 'هیچ پزشکی به این کلینیک متصل نیست'}
                actions={doc => (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <button
                      className="mini-btn"
                      title="مشاهده پروفایل"
                      aria-label={`مشاهده پروفایل ${doc.name}`}
                      onClick={() => navigate(`/admin/doctors/${doc.uuid}`)}
                    >
                      <EyeIcon style={{ width: 14, height: 14 }} />
                    </button>
                    {!readOnly && canUpdate && (
                      <button
                        className="mini-btn"
                        title="مدیریت دسترسی‌ها"
                        aria-label={`مدیریت دسترسی‌های ${doc.name}`}
                        onClick={() => setPermissionsFor(doc)}
                      >
                        <ShieldCheckIcon style={{ width: 14, height: 14 }} />
                      </button>
                    )}
                    {!readOnly && canDelete && (
                      <button
                        className="mini-btn danger"
                        title="جداسازی از کلینیک"
                        aria-label={`جداسازی ${doc.name} از کلینیک`}
                        onClick={() => setDetachDoctorConfirm(doc)}
                      >
                        <TrashIcon style={{ width: 14, height: 14 }} />
                      </button>
                    )}
                  </div>
                )}
              />
              <Pagination
                page={page}
                total={doctorTotal}
                limit={PAGE_SIZE}
                onPageChange={setPage}
              />
            </>
          )
        )}

        {/* Invitations tab */}
        {doctorsTab === 'invitations' && (
          invitationsQ.isLoading ? (
            <div className="empty" style={{ padding: '20px 0' }}>
              <p className="muted">در حال بارگذاری…</p>
            </div>
          ) : invitationsQ.isError ? (
            <div className="empty" style={{ padding: '20px 0' }}>
              <p className="muted">فهرست دعوتنامه‌ها بارگذاری نشد</p>
              <button className="btn secondary sm" onClick={() => invitationsQ.refetch()}>تلاش دوباره</button>
            </div>
          ) : 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>
                      {!readOnly && (canUpdate || canDelete) && (
                        <div style={{ display: 'flex', gap: 4 }}>
                          {canUpdate && inv.status === 'pending' && (
                            <button
                              className="mini-btn"
                              title="ارسال مجدد"
                              disabled={resendInvMut.isPending}
                              onClick={() => resendInvMut.mutate(inv.uuid)}
                            >
                              <ArrowPathIcon style={{ width: 13, height: 13 }} />
                            </button>
                          )}
                          {canUpdate && inv.status !== 'removed' && inv.status !== 'accepted' && (
                            <button
                              className="mini-btn"
                              title={inv.status === 'suspended' ? 'فعال‌سازی و ارسال مجدد پیامک' : 'تعلیق'}
                              disabled={changeInvStatusMut.isPending}
                              onClick={() => changeInvStatusMut.mutate({ invUuid: inv.uuid, status: inv.status === 'suspended' ? 'pending' : 'suspended' })}
                            >
                              <NoSymbolIcon style={{ width: 13, height: 13 }} />
                            </button>
                          )}
                          {canDelete && (
                            <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>

      {/* Detach Doctor From Clinic Confirm */}
      <ConfirmDialog
        open={detachDoctorConfirm !== null}
        title="جداسازی پزشک از کلینیک"
        message={`آیا پزشک "${detachDoctorConfirm?.name ?? ''}" از این کلینیک جدا شود؟ این کار فقط ارتباط پزشک با این کلینیک را حذف می‌کند.`}
        confirmLabel="جداسازی"
        danger
        loading={detachDoctorMut.isPending}
        onConfirm={() => {
          if (detachDoctorConfirm) detachDoctorMut.mutate(detachDoctorConfirm.uuid);
          setDetachDoctorConfirm(null);
        }}
        onCancel={() => setDetachDoctorConfirm(null)}
      />

      {/* Per-doctor clinic permissions */}
      {permissionsFor && (
        <DoctorPermissionsModal
          clinicUuid={clinicUuid}
          doctorUuid={permissionsFor.uuid}
          doctorName={permissionsFor.name}
          onClose={() => {
            setPermissionsFor(null);
            // ستون «دسترسی در کلینیک» و «مجوزها» باید تغییرِ همین مودال را نشان دهند.
            qc.invalidateQueries({ queryKey: ['clinic-doctor-permissions', clinicUuid] });
          }}
        />
      )}

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