clinicpro/assets/admin/components/PatientCaseBanner.tsx

import { formatDate } from '../lib/utils';
import BackButton from './ui/BackButton';
import {
  ArrowLeftD, FilesServicePhone, FilesServiceCalendar,
  FilesServiceNotification, FilesServiceMessage,
} from './icons/FilesServiceIcons';

interface Tag { uuid: string; name: string; color: string }

/** پرونده > {name} breadcrumb, ported from tauri BreadcrumbHeader. */
export function Breadcrumb({ name, backTo }: { name: string; backTo: string }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-2)', fontSize: 12, marginBottom: 14 }}>
      <BackButton fallback={backTo} />
      <ArrowLeftD />
      <span>پرونده</span>
      <ArrowLeftD />
      <span style={{ color: 'var(--text)' }}>{name}</span>
    </div>
  );
}

function TagDots({ tags }: { tags?: Tag[] }) {
  if (!tags || tags.length === 0) return <span style={{ fontSize: 13, color: 'var(--text-3)' }}>—</span>;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
      {tags.slice(0, 4).map((t, i) => (
        <span key={t.uuid} title={t.name} style={{ width: 16, height: 16, borderRadius: '50%', background: t.color, border: '2px solid var(--surface)', marginInlineStart: i === 0 ? 0 : -6 }} />
      ))}
    </span>
  );
}

const InfoLine = ({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    {icon}
    <span style={{ fontSize: 12, color: 'var(--text)' }}>{label}</span>
    <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }} dir="ltr">{value}</span>
  </div>
);

/**
 * The patient case-file banner — ported pixel-for-pixel from tauri
 * FileServicesHeader (name + status chip, file number, tags, contact/date,
 * next appointment, یادداشت button).
 */
export default function PatientCaseBanner({ name, recordNumber, mobile, createdAt, tags, nextAppointment, hasDebt, onAddNote }: {
  name: string;
  recordNumber?: string | null;
  mobile?: string | null;
  createdAt?: number;
  tags?: Tag[];
  nextAppointment?: number | null;
  hasDebt?: boolean;
  onAddNote: () => void;
}) {
  const complete = !hasDebt;
  return (
    <div
      className="bg-[var(--surface)] border border-[var(--border)]"
      style={{ borderRadius: 16, padding: '14px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, marginBottom: 16, minHeight: 140, flexWrap: 'wrap' }}
    >
      {/* right — name + tags */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <span style={{ fontWeight: 700, fontSize: 20, color: 'var(--text)' }}>{name}</span>
          <span style={{
            height: 29, minWidth: 95, borderRadius: 8, padding: '0 10px', fontSize: 13, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            background: complete ? 'var(--success-bg)' : 'rgba(255,192,81,0.15)', color: complete ? 'var(--success)' : 'var(--warning)',
          }}>{complete ? 'تکمیل شده' : 'تکمیل نشده'}</span>
        </div>
        <span style={{ fontSize: 16, color: 'var(--text)' }}>شماره پرونده: {recordNumber || '—'}</span>
        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 16 }}>
          <span style={{ fontSize: 16, color: 'var(--text-2)' }}>برچسب ها:</span>
          <TagDots tags={tags} />
        </div>
      </div>

      {/* middle — contact + file date */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 28 }}>
        <InfoLine icon={<FilesServicePhone />} label="شماره تماس:" value={mobile || '—'} />
        <InfoLine icon={<FilesServiceCalendar />} label="تاریخ تشکیل پرونده:" value={createdAt ? formatDate(createdAt) : '—'} />
      </div>

      {/* left — next appointment + note */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 28 }}>
        <InfoLine icon={<FilesServiceNotification />} label="نوبت بعدی:" value={nextAppointment ? formatDate(nextAppointment) : '—'} />
        <button
          type="button" onClick={onAddNote}
          style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--accent)', color: 'var(--on-primary)', border: 'none', borderRadius: 10, padding: '0 18px', height: 36, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}
        >
          <FilesServiceMessage /> یادداشت
        </button>
      </div>
    </div>
  );
}