import { useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { UserGroupIcon } from '@heroicons/react/24/outline';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import { useAuthStore } from '../stores/authStore';
import SettingsLayout from '../components/layout/SettingsLayout';
import { ScheduleSection } from '../components/schedule/ScheduleSection';
import FreeVisitPrice from '../components/FreeVisitPrice';
import type { ClinicDoctorItem } from '../components/ClinicDoctorsManager';

/**
 * تنظیمات نوبت‌دهی همه پزشکان کلینیک — یک تب به ازای هر پزشک.
 *
 * هر تب دقیقاً همان ScheduleSection پنل پزشک مستقل را رندر می‌کند؛ تنها تفاوت،
 * امکان جابه‌جایی بین پزشکان است.
 */
function ClinicAppointmentSettingsContent() {
  const { dbUuid, context, availableContexts } = useAuthStore();
  const [activeUuid, setActiveUuid] = useState<string | null>(null);

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

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

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

  const selected = activeUuid ?? doctorList[0]?.uuid ?? null;
  const selectedDoctor = doctorList.find(d => d.uuid === selected) ?? null;

  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 className="card-title-row">
        <div>
          <h1 className="section-title">مدیریت نوبت دهی</h1>
          <div className="muted">
            {selectedDoctor ? `تنظیمات نوبت‌دهی ${selectedDoctor.name}` : 'تنظیمات نوبت‌دهی پزشکان کلینیک'}
          </div>
        </div>
      </div>

      {doctorsQ.isLoading ? (
        <div className="card card-pad"><p className="muted">در حال بارگذاری پزشکان...</p></div>
      ) : doctorList.length === 0 ? (
        <div className="card card-pad">
          <div className="empty" style={{ padding: '20px 0' }}>
            <UserGroupIcon style={{ width: 30, height: 30 }} />
            <p className="muted">هیچ پزشکی به این کلینیک متصل نیست</p>
            <Link className="btn primary sm" to="/admin/settings/clinic-doctors">مدیریت پزشکان کلینیک</Link>
          </div>
        </div>
      ) : (
        <>
          <div className="card card-pad" style={{ paddingBottom: 12 }}>
            <div className="seg" style={{ overflowX: 'auto', flexWrap: 'nowrap' }}>
              {doctorList.map(doc => (
                <button
                  key={doc.uuid}
                  className={selected === doc.uuid ? 'active' : ''}
                  style={{ whiteSpace: 'nowrap' }}
                  onClick={() => setActiveUuid(doc.uuid)}
                >
                  {doc.name}
                </button>
              ))}
            </div>
          </div>

          {/* key اجباری است: بدون آن state ویرایشِ برنامه بین پزشکان نشت می‌کند */}
          {selected && (
            <div key={selected}>
              {/* نام پزشک انتخاب‌شده، تا هنگام اسکرول هم مشخص باشد تنظیمات مربوط به کیست */}
              <div
                className="card card-pad"
                style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--gap)' }}
              >
                <UserGroupIcon style={{ width: 18, height: 18, color: 'var(--primary)' }} />
                <span style={{ fontWeight: 600 }}>{selectedDoctor?.name}</span>
              </div>
              <FreeVisitPrice doctorUuid={selected} />
              <ScheduleSection doctorUuid={selected} clinicUuid={clinicUuid} />
            </div>
          )}
        </>
      )}
    </div>
  );
}

export default function ClinicAppointmentSettingsPage() {
  return (
    <SettingsLayout active="appointment">
      <ClinicAppointmentSettingsContent />
    </SettingsLayout>
  );
}