'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { MapPin, Send, Star } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { SaveWorkerButton } from '@/components/workers/SaveWorkerButton';
import {
  WorkerProfileBadges,
  WorkerSkillsBadges,
  getPrimaryWorkerCategory,
  WorkerAvatar,
} from '@/components/workers/WorkerProfileDisplay';
import { buildCreateJobUrl } from '@/lib/createJob';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';
import { resolveWorkerAreaLabel } from '@/lib/geocode';
import { useRegion } from '@/contexts/RegionContext';
import { formatWorkerRate } from '@/lib/rateType';

export interface SavedWorkerListItem {
  id: string;
  headline?: string | null;
  hourlyRate?: number | string | null;
  rateType?: string | null;
  averageRating: number;
  totalReviews: number;
  isVerified: boolean;
  isStudent?: boolean;
  isAvailable: boolean;
  otherSkills?: string | null;
  hasHiredBefore?: boolean;
  user: { firstName: string; lastName: string; avatarUrl?: string | null };
  skills?: { category: { id: string; name: string; slug?: string } }[];
  serviceAreas?: { area: string }[];
}

interface SavedWorkerCardProps {
  worker: SavedWorkerListItem;
  onRemoved?: () => void;
}

export function SavedWorkerCard({ worker, onRemoved }: SavedWorkerCardProps) {
  const router = useRouter();
  const { slug: regionSlug } = useRegion();
  const workerName = `${worker.user.firstName} ${worker.user.lastName}`;
  const primaryCategory = getPrimaryWorkerCategory(worker.skills);
  const areaLabel = resolveWorkerAreaLabel(worker.serviceAreas, regionSlug);

  const postJob = () => {
    router.push(buildCreateJobUrl(primaryCategory?.id));
  };

  const postJobLabel = worker.hasHiredBefore ? 'Hire again' : 'Post a job';

  return (
    <Card className="overflow-hidden">
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <WorkerAvatar user={worker.user} size="sm" />
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <Link
                href={`/workers/${worker.id}`}
                className="font-bold text-slate-900 hover:text-primary truncate"
              >
                {workerName}
              </Link>
              <WorkerProfileBadges
                isVerified={worker.isVerified}
                isStudent={worker.isStudent}
              />
            </div>
            {worker.headline && (
              <p className="text-sm text-muted truncate mt-0.5">{worker.headline}</p>
            )}
            <div className="flex items-center gap-3 mt-2 flex-wrap text-sm">
              <span className="flex items-center gap-1 text-slate-600">
                <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
                {worker.averageRating.toFixed(1)} ({worker.totalReviews})
              </span>
              {worker.hourlyRate != null && (
                <span className="font-semibold text-primary">
                  {formatWorkerRate(Number(worker.hourlyRate), worker.rateType)}
                </span>
              )}
              {worker.serviceAreas?.length ? (
                <span className="flex items-center gap-1 text-muted">
                  <MapPin className="h-3.5 w-3.5" />
                  {areaLabel}
                </span>
              ) : null}
            </div>
            <WorkerSkillsBadges
              skills={worker.skills}
              otherSkills={worker.otherSkills}
              limit={3}
              showOverflow
              className="mt-2"
              badgeClassName="text-xs"
            />
          </div>
        </div>
        <div className="flex flex-wrap gap-2 mt-4">
          {JOBS_FEATURE_ENABLED ? (
            <Button
              size="sm"
              className="gap-1.5"
              onClick={postJob}
              disabled={!worker.isAvailable}
            >
              <Send className="h-4 w-4" />
              {worker.isAvailable ? postJobLabel : 'Unavailable'}
            </Button>
          ) : (
            <Link href={`/workers/${worker.id}`}>
              <Button size="sm" className="gap-1.5" disabled={!worker.isAvailable}>
                <Send className="h-4 w-4" />
                {worker.isAvailable ? 'View & message' : 'Unavailable'}
              </Button>
            </Link>
          )}
          <Link href={`/workers/${worker.id}`}>
            <Button size="sm" variant="outline">
              View profile
            </Button>
          </Link>
          <SaveWorkerButton
            workerId={worker.id}
            variant="button"
            className="h-9 px-3 text-sm"
            onChange={(saved) => {
              if (!saved) onRemoved?.();
            }}
          />
        </div>
      </CardContent>
    </Card>
  );
}