import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "wouter";
import {
  useListServices,
  getListServicesQueryKey,
} from "@workspace/api-client-react";
import { ArrowRight, ArrowLeft, Coffee, ImageIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { resolveServiceImageUrl } from "@/lib/image-url";

function ServiceCardImage({ src, alt }: { src: string | null; alt: string }) {
  const [errored, setErrored] = useState(false);
  const showImage = src && !errored;
  return (
    <div className="w-full aspect-[16/10] bg-slate-100 overflow-hidden flex items-center justify-center">
      {showImage ? (
        <img
          src={src}
          alt={alt}
          className="w-full h-full object-cover"
          onError={() => setErrored(true)}
        />
      ) : (
        <ImageIcon size={36} className="text-slate-300" />
      )}
    </div>
  );
}

export default function ServicesPage() {
  const { t, i18n } = useTranslation();
  const [, setLocation] = useLocation();
  const lang = i18n.language;
  const isRtl = lang === "ar";

  const { data: services, isLoading } = useListServices({
    query: { queryKey: getListServicesQueryKey() },
  });

  const BackIcon = isRtl ? ArrowRight : ArrowLeft;

  return (
    <div className="min-h-screen os-bg flex flex-col">
      {/* Header */}
      <div className="glass-panel border-b border-slate-200/70 px-4 py-4 flex items-center gap-3 sticky top-0 z-10">
        <button
          onClick={() => setLocation("/")}
          className="p-2 rounded-xl hover:bg-slate-100 text-muted-foreground hover:text-foreground transition-colors"
        >
          <BackIcon size={20} />
        </button>
        <div className="flex items-center gap-2">
          <Coffee size={20} className="text-amber-400" />
          <h1 className="text-lg font-semibold text-foreground">{t("services.title")}</h1>
        </div>
      </div>

      <div className="flex-1 p-4 pb-8">
        {isLoading ? (
          <div className="flex items-center justify-center py-20 text-muted-foreground">
            {t("common.loading")}
          </div>
        ) : !services?.length ? (
          <div className="flex items-center justify-center py-20 text-muted-foreground">
            {t("services.noServices")}
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            {services.map((service) => {
              const name = lang === "ar" ? service.nameAr : service.nameEn;
              const description = lang === "ar" ? service.descriptionAr : service.descriptionEn;
              const resolvedImage = resolveServiceImageUrl(service.imageUrl);

              return (
                <div
                  key={service.id}
                  className="glass-panel rounded-2xl overflow-hidden flex flex-col card-hover"
                >
                  <ServiceCardImage src={resolvedImage} alt={name} />
                  <div className="p-5 flex flex-col gap-3 flex-1">
                    <div className="flex items-start justify-between gap-2">
                      <h3 className="text-base font-semibold text-foreground">{name}</h3>
                      <Badge
                        variant={service.isAvailable ? "default" : "secondary"}
                        className={service.isAvailable ? "bg-emerald-100 text-emerald-700 border-emerald-200" : ""}
                      >
                        {service.isAvailable ? t("services.available") : t("services.unavailable")}
                      </Badge>
                    </div>

                    {description && (
                      <p className="text-sm text-muted-foreground">{description}</p>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}
