"use client";
import { useState } from "react";
import Image from "next/image";
import { BadgeCheck, Clock, User } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import RequestManpowerModal from "@/components/RequestManpowerModal";
import { useTranslations } from "next-intl";

const availabilityConfig = {
  available: { labelKey: "available" as const, className: "bg-green-100 text-green-700" },
  busy: { labelKey: null, staticLabel: "On Assignment", className: "bg-yellow-100 text-yellow-700" },
  unavailable: { labelKey: "unavailable" as const, className: "bg-red-100 text-red-600" },
};

export interface DisplayInspector {
  inspector_image_url: string | null;
  inspector_full_name: string;
  specialization: string;
  years_of_experience: number;
  availability: "available" | "busy" | "unavailable";
  certifications: string[];
  bio: string | null;
}

interface Props {
  inspector: DisplayInspector;
}

const InspectorCard = ({ inspector }: Props) => {
  const t = useTranslations("inspector");
  const [open, setOpen] = useState(false);
  const availability = availabilityConfig[inspector.availability] ?? availabilityConfig.unavailable;
  const availabilityLabel = availability.labelKey ? t(availability.labelKey) : (availability as { staticLabel: string }).staticLabel;

  return (
    <>
      <div className="flex flex-col bg-card border border-border rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
        {/* Avatar */}
        {/* <div className="relative w-full aspect-[4/3] bg-muted"> */}
        {/* {inspector.inspector_image_url ? (
            <Image
              src={inspector.inspector_image_url}
              alt={inspector.inspector_full_name}
              fill
              className="object-cover"
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center">
              <User className="w-16 h-16 text-muted-foreground/30" />
            </div>
          )} */}
        {/* Availability badge */}

        {/* </div> */}

        <div className="flex flex-col flex-1 p-5 gap-3">
          <div className="flex justify-between items-start gap-2">
            <div>
              <h3 className="font-bold text-base leading-snug">{inspector.inspector_full_name}</h3>
              <p className="text-sm text-accent font-medium mt-0.5">{inspector.specialization}</p>
            </div>
            <span
              className={cn(
                "text-xs font-semibold px-2.5 py-1 rounded-full",
                availability.className
              )}
            >
              {availabilityLabel}
            </span>
          </div>

          {/* Experience */}
          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
            <Clock className="w-3.5 h-3.5 shrink-0" />
            <span>{inspector.years_of_experience} {t("years")} {t("experience").toLowerCase()}</span>
          </div>

          {/* Certifications */}
          {inspector.certifications.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mt-1">
              {inspector.certifications.slice(0, 4).map((cert) => (
                <span
                  key={cert}
                  className="inline-flex items-center gap-1 text-xs bg-accent/10 text-accent px-2 py-0.5 rounded-full font-medium"
                >
                  <BadgeCheck className="w-3 h-3 shrink-0" />
                  {cert}
                </span>
              ))}
              {inspector.certifications.length > 4 && (
                <span className="text-xs text-muted-foreground px-1 py-0.5">
                  +{inspector.certifications.length - 4} more
                </span>
              )}
            </div>
          )}

          {inspector.bio && (
            <p className="text-xs text-muted-foreground line-clamp-2 mt-1">{inspector.bio}</p>
          )}

          <div className="mt-auto pt-3">
            <Button
              className="w-full bg-accent text-accent-foreground hover:bg-accent/90"
              onClick={() => setOpen(true)}
            >
              {t("requestInspector")}
            </Button>
          </div>
        </div>
      </div>

      <RequestManpowerModal open={open} onOpenChange={setOpen} />
    </>
  );
};

export default InspectorCard;