"use client";

import { useState } from "react";

import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

const JOBS = [
  {
    category: "مهندسی و توسعه",
    openings: [
      {
        title: "مهندس نرم‌افزار",
        location: "تهران | دورکاری",
        link: "#",
      },
      {
        title: "توسعه‌دهنده بک‌اند",
        location: "تهران | دورکاری",
        link: "#",
      },
    ],
  },
  {
    category: "مدیریت محصول",
    openings: [
      {
        title: "مدیر محصول",
        location: "تهران",
        link: "#",
      },
      {
        title: "مالک محصول",
        location: "تهران",
        link: "#",
      },
      {
        title: "کارشناس مدیریت داده محصول",
        location: "تهران | دورکاری",
        link: "#",
      },
      {
        title: "دستیار مدیر محصول",
        location: "تهران | دورکاری",
        link: "#",
      },
      {
        title: "مدیر محصول موبایل",
        location: "تهران | دورکاری",
        link: "#",
      },
      {
        title: "مدیر محصول هوش مصنوعی",
        location: "تهران | دورکاری",
        link: "#",
      },
    ],
  },
  {
    category: "طراحی و تجربه کاربری",
    openings: [
      {
        title: "طراح تجربه کاربری",
        location: "تهران",
        link: "#",
      },
    ],
  },
  {
    category: "فروش و بازاریابی",
    openings: [
      {
        title: "کارشناس فروش",
        location: "تهران",
        link: "#",
      },
    ],
  },
  {
    category: "فناوری اطلاعات و زیرساخت",
    openings: [
      {
        title: "پشتیبانی فناوری اطلاعات",
        location: "تهران",
        link: "#",
      },
      {
        title: "مدیر سیستم",
        location: "تهران",
        link: "#",
      },
      {
        title: "مهندس شبکه",
        location: "تهران",
        link: "#",
      },
    ],
  },
];

const options = [
  {
    label: "همه بخش‌ها",
    value: "all",
  },
  {
    label: "مهندسی و توسعه",
    value: "engineering_&_development",
  },
  {
    label: "مدیریت محصول",
    value: "product_management",
  },
  {
    label: "طراحی و تجربه کاربری",
    value: "design_&_user_experience",
  },
  {
    label: "فروش و بازاریابی",
    value: "sales_&_marketing",
  },
  {
    label: "فناوری اطلاعات و زیرساخت",
    value: "IT_&_infrastructure",
  },
];

interface Careers8Props {
  className?: string;
}

const Careers8 = ({ className }: Careers8Props) => {
  const [filterValue, setFilterValue] = useState(options[0].value);

  const filterJobsByCategory = (category: string) => {
    if (category === "همه بخش‌ها") return JOBS;
    return JOBS.filter((job) => job.category === category);
  };

  const renderJobs = () => {
    const option = options.filter((opt) => opt.value == filterValue);
    const jobs = filterJobsByCategory(option[0].label);
    return (
      <>
        {jobs.map((job, i) => (
          <div
            key={`job-${job.category}-${i}`}
            className="flex w-full flex-col justify-start gap-10"
          >
            <div className="text-xl leading-none font-semibold">
              {job.category}
            </div>
            <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
              {job.openings.map((opening) => (
                <a
                  key={`job-${opening.title}`}
                  href={opening.link}
                  className="block rounded-md bg-muted p-5 transition-colors hover:bg-foreground/10"
                >
                  <div className="mb-1 text-lg leading-normal font-semibold">
                    {opening.title}
                  </div>
                  <div className="text-sm leading-normal text-muted-foreground">
                    {opening.location}
                  </div>
                </a>
              ))}
            </div>
          </div>
        ))}
      </>
    );
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex w-full flex-col gap-14">
          <h2 className="text-2xll leading-[1.3] font-semibold">
            موقعیت‌های شغلی باز
          </h2>
          <div className="flex flex-wrap items-center justify-start gap-5">
            <Label
              htmlFor="department-filter"
              className="text-base leading-normal font-semibold text-muted-foreground"
            >
              فیلتر
            </Label>
            <Select
              value={filterValue}
              onValueChange={(value) => setFilterValue(value)}
            >
              <SelectTrigger id="department-filter" className="w-[15.625rem]">
                <SelectValue placeholder="انتخاب دسته‌بندی" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  {options.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>
                      {opt.label}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
          <div className="flex flex-col gap-16">{renderJobs()}</div>
        </div>
      </div>
    </section>
  );
};

export { Careers8 };