clinicpro/assets/admin/pages/AppointmentDetailPage.tsx

import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import { toast } from 'sonner';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import type { Appointment, AppointmentStatus } from '../types';
import { formatDate, formatDateTime, toDate } from '../lib/utils';
import PageHeader from '../components/ui/PageHeader';
import StatusBadge from '../components/ui/StatusBadge';
import ConfirmDialog from '../components/ui/ConfirmDialog';
import SearchableSelect from '../components/ui/SearchableSelect';

const ALL_STATUSES: { value: AppointmentStatus; label: string }[] = [
  { value: 'pending',             label: 'رزرو شده' },
  { value: 'confirmed',           label: 'تأیید شده' },
  { value: 'completed',           label: 'تکمیل شده' },
  { value: 'cancelled_by_doctor', label: 'لغو پزشک' },
  { value: 'cancelled_by_user',   label: 'لغو بیمار' },
  { value: 'no_show',             label: 'غیبت' },
  { value: 'expired',             label: 'منقضی' },
];

const timeOf = (ts?: number | null) => {
  const d = toDate(ts ?? null);
  return d
    ? new Intl.DateTimeFormat('fa-IR-u-nu-latn', { hour: '2-digit', minute: '2-digit', hour12: false }).format(d)
    : '—';
};

function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="cp-info-row">
      <span className="cp-info-label text-sm">{label}</span>
      <span className="cp-info-value">{value ?? '—'}</span>
    </div>
  );
}

export default function AppointmentDetailPage() {
  const { uuid } = useParams<{ uuid: string }>();
  const navigate = useNavigate();
  const qc = useQueryClient();
  const [cancelOpen, setCancelOpen] = useState(false);
  const [newStatus, setNewStatus] = useState('');

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

  const statusMutation = useMutation({
    mutationFn: (status: string) =>
      api.patch<ApiResponse<null>>(`/api/v1/appointment/${uuid}/status`, { status }),
    onSuccess: () => {
      toast.success('وضعیت نوبت بروزرسانی شد');
      qc.invalidateQueries({ queryKey: ['appointment', uuid] });
    },
    onError: (err: Error) => toast.error(err.message),
  });

  const cancelMutation = useMutation({
    mutationFn: () => api.patch<ApiResponse<null>>(`/api/v1/appointment/${uuid}/cancel`, {}),
    onSuccess: () => {
      toast.success('نوبت لغو شد');
      setCancelOpen(false);
      qc.invalidateQueries({ queryKey: ['appointment', uuid] });
    },
    onError: (err: Error) => toast.error(err.message),
  });

  // پاسخ single تودرتو است: { data: { data: {...} } }
  const appt: any = (data?.data as any)?.data ?? data?.data;

  return (
    <div>
      <PageHeader
        title="جزئیات نوبت"
        breadcrumbs={[
          { label: 'داشبورد', to: '/admin/dashboard' },
          { label: 'نوبت‌ها', to: '/admin/appointments' },
          { label: 'جزئیات' },
        ]}
        action={
          <button onClick={() => navigate('/admin/appointments')}
            className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
            <ArrowRightIcon className="w-4 h-4" />
            بازگشت
          </button>
        }
      />

      {isLoading ? (
        <div className="cp-card p-6 space-y-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="h-8 rounded-lg skeleton" />
          ))}
        </div>
      ) : appt ? (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
            <h3 className="font-semibold text-gray-800 mb-4">اطلاعات بیمار</h3>
            <InfoRow label="نام بیمار" value={appt.patient_name} />
            <InfoRow label="موبایل" value={<span dir="ltr">{appt.patient_mobile}</span>} />
            <InfoRow label="پزشک" value={appt.doctor?.name ? `دکتر ${appt.doctor.name}` : null} />
            <InfoRow label="تاریخ نوبت" value={formatDate(appt.slot_start)} />
            <InfoRow label="ساعت شروع" value={timeOf(appt.slot_start)} />
            <InfoRow label="ساعت پایان" value={timeOf(appt.slot_end)} />
            {appt.patient_reason && <InfoRow label="علت مراجعه" value={appt.patient_reason} />}
            {appt.note && <InfoRow label="توضیحات" value={appt.note} />}
            <InfoRow label="تاریخ ثبت" value={formatDateTime(appt.created_at)} />
          </div>

          <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
            <h3 className="font-semibold text-gray-800 mb-4">وضعیت و اقدامات</h3>
            <div className="mb-4">
              <p className="text-sm text-gray-500 mb-2">وضعیت فعلی:</p>
              <StatusBadge type="appointment" value={appt.status} />
            </div>

            <div className="mt-6">
              <label className="cp-label mb-2">تغییر وضعیت:</label>
              <div className="flex gap-2">
                <div style={{ flex: 1 }}>
                  <SearchableSelect
                    options={ALL_STATUSES.map(s => ({ value: s.value, label: s.label }))}
                    value={newStatus || null}
                    onChange={(v) => setNewStatus(v ? String(v) : '')}
                    placeholder="انتخاب وضعیت..."
                    isClearable
                  />
                </div>
                <button
                  onClick={() => newStatus && statusMutation.mutate(newStatus)}
                  disabled={!newStatus || statusMutation.isPending}
                  className="btn primary sm"
                >
                  اعمال
                </button>
              </div>
            </div>

            <div className="mt-4 pt-4 border-t border-gray-100">
              <button
                onClick={() => setCancelOpen(true)}
                className="w-full py-2 border border-red-300 text-red-600 text-sm rounded-[10px] hover:bg-red-50 transition-colors"
              >
                لغو نوبت
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="bg-white rounded-2xl border border-gray-100 p-16 text-center text-gray-400">
          نوبتی یافت نشد
        </div>
      )}

      <ConfirmDialog
        open={cancelOpen}
        title="لغو نوبت"
        message="آیا از لغو این نوبت اطمینان دارید؟"
        confirmLabel="لغو نوبت"
        danger
        loading={cancelMutation.isPending}
        onConfirm={() => cancelMutation.mutate()}
        onCancel={() => setCancelOpen(false)}
      />
    </div>
  );
}