import { UserCircleIcon, PhoneIcon } from '@heroicons/react/24/outline';
import type { Appointment } from '../../types';
import AppointmentStatusDropdown, { STATUS_META } from '../ui/AppointmentStatusDropdown';
import AppointmentActionsMenu from '../AppointmentActions';

/**
 * نمای جدولی (نمایش جدولی) — بازسازیِ جدول نوبت‌های طرح tauri (`List.jsx`):
 * ستون‌های ردیف/نام بیمار/شماره تماس/[پزشک]/شروع/پایان/سرویس/پرسنل/وضعیت/عملیات.
 */
const th: React.CSSProperties = { padding: '10px 14px', textAlign: 'right', fontWeight: 600, color: 'var(--text-2)', whiteSpace: 'nowrap', fontSize: 12.5 };
const td: React.CSSProperties = { padding: '10px 14px', textAlign: 'right', color: 'var(--text)', verticalAlign: 'middle', fontSize: 13 };

export default function TurnsTable({
  items, loading, queryKey, showDoctor, canManage = true, canCancel = true,
}: {
  items: Appointment[];
  loading: boolean;
  queryKey: unknown[];
  showDoctor: boolean;
  /** مجوز تغییر وضعیت (منشی)؛ پیش‌فرض true برای owner/پزشک. */
  canManage?: boolean;
  /** مجوز لغو نوبت (منشی)؛ پیش‌فرض true. */
  canCancel?: boolean;
}) {
  if (loading) return <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>در حال بارگذاری...</div>;
  if (!items.length) return <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>نوبتی برای این روز ثبت نشده است</div>;

  return (
    <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
            <th style={th}>ردیف</th>
            <th style={th}>نام بیمار</th>
            <th style={th}>شماره تماس</th>
            {showDoctor && <th style={th}>پزشک</th>}
            <th style={th}>شروع</th>
            <th style={th}>پایان</th>
            <th style={th}>سرویس</th>
            <th style={th}>پرسنل</th>
            <th style={th}>وضعیت</th>
            <th style={th}>عملیات</th>
          </tr>
        </thead>
        <tbody>
          {items.map((a, i) => (
            <tr key={a.uuid} style={{ borderBottom: '1px solid var(--border)' }}>
              <td style={td}>{(i + 1).toLocaleString('fa-IR')}</td>
              <td style={td}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <UserCircleIcon style={{ width: 18, height: 18, color: 'var(--text-3)' }} />
                  {a.patient_name || '—'}
                </div>
              </td>
              <td style={{ ...td, direction: 'ltr', textAlign: 'right' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'flex-end' }}>
                  <PhoneIcon style={{ width: 14, height: 14, color: 'var(--text-3)' }} />
                  {a.patient_mobile}
                </div>
              </td>
              {showDoctor && <td style={td}>{a.doctor_name}</td>}
              <td style={{ ...td, fontWeight: 600 }}>{a.appointment_time}</td>
              <td style={td}>{a.end_time}</td>
              <td style={td}>{a.service_item?.name || '—'}</td>
              <td style={td}>{a.staff?.full_name || '—'}</td>
              <td style={td}>
                {canManage ? (
                  <AppointmentStatusDropdown uuid={a.uuid} currentStatus={a.status} version={a.version} queryKey={queryKey} />
                ) : (
                  <span className="badge" style={{ color: STATUS_META[a.status]?.color ?? 'var(--text-2)' }}>
                    {STATUS_META[a.status]?.label ?? a.status}
                  </span>
                )}
              </td>
              <td style={td}>
                {(canManage || canCancel)
                  ? <AppointmentActionsMenu appointment={a} queryKey={queryKey} />
                  : <span style={{ color: 'var(--text-3)' }}>—</span>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}