import type { CSSProperties, ReactNode } from 'react';
import { formatDate, formatTime } from '../lib/utils';
import {
  FilesServiceSuccess, FilesServiceMore, CalendarD, ClockP, UserD, StatusGlobe,
} from './icons/FilesServiceIcons';
import AppointmentStatusDropdown from './ui/AppointmentStatusDropdown';

export interface AppointmentCardData {
  uuid: string;
  starts_at: number;
  status: string;
  version: number;
  doctor_name?: string | null;
  service_name?: string | null;
}

/**
 * label/value row inside the turn card — mirrors tauri ServiceInfoRow
 * (separatedValues variant): icon+label on one side, value (optionally chip) on
 * the other.
 */
function InfoRow({ icon, label, value, chip = false, valueStyle }: {
  icon: ReactNode; label: string; value: ReactNode; chip?: boolean; valueStyle?: CSSProperties;
}) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {icon}
        <span style={{ fontSize: 12, color: 'var(--text-2)' }}>{label}:</span>
      </div>
      <span
        className={chip ? 'dark:bg-[var(--surface-2)]' : ''}
        style={{
          fontSize: 12, color: 'var(--text)', textAlign: 'left',
          ...(chip ? { background: 'var(--surface-2)', borderRadius: 8, padding: '2px 8px', color: 'var(--text)' } : {}),
          ...valueStyle,
        }}
      >
        {value}
      </span>
    </div>
  );
}

/**
 * A patient «نوبت» card — ported pixel-for-pixel from tauri
 * files/services/TurnsCard. The status uses the admin's live
 * AppointmentStatusDropdown (backed by PATCH /appointment/{uuid}/status)
 * instead of the tauri mock.
 */
export default function AppointmentTurnCard({ appointment, queryKey }: {
  appointment: AppointmentCardData;
  queryKey: unknown[];
}) {
  const title = appointment.service_name || 'نوبت';
  return (
    <div
      className="bg-[var(--surface)] border border-[var(--border)]"
      style={{ width: 277, maxWidth: '100%', minHeight: 249, borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', gap: 10, boxShadow: '0 1px 6px rgba(15,23,42,0.06)' }}
    >
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <FilesServiceSuccess />
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 3, minWidth: 0 }}>
            <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 180 }}>{title}</span>
          </div>
        </div>
        <FilesServiceMore style={{ color: 'var(--text-3)', flexShrink: 0 }} />
      </div>

      <div style={{ borderTop: '1px solid var(--border)' }} />

      {/* Middle: date & time chips */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <InfoRow icon={<CalendarD />} label="تاریخ" chip value={formatDate(appointment.starts_at)} />
        <InfoRow icon={<ClockP />} label="ساعت" chip value={formatTime(appointment.starts_at)} />
      </div>

      <div style={{ borderTop: '1px solid var(--border)' }} />

      {/* Bottom: personnel & status */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <InfoRow icon={<UserD size={19} />} label="پرسنل" value={appointment.doctor_name || '—'} valueStyle={{ fontWeight: 500 }} />
        <InfoRow
          icon={<StatusGlobe size={19} />}
          label="وضعیت"
          value={<AppointmentStatusDropdown uuid={appointment.uuid} currentStatus={appointment.status} version={appointment.version} queryKey={queryKey} />}
        />
      </div>
    </div>
  );
}