"use client";

import { useState } from "react";
import { useTranslation } from "@/hooks/useTranslation";

interface Job {
  dept: string;
  posted: string;
  title: string;
  desc: string;
  loc: string;
  type: string;
  exp: string;
  pay: string;
  isNew?: boolean;
}

export function CareersJobsList() {
  const { t } = useTranslation("careers");
  const [saved, setSaved] = useState<Record<number, boolean>>({});

  const jobs: Job[] = [
    {
      dept: t("openings.j1_dept"),
      posted: t("openings.j1_posted"),
      title: t("openings.j1_title"),
      desc: t("openings.j1_desc"),
      loc: t("openings.j1_loc"),
      type: t("openings.j1_type"),
      exp: t("openings.j1_exp"),
      pay: t("openings.j1_pay"),
      isNew: true,
    },
    {
      dept: t("openings.j2_dept"),
      posted: t("openings.j2_posted"),
      title: t("openings.j2_title"),
      desc: t("openings.j2_desc"),
      loc: t("openings.j2_loc"),
      type: t("openings.j2_type"),
      exp: t("openings.j2_exp"),
      pay: t("openings.j2_pay"),
    },
    {
      dept: t("openings.j3_dept"),
      posted: t("openings.j3_posted"),
      title: t("openings.j3_title"),
      desc: t("openings.j3_desc"),
      loc: t("openings.j3_loc"),
      type: t("openings.j3_type"),
      exp: t("openings.j3_exp"),
      pay: t("openings.j3_pay"),
    },
    {
      dept: t("openings.j4_dept"),
      posted: t("openings.j4_posted"),
      title: t("openings.j4_title"),
      desc: t("openings.j4_desc"),
      loc: t("openings.j4_loc"),
      type: t("openings.j4_type"),
      exp: t("openings.j4_exp"),
      pay: t("openings.j4_pay"),
    },
    {
      dept: t("openings.j5_dept"),
      posted: t("openings.j5_posted"),
      title: t("openings.j5_title"),
      desc: t("openings.j5_desc"),
      loc: t("openings.j5_loc"),
      type: t("openings.j5_type"),
      exp: t("openings.j5_exp"),
      pay: t("openings.j5_pay"),
    },
    {
      dept: t("openings.j6_dept"),
      posted: t("openings.j6_posted"),
      title: t("openings.j6_title"),
      desc: t("openings.j6_desc"),
      loc: t("openings.j6_loc"),
      type: t("openings.j6_type"),
      exp: t("openings.j6_exp"),
      pay: t("openings.j6_pay"),
    },
  ];

  function toggleSave(idx: number) {
    setSaved((prev) => ({ ...prev, [idx]: !prev[idx] }));
  }

  return (
    <div className="jobs-col" id="openings">
      {jobs.map((job, i) => (
        <div key={i} className="job-row">
          <div className="info">
            <div className="dept-row">
              {job.isNew && <span className="new">{t("openings.new_badge")}</span>}
              <span>{job.dept}</span>
              <span className="sep">·</span>
              <span className="job-time">{job.posted}</span>
            </div>
            <h3>{job.title}</h3>
            <p className="desc">{job.desc}</p>
            <div className="meta">
              <span className="item">
                <svg viewBox="0 0 24 24">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                <b>{job.loc}</b>
              </span>
              <span className="item">
                <svg viewBox="0 0 24 24">
                  <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
                  <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
                </svg>
                <b>{job.type}</b>
              </span>
              <span className="item">
                <svg viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" />
                  <polyline points="12 6 12 12 16 14" />
                </svg>
                <b>{job.exp}</b>
              </span>
              <span className="item pay">
                <svg viewBox="0 0 24 24">
                  <line x1="12" y1="1" x2="12" y2="23" />
                  <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
                </svg>
                <b>{job.pay}</b>
              </span>
            </div>
          </div>
          <div className="actions">
            <a href="#" className="btn-apply">
              {t("openings.apply")}
              <svg viewBox="0 0 24 24">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </a>
            <button
              className={`save${saved[i] ? " saved" : ""}`}
              onClick={() => toggleSave(i)}
              aria-label="Save job"
            >
              <svg viewBox="0 0 24 24">
                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
              </svg>
            </button>
          </div>
        </div>
      ))}
      <div className="no-match">
        <h3>{t("openings.no_match_heading")}</h3>
        <p>{t("openings.no_match_desc")}</p>
        <a href="mailto:careers@dtnews.in" className="btn">
          {t("openings.no_match_btn")}
          <svg viewBox="0 0 24 24">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
            <polyline points="22,6 12,13 2,6" />
          </svg>
        </a>
      </div>
    </div>
  );
}