'use client';

import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { MapPin, LogOut } from 'lucide-react';
import { trpc } from '@/lib/trpc/client';

/** Header chip showing the operator's current workstation, with a badge-out button. */
export function SessionBar({ code, name, area }: { code: string; name: string; area: string }) {
  const ts = useTranslations('session');
  const router = useRouter();
  const endSession = trpc.operatorSession.end.useMutation({
    onSuccess: () => router.refresh(),
  });

  return (
    <div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card px-4 py-3">
      <div className="flex items-center gap-2 min-w-0">
        <MapPin className="h-5 w-5 shrink-0 text-primary" />
        <div className="min-w-0">
          <p className="text-xs text-muted-foreground">{ts('atStation')}</p>
          <p className="truncate text-sm font-medium">
            {code} — {name} <span className="text-xs text-muted-foreground">· {area}</span>
          </p>
        </div>
      </div>
      <button
        onClick={() => endSession.mutate()}
        disabled={endSession.isPending}
        className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
      >
        <LogOut className="h-4 w-4" />
        {ts('badgeOut')}
      </button>
    </div>
  );
}