"use client";
import React from "react";
import { loginSelectOccupant } from "@/apicalls/login/login";
import { useRouter } from "next/navigation";
import { BuildingMap } from "./types";

interface LoginOccupantProps {
  selectionList: BuildingMap;
  lang?: "en" | "tr";
}

// Language dictionary for internationalization
const languageDictionary = {
  tr: {
    occupantSelection: "Daire Seçimi",
    loggedInAs: "Kiracı olarak giriş yaptınız",
    buildingInfo: "Bina Bilgisi",
    level: "Kat",
    noSelections: "Seçenek bulunamadı",
  },
  en: {
    occupantSelection: "Select your occupant type",
    loggedInAs: "You are logged in as an occupant",
    buildingInfo: "Building Info",
    level: "Level",
    noSelections: "No selections available",
  },
};

function LoginOccupant({
  selectionList,
  lang = "en"
}: LoginOccupantProps) {
  const t = languageDictionary[lang] || languageDictionary.en;
  const router = useRouter();
  
  const handleSelect = (uu_id: string) => {
    console.log("Selected occupant uu_id:", uu_id);
    
    loginSelectOccupant({
      build_living_space_uu_id: uu_id,
    })
      .then((responseData: any) => {
        if (responseData?.status === 200 || responseData?.status === 202) {
          router.push("/dashboard");
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <>
      <div className="text-2xl font-bold">{t.occupantSelection}</div>
      <div className="text-sm text-gray-500 mt-4">
        {t.loggedInAs}
      </div>
      {selectionList && Object.keys(selectionList).length > 0 ? (
        Object.keys(selectionList).map((buildKey: string) => {
          const building = selectionList[buildKey];
          return (
            <div key={buildKey} className="mb-6">
              <div className="w-full p-3 bg-blue-100 rounded-t-lg">
                <h3 className="text-lg font-medium text-blue-800">
                  <span className="mr-1">{t.buildingInfo}:</span>
                  {building.build_name} - No: {building.build_no}
                </h3>
              </div>

              <div className="space-y-2 mt-2">
                {building.occupants.map((occupant: any, idx: number) => (
                  <div
                    key={`${buildKey}-${idx}`}
                    className="w-full p-4 bg-emerald-300 hover:bg-emerald-500 rounded-lg transition-colors duration-200 cursor-pointer"
                    onClick={() => handleSelect(occupant.build_living_space_uu_id)}
                  >
                    <div className="flex flex-col">
                      <div className="flex items-center justify-between">
                        <span className="text-xl font-medium">
                          {occupant.description}
                        </span>
                        <span className="text-sm font-medium bg-blue-500 text-white px-2 py-1 rounded">
                          {occupant.code}
                        </span>
                      </div>
                      <div className="mt-2">
                        <span className="text-md font-medium">
                          {occupant.part_name}
                        </span>
                      </div>
                      <div className="mt-1">
                        <span className="text-sm text-gray-700">
                          {t.level}: {occupant.part_level}
                        </span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        })
      ) : (
        <div className="text-center p-4">{t.noSelections}</div>
      )}
    </>
  );
}

export default LoginOccupant;