'use client';

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

interface Workstation {
  id: string;
  code: string;
  name: string;
  area: string;
}

/** Home-screen badge-in: pick a workstation to start an operator session. */
export function BadgeInPanel({ workstations }: { workstations: Workstation[] }) {
  const ts = useTranslations('session');
  const router = useRouter();
  const startSession = trpc.operatorSession.start.useMutation({
    onSuccess: () => router.refresh(),
  });

  return (
    <section className="flex flex-col gap-4">
      <div className="rounded-2xl border-2 border-dashed border-border bg-card p-5 text-center">
        <MapPin className="mx-auto mb-2 h-7 w-7 text-primary" />
        <h2 className="text-base font-semibold">{ts('badgeInTitle')}</h2>
        <p className="mt-1 text-sm text-muted-foreground">{ts('badgeInPrompt')}</p>
      </div>

      {workstations.length === 0 ? (
        <p className="text-sm text-muted-foreground">{ts('noStations')}</p>
      ) : (
        <div className="flex flex-col gap-3">
          {workstations.map((ws) => (
            <button
              key={ws.id}
              data-testid="badge-in-station"
              onClick={() => startSession.mutate({ workstationId: ws.id })}
              disabled={startSession.isPending}
              className="flex w-full items-center gap-3 rounded-xl border border-border bg-card px-5 py-4 text-left transition-colors hover:bg-accent active:scale-[0.98] disabled:opacity-50"
            >
              <MapPin className="h-5 w-5 shrink-0 text-primary" />
              <span>
                <span className="block text-base font-medium">
                  {ws.code} — {ws.name}
                </span>
                <span className="block text-xs text-muted-foreground">{ws.area}</span>
              </span>
            </button>
          ))}
        </div>
      )}

      {startSession.isPending && (
        <p className="text-center text-sm text-muted-foreground">{ts('starting')}</p>
      )}
    </section>
  );
}