import { useEffect, useMemo } from 'react';
import { Link } from 'react-router';
import { PencilIcon } from '@heroicons/react/24/outline';
import { useAuthStore } from '../stores/authStore';
import { usePermissions } from '../hooks/usePermissions';
import SettingsLayout from '../components/layout/SettingsLayout';
import BackButton from '../components/ui/BackButton';
import ClinicDoctorsManager from '../components/ClinicDoctorsManager';

/**
 * ClinicDoctorsPage — the clinic-owner settings tab for managing the clinic's
 * doctors (list, invite, detach) and pending invitations. Renders inside the
 * settings shell instead of jumping to the standalone admin ClinicDetailPage.
 * Clinic-info editing (name, gallery, addresses, specialties) stays on the full
 * detail page, reachable via the "ویرایش اطلاعات کلینیک" link.
 */
function ClinicDoctorsContent() {
  const { dbUuid, context, availableContexts, fetchMe } = useAuthStore();
  // مجوزهای منشی؛ برای owner/کلینیک همیشه true (usePermissions بدون context آزاد است).
  const { can } = usePermissions();
  const canCreate = can('clinic_doctors', 'create');
  const canUpdate = can('clinic_doctors', 'update');
  const canDelete = can('clinic_doctors', 'delete');

  useEffect(() => {
    if (!dbUuid) fetchMe();
  }, [dbUuid, fetchMe]);

  // یک کاربر می‌تواند همزمان context پزشک و کلینیک داشته باشد؛ dbUuid فقط context فعال است.
  // این صفحه همیشه باید uuid کلینیک را بفرستد، وگرنه همه اندپوینت‌های کلینیک ۴۰۴ می‌دهند.
  const clinicUuid = useMemo(() => {
    if (context?.type === 'clinic') return dbUuid;
    return availableContexts.find(c => c.type === 'clinic')?.db_uuid ?? null;
  }, [context, dbUuid, availableContexts]);

  if (!clinicUuid) {
    return (
      <div style={{ padding: 40, textAlign: 'center' }}>
        <p style={{ color: 'var(--text-3)', fontSize: 14 }}>
          {dbUuid ? 'کلینیکی برای این حساب کاربری یافت نشد' : 'در حال بارگذاری اطلاعات کلینیک...'}
        </p>
      </div>
    );
  }

  return (
    <div className="fade-in" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
      <div>
        <BackButton fallback="/admin/settings-menu" />
      </div>
      <div className="card-title-row">
        <div>
          <h1 className="section-title">پزشکان کلینیک</h1>
          <div className="muted">مدیریت پزشکان و دعوت‌نامه‌های کلینیک</div>
        </div>
        <Link className="btn ghost sm" to={`/admin/clinics/${clinicUuid}`}>
          <PencilIcon style={{ width: 15, height: 15 }} /> ویرایش اطلاعات کلینیک
        </Link>
      </div>

      <ClinicDoctorsManager
        clinicUuid={clinicUuid}
        canCreate={canCreate}
        canUpdate={canUpdate}
        canDelete={canDelete}
      />
    </div>
  );
}

export default function ClinicDoctorsPage() {
  return (
    <SettingsLayout active="clinic-doctors">
      <ClinicDoctorsContent />
    </SettingsLayout>
  );
}