import { useQuery } from '@tanstack/react-query';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import { useAuthStore } from '../stores/authStore';
import SettingsLayout from '../components/layout/SettingsLayout';
import FreeVisitPrice from '../components/FreeVisitPrice';
import { WeeklyScheduleTab, type AddressData } from './DoctorDetailPage';

/**
 * مدیریت نوبت دهی — the doctor's weekly booking schedule as a standalone
 * settings section. Reuses the WeeklyScheduleTab editor (also shown in the
 * doctor profile) with the current doctor's uuid and addresses.
 */
export default function AppointmentSettingsPage() {
  const doctorUuid = useAuthStore((s) => s.doctorUuid);
  const dbUuid     = useAuthStore((s) => s.dbUuid);
  const uuid = doctorUuid ?? dbUuid ?? undefined;

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

  const doctor    = (data?.data as any)?.data ?? data?.data;
  const addresses: AddressData[] = doctor?.address ?? [];

  return (
    <SettingsLayout active="appointment">
      <div className="fade-in">
        <h1 className="section-title" style={{ marginBottom: 16 }}>مدیریت نوبت دهی</h1>

        <FreeVisitPrice />

        {!uuid ? (
          <div className="card" style={{ padding: 32, textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>
            این بخش فقط برای پزشک در دسترس است.
          </div>
        ) : isLoading ? (
          <div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
        ) : (
          <WeeklyScheduleTab doctorUuid={uuid} addresses={addresses} />
        )}
      </div>
    </SettingsLayout>
  );
}