"use client";

import Link from "next/link";
import Image from "next/image";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { Guide } from "@/lib/types";
import { shouldBypassImageOptimization } from "@/lib/api";
import { useLanguage } from "@/lib/i18n";
import { TrustedGuideIcon } from "@/components/guides/trusted-guide-icon";
import { MapPin, Star, Globe, Clock, ArrowRight } from "lucide-react";

interface GuideCardProps {
  guide: Guide;
}

const publicPillBadgeClass =
  "rounded-full border-0 bg-[#f9f4e0] px-3 py-1 text-xs font-semibold text-[#c37707] shadow-none hover:bg-[#f9f4e0] hover:text-[#c37707]";

function getDistrictName(
  district?: { name?: string | null; name_hi?: string | null } | string | null,
  language = "en",
) {
  if (!district) return "";
  if (typeof district === "string") return district;
  return language === "hi"
    ? district.name_hi || district.name || ""
    : district.name || district.name_hi || "";
}
export function GuideCard({ guide }: GuideCardProps) {
  const { localize, language, t } = useLanguage();
  const name = localize(guide, "name");
  const districts =
    language === "hi" ? guide.districts_hi || guide.districts : guide.districts;
  const expertise =
    language === "hi" ? guide.expertise_hi || guide.expertise : guide.expertise;
  const cardDistrict =
    getDistrictName(guide.identity_card_detail?.district, language) ||
    districts[0] ||
    "";
  const reviewsAvgRating = guide.reviewsAvgRating || 0;
  const reviewsCount = guide.reviewsCount || 0;
  const hasRating = reviewsAvgRating > 0;

  return (
    <Card className="premium-card group overflow-hidden border-border/50 bg-card py-0 gap-0 hover:border-[var(--theme-secondary)]/30">
      <CardContent className="p-0">
        <div className="relative aspect-[4/3] image-zoom">
          <Image
            src={guide.photo}
            alt={name}
            fill
            unoptimized={shouldBypassImageOptimization(guide.photo)}
            className="object-cover transition-transform duration-700 group-hover:scale-110"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
          {guide.isTrusted && (
            <div className="absolute top-4 right-4">
              <Badge className="border-0 bg-gradient-to-r from-[var(--theme-secondary)] via-[var(--theme-primary)] to-[var(--theme-accent)] text-white shadow-lg shadow-[var(--theme-secondary)]/25 hover:from-[var(--theme-primary)] hover:via-[var(--theme-secondary)] hover:to-[var(--theme-primary-dark)]">
                <TrustedGuideIcon
                  className="mr-1 h-4 w-4 shrink-0 text-white"
                  solid
                />
                {t("guides.trusted")}
              </Badge>
            </div>
          )}
          {hasRating && (
            <div className="absolute bottom-4 left-4 flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-black/40 backdrop-blur-sm">
              <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
              <span className="text-sm font-medium text-white">
                {reviewsAvgRating.toFixed(1)}
              </span>
              <span className="text-xs font-medium text-white/75">
                ({reviewsCount})
              </span>
            </div>
          )}
        </div>

        <div className="p-5 space-y-4">
          <div>
            <h3 className="flex min-w-0 items-center gap-1.5 text-lg font-semibold text-foreground transition-colors group-hover:text-[var(--theme-primary)]">
              <span className="truncate">{name}</span>
              {guide.isTrusted && (
                <TrustedGuideIcon className="h-5 w-5 shrink-0 drop-shadow-sm" />
              )}
            </h3>
            <div className="flex items-center gap-1.5 text-sm text-muted-foreground mt-1">
              <MapPin className="h-3.5 w-3.5 text-[var(--theme-primary)]" />
              <span className="truncate">{cardDistrict}</span>
            </div>
          </div>

          <div className="flex flex-wrap gap-1.5">
            {expertise.slice(0, 2).map((exp, index) => (
              <Badge key={`${exp}-${index}`} className={publicPillBadgeClass}>
                {exp}
              </Badge>
            ))}
            {expertise.length > 2 && (
              <Badge className={publicPillBadgeClass}>
                +{expertise.length - 2}
              </Badge>
            )}
          </div>

          <div className="flex items-center gap-4 text-sm text-muted-foreground">
            <div className="flex items-center gap-1.5">
              <Clock className="h-4 w-4 text-[var(--theme-primary)]/70" />
              <span>
                {guide.experience} {t("guides.yearsExperienced")}
              </span>
            </div>
            <div className="flex items-center gap-1.5">
              <Globe className="h-4 w-4 text-[var(--theme-primary)]/70" />
              <span>
                {guide.languages.length} {t("guides.languagesSpoken")}
              </span>
            </div>
          </div>

          <div className="flex items-center justify-end pt-4 border-t border-border/50">
            <Link href={`/guides/${guide.id}`}>
              <Button
                size="sm"
                className="rounded-full bg-gradient-to-r from-[var(--theme-secondary)] to-[var(--theme-accent)] hover:from-[var(--theme-primary)] hover:to-[var(--theme-primary-dark)] text-white shadow-md shadow-[var(--theme-secondary)]/20 border-0 px-4"
              >
                {t("guides.view")}
                <ArrowRight className="h-4 w-4 ml-1 transition-transform group-hover:translate-x-0.5" />
              </Button>
            </Link>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}