import React from 'react';
import { useAppointmentSegments } from '../hooks/useResourceBooking';
import { formatNumber } from '../lib/utils';

const timeOf = (ts: number) =>
  new Date(ts * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });

/**
 * بخش‌های ثبت‌شدهٔ نوبت — همان چیزی که لحظهٔ رزرو تثبیت شد، نه الگوی امروزِ خدمت.
 *
 * بخشی که بیمار در آن حاضر نیست کم‌رنگ می‌آید: اپراتوری که «۹۰ دقیقه» را روی نوبت
 * می‌بیند باید بفهمد بیمار همهٔ آن مدت روی صندلی نیست.
 *
 * نوبت اسلاتی بخشی ندارد و کارت اصلاً رندر نمی‌شود — جدول خالی یعنی چیزی خراب است.
 */
export default function AppointmentSegmentsCard({ appointmentUuid }: { appointmentUuid: string }) {
  const { segments, loading } = useAppointmentSegments(appointmentUuid);

  if (loading || segments.length === 0) return null;

  const total = segments.reduce((sum, s) => sum + s.duration_minutes, 0);

  return (
    <div className="bg-[var(--surface)] rounded-2xl border border-[var(--border)] shadow-sm p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="font-semibold text-[var(--text)]">بخش‌های نوبت</h3>
        <span className="text-sm text-[var(--text-2)]">{formatNumber(total)} دقیقه</span>
      </div>

      <div style={{ display: 'flex', gap: 2, marginBottom: 14 }}>
        {segments.map((s) => (
          <div
            key={s.sequence}
            title={`${s.name} — ${formatNumber(s.duration_minutes)} دقیقه`}
            style={{
              flex: s.duration_minutes,
              height: 10,
              borderRadius: 'var(--r-pill)',
              background: 'var(--primary)',
              opacity: s.patient_present ? 1 : 0.35,
            }}
          />
        ))}
      </div>

      <ol style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
        {segments.map((s) => (
          <li key={s.sequence} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <span style={{ color: 'var(--text-3)', minWidth: 18 }}>{formatNumber(s.sequence)}</span>
            <span style={{ flex: 1 }}>{s.name}</span>
            <span dir="ltr" style={{ color: 'var(--text-2)' }}>
              {timeOf(s.starts_at)} – {timeOf(s.ends_at)}
            </span>
            {!s.patient_present && (
              <span className="badge" style={{ fontSize: 11 }}>
                بدون حضور بیمار
              </span>
            )}
          </li>
        ))}
      </ol>
    </div>
  );
}