import React from 'react';
import { PlusIcon } from '@heroicons/react/24/outline';
import { formatNumber } from '../../lib/utils';
import StatusBadge from '../ui/StatusBadge';
import type { Appointment, ClinicResource } from '../../types';

function hhmm(ts: number): string {
  const d = new Date(ts * 1000);
  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
}

/**
 * نمای روزِ یک منبع.
 *
 * عمداً تایم‌لاین اسلاتی نیست: منبع برنامهٔ هفتگیِ اسلات‌شده ندارد، تقویمش از مدتِ
 * سرویس‌ها و اشغالِ واقعی ساخته می‌شود. نشان دادن شبکهٔ اسلات برای منبع یعنی وعدهٔ
 * زمان‌هایی که موتور رزرو اصلاً نمی‌شناسد.
 *
 * پس فقط دو چیز: آنچه امروز روی این منبع رزرو شده، و یک راه برای افزودن نوبتِ سرویسی.
 */
export default function ResourceDayPanel({
  resource, appointments, loading, canCreate, onBook, onView,
}: {
  resource: ClinicResource;
  appointments: Appointment[];
  loading: boolean;
  canCreate: boolean;
  onBook: () => void;
  onView: (appointment: Appointment) => void;
}) {
  const rows = [...appointments].sort((a, b) => a.slot_start - b.slot_start);

  return (
    <div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
        padding: '8px 12px', marginBottom: 12, borderRadius: 'var(--r-sm)',
        background: 'var(--surface-2)', border: '1px solid var(--border)',
        fontSize: 12.5, color: 'var(--text-2)',
      }}>
        <span>
          نوبت‌دهی این منبع سرویسی است — زمان از مدت سرویس و آزادبودن خودِ منبع می‌آید، نه از اسلات ثابت.
        </span>
        {resource.supervisor && (
          <span style={{ color: 'var(--text-3)', flexShrink: 0 }}>
            زیر نظر {resource.supervisor.name}
          </span>
        )}
      </div>

      {canCreate && (
        <button
          type="button"
          className="btn primary"
          onClick={onBook}
          style={{ marginBottom: 14 }}
        >
          <PlusIcon style={{ width: 16 }} /> افزودن نوبت سرویس
        </button>
      )}

      {loading ? (
        <div className="skeleton" style={{ height: 90, borderRadius: 'var(--r-sm)' }} />
      ) : rows.length === 0 ? (
        <p style={{ fontSize: 13, color: 'var(--text-3)', margin: 0, lineHeight: 2 }}>
          برای «{resource.name}» در این روز نوبتی ثبت نشده است.
        </p>
      ) : (
        <div style={{ display: 'grid', gap: 8 }}>
          {rows.map((a) => (
            <button
              key={a.uuid}
              type="button"
              onClick={() => onView(a)}
              style={{
                display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'right',
                padding: '10px 12px', borderRadius: 'var(--r-sm)', cursor: 'pointer',
                border: '1px solid var(--border)', background: 'var(--surface)', fontFamily: 'inherit',
              }}
            >
              <span dir="ltr" style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', flexShrink: 0 }}>
                {hhmm(a.slot_start)} – {hhmm(a.slot_end)}
              </span>
              <span style={{ flex: 1, minWidth: 0, fontSize: 13, color: 'var(--text-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {a.patient_name || '—'}
                {a.service_item?.name ? ` · ${a.service_item.name}` : ''}
              </span>
              <StatusBadge type="appointment" value={a.status} />
            </button>
          ))}
        </div>
      )}

      {rows.length > 0 && (
        <p className="field-hint">{formatNumber(rows.length)} نوبت روی این منبع در این روز</p>
      )}
    </div>
  );
}