'use client';

import Link from 'next/link';
import { Banknote, Briefcase, ExternalLink, MapPin } from 'lucide-react';
import type { JobContextMetadata } from '@/lib/jobContextMessage';
import { JOB_STATUS_LABELS, type JobStatus } from '@ehandyhire/shared';
import { cn, formatCurrency } from '@/lib/utils';

export function JobContextCard({
  context,
  role,
  className,
}: {
  context: JobContextMetadata;
  role: 'customer' | 'worker';
  className?: string;
}) {
  const jobHref = `/${role}/jobs/${context.jobId}`;
  const statusLabel =
    JOB_STATUS_LABELS[context.status as JobStatus] ?? context.status.replace(/_/g, ' ');
  const budgetLabel =
    context.budget != null && context.budget > 0
      ? formatCurrency(context.budget)
      : 'Negotiable';

  return (
    <div
      className={cn(
        'mx-auto w-full max-w-md border border-[#e2ddd2] bg-white p-4 shadow-sm',
        className
      )}
    >
      <div className="flex items-start gap-3">
        <div className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
          <Briefcase className="h-5 w-5" />
        </div>
        <div className="min-w-0 flex-1">
          <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--home-amber)]">
            Job reference
          </p>
          <h3 className="mt-0.5 text-sm font-bold leading-snug text-[var(--home-ink)]">
            {context.title}
          </h3>
          {context.category ? (
            <p className="mt-1 text-xs font-medium text-muted">{context.category}</p>
          ) : null}
        </div>
      </div>

      <div className="mt-3 space-y-1.5 text-sm text-slate-600">
        <p className="flex items-center gap-2">
          <MapPin className="h-4 w-4 shrink-0 text-slate-400" />
          <span className="truncate">{context.location}</span>
        </p>
        <p className="flex items-center gap-2">
          <Banknote className="h-4 w-4 shrink-0 text-slate-400" />
          <span className="font-semibold text-[var(--home-amber)]">{budgetLabel}</span>
        </p>
        <p className="text-xs text-muted">Status: {statusLabel}</p>
      </div>

      <Link
        href={jobHref}
        className="mt-3 inline-flex items-center gap-1.5 text-xs font-semibold text-[var(--home-ink)] hover:text-[var(--home-amber)]"
      >
        View job details
        <ExternalLink className="h-3.5 w-3.5" />
      </Link>
    </div>
  );
}