'use client';

import { Button } from '@/components/ui/shared/Button';
import type { PastTreatment } from '@/types/treatment';

interface TreatmentPreviewCardProps {
  draft: PastTreatment | null;
  disabled?: boolean;
  onPreview: () => void;
}

export function TreatmentPreviewCard({ draft, disabled, onPreview }: TreatmentPreviewCardProps) {
  return (
    <div className="surface-card p-4 space-y-3">
      <div className="flex items-center justify-between gap-2">
        <h3 className="text-sm font-semibold text-text-primary">Treatment preview</h3>
        <Button type="button" variant="primary" disabled={disabled || !draft} onClick={onPreview}>
          Preview current draft
        </Button>
      </div>
      {!draft ? (
        <p className="text-sm text-text-muted">Select an appointment to preview its draft.</p>
      ) : (
        <div className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40 space-y-2">
          <div className="flex items-start justify-between gap-2">
            <p className="text-sm font-medium text-text-primary">{draft.title}</p>
            <span className="text-xs text-text-muted tabular-nums shrink-0 capitalize">{draft.status}</span>
          </div>
          <p className="text-xs text-text-secondary">
            {draft.cases.length} case{draft.cases.length === 1 ? '' : 's'} ·{' '}
            {draft.cases.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0)} attachment
            {draft.cases.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0) === 1 ? '' : 's'}
          </p>
          <div className="space-y-2">
            {draft.cases.slice(0, 2).map((c, idx) => (
              <div
                key={c.id}
                className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2 text-xs text-text-secondary"
              >
                <span className="text-text-primary font-medium capitalize">
                  Case {idx + 1}: {c.treatmentType}
                </span>
                {c.teeth.length > 0 && (
                  <span className="ml-1 tabular-nums">· Teeth {[...c.teeth].sort().join(', ')}</span>
                )}
              </div>
            ))}
            {draft.cases.length > 2 && (
              <p className="text-xs text-text-muted">+ {draft.cases.length - 2} more case(s)</p>
            )}
          </div>
        </div>
      )}
    </div>
  );
}