Ehsan/artifacts/ehsan-poc/src/pages/opportunities.tsx

import { useState } from "react";
import { useLanguage } from "../contexts/LanguageContext";
import { useListPublishedRequests } from "@workspace/api-client-react";
import { Skeleton } from "@/components/ui/skeleton";
import { OpportunityCard } from "../components/OpportunityCard";
import { Reveal } from "../components/Reveal";

type NeedTypeKey =
  | "electricity" | "water" | "food" | "health"
  | "housing" | "refrigerator" | "air_conditioner" | "court_order";

const NEED_TYPES: NeedTypeKey[] = [
  "electricity", "water", "food", "health",
  "housing", "refrigerator", "air_conditioner", "court_order",
];

export default function Opportunities() {
  const { t } = useLanguage();
  const { data: requests, isLoading } = useListPublishedRequests();
  const [activeFilter, setActiveFilter] = useState<NeedTypeKey | "all">("all");

  const filtered = (requests || []).filter((r) =>
    activeFilter === "all" ? true : r.needType === activeFilter
  );

  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold text-foreground mb-6">{t.opportunities.title}</h1>

      {/* Filter Bar */}
      <div className="mb-8">
        <p className="text-sm text-muted-foreground mb-3">{t.opportunities.filterByType}</p>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => setActiveFilter("all")}
            className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors border ${
              activeFilter === "all"
                ? "bg-primary text-primary-foreground border-primary"
                : "bg-background border-border text-muted-foreground hover:border-primary hover:text-primary"
            }`}
            data-testid="filter-all"
          >
            {t.opportunities.all}
          </button>
          {NEED_TYPES.map((type) => (
            <button
              key={type}
              onClick={() => setActiveFilter(type)}
              className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors border ${
                activeFilter === type
                  ? "bg-primary text-primary-foreground border-primary"
                  : "bg-background border-border text-muted-foreground hover:border-primary hover:text-primary"
              }`}
              data-testid={`filter-${type}`}
            >
              {t.needTypes[type]}
            </button>
          ))}
        </div>
      </div>

      {isLoading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[1, 2, 3].map((i) => (
            <Skeleton key={i} className="h-96 w-full" />
          ))}
        </div>
      ) : filtered.length === 0 ? (
        <div className="text-center py-16 text-muted-foreground bg-muted/20 rounded-xl border border-dashed">
          {t.opportunities.noOpportunities}
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filtered.map((request, i) => (
            <Reveal key={request.id} delay={(i % 3) * 0.08} className="h-full">
              <OpportunityCard request={request} />
            </Reveal>
          ))}
        </div>
      )}
    </div>
  );
}