'use client';

import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { formatDate } from '@/lib/utils';
import { QUOTATION_STATUS_LABELS, type QuotationStatus } from '@ehandyhire/shared';

export interface WorkerQuotation {
  id: string;
  amount: number | string;
  status: QuotationStatus;
  message?: string | null;
  createdAt: string;
  job: {
    id: string;
    title: string;
    status: string;
    category?: { name: string };
  };
}

function statusVariant(status: QuotationStatus) {
  switch (status) {
    case 'ACCEPTED':
      return 'success' as const;
    case 'REJECTED':
      return 'destructive' as const;
    case 'WITHDRAWN':
      return 'secondary' as const;
    default:
      return 'warning' as const;
  }
}

export function QuotationApplicationCard({ quotation }: { quotation: WorkerQuotation }) {
  const amount = Number(quotation.amount);

  return (
    <Link href={`/worker/jobs/${quotation.job.id}`} className="block">
      <Card className="transition-shadow hover:shadow-md">
        <CardContent className="flex items-center gap-4 p-4 sm:p-5">
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-2">
              <h3 className="truncate font-semibold text-slate-900">{quotation.job.title}</h3>
              <Badge variant={statusVariant(quotation.status)}>
                {QUOTATION_STATUS_LABELS[quotation.status]}
              </Badge>
            </div>
            <p className="mt-1 text-sm text-muted">
              {quotation.job.category?.name ? `${quotation.job.category.name} · ` : ''}
              Your offer: PHP {amount.toLocaleString()} · {formatDate(quotation.createdAt)}
            </p>
            {quotation.message ? (
              <p className="mt-2 line-clamp-2 text-sm text-slate-600">{quotation.message}</p>
            ) : null}
          </div>
          <ChevronRight className="h-5 w-5 shrink-0 text-slate-300" />
        </CardContent>
      </Card>
    </Link>
  );
}