"use client";

import Link from "next/link";
import { Phone, Mail, Star } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useDataProvider } from "@/lib/demo/data-provider-context";

import type { ContractorResponse } from "@/lib/api/contractors";

interface ContractorCardProps {
  contractor: ContractorResponse;
  onToggleFavorite: (id: number) => void;
}

export function ContractorCard({ contractor, onToggleFavorite }: ContractorCardProps) {
  const { basePath } = useDataProvider();
  return (
    <div className="group rounded-2xl border border-border bg-card p-5 transition-all duration-200 hover:shadow-[var(--shadow-warm-md)] hover:-translate-y-0.5">
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-start gap-3 min-w-0 flex-1">
          <div className="size-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0 text-primary font-bold text-sm">
            {contractor.name[0]?.toUpperCase()}
          </div>
          <div className="min-w-0">
            <Link
              href={`${basePath}/contractors/${contractor.id}`}
              className="font-heading font-bold text-base leading-tight hover:text-primary transition-colors line-clamp-1"
            >
              {contractor.name}
            </Link>
            {contractor.company && (
              <p className="text-sm text-muted-foreground mt-0.5 truncate">{contractor.company}</p>
            )}
          </div>
        </div>
        <Button
          variant="ghost"
          size="icon"
          className="size-8 shrink-0 -mr-1 -mt-1"
          aria-label={contractor.is_favorite ? "Remove from favorites" : "Add to favorites"}
          onClick={(e) => {
            e.preventDefault();
            onToggleFavorite(contractor.id);
          }}
        >
          <Star
            aria-hidden="true"
            className={
              contractor.is_favorite
                ? "size-4 fill-amber-400 text-amber-400"
                : "size-4 text-muted-foreground hover:text-amber-400 transition-colors"
            }
          />
        </Button>
      </div>

      {contractor.specialties.length > 0 && (
        <div className="flex flex-wrap gap-1.5 mb-4">
          {contractor.specialties.map((s) => (
            <Badge key={s.id} variant="secondary" className="rounded-lg text-xs">
              {s.icon && <span className="mr-1">{s.icon}</span>}
              {s.name}
            </Badge>
          ))}
        </div>
      )}

      <div className="border-t border-border/60 pt-3 mt-3 flex items-center gap-4">
        {contractor.phone && (
          <a
            href={`tel:${contractor.phone}`}
            aria-label={`Call ${contractor.name}`}
            onClick={(e) => e.stopPropagation()}
            className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-primary transition-colors"
          >
            <Phone className="size-3" aria-hidden="true" />
            Call
          </a>
        )}
        {contractor.email && (
          <a
            href={`mailto:${contractor.email}`}
            aria-label={`Email ${contractor.name}`}
            onClick={(e) => e.stopPropagation()}
            className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-primary transition-colors"
          >
            <Mail className="size-3" aria-hidden="true" />
            Email
          </a>
        )}
      </div>
    </div>
  );
}
