"use client";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useProject } from "@/contexts/project-context";
import { useRouter } from "@/i18n/routing";
import type { Locale } from "@/lib/date-utils";
import { useLocale, useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import { useMemo, useSyncExternalStore } from "react";
import { Label } from "@/components/ui/label";

export function DashboardFilters({
  projects,
}: {
  projects: {
    id: number | string;
    name: string;
    name_translations?: {
      ar: string;
      en: string;
    };
    progress_percentage: number;
  }[];
}) {
  const locale = useLocale() as Locale;
  const selectDir = locale === "ar" ? "rtl" : "ltr";
  const t = useTranslations("dashboard");
  const router = useRouter();
  const searchParams = useSearchParams();
  const { projectId, setProject } = useProject();
  const isHydrated = useSyncExternalStore(
    () => () => {},
    () => true,
    () => false,
  );

  const selectedProjectId = useMemo(() => {
    if (projectId) {
      const matchedProject = projects.find(
        (project) => String(project.id) === String(projectId),
      );

      if (matchedProject) {
        return String(matchedProject.id);
      }
    }

    return String(projects?.[0]?.id || "");
  }, [projectId, projects]);

  const handleProjectChange = (newProjectId: string) => {
    // Get the selected project data
    const selectedProject = projects?.find(
      (p) => String(p.id) === newProjectId,
    );

    const projectName = selectedProject?.name || "";
    const projectProgress = selectedProject?.progress_percentage || 0;

    // Update context (automatically syncs across components)
    setProject(
      newProjectId,
      projectName,
      projectProgress,
      selectedProject?.name_translations,
    );

    // Update URL
    const params = new URLSearchParams(searchParams.toString());
    params.set("project_id", newProjectId);
    router.push(`?${params.toString()}`);
  };

  const selectedProjectName = useMemo(() => {
    const p = projects.find((p) => String(p.id) === selectedProjectId);
    if (!p) return "";
    return p.name_translations?.[locale as "ar" | "en"] || p.name;
  }, [projects, selectedProjectId, locale]);

  return (
    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4 w-full">
      {/* Project Dropdown - Label on RIGHT, Input on LEFT (RTL layout) */}
      <div className="flex items-center  gap-2">
        <Label
          htmlFor="project-select"
          className="text-base font-medium text-foreground shrink-0"
        >
          {t("project")}
        </Label>
        {isHydrated ? (
          <Select
            dir={selectDir}
            value={selectedProjectId || undefined}
            onValueChange={handleProjectChange}
            disabled={projects.length === 0}
          >
            <SelectTrigger
              className="w-full sm:w-auto sm:min-w-[200px] h-10"
              id="project-select"
            >
              <SelectValue placeholder={t("projectPlaceholder")}>
                {selectedProjectName}
              </SelectValue>
            </SelectTrigger>
            <SelectContent>
              {projects.map((project) => (
                <SelectItem key={project.id} value={String(project.id)}>
                  {project.name_translations?.[locale as "ar" | "en"] ||
                    project.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        ) : (
          <div
            id="project-select"
            aria-hidden="true"
            className="border-input rounded flex h-10 w-full items-center justify-between border bg-transparent px-3 py-2 text-sm text-muted-foreground shadow-xs sm:w-auto sm:min-w-[200px]"
          >
            <span className="truncate">{selectedProjectName || t("projectPlaceholder")}</span>
          </div>
        )}
      </div>

    </div>
  );
}